Address Collect term with ZIP api

Cxense is proud to welcome publishers and media companies in Japan, to a seminar at the Royal Norwegian Embassy in Tokyo on May 28th.

As the first Cxense Japan event in 2013 was a great success and attended by over 80 publishers and media contacts, we have decided to host another event this year.

The seminar will provide Cxense customers and contacts in the Japanese publishing world with valuable industry updates, and serve as a networking forum for media companies.

The seminar will feature two Cxense case studies with esteemed guest speakers from DMM.com Lab and MediaGene, as well as an industry update from Cxense's founder Dr. John M. Lervik, and an update and demo of the newly launched Cxense DMP solution by its Product Manager, Mr. Jan Helge Sageflaat coming in from Oslo, Norway, for the event.

As the first Cxense Japan event in 2013 was a great success and attended by over 80 publishers and media contacts, we have decided to host another event this year.

The seminar will provide Cxense customers and contacts in the Japanese publishing world with valuable industry updates, and serve as a networking forum for media companies.

Overview - Address Collect with ZIP API

プランによる住所収集時に郵便番号での入力補完機能実装について（Piano VX）を参照してください
Show Form アクションで住所入力フォームを表示し、郵便番号入力時に zipcloud API を叩いて都道府県・市区町村を自動補完します。
カスタムフィールド側の実装ではなく、テンプレートコードに差し込んだ MutationObserver + XMLHttpRequest で対応します。
外部 API (zipcloud) の SLA / rate limit は本番利用前に確認してください。

Procedure - Template

Piano Composerにログインする
[管理]=>[テンプレート]メニューから「Print address collect screen」を選択します。
コードを編集し、以下の zipcloud を利用した際の実装コード例をテンプレートの下に追加・保存します。
新しいバージョンとして保存した場合は、更新後のバージョンを配信します。
エラー処理・該当郵便番号がなかった際の処理等は適宜追加してください。
弊社提供のAPIではないため、利用するAPIの選定をして頂く必要があります。

<div custom-script>
/* 郵便番号を外部APIに送信することで都道府県・市区町村等のフォームを自動で埋める補助処理 */
const target = document.body;
const observer = new MutationObserver(function() {
  if (document.querySelector('#zipCode')) {
    observer.disconnect();
    document.querySelector('#zipCode').addEventListener('input', function (e) {
      if (e.target.value.length === 7) {
        let req = new XMLHttpRequest();
        req.open('GET', 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=' + e.target.value);
        req.onload = function (e) {
          if (req.readyState === 4) {
            if (req.status === 200 && req.responseText) {
              /**
               * example response(1000001)
               * {
               *   "message": null,
               *   "results": [
               *     {
               *       "address1": "東京都",
               *       "address2": "千代田区",
               *       "address3": "千代田",
               *       "kana1": "ﾄｳｷｮｳﾄ",
               *       "kana2": "ﾁﾖﾀﾞｸ",
               *       "kana3": "ﾁﾖﾀﾞ",
               *       "prefcode": "13",
               *       "zipcode": "1000001"
               *     }
               *   ],
               *   "status": 200
               * }
               */
              let json = JSON.parse(req.responseText);
              if (typeof json.results !== 'undefined' && json.results.length > 0) {
                let fixData = json.results[0];
                    document.querySelector('input[name=region]').value = fixData.address1;
                    document.querySelector('input[name=region]').dispatchEvent(new Event('input', { bubbles: true }));

                    document.querySelector('#city').value = fixData.address2;
                    document.querySelector('#city').dispatchEvent(new Event('input', { bubbles: true }));

                    document.querySelector('#address1').value = fixData.address3;
                    document.querySelector('#address1').dispatchEvent(new Event('input', { bubbles: true }));
              }
            } else {
              console.error(req.statusText);
            }
          }
        };
        req.send();
      }

    });
  }
});
const config = {
  attributes: true, subtree: true
};
observer.observe(target, config);
</div>