こんにちは。今日はノーコード（ローコード）のFlutterFlow（フラッターフロー）で都道府県・市区町村を選択する画面を作ってみたいと思います。
まずは都道府県を選んでから、その都道府県内の市区町村を選択する・・・そんな検索画面はよくありますよね？
これを作ってみたので紹介したいと思います。
都道府県・市区町村を検索するAPI
都道府県、市区町村を検索するために、まずは都道府県一覧、市区町村一覧を取得したいですよね。自前でデータベースに持ってもいいかもしれないですが、APIがあるようです。
https://opendata.resas-portal.go.jp/docs/api/v1/index.html
こちらのサイトに、「地域経済分析システム（RESAS：リーサス）のデータを提供するAPI」というのがありました。以下のような感じで、都道府県一覧API、市区町村一覧APIなどがあるようです。
APIキーは利用登録していただくことで、発行されます
と書いていて、フォームから情報を入力して登録すると、すぐにAPIキーが発行されて使うことができました。
APIキーを取得できたら、早速使ってみましょう。
APIの設定
都道府県一覧API
まずは都道府県一覧を取得するAPIです。
https://opendata.resas-portal.go.jp/docs/api/v1/prefectures.html
GetPrefectureという名前で作成しました。
あとはサイトの説明を見ながら同様に設定していきます。
API URLはhttps://opendata.resas-portal.go.jp/api/v1/cities
Headersには、Content-Type:application/json;charset=UTF-8 と、
X-API-KEY: [APIキー] を設定します。
市区町村一覧API
次に市区町村取得APIを使います。
https://opendata.resas-portal.go.jp/docs/api/v1/cities.html
GetCitisという名前でAPIを作成しました。
あとは同様にAPIの設定を行います。
QueryParameterには都道府県コード（prefCode）を指定する必要があるので以下のようにパラメーターを設定します。（このパラメータに都道府県一覧APIで取得しておいたPrefCodeを指定するイメージですね）
FlutterFlowのUI側の作成
いよいよUI側の作成です。
都道府県選択画面の作成
以下のように都道府県選択画面を作成してみました。
ここでlistviewのbackendQueryからAPI Callを選択します。
そして、Generating Children from Variableから先ほどのAPI Callで取得したJSONを設定し、それをlistview側に表示させます。
listviewの各項目をクリックした際には次の画面にprefCodeを渡すのをお忘れなく。これが次の市区町村画面でAPIに渡すときのパラメータになります。
市区町村選択画面の作成
市区町村選択画面もやることは同様ですが、APIを呼ぶ際に、さっきの都道府県選択画面で選択した都道府県のprefCodeを指定することで、エリアを絞ります。
こんな感じでできました！
出来上がり
以下のような感じに仕上がりました。
都道府県一覧が表示され、例えば東京を選択すると、
以下のように東京都内の市区町村だけが一覧表示されました。完璧ですね。
都道府県・市区町村検索機能のYoutubeでの動画解説はこちら
今回の記事の内容は概要のみですが、動画の方では細かく解説しているので興味がある方は以下動画もご覧ください。
FlutterFlowで都道府県・市区町村検索機能の作成：まとめ
今回はノーコードFlutterFlow（フラッターフロー）で都道府県・市区町村一覧を表示・検索する機能を作成してみました。
ノーコードはそれ自体にはできることに制限があるものの、外部のAPIと連携させることで可能性がどんどん広がっていくところが素晴らしいですよね。
今後ももっと多くの機能を紹介していければと思っています。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。