APIの基本を覚える。Clickでzipcloudの郵便番号APIで住所を検索

投稿日 2024年8月17日
著者 tsubasatwi( つばさ）
カテゴリー NoCode

こんにちは、NoCodeCampのツバサです。

今日やること

Clickというノーコードツールを使用して、APIの初歩的な使い方を勉強します。
具体的には、zipcloudの郵便番号APIを利用して、入力された郵便番号に対応する住所を表示する機能を実装します。
*注意　APIは2024年8月時点で、Standardプラン以上で無いと利用できません。

データの準備

zipcloudの郵便番号APIを利用します。
APIのURLは以下になります。（エンドポイントといいます） http://zipcloud.ibsnet.co.jp/api/search

zipcloudとは

zipcloudは、株式会社アイビーシーエス（IBCS）が提供する無料の郵便番号データ配信サービスです。
このサービスは、日本の郵便番号と住所情報を提供するRESTful APIを通じて利用できます。開発者やウェブサイト運営者が、自身のアプリケーションやウェブサイトに郵便番号検索機能を簡単に実装できるようにすることを目的としています。

主な特徴

無料で利用可能
JSON形式でデータを返す
シンプルなAPI構造

例えば、、
オンラインショップの住所入力フォーム
不動産サイトの物件検索機能顧客
管理システムの住所登録機能　　などに使えると思います。

使い方手順：

特別なウェブアドレスを用意する まず、こんな特別なウェブアドレス（URL）を使います： http://zipcloud.ibsnet.co.jp/api/search?zipcode=
郵便番号を追加する このアドレスの最後に、調べたい郵便番号をくっつけます。例えば、「100-0001」（東京都千代田区千代田）を調べたいなら： http://zipcloud.ibsnet.co.jp/api/search?zipcode=1000001
注意：郵便番号はハイフン（-）なしで入れてください。
ウェブブラウザで開く この完成したアドレスを、Google ChromeやSafariなどのウェブブラウザのアドレスバーにコピー＆ペーストして開きます。
結果を見る すると、画面に住所の情報が表示されます。
　ちょっと見慣れない形式（JSON形式）で出てくるかもしれませんが、その中に住所が書かれています。

利用上の注意点

利用規約に従って使用する必要があります。
商用利用の場合は事前に問い合わせが必要です。
データの更新頻度は月1回程度です。

zipcloudは、簡単に利用できる無料のAPIサービスとして、多くの開発者に重宝されています。特に、住所入力の自動化や郵便番号からの地域情報の取得など、日本のウェブサービスやアプリケーションでよく使用されるシナリオに適しています。

Clickでの実装手順

エレメントの配置

郵便番号入力用のテキスト入力フィールドを配置します。
「検索」ボタンを配置します。
住所表示用のテキストフィールドを複数配置します（都道府県、市区町村、町名など）

ここで、各inputの名前と変更しておきます。

API-Zipinput
input-都道府県
input-市

ClickFlowの設定

作成したButtonエレメントから、ClickFlowを選択し、Custom　
ClickFlowから、New CustomClickFlowを選択してください

General APIには、ZipCloudからデータを受け取る情報を入れていきます。
まずは、左側のGenenal APIを入れていきましょう。

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

Type
Param

Name
zipcode　
を入れてください。

なぜnameがzipcodeなのか？

少し前にURLで、以下のURLを入れて表示しましたが、最後の方にzipcodeとなってますよね？
http://zipcloud.ibsnet.co.jp/api/search?zipcode=1000001
これは、クエリパラメータといって、 URLのクエリパラメータ（?zipcode=1000001の部分）は、サーバーに対して「何を」検索したいかを伝えるために使用されます。今回は、郵便番号（Zipcode）を入れて、日本語を表示したいので、以下までをいまClickで入力していることになります。
http://zipcloud.ibsnet.co.jp/api/search?zipcode=

次に具体的なテストの値を入れていきましょう。
Type Number
Name は、何でもOKなので、ここでは郵便番号を入れました。

Saveを押すと、下に郵便番号という文字が出ると思います。
そのあとに、左側のSetting を押せばSettingにも郵便番号と表示されるはずです。

テストを押して住所が表示されれば成功です。

郵便番号で検索した結果を表示しよう

作成したカスタムClickFlow を使用して「郵便番号検索」機能を実装していきます。
全体的に、入力が１つと出力が２つに分かれます。まずは、入力項目から作っていきます。

入力の作り方「郵便番号検索」ボタン押下時、リクエストを送信する動作を設定します。
ボタンを選択して「+ ClickFlowの追加 > カスタムClickFlow > からAddClickFlowで、zipcloud API」を選択します。
その後、「 Form Inputs > API-Zipinput」を選択します。

最後に、出力の項目を作ります。
ClickのClickFlowを追加からMore　Change Element valueを選択します。
都道府県の県を表示する項目を作ります。ここで、input 都道府県を選択して値を設定してください。
Valueには色々な値が出ますが、この場合はresult.adress1 を選択しましょう。ここで、市の場合には、result.adress2にすればOKです。