楽天APIを使ってアフィリエイトページを作る（予約受付中の楽天kobo電子書籍を表示）

私は漫画が好きです。

楽天koboで電子書籍を購入して読んでます。

APIを使って、何か作ってみたいなーって思っていたので、予約受け付け中の電子書籍を表示するアフィリエイトページを作ってみることにしました。

APIとは：Application Programming Interface（アプリケーション・プログラミング・インタフェース）の略語。アプリケーションやシステムを開発するためのインタフェースといった意味。

APIの利用に必要な登録

楽天APIを使うには、まず楽天の会員登録が必要です。

http://www.rakuten.co.jp/

www.rakuten.co.jp

楽天に会員登録することで、アフィリエイトが利用できるようになるみたいですね。

https://affiliate.faq.rakuten.co.jp/app/answers/detail/a_id/11977

affiliate.faq.rakuten.co.jp

それから、楽天アカウントとは別に「RAKUTEN DEVELOPERS」への登録が必要です。

Rakuten Web Service

楽天ウェブサービス(WEB SERVICE)は、WEBアプリケーションを構築するデベロッパー向けのサイトです。楽天グループのデータや機能を開発者様、企業の皆様にAPIやSDKを通じて提供いたします。

webservice.rakuten.co.jp

アプリID発行

登録が完了したら、アプリを作成します。

私もよく混同しがちなのですが、「アプリ」って言うとスマホとかでダウンロードするアレを想像してしまいますが、ここで言う「アプリ」は「Webアプリ」みたいなものってことになるんですかね？？

「RAKUTEN DEVELOPERS」画面右上にある「アプリID発行」から新規アプリを作成します。

今回、OAuth認可方式のAPI云々は関係なさそうなので無視します。

アプリ名 … どういう名前が良いかよくわからないので、例のまま「商品検索アプリ」としました。
アプリURL…アプリを使用するサイトのURLを入力。

作成後、Webアプリとして利用するにはサイトの情報を入れたほうが良さそう…と思い、アプリ名はサイト名（WEB制作学習帳）に、アプリURLは当サイトURL（http://natu-note.net/）に変更しました。

あとは認証の画像に出てる数字を入力して作成ボタンをポチー。

これで登録完了です。

アプリを使うために大事な情報が出てきます。

アフィリエイトIDもしっかり紐付けられているようです。

xml生成

RAKUTEN DEVELOPERSでは、APIのテストページが準備されているので、指定した条件でどんな情報を吐き出すか、その場でチェックすることができます。

Rakuten Web Service : API Test Form

webservice.rakuten.co.jp

アプリ名：先程作成したアプリ名を選択します。
APIカテゴリー：「楽天Kobo系API」を選択します。
API名：「楽天Kobo電子書籍検索API (Kobo/EbookSearch/)」を選択します。
返却形式：jsonとxmlが選べますが、今回はxmlにしました。
アプリID：自動的に表示されます。
パラメータ：ここで条件などを指定します。「*」印がついているものは、その中の一つを指定すれば良いようです。

今回使用するパラメータは下記の通りです。

koboGenreId：101904（漫画（コミック）のジャンル）
sort：sales（売れている順で表示）
salesType：1（0：通常商品、1：予約商品）
affiliateId：自分のアフィリエイトID

入力を進めていくとURLが自動的に生成されます。これがxmlのURLです。

ジャンルID？

ジャンルIDの情報がどこにあるか探すと、こちらのページにヒントがありました。

https://webservice.rakuten.co.jp/api/koboebooksearch/

webservice.rakuten.co.jp

APIを使ってみてね、ということでした。

テストフォームのAPI名で「楽天Koboジャンル検索API (Kobo/GenreSearch/)」を選択し、送信（GETでもPOSTでも）ボタンをクリックするとボタンのすぐ下にジャンルが表示されるので目的のものを探します。

ページ作成

xmlの準備ができたのでhtmlページを準備します。

今回は商用無料の無料テンプレートを使わせていただきました。

Render: Free HTML5 Bootstrap Template - FreeHTML5.co

Free HTML5 Templates by FREEHTML5.co

freehtml5.co

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>

<?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');

<a class="image-popup" href="<?php echo $Item -> affiliateUrl; ?>" target="_blank">

<span><?php echo $Item -> salesDate; ?> 発売</span>

<p><img src="<?php echo $Item -> largeImageUrl; ?>" alt="<?php echo $Item -> title; ?>"></p>

<p><?php echo mb_strimwidth( $Item -> itemCaption, 0, 80, '…', 'UTF-8'); ?></p>

</div>

</a>

</div>

</li>

<?php endforeach; ?>

</ul>

タイトルや説明文の長さがまちまちだったので mb_strimwidth を使って文字数制限をしました。

css をちまちまいじってできたのがこちらのページです。

楽天kobo 予約受付中のコミックス

楽天koboで予約を受付ている電子書籍コミック（漫画）のリストです。（人気順・30件）

natu-note.net

ざっくり作ったのでソースコードやcssはかなり適当ですが、なかなかいい感じに仕上がりました！ふわっと表示されるのも素敵ですね。無料テンプレート、素晴らしい！

本当はページャーまで実装したかったけど、そのへんはまた今度。。

APIの利用に必要な登録

アプリID発行

xml生成

ジャンルID？

ページ作成

人気の記事［週間］

人気の記事