2022年、皆様あけましておめでとうございます。今年は昨年から引き続きAdaloやWixなどのノーコードのスキルを深堀し、今年はそれを鹿児島で広めるところまでいければと思っています。
さて深堀するといいましたが具体的に何なのか？
APIってなに？
その中の一つが昨年まで敬遠していた【API】です。まず「API」とは、「Application Programming Interface」の頭文字です。
すごーく簡単に言うと「自分が渡した情報を基に世の中の誰かが”回答”をかえしてくれるもの」です。
APIの具体例
具体的には今回ネタにしているような、郵便番号を基に住所を教えてくれたり、翻訳のAPIでは英語を基に日本語を返してくれたりもします。他にもGoogleが提供しているGoogle Vision API は画像を基に画像に何が映っているか？などを教えてくれたりもします。
APIがあるおかげで・・・
つまり、APIがない世界では自分が貯めたデータを元にアプリのユーザーに何かを提供することしかできませんでしたがAPIがあるおかげでWEBシステムやアプリで随分とやれることが増えるというわけです。
Adaloで作る
前置きはこのくらいにして早速Adaloでの郵便番号を基にして住所を取得する処理を実際に行いましょう。
完成系
準備①コレクション（＝テーブル）を準備
郵便番号と住所を保存するためのコレクションを作成します。郵便番号は画面で入力された値を、それ以外の項目はAPIで取得した値を保存します。
準備②アプリの画面を準備
ここでは①ユーザーに入力してもらうためのテキストボックスと、②取得した情報を表示するリストと③処理を行うためのボタンを作成します。
ここまでで、必要なコレクションと画面の部品を準備しましたのでこの後に「APIから住所を取得するためのカスタムアクション」とコレクションへの登録処理を行います。
APIにて住所を取得するカスタムアクションの設定
今回使用するAPIは、郵便番号検索APIです。
https://www.apibank.jp/ApiBank/api/detail?api_no=200&api_type=A
カスタムアクションの作成方法
１）先ほど用意した【ボタン】のclickAction→Custom Actin→New Custom Action を選択します。
nameに好きな名前（例；GetAddressなど）をつけます
Typeはとりあえず「Create」を選択します。
続いてAPI Base URLにAPI提供者が公表しているURLを入力します
MethodはGETを選択します。
Query Param(クエリーパラメータ)ですが、これはAPIに渡す値を設定します。今回の例では郵便番号を意味します。他のAPIではここのHeader部分で認証情報やContent-Type(どんな形式で”答え”が帰ってくるのか（jsonとかxmlとか）)を設定したりもしますが、今回は不要ですので郵便番号だけ設定します。
ここで、画面右側にあるinputsはこのカスタムアクションに画面で入力した値を渡す場合に使いますので今回は郵便番号（=input郵便番号）を設定し、その変数（ =input郵便番号 ）をQuery Paramに設定することでAPIに渡します。
ここまでで、どのAPIを使うのか？どんな値を渡すのか？の設定が終わりましたので「RUN TEST REQUEST」を押して実行結果を見てみましょう。
設定が間違っていなければ「Test Successful」と表示されます。ちなみにステータス200というのはAdaloに限らずAPIの共通仕様で”成功”を意味するようです。
APIから返ってきた値の取得
先ほどの画面下部にある「＋Add ITEM」を押してAPIから取得した項目のうちどの項目を使用するのかを選択します。（例：今回は都道府県、市区町村、市区町村以降、 都道府県カナ、市区町村 カナ 、市区町村以降 カナ 、都道府県コード がAPIより返されますが、今回は都道府県コードは使用しないので他の項目を 「＋Add ITEM」にて追加します。
↑ こんな感じになります↑のでSave Custom Actin を押して完了です。
仕上げ～ボタンを押したときにカスタムアクションを動かす
準備が多かったですがいよいよ最後です。
ざっくりいうと、画面の住所取得ボタンを押したときに（１）先ほど作成したカスタムアクションを利用して住所を取得する→（２）取得した住所を「住所」コレクションに登録（INSERT）するという流れになります。
ボタンを押したときのアクションで作成したカスタムアクション「Get Address」を呼び出して、画面の郵便番号をINPUT値として設定します。
続いて、CREATEアクションを追加します。ここで各項目に設定する値を選択する際にカスタムアクションで取得した項目を選択できますので設定します。
以上でAdaloで住所検索APIを利用して郵便番号から住所を取得してコレクションに登録する という処理の完成です。
最後に
ハードルが高く思えるAPIからの値取得もノーコードでできるのが素晴らしいですね。APIを使うとユーザーの利便性も提供できるサービスにも幅が出るので今後も他のAPIなどを試していきたいと思います。