中津川篤司Twitter1Facebook21はてブ1Pocket1LINE今回は楽天レシピAPIを使ってレシピ情報を見るアプリを作ってみたいと思います。作成するアプリについて今回作成するアプリは、まず最初にレシピのカテゴリが一覧表示されます。カテゴリをタップするとレシピが並びます。レシピをタップすると、そのレシピの簡単な情報が表示されます。詳細なレシピ情報はInAppBrowserにて楽天レシピのサイトにアクセスして表示されます。以上の4つの画面で構成されたアプリになります。APIは以下の2つです。楽天レシピカテゴリ一覧API楽天レシピカテゴリ別ランキングAPI利用の際にはアプリIDが必要になりますので新規アプリ登録より登録してください(楽天のユーザIDが必要です)。Navigation」テンプレートを使用して作成しています。一覧/詳細画面があるようなアプリではこのテンプレートをベースにすると良いでしょう。[JS/CSSコンポーネントの追加と削除]メニューより、jQueryを追加してください。HTMLの実装についてHTMLはInAppBrowserの画面を除く、全部で3つの画面で構成されます。中にデータを追加します。中にレシピ情報を追加します。選択されたカテゴリ名を表示します。id="recipes"></ons-list></div></ons-page></ons-template>レシピ情報表示この画面では前の画面で選択されたレシピの情報を表示します。id="detail"><ons-list></ons-list></div></div></ons-page></ons-template>JavaScriptについてJavaScriptは主に3つのブロックに分かれます。カテゴリ一覧画面レシピ一覧画面レシピ詳細画面まず全体の処理は次のようになります。{}});カテゴリ一覧画面カテゴリ一覧画面では次の処理を行います。一覧表示を行う際にはカテゴリ一覧取得APIのURLを指定し、JSONPでコールします。IDE上でも動作が確認できるようになります。属性にカテゴリIDを指定しておきます。これはカテゴリをタップした際に使います。できあがったHTMLを表示します$("#categories").html(ary.join(""));});カテゴリをタップしたら、そのカテゴリの楽天レシピカテゴリ別ランキングAPIを呼ぶカテゴリは動的に生成しますので次のようにjQueryでタップイベントをキャッチします。取得し、それを使ってレシピを取得するURLを作成します。楽天レシピカテゴリ別ランキングAPIの実行が成功したら、取得したデータを次の画面に引き継ぎます。オプションを使って次の画面にデータを渡すことができます。categoryName}});レシピ一覧画面この画面では前の画面から渡された情報を元にレシピ一覧を表示します。この画面では次のような処理を行います。左側にサムネイル画像を、その横にレシピのタイトルを表示します。これはタップしたレシピの情報を取得しやすくするためです。表示されたレシピをタップしたら呼ばれるイベントです。ここではタップされたレシピを特定し、その情報を次の画面に渡します。recipes[index]}});});レシピ情報表示レシピの情報を表示する画面です。ここでは前画面から渡されたレシピ情報を表示します。class="open">レシピを見る</ons-button></ons-list-item>`);最後にレシピを見るボタンをタップした際の処理を作ります。レシピの元URLを、InAppBrowserで表示します。'location=no&toolbar=no');});ここまでのコードでカテゴリの表示、レシピ一覧と詳細、そしてInAppBrowserによるレシピ表示までが行えるようになりました。今回のコードはmoongift/monaca-rakuten-recipe-apiにアップロードされています。実装時の参考にしてください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。Vueの使いこなしテクを一挙...2018年6月5日Monaca新機能第三弾。