【NoCode】Bubbleのチュートリアルを初心者向けに解説！ ⑧ APIを使用して外部アプリからGIF画像を検索する
皆様こんにちは、taku（@takuNoCode1）です！
平素より格別のご高配を賜り厚く御礼申し上げます。
今回は、NoCodeツールBubbleのチュートリアル Lesson 8 を初心者向けに解説していきます！
この記事で学ぶこと
・プラグイン（Giphy）の導入方法
・APIを使用して外部アプリからデータを取得する方法
・外部アプリから取得したデータを表示する方法
チュートリアルの概要につきましては、次の記事で解説しましたので、まずはこちらをご覧ください。
1. 実装するサンプル
プラグイン（Giphy）を導入することにより、「GIPHY」から検索したGIF画像を、静止画像でリスト表示し、クリックするとGIFアニメーションが下部に表示されるサンプルを作成します。
今回は、「API」を使用して外部アプリからデータを取得し、表示する方法を学びます。
2. 検索フォーム及び検索結果リスト作成
「Input」を配置します。「Term Input」という名前が設定されていることを確認しておきます。
「Repeating Group」を検索フォームの下に配置します。
点線で区切られたブロックの1つずつを「Cell」と呼びます。
この「Repeating Group」を設定することによって、外部アプリから取得したデータを、「Cell」1つずつに順番に表示していくことが可能になります。
「Rows（行）」を「1」、「Columns（列）」を「4」にそれぞれ設定します。「Static Images Grid」という名前が設定されていることを確認しておきます。
3. プラグイン（Giphy）の導入
プラグインとは、機能を拡張するためのプログラムのことです。複雑なコードを書かなければ実装できないような機能も、このプラグインをインストールして設定を行うだけで、初心者でも簡単に実装することができます。
左メニューの「Plugins」を選択し、「Add plugins」をクリックします。
検索フォームに「Giphy」と入力し、「Install」をクリックした後、「DONE」ボタンをクリックします。
この「Giphy」というプラグインを使用すると、「GIPHY」というアプリからGIF画像を検索して、データを取得することが可能になります。
「GIPHY」は、GIF画像検索アプリで、気に入ったGIF画像をSNSにシェアしたり、保存したりすることができるようです。
このプラグインを使用するためには、「API」について理解する必要があります。
「API」とは、「Application Programming Interface」の頭文字で、ざっくり説明すると、「外部アプリと連携ができるようにするための窓口」です。
この「API」を使用することで、「外部アプリ」のデータを「自分が作成したアプリ」の中で使用することが可能になります。
しかし、「API」を使用してアプリを連携するためには、「外部アプリ」に対して申請を行い、「API Key」を取得しなければなりません。
この「API Key」の取得方法はアプリによって様々ですが、「GIPHY」の場合は、下記URLから申請を行う必要があります。
今回のチュートリアルでは、「API Key」の取得方法は省略されており、Bubbleがあらかじめ準備してくれています。
本来であれば、自分で「API Key」を取得し、「Giphy」プラグインの設定画面で入力しなければならないということを覚えておいてください。
4. GIPHY からデータを取得
「Static Images Grid」のプロパティに戻り、「Type of content」に「Animated GIF」を選択します。
「Data source」に「Get data from an external API」を選択します。「外部のAPIからデータを取得する」という意味です。
新しく出現したポップアップの「API provider（API 提供者）」に「Search Giphy Animated GIF」を選択します。
「Term to search（検索する用語）」の「Insert dynamic data」をクリックし、「Term Input's value」となるように順に選択します。
「Term Input」は検索フォーム作成時に確認した名前で、「's value」は「値」という意味です。
これにより、検索フォームに入力された値を使用して、 「GIPHY」のGIF画像を検索し、それぞれの「Cell」ごとにデータを順番に読み込んでいくことが可能になりました。
5. 取得したデータを静止画像として一覧表示
「Static Image Grid」の1番左の「Cell」に「Image」を配置します。
「Dynamic image」の「Insert dynamic data」をクリックし、「Current cell's Animated GIF's still URL」となるように順に選択します。
「still URL」は「静止画像のURL」という意味です。
これにより、それぞれの「Cell」ごとに読み込まれている「GIPHY」のGIF画像のデータを静止画像として表示することが可能になりました。
「Image A」という名前が設定されていることを確認しておきます。
6. 静止画像をクリック後アニメーション再生
「Group」を配置し、「Type of content」に「Animated GIF」を選択します。「Dynamic Image Group」という名前が設定されていることを確認しておきます。
「Dynamic Image Group」の中に、「Image」を配置します。
「Dynamic image」の「Insert dynamic data」をクリックし、「Parent group's Animated GIF's animated URL」となるように順に選択します。
この「Image」の親にあたる「Dynamic Image Group」で受信したデータをGIF画像として表示します。
先程の「still URL」とは逆の意味を持つ「animated URL」を選択することで、GIF画像のアニメーションを再生して表示することができます。
「Image B」という名前が設定されていることを確認しておきます。
一覧表示した静止画像をクリックすると、「Dynamic Image Group」の中に配置した「Image B」に、そのGIF画像のアニメーション版が表示されるという機能を実装したいので、「Static Image Grid」の中に配置した「Image A」に対して「Workflow」を作成します。
「Image A」のプロパティから、「Start/Edit workflow」をクリックします。
「Click here to add an action」をクリックし、「Element Actions」から「Display data（データを表示する）」を選択します。
「Element」に「Dynamic Image Group」を選択し、「Data to display」に「Current cell's Animated GIF」となるように順に選択します。
これにより、クリックされた「Image A」の「Cell」で読み込まれている「GIPHY」のGIF画像のデータを「Dynamic Image Group」に送信することが可能になりました。
「Dynamic Image Group」の中に配置した「Image B」で、送信されたデータを読み込み、GIF画像のアニメーションを再生して表示します。
以上で、今回の実装は完了です。「Preview」ボタンをクリックし、テストを行ってください。
7. まとめ
最後に、今回のチュートリアルの流れをまとめます。
① 検索フォームを配置する
②「Repeating Group」を配置する
③ プラグイン（Giphy）を導入する
④「Repeating Group」に「GIPHY」を紐づける
⑤ 取得したデータを静止画像として一覧表示する
⑥「Group」を配置する
⑦ クリックした静止画像のデータを「Group」に送信する
⑧「Group」に送信されたデータをアニメーションで表示する
今回のチュートリアルで、「API」を使用して外部アプリからデータを取得する方法を学習したことによって、より本格的なWebアプリの開発が可能になるはずです。
引き続きBubbleの理解を深めていきましょう！
次のチュートリアルはこちらです！
この記事が気に入ったらサポートをしてみませんか？