PowerCMS ブログ

PowerCMSのコンタクトフォームに、郵便番号から住所を自動入力する機能をつけたい場合、郵便番号から住所検索を行うAPI等を利用してJavaScriptで実装する方法がありますが、ライセンスなどの関係で自前で機能を実装したい時、PowerCMSのカスタムオブジェクト(カスタム項目)を利用することで簡単に実現が可能です(僅か15分で実装できます!)。

カスタムオブジェクト(カスタム項目)を作成する

システムメニュー → ツール → カスタム項目作成画面( /mt/mt.cgi?__mode=create_customobject&blog_id=0 )で「PostalCode(日本語名:郵便番号)」カスタム項目を作成します。

日本郵便のサイトからCSVをダウンロードする

以下のページからダウンロードできます。全国一括を選択すればよいでしょう。

• 読み仮名データの促音・拗音を小書きで表記するもの - zip圧縮形式 日本郵便

CSVをインポート用のCSVに整形して、インポートする

この記事の例では、郵便番号と住所、という単純な形式とします(都道府県とそれ以下の情報は連結します)。

• Excel等で必要なセルのみ残して不要な欄は削除します。
• テキストエディタで置換します。「,」を一括置換で削除してから、郵便番号と住所を再度カンマで区切ります。
• 先頭に name,body と入力します。
• この状態でCSVを保存してから、ファイルを適当に分割します(全国一括のデータは12万件程度なので、インポートのタイムアウトを避けるために2〜3ファイルに分割するのがよいでしょう)。
• ウェブサイトの 郵便番号→一覧画面からインポートします。

PHPで郵便番号を検索するコードを用意する

インデックス・テンプレート「zipsearch.html」を用意します(DynamicMTMLが有効で、html内のPHPコードがDynamicMTMLで処理できる設定である必要があります)。

<?php
    global $app;
    $q = $app->param( 'q' );
    $q = $app->db()->escape( $q );
    $q = preg_replace( '/[^0-9]/', '', $q );
    if ( $q ) {
        $terms = array( 'name' => $q,
                        'class' => 'postalcode' );
        $extra = array( 'limit' => 1 ); 
        $postalcode = $app->load( 'CustomObject', $terms, $extra );
        if ( $postalcode ) {
            $arr = array( 'zipcode' => $postalcode->name,
                          'address' => $postalcode->body,
                          'status' => '200' );
        } else {
            $arr = array( 'zipcode' => $q,
                          'address' => '',
                          'status' => '404' );
        }
        $json = json_encode( $arr );
        $app->send_http_header( 'application/json; charset=UTF-8', time(), strlen( $json ) );
        echo $json;
        exit();
    }
?>

検索結果を確認する

/zipsearch.html?q=541-0047 のようなURLでアクセスし、以下のJSONが返ってくることを確認します。

{"zipcode":"5410047","address":"\u5927\u962a\u5e9c\u5927\u962a\u5e02\u4e2d\u592e\u533a\u6de1\u8def\u753a","status":"200"}

フォーム項目を作成し、テンプレートをカスタマイズする

フォーム項目 郵便番号(種類:郵便番号、ベースネーム:zipcode)と 住所(種類:テキスト、ベースネーム address)を作成して、フォームにドラッグ＆ドロップで追加します。フォーム項目「郵便番号」のテンプレートをカスタマイズします(初期段階で表示されるinput要素のところ)。

...
    <mt:else>
        <input type="text" class="contact-form-text-full" name="<mt:var name="field_basename">" id="<mt:var name="field_basename">" value="<mt:var name="field_default" escape="html">" onblur='javascript:zip2address( this.value )' />
<script type="text/javascript">
function zip2address ( val ) {
    jQuery.getJSON('<mt:BlogUrl>zipsearch.html?q=' + val, function (zip_json) {
    if ( zip_json.status == 200 ) {
        jQuery('input[name="address"]').val(zip_json.address);
    }
});
}
</script>
    </mt:else>
...

カスタマイズが完了したら、フォームページを再構築してください。

動作を確認する

この例では、郵便番号欄に郵便番号を入力し、フォーカスが外れた時に住所欄に検索された住所が入力されます。

住所検索ボタンを付ける、より細かな例外処理を行う、メンテナンスをどのように行うか、等の課題はありますが、郵便番号からの住所検索がとても簡単に実装できることがおわかりいただけると思います。