今回は書籍の画像とタイトル、説明を表示します。楽天ブックスAPIからはこの他にもたくさんの情報が返ってきますので、カスタマイズして表示する情報を増やしてみても良いでしょう。次にJavaScriptの実装について紹介します。主な機能は次の通りです。一覧をタップしたら、その書籍の詳細情報を表示では進めていきましょう。全体のコードを紹介します。楽天APIのIDは自分のものを入力してください。}});入力された文字列で楽天ブックスAPIを使って検索まず一覧画面で検索を行う処理です。テキストボックスに検索文字列が入力されているのかどうかを判定します。return;}検索文字があれば、楽天ブックスAPIを呼びます。URLは次のようになります。URLは用途に応じてカスタマイズができます。API一覧を参考にしてください。ジャンルIDは001として、書籍に限定しています。`https://app.rakuten.co.jp/services/api/BooksBook/Search/20130522?applicationId=${api_id}&title=${encodeURI(search)}&booksGenreId=001&sort=%2BitemPrice`;そして生成したURLにAjaxでリクエストを実行します。IDEのプレビュー画面でも動くようにJSONPを使っています。Monacaデバッガーのみで確認する場合はJSONでもOKです。alert("エラー!");});処理成功した場合は結果を一覧に追加します。書籍はタイトルが長い場合があるので、50文字を超える場合は省略して末尾に「...」をつけるようにしています。次に一覧の中から書籍タイトルをタップした時に詳細画面に遷移するようにします。これは次のように実装します。pushPageする際に、書籍データを引き継ぎます。最後に画面遷移した後の詳細画面を表示します。$("#book-caption").text(book.itemCaption);}楽天ウェブサービスのAPIを使えば楽天市場や書籍、ホテルなど様々なデータが取得できます。アフィリエイトとも絡められるので、便利なアプリをお小遣い稼ぎに使うこともできるでしょう。今回のコードはmoongift/monaca-with-rakuten-apiにアップロードしてあります。実装時の参考にしてください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。Monaca×ホットペッパーAPI。(JavaScript基礎構文)iOS16から導入された「デベロッパモード」についてhtmx:JavaScriptなしでサーバーとの通信を実現する見やすい、メンテナンスしやすいJavaScriptのために。