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

エヌデーデーの関口です。今回は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キー数
Free無料384 回/日0.3 回/秒最大10 個
Small980円/月1,200 回/日無制限最大10個
Mid1,400円/月3,400 回/日無制限最大10個
Large2,400円/月16,000 回/日無制限最大10個
Standard1,980円/月無制限2.3 回/秒最大10個
Pro3,400円/月無制限無制限最大10個

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

DMの構成

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

項目コード名前NULL可キーグループ桁数データタイプ
PREF都道府県コード不可12CODE
PREF_NAME都道府県不可05TEXT

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

PREFPREF_NAME
01北海道
02青森県
03岩手県
・・・・・

住所登録用のDM(ADDRESS)

項目コード名前NULL可キーグループ桁数データタイプ
IDID不可13CODE
ZIP_CODE郵便番号不可07CODE
PREF都道府県不可02CODE
CITY市区町村不可030TEXT
TOWN番地不可030TEXT
BUILDING建物030TEXT

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

拡張の構成

拡張定義ファイル(EXT)

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

コード名前タイプ
EXT_ADDRESS住所検索IOACT 入出力アクション拡張

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

キー
impl 実装コードgetAddress

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」にしましょう。
それぞれの項目は次のように設定します。

項目タイプ項目コード名前データモデルコードデータモデル項目コード
IOIDIDADDRESSID
IOZIP_CODE郵便番号ADDRESSZIP_CODE
AA_SEARCH検索
IOPREF都道府県ADDRESSPREF
IOCITY市区町村ADDRESSCITY
IOTOWN番地ADDRESSTOWN
IOBUILDING建物ADDRESSBUILDING

PREF のドロップダウン設定

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

A_SEARCH の加工式設定

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

アプリケーション生成

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

動作確認

まとめ

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

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