ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します

BubbleでAPIを使ってみよう!

BubbleでAPIを使ってみよう!

巷では様々なAPIが提供されていますが、Bubbleでも簡単にAPIを使うことができます。

今回はサンプルとして、よく入力画面である「郵便番号から住所を取得する」を行います。

画面を作成しよう

今回のサンプルは、入力された郵便番号から住所を取得する、アプリです。

まずは、以下のように簡単な画面を作成します。

f:id:korokoro-vc:20191125124200j:plain

主なエレメントは、以下の通りです。

  • 郵便番号の入力欄(Inputエレメント)
  • 住所一覧(Repeating Group)

郵便番号の入力欄は、数字のみかつ7桁まで入力するように設定します。 Repeating GroupのTypeは後ほど設定します。

APIを使おう

次に、実際に郵便番号から住所を取得するようにしましょう。

ここでAPIを使います。郵便番号から住所を検索するAPIはいくつかありますが、ここでは、以下のサイトを利用させていただきます。

zipcloud.ibsnet.co.jp

APIConnetorをインストールしよう

Bubbleでは、APIの接続用にプラグインが用意されています。 なので、これを利用しましょう!

※他にも、自作のプラグインを作成して、そこからでも同じようにできます。

f:id:korokoro-vc:20191125125129j:plain

APIConnetorの設定をしよう

APIConnectorのプラグインの画面に「Add another API」ボタンがあるので、クリックします。

クリックすると、APIの設定画面が表示されるので、設定しましょう。 ここでは、「API Name」に「Zipcode」を入力しています。

f:id:korokoro-vc:20191125173603j:plain

さらに、下の方にある、「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」のチェックボックスを外します。

f:id:korokoro-vc:20191125174322j:plain

次にレスポンスの設定しましょう。 レスポンスは、「Initialize call」のボタンをクリックします。 クリックする前に、このAPIはパラメータのzipcodeが必須なので、任意の7桁の数値を入力しましょう。

存在する郵便番号の場合、以下のように表示されます。

f:id:korokoro-vc:20191125185658j:plain

自動でレスポンスのJSONを解析して、名称と型を設定してくれます。 不要なデータがあれば、右の型のドロップダウンで「ignore field」に設定すれば読み込まれません。

「Save」ボタンを押下すると、名称と型が保存されます。

レスポンスの設定ができたら、パラメータのzipcodeは空欄にしておきましょう。

APIConnetorを実際に呼んでみよう

APIConnectorの設定ができたら、実際にBubble内で呼んでみましょう。

まず、画面上にある、Repeating GroupのData Sourceに今回追加したAPIを呼ぶようにします。 この時、「Do a search for」ではなく、「Get data from an external API」を選択し、追加したAPIを選択します。

f:id:korokoro-vc:20191125192350j:plain

選択すると、パラメータの設定もできるようになるので郵便番号のInputエレメントを設定します。

f:id:korokoro-vc:20191125193233j:plain

さらに、Data sourceには、「Search」の「results」(住所のリストにあたります)を指定し、Type of contentには、「Search result」を選択します。

f:id:korokoro-vc:20191125193806j:plain

最後に、Repeating Group内で住所を表示させれば完成です! このAPIではaddress1~address3が漢字住所なので、それをappendで接続して表示させています。

f:id:korokoro-vc:20191125194528j:plain

これで、APIConnetorの設定から使用までできました!

まとめ

APIを利用することで、できることも幅広くなりますね。

今回は簡単なAPIを使用しましたが、セキュリティがあるものも使用できます。 色々試してみましょう!

今回のサンプルURL:https://select-sample-nocodelab.bubbleapps.io/searchzipcode

ここまで読んでいただきありがとうございました。