技術記事

micomia株式会社の畑井です。
今回はzipcloudの郵便番号検索APIを使って、郵便番号検索ができるように解説していきます。郵便番号検索はアプリをリリースする上で必須ではありませんが、あるととても便利な機能になりますので、ぜひマスターしてみてください。

FlutterFlowを詳しく知りたい方はこちら

1.zipcloudとは

zipcloud(ジップクラウド)は日本郵便のWebサイトで公開されている郵便番号データを再配信するサービスです。その中でも郵便番号検索は無料で利用できるため多くのサービスで利用されています。

2.APIの仕様を確認する

APIの設定をしたことがない方でもわかるようにステップバイステップで解説していきます。

API仕様：http://zipcloud.ibsnet.co.jp/doc/api

2-1.FlutterFlowでAPI Callsにアクセス

FlutterFlowの「API Calls」を開いてください。画面左上にあります「+ Add」を押して、APIを定義していきます。「Create API Call」を押してください。

API Call NameにはこのAPI名前を入力してあげれば大丈夫です。

https://zipcloud.ibsnet.co.jp/api/search

こちらがベースURLとなります。このURLを「API URL」という入力欄に貼り付けてください。

2-2.APIの仕様を確認する

引用：zipcloud

このようにリクエストパラメーターが定義されているのでこの通りに定義していきます。

2-3.APIの仕様通りに実装する

Variableのところからこのように定義し、「Save」を押します。Stringは文字列で、テキストを送ることができます。Integerは整数で数字を送ることができます。数字をStringで送ると数字をテキストと認識し、数字としてみなしてくれないので要注意です。

ここは変数を定義しているだけなので、左隣のQuery Parametersからリクエストパラメーターを定義します。

このように定義してみてください。「Call Back」は今回必須ではないので定義しませんでした。「limit」も必須ではありませんので、定義しなくても大丈夫です。

テストを行ってみますと画像のように表示されると思います。200番が表示されると成功です。

さらにスクロールするとこのように表示されます。

郵便番号を入力すると県と市が表示される機能をつくるために県と市が表示されている行の「＋ Add JSON Path」をクリックしてpathを予め登録しておきます。

このように名前をつけてあげるとスムーズです。

保存するために下までスクロールして「Save」を押してください。

2-4.画面を実装する

デザイン性まで考慮できていませんが、必要なUIを作成しました。住所表示というButtonの中に下記の画像のアクションを設定してください。

API Callが失敗した時にダイアログでステータスコードが出るようになっていますが、設けなくてもこの機能自体が動かないなどの影響はありません。

県の入力欄のInitial ValueにAction outputsにあるAPIのリクエスト結果を選択します。

先ほど「＋　Add JSON Path」でセットしたものをPredefined Pathから呼び出すことができます。この要領で市の入力欄も実装してみてください。

3.最後に

今回はzipcloudの郵便番号検索APIというサービスを利用して郵便番号検索機能を作成してみました。細かいUIなどはアプリによって異なるため省略していますが、大手のサービスではよくある本機能を実装することができればサービスの付加価値がつくこと間違いなしです。