楽天が提供するAPIを使って、アフィリエイトのコンテンツ作成を自動作成してみました。
刻々と変わるランキングデータをその都度引っ張ってくるので、活きたデータをブログ記事のアクセントにすることができます。
作ったもの
ブログの記事ページ内に
「楽天のランキングの情報を差し込むスクリプト」です。
リアルタイムランキングとデイリーランキングに対応しています。
言葉で説明するよりサンプルを見たほうが早いので、3つほど作ってみました。
上位20位、商品情報、店舗情報、価格、画像が表示されるパターン
https://kanaxx.hatenablog.jp/ranking-affiliate-all
画像だけ30位まで表示するパターン
https://kanaxx.hatenablog.jp/ranking-affiliate-game
スマートウォッチのページの最下部に「スマートウォッチ」のランキングをいれてあります。表示は10位まで。 kanaxx.hatenablog.jp
◆
楽天側のデータが刻々と変わっていくので、ページを開くたびに内容が変わります。リアルタイムランキングとはどれくらいリアルタイムなのだろうか。。1時間ごとくらいには更新されるのかな。
作った目的
大きな目的は以下の２つです。
アフィリエイトリンクはメンテナンスが面倒
はてなブログは、楽天やアマゾンの商品のリンクを差し込むのはとっても簡単です。1クリックで情報を埋め込めます。
ただ、時間が経つと商品が売り切れなどで消されてしまいリンク先がなくなります。これを放置すると見た目が悪いです。
リンク切れを避けるためには、自分自身でページの確認とリンクの張り替えが必要です。
ページ数が多いと結構な労力になるため、メンテナンスをせずに商品情報を埋め込む方法を自作しました。
変化のあるコンテンツにしたい
アフィリエイトで商品単体を紹介するのは、あくまでも自分が知っている情報になります。
自分が知っている情報以外にも、世の中には有益な情報があるかもしれません。たとえば、流行っている商品とか、急に注目された商品とか。
例えば、Xiaomiのスマートウォッチを紹介しているページがあります。
このページにはスマートウォッチに興味がある人が訪問していると思います。「自分が購入したスマートウォッチ単体を紹介する」だけでなく、「今売れているスマートウォッチの情報」も紹介したほうが、読み手に刺さる商品が見つかるかもしれません。
自分が気が付いてない売れ筋な情報を定期的に引っ張ってくる方法はないだろうか？と思ったのが2つ目の理由です。
◆
この２つの問題を解決するために、夏休みの工作として作ってみました。
楽天本家もブログパーツを提供していたけど、なくなってしまったようなので、作った意味もあるかなと。 plaza.rakuten.co.jp
めざせ、メンテナンスフリーな魅力的なコンテンツ。
使ったもの
これを仕上げるにあたって、使ったものは以下のとおりです。
- 楽天市場のランキングAPI
- 少々のJavascript（150行くらい）
- 夏休みの時間（10時間）
個人の環境（ブログ内）で動作させるには、楽天アカウント、アフィリエイトID、楽天ウェブサービスの登録が必要です。
私自身ははてなブログで動作確認していますが、たいていのブログには埋め込みができると思います。
ブログに設定して使えるようにする
ではさっそく、ブログにプログラムを設定していきます。
プログラムの置き場
GitHubにおきました。Javascript1枚だけで完結です。
https://github.com/kanaxx/hatenablog-omocha/blob/main/rakuten-ranking/ranking-generator.js
サンプルフォーム
このプログラムを使って魅力的なコンテンツを作成するには、ちょっとだけHTMLの知識が必要です。
どんなHTMLを書くとどういう形に変換されるのか、手軽に試すことができるフォームを用意しました。
HTMLをいじって、ぽちっとするだけで、作られるHTMLを確認することができます。
https://kanaxx.github.io/rakuten-ranking/
ブログに設定する
１．アフィリエイトIDを確認
自分の楽天のアフィリエイトIDを確認します。
https://webservice.rakuten.co.jp/account_affiliate_id
画面に出てくるIDがアフィリエイトIDです。
２．アプリケーションIDを作成
このスクリプトは楽天ウェブサービスを使っているので、アプリケーションの登録が必要です。
以下のURLからアプリケーションの登録を行い、アプリケーションIDを取得してください。 https://webservice.rakuten.co.jp/app/list
３．ブログにコードを編集する
GitHubからコードをダウンロードして、先頭3行を自分用に編集します。
// author:kanaxx. // see also: https://kanaxx.hatenablog.jp/entry/realtime-ranking-parts const rakutenAffConfig = { affiliateId : "xxx", applicationId : "xxx", display : 10, genreId:0, }
アフィリエイトID（4行目）
アフィリエイトIDがあるので自分のものと入れ替えます。
アプリケーションID（5行目）
アプリケーションIDも自分のものと入れ替えます。
取得件数（6行目）
HTMLに出力する件数（ランキング順位）を設定します。記事側でもコントロール可能なので必須ではないですが、書いておくと楽ができます。
ジャンル （7行目）
何も指定しなかったときに、どのジャンルのランキングを取得するか設定することができます。楽天のジャンルIDを調べて6桁の番号を入れます。 0を指定すると、楽天市場全体のランキングを表示します。
４．設定
編集したプログラムを、記事フッターに設定します。
スクリプト全体をスクリプトタグ（<script> </script>）で囲うのを忘れないように。
５．記事ページに必要項目を埋め込む
記事ページ内の必要なものが2つあります。
ランキングAPIでデータを持ってきたときに整形するHTML
最新のランキングデータを取ってきて、HTMLを作成するための枠組みをブログ記事内に入れておきます。 この枠がないページではスクリプトは動きません。ランキングの枠を出したい記事にだけ入れればOKです。
サンプルだとこんな感じです。自分のブログのデザインに合わせて自由に変更することができます。
<div id="rakuten-aff-parts"> <h3>楽天市場のリアルタイムランキング</h3> ランキング更新日：<b data-raku="lastBuildDate"></b><br> <div class="rakuten-aff-item" style="margin-bottom:15px"> <span style="font-size:125%"><span data-raku="rank"></span>位</span> <span><span data-raku="itemPrice"></span>円</span><br> <a href="" data-raku="affiliateUrl"> <img src="" data-raku="mediumImageUrls" style="float:left;margin-right:20px" > <span data-raku="itemName" style="font-size:75%"></span> </a> <br style="clear: left;"> </div> </div>
HTMLのひな形を作るときには、以下の決まり事を守ってください。
- ランキングパーツの全体に
id="rakuten-aff-parts"を付けること - 商品ごとの繰りかえし部分に、
class="rakuten-aff-item"を付けること - 実際にデータを入れるタグのclass名は、
data-raku="APIの出力パlラメータ名"とすること
例として
商品名はitemNameという名称なので、<span data-raku="itemName"></span>を書いておくとspanタグの値として商品名が埋み込みされます。
楽天のAPIで取れる値は、このページで説明されています。
https://webservice.rakuten.co.jp/documentation/ichiba-item-ranking#outputParameter
ランキングの設定（ジャンルと件数）
記事ページに表示するランキングのジャンルを変えたい場合や、表示件数を変えたい場合は、記事ページにタグを追加することで変更できます。
<div id="rakuten-aff-config"> <input type="hidden" name="genreId" value="100316"> <input type="hidden" name="display" value="30"> </div>
ジャンル切り替えは、記事の内容に近い情報を出すための仕組みです。
例えば
- スマホについて書いたページであれば、スマートフォン本体のジャンルIDである560202を指定する
- ラーメンついて書いたページでは、ラーメンのジャンルIDである110487を指定する
こんな感じで、記事ページに差し込むランキングの種類と量を変えることができます。
ちなみに、このタグがない場合は楽天全体のリアルタイムランキングの上位10件を持ってきます。
これで、記事側の準備も完了です。あとは、記事ページを見てランキング情報が差し込まれているか確認しましょう。
最後にまとめ
夏休みの自由研究で、楽天のランキングを持ってくるブログパーツを作成してみました。 作ったのは10時間くらいですが、記事を書くのも合わせると20時間くらいかかりました。
説明しきれていない部分もあるので、もし興味があったらTwitter or メールで連絡ください。
参考リンク
アプリケーションIDとは何ですか？
https://webservice.faq.rakuten.net/hc/ja/articles/900001970586
楽天市場ランキングAPI
https://webservice.rakuten.co.jp/documentation/ichiba-item-ranking
プログラム置き場
https://github.com/kanaxx/hatenablog-omocha/tree/main/rakuten-ranking
