楽天APIを使って人気レシピを取得してみた

# 楽天APIとは？
楽天市場や楽天ブックス、楽天トラベルなどのAPIが取得できる、無料のサービスです。

この記事では、楽天レシピのカテゴリ別ランキングが取得できる「[楽天レシピカテゴリ別ランキングAPI](https://webservice.rakuten.co.jp/api/recipecategoryranking/)」を使って、楽天APIの取得の仕方について解説していきたいと思います。
一緒に人気ランキングを取得してみましょう！



### 目次
[1. まずはIDを発行しよう！](#まずはidを発行しよう)
[2. 早速APIを取得してみよう！](#早速apiを取得してみよう)
[3. コンソールに表示してみよう！](#コンソールに表示してみよう)
[4. 書き出してみよう！](#書き出してみよう)
[5. 作ったアプリを公開する前に](#作ったアプリを公開する前に)



## まずはIDを発行しよう！
[Rakuten Developersの公式サイト](https://webservice.rakuten.co.jp/)からユーザー登録して、IDを発行しましょう！
ナビの右上の「アプリID発行」をクリックしてください。
![スクリーンショット 2021-03-18 10.56.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687801/ed1b72e7-c697-1964-8add-c651a36f6142.png)

そして楽天会員としてログイン。
（登録がまだの方は新規登録してください）

ログイン後、「新規アプリ登録」画面に遷移しますので、必須項目を入力します。

![スクリーンショット 2021-03-18 11.03.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687801/982bb6ef-604a-3666-625c-685d3429d32e.png)

青いボタンをクリックすると、アプリ登録完了です！
以下のように認証情報が表示されます。

![スクリーンショット 2021-03-18 11.42.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687801/dbc1a6ae-107e-451b-cf8c-07c37d2ac8c8.png)

この後APIを取得するために「**アプリID/デベロッパーID (applicationId / developerId)**」を使用するので、メモしておきましょう。



## 早速APIを取得してみよう！
IDをゲットしたら、APIを取得してみましょう！

まずは「[楽天レシピカテゴリ別ランキングAPI](https://webservice.rakuten.co.jp/api/recipecategoryranking/) 」にアクセスして、リクエストURLをコピーします。

![スクリーンショット 2021-03-18 12.24.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687801/83384bfe-f5ad-8313-96c5-91f97381da54.png)

そして、コピーしたリクエストURLの
```[parameter]```を**applicationId**と書き換え、
```[value]```を**先程メモしたアプリID**に書き換えて、URLを生成します。

```html
https://app.rakuten.co.jp/services/api/Recipe/CategoryRanking/20170426?applicationId=[先程メモしたアプリID]
```

確認のため、生成したURLをブラウザのアドレスバーに貼ってみましょう。
エラーなく結果が返ってきたら成功です！
![スクリーンショット 2021-03-17 0.47.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687801/4ec2a869-32b3-541d-e02b-6b9de18fb476.png)

失敗例。。
![スクリーンショット 2021-03-18 12.30.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687801/16c1f680-e682-d466-d1ca-2acbb182618b.png)



## <span id="コンソールに表示してみよう！">コンソールに表示してみよう！</span>
次はjQueryを使って、APIを取得してコンソールに表示してみましょう。
以下のコードをJavaScriptのファイルに貼り付けて、アプリIDなどを書き換えてみてください！

```javascript:hoge.js

// 先程生成したURL
const url = 'https://app.rakuten.co.jp/services/api/Recipe/CategoryRanking/20170426?applicationId=[アプリID]';

$.getJSON(url, (data) => {
    console.log(data.result);
});
```

そしてページを再読み込みすると、コンソールに以下のように表示されます。
これで成功です！
![スクリーンショット 2021-03-17 0.50.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687801/c89a4390-5bf6-b476-62e4-a5333084d10a.png)



## 書き出してみよう！
次はリンク、画像、タイトル、説明文をHTMLに書き出してみましょう！
以下は例ですので、必要に応じてコードを書き換えてください。

まずは先程のJavaScriptファイルをこちらに書き換えます。

```javascript:hoge.js

// 生成した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を追加しましょう。

```html:hoge.html
 <ul id="recipe_list"></ul>
```

```css:hoge.css
* {
    margin: 0;
    padding: 0;
}
ul {
    display: flex;
}
li {
    list-style: none;
    width: 25%;
}
img {
    width: 100%;
}
h2 {
    font-size: 14px;
}
p {
    font-size: 12px;
}
```

変更が終わったらページを再読み込みしてみてください。
以下のように、データがきちんとページに表示されたら成功です！
![スクリーンショット 2021-03-23 16.14.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687801/6db25940-9da9-581f-4497-ffcc4d80589e.png)



## 作ったアプリを公開する前に
[ご利用ガイド](https://webservice.rakuten.co.jp/guide/)を一読しておきましょう。
導入方法だけでなく、「クレジット表示方法と注意」や「楽天ウェブサービス規約」についての記載があります。


## 【おまけ】 リクエストを2回以上行いたい…
楽天APIは連続した複数のリクエストでエラーを返してしまいます。
この解決策として、```setTimeout()```で1秒遅延させてから再度リクエストをすれば、エラーを返さずAPIを取得できました！

```javascript
$.getJSON(url1, (data1) => {
    console.log(data1); // 1回目に取得したAPI

    setTimeout({
        $.getJSON(url2, (data2) => {
            console.log(data2); // 2回目に取得したAPI
        });
    }, 1000)
});
```

楽天レシピカテゴリ別ランキングAPIは、1回のリクエストでレシピを上位４つまでしか取得できませんが、もし5つ以上取得したい時などはこちらを活用してみてください！

## 最後に
いかがでしたでしょうか？
楽天APIを取得できるサービスが無料って結構すごいですよね！

楽天APIを使っていろいろなアプリを作っていきましょう！