郵便番号検索機能の追加と利用
概要
マニュアルだけで郵便番号検索機能の追加と利用方法がわかりにくかったので手順を記載。
作業
- im-jugglingで郵便番号検索機能の追加
- テナント環境のセットアップ
- 郵便番号データのインポート
- ajaxを使った郵便番号検索機能の呼び出し
- imuiZipcodeDialogを使って検索ダイアログの表示
im-jugglingで郵便番号検索機能の追加
郵便番号検索機能を選択後、warを再作成してデプロイを行う。
テナント環境のセットアップ
システム管理者でログインし、テナント環境のセットアップを実行する。
※既にテナント環境をセットアップ済みでも途中で機能を追加する場合は再セットアップを実行する必要がある。
郵便番号データのインポート
以下のリンクから全国版の郵便番号データ（全国一括）をダウンロードする。
読み仮名データの促音・拗音を小書きで表記するもの - zip圧縮形式 日本郵便
テナント管理でintra-martにログインし、ファイル操作からダウンロードしたデータをアップロードする。
ルートディレクトリを選択し、ダウンロードした全国版のファイルをアップロードする。
アップロード完了後、ジョブネット設定より郵便番号のインポートジョブを実行する。
インポートを即時実行する。
※ファイル名の指定やクレンジングが必要な場合は以下のリンクを参考にパラメータを追加する。
4. 郵便番号データのインポート — 郵便番号検索（日本） 仕様書 初版 2014-08-01 intra-mart Accel Platform
ジョブネットモニターを確認し、インポートが正常終了していることを確認する。
ajaxを使った郵便番号検索機能の呼び出し
以下のjavascriptをIM-FormaDesignerのボタンイベントに設定する。
※パラメータの指定は下記リンクを参照
5. 郵便番号検索の利用方法 — 郵便番号検索（日本） 仕様書 初版 2014-08-01 intra-mart Accel Platform
$.ajax({ type: "GET", url: "api/zipcode/search?zipcode=901111", data: null, success: function(res){ alert(JSON.stringify(res)); } });
imuiZipcodeDialogを使って検索ダイアログの表示
IM-FormaDesignerで検索ダイアログを表示する場合、外部jsを事前にロードする必要があるためアクション設定の初期表示イベントか画面アイテムのスクリプトに下記のjavascriptを設定する。
$.getScript("im_zipcode/csjs/im_zipcode.js");
$(document.body).append($('<div id="zipcode-dialog"></div>'));
ボタンイベントに以下のjavascriptを設定する。
検索ダイアログの決定ボタン押下時に自動的にダイアログが閉じないのでcloseを個別に書く必要あり。
検索ダイアログで選択した住所はcallbackの第二引数[data]で参照可能。
詳細は以下のリンクを参照。
intra-mart Accel Platform Client Side JavaScript API - jQuery.imui.imuiZipcodeDialog
$('#zipcode-dialog').imuiZipcodeDialog({
callback : function(e, data) {
alert(JSON.stringify(data));
$(this).imuiZipcodeDialog("close");
}
});
ブログというか備忘録用の記事
備忘録用に残すための記事を書いていきます。
