Valence6.2 20240126.1では、GoogleのAPIを使用して住所を補完できる機能が追加されました。
この機能を使用することで、住所入力に関する利便性を向上させることができます。
今回のTipsでは、郵便番号や地名に対応する住所を入力欄に補完する手順をご紹介します。
住所検索機能で必要となる設定
Google Maps Platform APIキー
Valence6.2 20240126.1ではGoogle Maps Platform APIを使用して住所を補完する機能が追加されています。
そのため、使用するにはGoogle Maps Platform APIキーが必要となります。
Google Maps Platform APIキーの取得については以下の記事をご確認ください。
また、住所補完は「Places API」を使用していますので、Google Maps Platform APIキーの取得時に、「Places API」を有効に設定してください。
住所検索機能の利用方法
住所検索機能はFormウィジェットで設定します。
Valence6.2 20240126.1では、データソースを作成してFormウィジェットを定義すると、Formウィジェットのフィールドに「NAB_ADDRLOOKUP」が追加されています。
NAB_ADDRLOOKUPにチェックを設定するとFormウィジェットに住所検索用の入力欄が追加されます。
次に左側メニューの「シーケンス」を選択後、住所検索の入力欄に郵便番号や地名などを入力すると一致する候補を表示してくれます。
例えば、「難波サンケイビル」を入力したとします。
入力後、候補をクリックすると画面の下部にトーストが表示されて「開発者コンソールにログ記録された住所」と表示されます。
この表示を確認後、再度左側メニューの「フィールド」を選択してください。
「フィールド」では、住所をマッピングするフィールドのフォーマッティング（歯車のアイコン）を選択します。
フォーマッティングには「住所検索マッピング」というプルダウンが追加されています。
プルダウンを選択すると、先ほど入力した「難波サンケイビル」の住所データを確認することができます。
例えば、郵便番号は「postal_code」に割り当たっていますので、プルダウンから選択することで各フィールドにマッピングできます。
住所データは上記のように展開されていますので、フィールドに表示したいデータを確認しながら設定が可能です。
また、「住所検索マッピング」では複数の住所データを設定することもできます。
例えば、フィールドに「大阪市浪速区」を設定したい場合には、「locality」と「sublocality_level_1」を設定してください。
上記のようにして、取得した住所データとFormウィジェットの各フィールド(入力欄)をマッピングすることができます。
候補を日本国内のみに変更する方法
住所検索に入力して表示される候補は、Googleに登録されている世界中の場所が表示されます。
「スクリプトの実行」を使用することで候補を日本国内のみに変更することも可能です。
Formウィジェットに名前を設定
Formウィジェットに名前を設定してください。
例ではForm01と名前を設定しました。
名前を設定すると、スクリプト内で設定した名前を使用してFormウィジェットを取得することが可能です。
スクリプトを追加
Formウイジェットの住所検索欄の設定をJavaScriptで変更します。
例では、Startupにスクリプトの実行を追加しています。
スクリプト例
住所検索の機能は、Place Autocompleteが使用されています。
・Place Autocomplete
https://developers.google.com/maps/documentation/javascript/places-autocomplete?hl=ja
getWidgetの引数にウィジェットに設定した名前 Form01を指定します。
form変数にウィジェットが格納されますので、form変数のdownメソッドを使用して住所検索の入力欄をinput変数に取得しています。AutocompleteのオブジェクトはinputコンポーネントのautoCompleteに定義されていますので、setComponentRestrictionsメソッドを使用することで結果を特定の国に制限することができます。
※日本のみの場合は jp を指定します。
const form = getWidget('Form01');
const input = form.down('[name=NAB_ADDRLOOKUP]');
input.autoComplete.setComponentRestrictions({
country: ["jp"]
});