今回は、Adaloでできる「Custom Action」の使い方の一例として、外部APIを利用して郵便番号を取得してみたいと思います。
※Custom Actionは、Professionalプランから利用が可能になります。
「【2022年07月29日現在】Adalo（アダロ）のプラン・価格変更について」はこちらから
▼そもそも「Custom Action」とは？
AdaloのCustom Actionを使用することで、外部APIを呼び出すことができます。
Custom Actionを使用して外部APIを呼び出すことで、今回扱う郵便番号取得の他にも
・メールの送信
・Slackと連携
・Airtableのデータベースの利用
などができたりできます。
それでは早速、作っていきます！
▼外部APIを利用して、郵便番号を取得してみる
まず、こんな感じでAdaloで最低限のコンポーネントを準備します。
配置した「Icon」にカスタムアクションを設定していきます。
「New Custom Action」をクリックします。
名前をつけて、進みます。
郵便番号取得のAPIを検索します。
ベースとなる以下のURLをコピーします。
https://zipcloud.ibsnet.co.jp/api/search
API Base URLに貼り付けます。
こんな感じで、それぞれの項目を埋めていきます。
右側の「Example Value」は、存在する郵便番号にしておいてください。
右側の「Example Value」は、APIを使えるようにするために、テストで使用するValueになります。
実際のスクリーンでは、「Input」の中身をマジックテキストで取って、左側のValueに入れるみたいな感じでAPIの呼び出しができるようになるイメージです。
BodyにJSONを書く必要があるAPIもありますが、今回は必要ないので飛ばします。
「RUN TEST REQUEST」をクリックすると、テストが成功しました。
今回は不要なものを削除し、「SAVE CUSTOM ACTION」をクリックします。
Action設定の「Change Input Value」を使用します。これは、「Input」の中身を変えることができるActionです。
Valueに一度に、３つのマジックテキストを取れないため、Users Collectionに３つのテキストプロパティーを用意しておきます。
同様に、残りの２つも反映させます。
zipcodeのこと書いてなかったですね。
zipcodeはinputの中身を取るようにマジックテキストで設定します。
Previewで動かしてみます。
郵便番号を入力します。
アイコンをクリックすると、入力した郵便番号の住所が取れましたね。
このような仕組みを作ることで「＋ BUTTON」をタップした際に、住所をユーザーデータベースに反映させることも可能です。
▼まとめ
今回は、Adaloでできる「Custom Action」の使い方の一例として、外部APIを利用して郵便番号を取得してみました。
APIも様々な種類があると思うので、自分の興味のあるサービスのAPIを調べてみて、Adaloと繋いでみるのも面白いかもしれないです。
Custom Actionの他にも、Adaloでは、自動化ツール（Zapierやintegromatなど）と連携させることで、更に外部ツールとの連携の幅が広がったりもします。
「ノーコードAdaloでZapierを使ってgoogle sheetと連携してみた」はこちららから
「【Adaloで外部APIと連携】Google翻訳っぽいアプリを作ってみよう」はこちららから
このように、Adaloには、外部ツールとの連携が豊富であるという特徴もあります。
是非、様々なAPIと接続して、Adaloでの実装の幅を広げてみてください。
YouTube動画でも解説してあるので、より詳しく学びたい方はこちらもみてみてください。
https://www.youtube.com/watch?v=7k4x2CaAbCI
最後まで、ご覧いただきありがとうございました！
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、STUDIOなどのノーコードを使うことで、リスクを抑えてスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
アプリ、Webサービス、LPなどの構築に興味のある方は、ぜひこちらからご気軽にご相談ください。