楽天ウェブサービス API を利用して楽天アフィリエイトの広告リンクコードを生成する

楽天アフィリエイトで生成できる広告 HTML コードが汚いので、何かイイカンジにできんかなーと思い、楽天ウェブサービスの API を試してみることにした。

目次

楽天ウェブサービスに登録する

楽天ウェブサービスのトップは以下。

「アプリ ID 発行」というリンクから、アプリケーションを登録する。OAuth 的な感じでリダイレクトするような設定もあるのだけど、そういうアプリを作るつもりがなくても大丈夫。アプリ名と、適当な自サイトの URL を入れておいて、とりあえずアプリケーション ID が作れれば良い。

お試しで API を叩いてみる

アプリケーション ID が生成できたら、以下のページで各種 API を試せる。

「アプリ ID」欄で作成した ID を指定する。 「パラメータを選択してください」のプルダウンより affiliateId を選択し、自分の楽天アフィリエイトの ID を入れる。そして keyword パラメータに適当な検索キーワードを入れてみると、JSON 形式のレスポンスが確認できる。

API の仕様は以下で確認できる。

今回は「楽天市場商品検索 API」のみ紹介するが、他にも色々な API があるので、それぞれチェックしてみて欲しい。

JavaScript で API をコールしてみる

楽天の API はとてもシンプルで、GET リクエストに各種パラメータを付与していけばいいので、JavaScript から API をコールして、結果を画面上に表示したりするのが簡単だ。以下にサンプルコードを載せておく。

async function searchRakuten(keyword) {
  const applicationId  = '【アプリケーション ID】';
  const affiliateId    = '【アフィリエイトID】';
  const encodedKeyword = encodeURIComponent(keyword);
  
  const response = await fetch(`https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?format=json&keyword=${encodedKeyword}&applicationId=${applicationId}&affiliateId=${affiliateId}`);
  const data = await response.json();
  
  if(!data.Items || data.error) return console.warn('Error', data);
  if(!data.Items.length) return console.warn('searchRakuten : No Results', data);
  
  return data.Items;
}

async・await を使っており例外ハンドリングなどはしていない。Fetch API を想定しているが、XMLHttpRequest でも良い。

data.Items の中は { Item: [object] } となっているので、検索結果から商品1件のデータを取り出すにはこんな感じになる。

const item = data.Items[0].Item;

const itemName = item.itemName;

const itemUrl  = item.itemUrl;
const affiliateUrl = item.affiliateUrl;
// リクエストパラメータで affiliateId を指定していると、itemUrl と affiliateUrl は同じ値になる

const imageUrl = item.mediumImageUrls[0].imageUrl;
const itemPrice = item.itemPrice;

他にも色々な情報が取得できるが、代表的なのはこんなところか。affiliateUrl が広告リンク用の URL になっているし、itemPrice で商品価格を確認したりできる、という具合だ。

こうして API から取得した情報を利用して、自分が欲しい HTML コードを組んでみれば良いワケだ。

オブジェクトがやたらとネストされているので、Lodash の get() 関数のように安全にオブジェクトを掘り下げられるヘルパー関数を用意しておくとよいだろう。

簡単に API が利用できてスバラシキ。