関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。TumblrBubbleでAPIを使ってみよう!巷では様々なAPIが提供されていますが、Bubbleでも簡単にAPIを使うことができます。今回はサンプルとして、よく入力画面である「郵便番号から住所を取得する」を行います。画面を作成しよう今回のサンプルは、入力された郵便番号から住所を取得する、アプリです。以下のように簡単な画面を作成します。主なエレメントは、以下の通りです。Group)郵便番号の入力欄は、数字のみかつ7桁まで入力するように設定します。GroupのTypeは後ほど設定します。APIを使おう次に、実際に郵便番号から住所を取得するようにしましょう。ここでAPIを使います。郵便番号から住所を検索するAPIはいくつかありますが、ここでは、以下のサイトを利用させていただきます。zipcloud.ibsnet.co.jpAPIConnetorをインストールしようBubbleでは、APIの接続用にプラグインが用意されています。これを利用しましょう!※他にも、自作のプラグインを作成して、そこからでも同じようにできます。API」ボタンがあるので、クリックします。クリックすると、APIの設定画面が表示されるので、設定しましょう。Name」に「Zipcode」を入力しています。下の方にある、「Name」に「Search」を入力し、右手にある「expand」をクリックしましょう。その他に、使用するAPIに合わせて以下の設定をします。typeをJSONに設定(レスポンスの型の指定)また、「Parameters」にリクエスト時のパラメータを設定します。ここでは、Key「zipcode」にし、Valueには入力値を設定したいので、「Private」のチェックボックスを外します。次にレスポンスの設定しましょう。call」のボタンをクリックします。クリックする前に、このAPIはパラメータのzipcodeが必須なので、任意の7桁の数値を入力しましょう。存在する郵便番号の場合、以下のように表示されます。自動でレスポンスのJSONを解析して、名称と型を設定してくれます。field」に設定すれば読み込まれません。「Save」ボタンを押下すると、名称と型が保存されます。レスポンスの設定ができたら、パラメータのzipcodeは空欄にしておきましょう。APIConnetorを実際に呼んでみようAPIConnectorの設定ができたら、実際にBubble内で呼んでみましょう。Sourceに今回追加したAPIを呼ぶようにします。API」を選択し、追加したAPIを選択します。選択すると、パラメータの設定もできるようになるので郵便番号のInputエレメントを設定します。result」を選択します。このAPIではaddress1~address3が漢字住所なので、それをappendで接続して表示させています。これで、APIConnetorの設定から使用までできました!まとめAPIを利用することで、できることも幅広くなりますね。今回は簡単なAPIを使用しましたが、セキュリティがあるものも使用できます。試してみましょう!今回のサンプルURL:https://select-sample-nocodelab.bubbleapps.io/searchzipcodeここまで読んでいただきありがとうございました。nocodelabスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。