BubbleでAPIを使ってみよう!
巷では様々なAPIが提供されていますが、Bubbleでも簡単にAPIを使うことができます。
今回はサンプルとして、よく入力画面である「郵便番号から住所を取得する」を行います。
画面を作成しよう
今回のサンプルは、入力された郵便番号から住所を取得する、アプリです。
まずは、以下のように簡単な画面を作成します。
主なエレメントは、以下の通りです。
- 郵便番号の入力欄（Inputエレメント)
- 住所一覧（Repeating Group）
郵便番号の入力欄は、数字のみかつ7桁まで入力するように設定します。 Repeating GroupのTypeは後ほど設定します。
APIを使おう
次に、実際に郵便番号から住所を取得するようにしましょう。
ここでAPIを使います。郵便番号から住所を検索するAPIはいくつかありますが、ここでは、以下のサイトを利用させていただきます。
APIConnetorをインストールしよう
Bubbleでは、APIの接続用にプラグインが用意されています。 なので、これを利用しましょう！
※他にも、自作のプラグインを作成して、そこからでも同じようにできます。
APIConnetorの設定をしよう
APIConnectorのプラグインの画面に「Add another API」ボタンがあるので、クリックします。
クリックすると、APIの設定画面が表示されるので、設定しましょう。 ここでは、「API Name」に「Zipcode」を入力しています。
さらに、下の方にある、「Name」に「Search」を入力し、右手にある「expand」をクリックしましょう。 その他に、使用するAPIに合わせて以下の設定をします。
- Use as を「Data」に設定（Bubbleの使用場所の指定）
- GETメソッドに設定
- APIのURLの設定（ http://zipcloud.ibsnet.co.jp/api/search）
- Data typeをJSONに設定（レスポンスの型の指定）
また、「Parameters」にリクエスト時のパラメータを設定します。 ここでは、Key「zipcode」にし、Valueには入力値を設定したいので、「Private」のチェックボックスを外します。
次にレスポンスの設定しましょう。 レスポンスは、「Initialize call」のボタンをクリックします。 クリックする前に、このAPIはパラメータのzipcodeが必須なので、任意の7桁の数値を入力しましょう。
存在する郵便番号の場合、以下のように表示されます。
自動でレスポンスのJSONを解析して、名称と型を設定してくれます。 不要なデータがあれば、右の型のドロップダウンで「ignore field」に設定すれば読み込まれません。
「Save」ボタンを押下すると、名称と型が保存されます。
レスポンスの設定ができたら、パラメータのzipcodeは空欄にしておきましょう。
APIConnetorを実際に呼んでみよう
APIConnectorの設定ができたら、実際にBubble内で呼んでみましょう。
まず、画面上にある、Repeating GroupのData Sourceに今回追加したAPIを呼ぶようにします。 この時、「Do a search for」ではなく、「Get data from an external API」を選択し、追加したAPIを選択します。
選択すると、パラメータの設定もできるようになるので郵便番号のInputエレメントを設定します。
さらに、Data sourceには、「Search」の「results」（住所のリストにあたります）を指定し、Type of contentには、「Search result」を選択します。
最後に、Repeating Group内で住所を表示させれば完成です！ このAPIではaddress1～address3が漢字住所なので、それをappendで接続して表示させています。
これで、APIConnetorの設定から使用までできました！
まとめ
APIを利用することで、できることも幅広くなりますね。
今回は簡単なAPIを使用しましたが、セキュリティがあるものも使用できます。 色々試してみましょう！
今回のサンプルURL：https://select-sample-nocodelab.bubbleapps.io/searchzipcode
ここまで読んでいただきありがとうございました。
おすすめ記事
以下の記事では、Bubble と他のサービスを連携させる方法をご紹介しています！
