FlutterFlowではAPIを使うことができるのでしょうか？
はい、できます。
APIを使うことで外部のシステムと連携できるため、さまざまなシステムと組み合わせて多様なサービスを生み出すこともできます。
今回はノーコードのFlutterFlowを用いたAPIの使い方をお伝えしたいと思います。
そもそもFlutterFlowとは？
FlutterFlowは、コーディング不要（プログラミング不要）でスマホアプリやWebサイトを構築するためのプラットフォームです。
ユーザーは、直感的にドラッグ＆ドロップしたりを繰り返すだけで、UIやデータベースなどの機能を簡単に作成できます。
さらにFlutterFlowは、Flutterのコードを生成するので、開発者はFlutterの知識があればアプリをカスタマイズすることができます。
非常に強力なノーコードツールですので、興味がある方は以下も参考にしてみてください。
ネイティブアプリを10倍速で作れるノーコードツールFlutterFlowとは？
FlutterFlowのAPIの使い方
それではFlutterFlowでAPIをどうやって使うのか、試してみましょう。
まずはUIを作成する
やりたいことは、
郵便番号を入力する。
ボタンを押す。
APIを実行し、入力された郵便番号を元に住所を取得する。
住所が表示される。
ということです。
そのために、Text FieldとButtonとTextを置きましょう。
郵便番号検索API
今回は郵便番号検索APIを使ってAPI接続を試してみます。
http://zipcloud.ibsnet.co.jp/doc/api
こちらのサイトに仕様が書いてます。
（例）郵便番号「7830060」で検索する場合
https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060
のように書いてますね。
これを参考に作ります。
APIの登録
左メニューのアイコン「API Calls」に移動します。
そして、プラスボタンからCreate API Callsを選択しましょう。
API Call NameはAPIの名前なので、わかりやすい好きな名前をつけましょう。
Method TypeはGET、APIURLには以下を設定します。
https://zipcloud.ibsnet.co.jp/api/search
次にQuery Parametersをクリックし、Nameにzipicode、Vakue Sourceは変数から取得させたいのでFromVariable、Select Variableは新しくCreateして「zipcode」を作りましょう。以下のような感じです。
Response & TextというタグでAPIのテスト実行ができます。Valueにzipcodeを入れて試して問題なければAPIを登録して完了です。
App Stateの作成
次は、APIで取得したデータを保存しておく場所を作ります。
今回はApp Stateの中に作っておきます。
APIの結果は以下のように返ってくるので、
{
"message": null,
"results": [
{
"address1": "高知県",
"address2": "南国市",
"address3": "蛍が丘",
"kana1": "ｺｳﾁｹﾝ",
"kana2": "ﾅﾝｺｸｼ",
"kana3": "ﾎﾀﾙｶﾞｵｶ",
"prefcode": "39",
"zipcode": "7830060"
}
],
"status": 200
}address1とaddress2とaddress3を保存しておく場所を作りたいと思います。
左メニューのApp Stateで、Add State Variableを押して、以下のように３つ作成しましょう。
Buttonにアクションを追加
次に、UI側に戻り、Buttonにアクションを追加します。
ActionからBackend Call APIを選択します。
zipAPIを選択し、Variablesからzipcode、From VariableでWidget StateからUIに設置されているtext fieldを選びます。以下のような感じになります。
次に、2つ目のアクションを追加で作成します。APIの実行結果がTRUEの場合に、Action 2として Update App Stateを追加します。
Set Fieldからaddress1を選び、Set Valueとして From Variableを選びます。
その変数に設定する内容は、JSON Bodyを選択し、JSON Path・Customを選択するのですが、その後がポイントです。
「JSON Path」は、ざっくりいうと「取得したJSONのどの部分を使うか？」という意味です。
前述の通り、今回のAPIは以下のように値を返却します。
{
"message": null,
"results": [
{
"address1": "高知県",
"address2": "南国市",
"address3": "蛍が丘",
"kana1": "ｺｳﾁｹﾝ",
"kana2": "ﾅﾝｺｸｼ",
"kana3": "ﾎﾀﾙｶﾞｵｶ",
"prefcode": "39",
"zipcode": "7830060"
}
],
"status": 200
}なので、「resultsの中にあるaddress1」とかを欲しいわけですよね？
その場合は以下のように書きます。
$.results[:].address1これはこういうルールだと思ってもらえればと思います。
同じように、Add Fileldによりaddress2もaddress3も追加しましょう。
APIで取得した結果をテキストに表示する。
最後に、Buttonの下に配置したテキストの内容を設定しましょう。
テキストのSet from Variableから設定するのですが、今回はaddress1、2、3の結果をくっつけて使います。
その場合はCombine Textを使います。
Combine TextsでTextを三つ追加して、AppState からそれぞれaddress1、address2、address3を登録します。
これで完了です。
API機能の動作確認
あとは動かしてみましょう。
右上の青い雷マークから実行してみましょう。
以下のように、入力領域に好きな郵便番号を入れてボタンを押すと、テキストに住所が表示されることが確認できたのではないでしょうか？
FlutterFlowのAPI設定の仕方についてYoutube動画で確認したい方はこちら
動画でも説明していますので興味のある方はこちらもどうぞ
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、STUDIO、FlutterFlowなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。