【NoCode】Bubbleのチュートリアルを初心者向けに解説！ ⑨ APIを使って外部アプリから楽曲を検索する

皆様こんにちは、taku（@takuNoCode1）です！
平素より格別のご高配を賜り厚く御礼申し上げます。

今回は、NoCodeツールBubbleのチュートリアル Lesson 9 を初心者向けに解説していきます！

    この記事で学ぶこと
・プラグイン（iTunes）の導入方法
・APIを使用して外部アプリからデータを取得する方法
・外部アプリから取得したデータをリンクとして表示する方法

チュートリアルの概要につきましては、次の記事で解説しましたので、まずはこちらをご覧ください。

1. 実装するサンプル

プラグイン（iTunes）を導入することにより、「iTunes」から検索した楽曲のタイトルを、リンクとしてリスト表示し、クリックするとその楽曲の「iTunes」ページに移動することができるサンプルを作成します。

前回に引き続き、「API」を使用して外部アプリからデータを取得し、表示する方法を学びます。

2. 検索フォーム及び検索結果リスト作成

「Input」を配置します。「Term Input」という名前が設定されていることを確認しておきます。

「Repeating Group」を検索フォームの下に配置します。

点線で区切られたブロックの1つずつを「Cell」と呼びます。
この「Repeating Group」を設定することによって、外部アプリから取得したデータを、「Cell」1つずつに順番に表示していくことが可能になります。

「Rows（行）」を「3」、「Columns（列）」を「2」にそれぞれ設定します。

3. プラグイン（iTunes）の導入

プラグインとは、機能を拡張するためのプログラムのことです。複雑なコードを書かなければ実装できないような機能も、このプラグインをインストールして設定を行うだけで、初心者でも簡単に実装することができます。

左メニューの「Plugins」を選択し、「Add plugins」をクリックします。

検索フォームに「iTunes」と入力し、「Install」をクリックした後、「DONE」ボタンをクリックします。

この「iTunes」というプラグインを使うと、「iTunes」から楽曲を検索して、データを取得することが可能になります。

iTunes

このプラグインを使用するためには、「API」について理解する必要があります。

「API」とは、「Application Programming Interface」の頭文字で、ざっくり説明すると、「外部アプリと連携ができるようにするための窓口」です。

この「API」を使用することで、「外部アプリ」のデータを「自分が作成したアプリ」の中で使用することが可能になります。

前回のチュートリアルで、「API」を使用してアプリを連携するためには、「外部アプリ」に対して申請を行い、「API Key」を取得しなければならないということを学びました。

しかし、今回使用する「iTunes API」は、「API Key」を取得する必要が無く、指定のURLにリクエストを送るだけで、データを取得することができます。

したがって、この「iTunes」プラグイン自身への設定は必要無く、導入するだけでOKです。

4. iTunes からデータを取得

先程配置した「Repeating Group」のプロパティに戻り、「Type of content」に「iTunes Song」を選択します。

「Data source」に「Get data from an external API」を選択します。「外部のAPIからデータを取得する」という意味です。

新しく出現したポップアップの「API provider（API 提供者）」に「Get iTunes songs」を選択します。

「Term to search（検索する用語）」の「Insert dynamic data」をクリックし、「Term Input's value」となるように順に選択します。

「Term Input」は検索フォーム作成時に確認した名前で、「's value」は「値」という意味です。

これにより、検索フォームに入力された値を使用して、 「iTunes」の楽曲を検索し、それぞれの「Cell」ごとにデータを順番に読み込んでいくことが可能になりました。

「RepeatingGroup iTunes Song」という名前が設定されていることを確認しておきます。

5. 取得したデータをリンクとして一覧表示

「RepeatingGroup iTunes Song」の左上の「Cell」に「Link」を配置します。

「Insert dynamic data」をクリックし、「Current cell's iTune's Song's Track title」となるように順に選択します。

これにより、それぞれの「Cell」ごとに読み込まれている「iTunes」の楽曲データのタイトルを表示することが可能になりました。

「Link destination（リンクの移動先）」を「External URL（外部のURL）」に変更します。

「Destination URL（移動先のURL）」に、「Current cell's iTunes Song's URL」となるように順に選択します。

これにより、クリックされたリンクの「Cell」に読み込まれている「iTunes」の楽曲データの「URL」に移動することが可能になりました。

「Open in a new tab」にチェックを入れることで、「iTunes」のページを新しいタブで開くことができるようになります。

以上で、今回の実装は完了です。「Preview」ボタンをクリックし、テストを行ってください。

6. まとめ

最後に、今回のチュートリアルの流れをまとめます。

①  検索フォームを配置する
②「Repeating Group」を配置する
③  プラグイン（iTunes）を導入する
④「Repeating Group」に「iTunes」を紐づける
⑤  取得したデータをリンクとして一覧表示する
⑥  リンクの移動先に「iTunes」のページを設定する

今回のチュートリアルで、「API」を使用して外部アプリからデータを取得する方法を学習したことによって、より本格的なWebアプリの開発が可能になるはずです。

引き続きBubbleの理解を深めていきましょう！