すっかり寒くなりましたね。
私は、2022 FIFAワールドカップの興奮がいまだに冷めずHOTな状態です。
メッシ最高！！
さてさて、それでは本題に入りましょう！
今回は無料で利用できる乗り換え案内webサービス「駅すぱあと」のAPIを利用して、入力された駅名から県名を自動で設定するカスタマイズを実装してみました！
サンプルフォーム
| パーツID | パーツタイプ | 補足 |
|---|---|---|
| fidStation | テキスト（一行）パーツ | 駅名 |
| fidPrefecture | テキスト（一行）パーツ | 県名 |
カスタマイズコード
参考記事：コラボフロー JavaScript API を利用する
(function () {
"use strict";
// 駅名の変更イベント
collaboflow.events.on(
"request.input.fidStation.change",
function (eventData) {
// 駅名を格納;
const station = eventData.parts.fidStation.value;
const headers = {};
const parseType = "json";
// 指定された駅名からその駅の県名を取得する
// 駅名取得
//api.ekispert.jp/v1/json/station/light?key=
const apiKey = "*****ここに取得したAPIキーを指定する*****";
const stationName = "&name=" + station;
const url =
"http://api.ekispert.jp/v1/json/station/light?key=" +
apiKey +
stationName;
return collaboflow.proxy
.get(url, headers, parseType)
.then(function (response) {
if (response.status !== 200) {
throw Error(response);
}
const responseData = response.body;
const serchResults = responseData.ResultSet.Point;
// 取得した県名の値を設定
if (!serchResults.length) {
eventData.parts["fidPrefecture"].value =
serchResults.Prefecture.Name;
return;
}
const stationNames = serchResults.filter(
(resust) => station === resust.Station.Name
);
if (stationNames.length !== 1) {
alert("同名の駅が複数存在しています。");
return;
}
eventData.parts["fidPrefecture"].value = stationNames[0].Prefecture.Name;
})
.catch(function (error) {
console.error(error);
alert("駅名の検索に失敗しました。");
return false;
});
}
);
})();
事前準備
- 駅すぱあとAPI にてアカウント登録し、APIキーを取得します。
駅すぱあとAPIについて
-
本サンプルの駅名での県名検索は、駅すぱあとAPI を利用しています。
-
APIキーを取得するには、駅すぱあとAPI のアカウント登録が必要です。
-
利用規約は、駅すぱあとAPIの お申し込みページ から確認する事が出来ます。
動作の確認手順
-
サンプルのカスタマイズコードをjsファイルに保存します。
-
保存したjsファイルを任意のエディターで表示します。
-
事前準備にて取得したAPIキーを、
「*****ここに取得したAPIキーを指定する*****」に指定して保存します。 -
アプリ設定＞フォーム設定から新規に通常フォームを作成します。
参考記事：通常フォームを作成する -
サンプルフォームに、先で記載されている必要項目を配置します。
-
サンプルフォームを再度表示し、カスタマイズのタブを表示します。
-
保存したファイルをアップロードします。
-
アプリ設定＞経路設定から新規に経路を作成します。
参考記事：経路の作成・編集
-
新規文書から作成した経路名をクリックします。
-
申請画面が表示されます。
-
任意に駅名を指定します。
-
指定した駅名から指定した駅の県名が検索され、設定されます。
まとめ
出来たーーー！！
駅名からその駅の県名を取得するカスタマイズを簡単に実装する事が出来ました。
様々なwebサービスに応用できると思うので、参考にして下さい！
明日は @nagiii さんの記事です！！
お楽しみに！！！