🤖
General API連携
API を用いて外部サービスと連携し、外部データベースや カスタムClickFlow として使用することができます。
カスタムClickFlowでの General API の使用方法
郵便番号データ配信サービス zipcloud の郵便番号APIを例に使用方法の説明をしていきます。
zipcloud にアクセスする
zipcloud はこちら：http://zipcloud.ibsnet.co.jp/doc/api
リクエストURLをコピーします。
カスタムClickFlow の設定
エレメントの配置
インプットとボタンを配置します。郵便番号を入力してボタンを押すと、以下住所が自動入力されるようにします。インプットを複数使用するのでわかりやすいようにエレメント名を変更しておきます。
カスタムClickFlow
API連携を行います。ボタンを選択して「+ ClickFlowの追加 > カスタムClickFlow > 新カスタムClickFlow」をクリックします。
- 名前 ClickFlow の名前です。任意の名前を入力します。
- URL リクエストURLを入力します。
- 種類 リクエストの種類です。
- 設定 リクエスト内容の設定です。用途に合わせて設定します。 ○ Type Header と Param の設定をします。API に応じて設定します。 ○ Name API の設定に応じた値を入力します。 ○ Value Type と Name に応じた値を入力します。変数の場合はカスタムテキストから選択します。
- 変数の追加 リクエスト時に変数となる部分を追加作成します。 ○ 種類 変数に適した種類を選択します。 ○ 名前 変数の名前です。任意の名前を設定します。 ○ 試験値 API の接続テストをする際の値です。変数として適切な値を設定します。
- 名前 zipcloud API とします。
- URL コピーした リクエストURL を貼り付けます。
- 種類 GET を選択します。郵便番号に対応した住所を取得するためです。
郵便番号はその都度変わるため変数の設定をします。
- 種類 郵便番号を元に住所を取得するため「Number」を選択します。
- 名前 郵便番号 とします。
- 試験値 有効な郵便番号であれば問題ありません。1100016（東京都台東区）とします。
各項目を入力後「保存」ボタンをクリックすると変数が作成されます。
リクエスト内容を設定します。内容は「zipcode に紐づいた住所データを取得する」となります。
設定タブの「➕」ボタンをクリックし、詳細を設定して「保存」ボタンを押します。
- Type Param を選択します。
- Name zipcode と正確に入力します。
- Value 作成した変数「郵便番号」をカスタムテキストから選択します。
統合テストを行います。
「テスト」ボタンを押すと、リクエストが送信されレスポンスが返ってきます。変数作成時に試験地として設定した郵便番号と紐づく住所データが記載されていれば成功です。「作成」ボタンを押して設定完了です。
アウトプット方法
作成したカスタムClickFlow を使用して「郵便番号検索」機能を実装していきます。
「検索」ボタン押下時、リクエストを送信する動作を設定します。
ボタンを選択して「+ ClickFlowの追加 > カスタムClickFlow > zipcloud API」を選択します。
リクエスト送信時に、郵便番号インプットに入力された値を「zipcode」とする設定をします。
「zipcloud API」タブを開き、郵便番号のカスタムテキストから「その他 > Form Inputs > 郵便番号インプット」を選択します。
レスポンスとして返ってきた住所データをインプットに表示する設定をします。
同一のボタンを選択してさらに ClickFlow を追加します。「+ ClickFlowの追加」から「その他 > エレメントの値変更」を選択します。
インプット と 値 を設定します。インプットには「都道府県インプット」と選択し、値は「zipcode API > results.address1」を選択します。
同様の手順で「市町村区インプット」と「町域・番地以降インプット」にもそれぞれ対応した値が入るように設定します。