今回は楽天レシピAPIを使ってレシピ情報を見るアプリを作ってみたいと思います。

作成するアプリについて

今回作成するアプリは、まず最初にレシピのカテゴリが一覧表示されます。

カテゴリをタップするとレシピが並びます。

レシピをタップすると、そのレシピの簡単な情報が表示されます。

さらに詳細なレシピ情報はInAppBrowserにて楽天レシピのサイトにアクセスして表示されます。

以上の4つの画面で構成されたアプリになります。

楽天レシピAPIについて

今回利用するWeb APIは以下の2つです。

利用の際にはアプリIDが必要になりますので新規アプリ登録より登録してください(楽天のユーザIDが必要です)。

プロジェクトの作成

今回のアプリは「Onsen UI V2 JS Navigation」テンプレートを使用して作成しています。一覧/詳細画面があるようなアプリではこのテンプレートをベースにすると良いでしょう。

また、[JS/CSSコンポーネントの追加と削除]メニューより、jQueryを追加してください。

HTMLの実装について

HTMLはInAppBrowserの画面を除く、全部で3つの画面で構成されます。

カテゴリ一覧画面

この画面では楽天レシピカテゴリ一覧APIからデータを取得し、#categories の中にデータを追加します。

レシピ一覧

この画面では前の画面で選択されたカテゴリに基づいて楽天レシピカテゴリ別ランキングAPIの結果を取得し、 #recipes の中にレシピ情報を追加します。また、#categoryName に選択されたカテゴリ名を表示します。

レシピ情報表示

この画面では前の画面で選択されたレシピの情報を表示します。この時点では詳細なレシピ情報は得られませんので代表的な情報を #detail の中に表示します。

JavaScriptについて

JavaScriptは主に3つのブロックに分かれます。

  1. カテゴリ一覧画面
  2. レシピ一覧画面
  3. レシピ詳細画面

まず全体の処理は次のようになります。

カテゴリ一覧画面

カテゴリ一覧画面では次の処理を行います。

  1. 楽天レシピカテゴリ一覧APIを呼んで結果に基づいてカテゴリ一覧を表示
  2. カテゴリをタップしたら、そのカテゴリの楽天レシピカテゴリ別ランキングAPIを呼ぶ
  3. レシピ一覧画面へ遷移

楽天レシピカテゴリ一覧APIを呼んで結果に基づいてカテゴリ一覧を表示

一覧表示を行う際にはカテゴリ一覧取得APIのURLを指定し、JSONPでコールします。JSONPにすることによってMonaca IDE上でも動作が確認できるようになります。

そして結果が返ってきたら、カテゴリの配列(data.result.large)を順番に <ons-list-item /> の中に追加しています。data-id 属性にカテゴリIDを指定しておきます。これはカテゴリをタップした際に使います。

カテゴリをタップしたら、そのカテゴリの楽天レシピカテゴリ別ランキングAPIを呼ぶ

カテゴリは動的に生成しますので次のようにjQueryでタップイベントをキャッチします。data-id を取得し、それを使ってレシピを取得するURLを作成します。

取得成功時の処理:レシピ一覧画面へ遷移

楽天レシピカテゴリ別ランキングAPIの実行が成功したら、取得したデータを次の画面に引き継ぎます。data オプションを使って次の画面にデータを渡すことができます。

レシピ一覧画面

この画面では前の画面から渡された情報を元にレシピ一覧を表示します。この画面では次のような処理を行います。

  1. レシピ一覧を表示
  2. レシピをタップした際にレシピ詳細画面へ遷移

レシピ一覧を表示

レシピ一覧を表示する際には前画面から渡された情報を <ons-list-item /> の中に表示します。左側にサムネイル画像を、その横にレシピのタイトルを表示します。

前の画面ではカテゴリIDを data-id に紐付けていましたが、今回は配列のインデックスを data-recepe-index に紐づけます。これはタップしたレシピの情報を取得しやすくするためです。

レシピをタップした際にレシピ詳細画面へ遷移

表示されたレシピをタップしたら呼ばれるイベントです。ここではタップされたレシピを特定し、その情報を次の画面に渡します。

レシピ情報表示

レシピの情報を表示する画面です。ここでは前画面から渡されたレシピ情報を表示します。

最後にレシピを見るボタンをタップした際の処理を作ります。レシピの元URLを、InAppBrowserで表示します。


ここまでのコードでカテゴリの表示、レシピ一覧と詳細、そしてInAppBrowserによるレシピ表示までが行えるようになりました。

今回のコードはmoongift/monaca-rakuten-recipe-apiにアップロードされています。実装時の参考にしてください。

楽天ウェブサービス(RAKUTEN WEBSERVICE)