WebPerformer で住所検索の拡張機能を実装する

2021-04-012023-08-15

エヌデーデーの関口です。今回はV2.5の機能ではなく、これまでのWebPerformerの記事とは少し体裁を変えて、郵便番号から住所を検索する仕組みをできるだけ簡単にWebPerformerで実装するという事にチャレンジしてみます。

準備するもの

• WPアプリケーション: SAMPLE とします
• PostcodeJPへのアカウント登録とAPIキーの取得
• 都道府県コードを示すDMおよびテーブルとデータ: PREF とします
• 住所を登録するためのDM: ADDRESS とします
• 拡張定義ファイル: EXT とします
• JavaScriptファイル: IO_SAMPLE_user.js とします
• 住所検索を動かすためのIO: IO_SAMPLE とします

PostcodeJPへのアカウント登録とAPIキーの取得

WebPerformerだけでは住所検索ができませんので、外部のAPIサービスを利用することにします。
PostcodeJP は郵便番号などから住所を検索するAPIサービスです。
価格帯の次のようになっています。(2021/3/26現在)

こちらのサービスに登録しておき、APIキーを発行しておきましょう。

DMの構成

都道府県コードのDM(PREF)

データには次のような内容が入っています。

住所登録用のDM(ADDRESS)

実際は登録まで行わないので ID の採番処理などは省きます。市区町村などの桁数も適宜変更してください。

拡張の構成

拡張定義ファイル(EXT)

プロジェクトを右クリックして、「新規」 > 「新規拡張定義ファイル」と選択してください。ファイル名はEXTとして、下のように項目を追加します。

EXT_ADDRESS の拡張プロパティには次のように設定します。getAddress は後で記述するJavaScriptの関数名です。

JavaScript(IO_SAMPLE_user.js)

実際に動作を行うJavaScriptファイルは、WebPerformerの拡張フォルダ内に作成します。
プロジェクトを右クリックして、「新規」>「拡張ディレクトリの作成」を選択して、ダイアログから対象のプロジェクトとして「SAMPLE」を選びます。

すると、src/JavaWebApp/SAMPLE というフォルダが作成されるので、さらにその下の script フォルダに、IO_SAMPLE_user.js というファイルを作成します。WebPerformerの拡張JavaScriptの命名規則で、特定のIOで利用するJavaScriptファイルの名前は、{IOのコード}_user.js というルールになっています。

IO_SAMPLE_user.js の中身は次の通りです。

function getAddress(disp){ // EXT に定義した関数名
    var zipcode = disp.get('ZIP_CODE'); // disp.get(IOのコード)で値を取得
    if (!zipcode) return; // 郵便番号が空白だったら何もしない

    // PostcodeJPの問合せを実施する
    fetch(`https://apis.postcode-jp.com/api/v4/postcodes/${zipcode}`, {
        headers: {
            "apikey" : "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" // APIキーを記述
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('通信エラーです。');
        }
        return response.json(); // 得られた結果をJSON形式にする
    })
    .then(jsonData => {
        // 検索結果が1件以上存在したら、1件目の値を画面にセットする
        if (jsonData.length > 0) {
            disp.set('PREF' ,jsonData[0].prefCode); // disp.set(IOのコード, セットしたい値)で値をセット
            disp.set('CITY' ,jsonData[0].city);
            disp.set('TOWN' ,jsonData[0].town);
        } else {
            throw new Error('該当する住所がありません。');
        }
    })
    .catch(e => { alert(e.message); });
}

IO の構成

IO_SAMPLE は詳細モードで作成します。コピー元データモデルは「ADDRESS」にしましょう。
それぞれの項目は次のように設定します。

PREF のドロップダウン設定

PREF(都道府県)はドロップダウン形式にするため、行編集タブで下の図のように設定しておきます。

A_SEARCH の加工式設定

A_SEARCH(検索)の加工式には@EXT:EXT_ADDRESSのように設定します。これでボタンを押した時に拡張機能のEXT_ADDRESSが実行させるということになります。

アプリケーション生成

最後にアプリケーションである SAMPLE の所属入出力として IO_SAMPLE を指定してアプリケーション生成をします。

動作確認

まとめ

PostcodeJPなどの外部のサービスが利用できることがわかっていればになりますが、実装自体は30分程度でできました。

郵便番号の検索はデータの準備やメンテナンスが煩わしいため、システム開発上のポリシーが許す範囲で外イブのサービスを利用するという事も検討してはいかがでしょうか。WebPerformerではこのようにJavaScriptを使った拡張で外部のサービスを呼び出すという拡張性がありますので、柔軟に対応できます。