楽天APIとは？
楽天市場や楽天ブックス、楽天トラベルなどのAPIが取得できる、無料のサービスです。
この記事では、楽天レシピのカテゴリ別ランキングが取得できる「楽天レシピカテゴリ別ランキングAPI」を使って、楽天APIの取得の仕方について解説していきたいと思います。
一緒に人気ランキングを取得してみましょう！
目次
1. まずはIDを発行しよう！
2. 早速APIを取得してみよう！
3. コンソールに表示してみよう！
4. 書き出してみよう！
5. 作ったアプリを公開する前に
まずはIDを発行しよう！
Rakuten Developersの公式サイトからユーザー登録して、IDを発行しましょう！
ナビの右上の「アプリID発行」をクリックしてください。
そして楽天会員としてログイン。
（登録がまだの方は新規登録してください）
ログイン後、「新規アプリ登録」画面に遷移しますので、必須項目を入力します。
青いボタンをクリックすると、アプリ登録完了です！
以下のように認証情報が表示されます。
この後APIを取得するために「アプリID/デベロッパーID (applicationId / developerId)」を使用するので、メモしておきましょう。
早速APIを取得してみよう！
IDをゲットしたら、APIを取得してみましょう！
まずは「楽天レシピカテゴリ別ランキングAPI 」にアクセスして、リクエストURLをコピーします。
そして、コピーしたリクエストURLの
[parameter]をapplicationIdと書き換え、
[value]を先程メモしたアプリIDに書き換えて、URLを生成します。
https://app.rakuten.co.jp/services/api/Recipe/CategoryRanking/20170426?applicationId=[先程メモしたアプリID]
確認のため、生成したURLをブラウザのアドレスバーに貼ってみましょう。
エラーなく結果が返ってきたら成功です！
失敗例。。
コンソールに表示してみよう！
次はjQueryを使って、APIを取得してコンソールに表示してみましょう。
以下のコードをJavaScriptのファイルに貼り付けて、アプリIDなどを書き換えてみてください！
// 先程生成したURL
const url = 'https://app.rakuten.co.jp/services/api/Recipe/CategoryRanking/20170426?applicationId=[アプリID]';
$.getJSON(url, (data) => {
console.log(data.result);
});
そしてページを再読み込みすると、コンソールに以下のように表示されます。
これで成功です！
書き出してみよう！
次はリンク、画像、タイトル、説明文をHTMLに書き出してみましょう！
以下は例ですので、必要に応じてコードを書き換えてください。
まずは先程のJavaScriptファイルをこちらに書き換えます。
// 生成したURL
const url = 'https://app.rakuten.co.jp/services/api/Recipe/CategoryRanking/20170426?applicationId=[アプリID]';
// 書き出し
const updateText = (data) => {
for (let i = 0; i < data.length; i++) {
const insertHtml = `
<li>
<a href="${data[i].recipeUrl}" target="_blank">
<img src="${data[i].foodImageUrl}" alt="${data[i].recipeTitle} 画像">
</a>
<h2>${data[i].recipeTitle}</h2>
<p>${data[i].recipeDescription}</p>
</li>
`;
$('#recipe_list').append(insertHtml);
}
}
// API取得
$.getJSON(url, (data) => {
const recipes = data.result;
updateText(recipes);
});
さらにHTMLとCSSを追加しましょう。
<ul id="recipe_list"></ul>
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
}
li {
list-style: none;
width: 25%;
}
img {
width: 100%;
}
h2 {
font-size: 14px;
}
p {
font-size: 12px;
}
変更が終わったらページを再読み込みしてみてください。
以下のように、データがきちんとページに表示されたら成功です！
作ったアプリを公開する前に
ご利用ガイドを一読しておきましょう。
導入方法だけでなく、「クレジット表示方法と注意」や「楽天ウェブサービス規約」についての記載があります。
【おまけ】 リクエストを2回以上行いたい…
楽天APIは連続した複数のリクエストでエラーを返してしまいます。
この解決策として、setTimeout()で1秒遅延させてから再度リクエストをすれば、エラーを返さずAPIを取得できました！
$.getJSON(url1, (data1) => {
console.log(data1); // 1回目に取得したAPI
setTimeout({
$.getJSON(url2, (data2) => {
console.log(data2); // 2回目に取得したAPI
});
}, 1000)
});
楽天レシピカテゴリ別ランキングAPIは、1回のリクエストでレシピを上位４つまでしか取得できませんが、もし5つ以上取得したい時などはこちらを活用してみてください！
最後に
いかがでしたでしょうか？
楽天APIを取得できるサービスが無料って結構すごいですよね！
楽天APIを使っていろいろなアプリを作っていきましょう！