私は漫画が好きです。
楽天koboで電子書籍を購入して読んでます。
APIを使って、何か作ってみたいなーって思っていたので、予約受け付け中の電子書籍を表示するアフィリエイトページを作ってみることにしました。
APIとは：Application Programming Interface（アプリケーション・プログラミング・インタフェース）の略語。 アプリケーションやシステムを開発するためのインタフェースといった意味。
APIの利用に必要な登録
楽天APIを使うには、まず楽天の会員登録が必要です。
楽天に会員登録することで、アフィリエイトが利用できるようになるみたいですね。
それから、楽天アカウントとは別に「RAKUTEN DEVELOPERS」への登録が必要です。
アプリID発行
登録が完了したら、アプリを作成します。
私もよく混同しがちなのですが、「アプリ」って言うとスマホとかでダウンロードするアレを想像してしまいますが、ここで言う「アプリ」は「Webアプリ」みたいなものってことになるんですかね？？
「RAKUTEN DEVELOPERS」画面右上にある「アプリID発行」から新規アプリを作成します。
今回、OAuth認可方式のAPI云々は関係なさそうなので無視します。
- アプリ名 … どういう名前が良いかよくわからないので、例のまま「商品検索アプリ」としました。
- アプリURL…アプリを使用するサイトのURLを入力。
あとは認証の画像に出てる数字を入力して作成ボタンをポチー。
これで登録完了です。
アプリを使うために大事な情報が出てきます。
アフィリエイトIDもしっかり紐付けられているようです。
xml生成
RAKUTEN DEVELOPERSでは、APIのテストページが準備されているので、指定した条件でどんな情報を吐き出すか、その場でチェックすることができます。
- アプリ名：先程作成したアプリ名を選択します。
- APIカテゴリー：「楽天Kobo系API」を選択します。
- API名：「楽天Kobo電子書籍検索API (Kobo/EbookSearch/)」を選択します。
- アプリID：自動的に表示されます。
- パラメータ：ここで条件などを指定します。「*」印がついているものは、その中の一つを指定すれば良いようです。
今回使用するパラメータは下記の通りです。
- koboGenreId：101904（漫画（コミック）のジャンル）
- sort：sales（売れている順で表示）
- salesType：1（0：通常商品、1：予約商品）
- affiliateId：自分のアフィリエイトID
入力を進めていくとURLが自動的に生成されます。これがxmlのURLです。
ジャンルID？
ジャンルIDの情報がどこにあるか探すと、こちらのページにヒントがありました。
APIを使ってみてね、ということでした。
テストフォームのAPI名で「楽天Koboジャンル検索API (Kobo/GenreSearch/)」を選択し、送信（GETでもPOSTでも）ボタンをクリックするとボタンのすぐ下にジャンルが表示されるので目的のものを探します。
ページ作成
xmlの準備ができたのでhtmlページを準備します。
今回は商用無料の無料テンプレートを使わせていただきました。
index.html を index.php に変えて、一覧の部分を下記のように記述しました。
<ul class="row comics">
<?php
// 楽天API
$appID = 'XXXXXXXXXXXXXXXXXXX';
$affID = 'XXXXXXXX.XXXXXXXX.XXXXXXXX.XXXXXXXX';
$genre = '101904';// ジャンルID
$type = '1';// 0:通常商品 1:予約商品
$sort = 'sales';
/* standard:標準
sales:売れている
+releaseDate:発売日(古い)
-releaseDate:発売日(新しい)
+itemPrice:価格が安い
-itemPrice:価格が高い
reviewCount:レビューの件数が多い
reviewAverage:レビューの評価(平均)が高い
※UTF-8でURLエンコードされている必要があります。*/
$xml = 'https://app.rakuten.co.jp/services/api/Kobo/EbookSearch/20170426?format=xml&koboGenreId='.$genre.'&salesType='.$type.'&sort='.$sort.'&affiliateId='.$affID.'&applicationId='.$appID;
$xmlData = simplexml_load_file( $xml );//xmlを読み込む
?>
<?php foreach( $xmlData -> Items -> Item as $Item ): ?>
<?php
$title = $Item -> title;
if( !empty( $Item -> subTitle ) ){
$title.= $Item -> subTitle;
}
$title = mb_strimwidth( $title, 0, 40, '…', 'UTF-8');
$author = mb_strimwidth( $Item -> author, 0, 20, '…', 'UTF-8');
?>
<li class="col-lg-4 col-md-4">
<div class="fh5co-blog animate-box" style="background-image: url(images/blog-2.jpg);">
<a class="image-popup" href="<?php echo $Item -> affiliateUrl; ?>" target="_blank">
<div class="prod-title">
<span><?php echo $Item -> salesDate; ?> 発売</span>
<p><img src="<?php echo $Item -> largeImageUrl; ?>" alt="<?php echo $Item -> title; ?>"></p>
<h3><?php echo $title; ?></h3>
<p>著者：<?php echo $author; ?></p>
<p><?php echo mb_strimwidth( $Item -> itemCaption, 0, 80, '…', 'UTF-8'); ?></p>
</div>
</a>
</div>
</li>
<?php endforeach; ?>
</ul>
タイトルや説明文の長さがまちまちだったので mb_strimwidth を使って文字数制限をしました。
css をちまちまいじってできたのがこちらのページです。
ざっくり作ったのでソースコードやcssはかなり適当ですが、なかなかいい感じに仕上がりました！ふわっと表示されるのも素敵ですね。無料テンプレート、素晴らしい！
本当はページャーまで実装したかったけど、そのへんはまた今度。。