郵便局のホームページで配布している郵便番号データを元に、DataMarinaを用いて検索ページを作る方法を説明します。
データの作成・流れは次のようになっています。
まず郵便局から郵便番号データをダウンロードします。CSV形式のデータをダウンロードします。 これは上記の概要の「CSVファイル」にあたります。
データは http://www.post.japanpost.jp/zipcode/download.html からダウンロードすることができますが、 整理された状態ではないため 住所.jp(http://jusyo.jp/)さんのホームページから整理されたデータをダウンロードすることも可能です。
なお、本ホームページで使用しているデータは2016年9月20日前後のものであり、最新のデータではありませんのでご注意ください。
郵便番号の元データは14万8717レコードあり、CSVデータでも30メガバイトの大容量データです。
次のPDFファイルでその一部を切り取ったもの(最初と最後の部分)を見ることができます。
ご覧いただけばわかる通り、郵便番号データは横にも23列あります。
今回のサンプルでは3つの種類の検索を行います。
Jet検索とCruise検索を行うには、元データにあるような23もの列は必要ありません。 これらの列の多くは検索や表示の際に不要であるため、列をいくつか削除・結合する必要があります。
たとえば「住所(漢字)」の検索を行う場合、「北海道」「札幌市中央区」「大通西」「1丁目」のように列が分かれているよりも「北海道札幌市中央区大通西1丁目」のように一つにまとまっていた方が検索がしやすくなります。
そこで、データを整理して「郵便番号、住所(漢字)、住所(カナ)」の3列にまとめたものが次のようなデータになります。
Surf検索はいわゆるツリー検索を行います。そのためには、データが列ごとに大分類→中分類→小分類→・・・のように分類・整理されている必要があります。 郵便番号元データは幸い都道府県→市区町村→番地→丁目のように列が分かれているため、元データを利用することができます。 ただし、元データでは1行目に列の説明のためのヘッダがあるので、これは削除しておきます。
次のPDFファイルの黄色い列がSurf検索に利用する列です。法人名なども検索する場合には、青色の列も利用することも可能ですが、ここでは黄色い列にとどめます。
なお、サーフ検索をした後に検索結果として表示する列は、赤列(郵便番号)+黄列(住所「漢字」)+緑列(住所「カナ」)になります。
検索用データの作成には「検索用データ作成プログラム(仮称・非公開)」を用います。データの作成のためにプログラムに次のような情報を入力するとデータが作成されます。
列や行を整理した郵便番号データファイルを入力ファイルとします。
Jet,Cruise,Surf検索のうち、どの検索を行うかを指定します。
Jet,Cruise,Surf検索それぞれで検索に使う列を指定します。
検索用データ作成プログラムによって、一つのフォルダに検索用のデータが出力されます。 Jet,Cruise,Surfの検索用データはそれぞれ別々のフォルダにすることも、一つのフォルダにまとめることもできます。
検索用データは、ホームページ上の一つのフォルダ(ネットワークからアクセス可能なフォルダ)にアップロードします。
「ネットワークからアクセス可能」とは、検索を一般のインターネットから行うのであれば、インターネットからアクセスできるフォルダ、 検索を社内ネットワークなどからのみ行うのであれば、社内ネットワークからアクセスできて、インターネットからはアクセスできないフォルダ、などになります。
郵便番号検索用ホームページを作るために必要なものは、次の通りです。
すでにあるページに組み込むこともできますし、新しくページを作ることもできます。
もちろんデザインを既存のものに合わせることもできます。
表示用プログラムはJavaScriptで記述します。
Jet,Cruise,Surf検索のそれぞれに表示用プログラムが必要です。
たとえば、ページの中にJet,Cruise検索だけを組み込む場合には、Jet,Cruise用の表示用プログラムだけが必要です。
検索用ページとは、ユーザーがデータ検索のために文字などを入力して、その検索結果を表示するページです。
検索用ページの中に必要な項目は次の通りです。
文字入力欄をたとえば次のように作成します。Jet検索では、完全一致検索なので、文字列を一つ入力できるようにします。
文字入力欄をたとえば次のように作成します。Cruise検索では複数の入力のAND検索をすることができます。
Surf検索では、2段階の記述が必要です。
ページがロードされたときに表示をするためにたとえばbodyのonloadイベントに表示関数を設定します。
ツリー選択履歴リスト表示欄(通称パンくずリスト)と選択データ表示欄の表示用のタグなどを指定します。
例えば次のような表示設定ができます。
たとえば次のようにタグを設定し、Jet検索の結果出力欄をJ_OUTPUT
と指定します。
<div id="J_OUTPUT"></div>
すると、次のような表が該当場所に表示されます(表のデザインなどは表示用プログラムで指定)。
番号 | 郵便番号 | 住所(漢字) | 住所(カナ) |
---|---|---|---|
1 | 1000001 | 東京都千代田区千代田 | トウキョウトチヨダクチヨダ |
検索結果出力欄
たとえば次のように、Cruise検索のプログレスバーの出力先としてC_PROGRESS
、結果の出力先としてC_OUTPUT
を指定すると
プログレスバーと結果がそれぞれ該当箇所に表示されます。
<div id="C_PROGRESS">
<div id="C_OUTPUT">
プログレスバー出力欄
検索結果出力欄
番号 | |||
---|---|---|---|
1 | 0970005 | 北海道稚内市大黒 | ホッカイドウワッカナイシダイコク |
2 | 0986572 | 北海道稚内市声問村開進 | ホッカイドウワッカナイシコエトイムラカイシン |
3 | 0986576 | 北海道稚内市声問村川南 | ホッカイドウワッカナイシコエトイムラカワミナミ |
4 | 0970024 | 北海道稚内市宝来 | ホッカイドウワッカナイシホウライ |
5 | 0986758 | 北海道稚内市宗谷岬 | ホッカイドウワッカナイシソウヤミサキ |
6 | 0978527 | 北海道稚内市末広稚内開発建設部 | ホッカイドウワッカナイシスエヒロワツカナイカイハツケンセツブ |
7 | 0970022 | 北海道稚内市中央 | ホッカイドウワッカナイシチュウオウ |
8 | 0978555 | 北海道稚内市中央市立稚内病院 | ホッカイドウワッカナイシチュウオウシリツワツカナイビヨウイン |
9 | 0986564 | 北海道稚内市声問村川西 | ホッカイドウワッカナイシコエトイムラカワニシ |
10 | 0978585 | 北海道稚内市末広稚内土木現業所 | ホッカイドウワッカナイシスエヒロワツカナイドボクゲンギヨウシヨ |
次のようにタグを設定しSurf検索の出力先としてS_OUTPUT
を指定すると結果が出力されます。
s-history
は選択履歴(通称パンくずリスト)、s-select
は選択欄としてします。
<div id="s-history"></div> <div id="s-select"></div> <div id="S_OUTPUT">
検索結果出力欄
番号 | 郵便番号 | 住所(漢字) | 住所(カナ) |
---|---|---|---|
1 | 060-8640 | 北海道札幌市中央区大通西 | ホッカイドウサッポロシチュウオウクオオドオリニシ |
2 | 060-8523 | 北海道札幌市中央区大通西 | ホッカイドウサッポロシチュウオウクオオドオリニシ |
3 | 060-8627 | 北海道札幌市中央区大通西 | ホッカイドウサッポロシチュウオウクオオドオリニシ |
4 | 060-8670 | 北海道札幌市中央区大通西 | ホッカイドウサッポロシチュウオウクオオドオリニシ |
5 | 060-8776 | 北海道札幌市中央区大通西 | ホッカイドウサッポロシチュウオウクオオドオリニシ |
6 | 060-8530 | 北海道札幌市中央区大通西 | ホッカイドウサッポロシチュウオウクオオドオリニシ |
7 | 060-8624 | 北海道札幌市中央区大通西 | ホッカイドウサッポロシチュウオウクオオドオリニシ |
8 | 060-8581 | 北海道札幌市中央区大通西 | ホッカイドウサッポロシチュウオウクオオドオリニシ |
9 | 064-8581 | 北海道札幌市中央区大通西 | ホッカイドウサッポロシチュウオウクオオドオリニシ |
10 | 060-8620 | 北海道札幌市中央区大通西 | ホッカイドウサッポロシチュウオウクオオドオリニシ |
検索設定ファイルは,Jet検索、Cruise検索、Surf検索でそれぞれ必要です。
たとえば次のような内容を設定します。(これ以外にも設定項目があります。)
要素 | 内容 |
---|---|
結果表示行数 | 検索結果を1ページ当たり何行表示するか。 |
選択履歴リスト名 | HTML内のID名を指定する。 |
検索結果名 | HTML内のIDを指定する。 |
結果表の列タイトルリスト | 結果の表の列の最上部のタイトルのリスト |
表表示用のカスタム関数 | カスタム関数名 |
ページャー表示用のカスタム関数 | カスタム関数名 |
実際の検索ページは郵便番号検索サンプルをご覧ください。