郵便番号・住所検索API Ver 1.0 マニュアル

サイトへの組み込み

郵便番号と住所のデータベース構築が完了したら、次に本 CGI を利用するフォームのページにタグを貼り付けて頂く必要があります。管理メニューの上にある「サイトへの組み込み」を使うと、簡単に貼り付けるタグを確認することができます。

このボタンは青の背景に白で「サイトへの組込」と書かれています。

「サイトへの組み込み」をクリックするとサイトへ組み込むためのタグを生成するフォームが表示されます。画面の説明に従って処理を進めてください。

手順1:フォームのロード

本 CGI を組み込みたいページの URL を入力することで、該当のフォームの HTML を解析して、入力フォームにあるテキスト入力フィールドの候補を取り出します。次の手順2において、入力の手間を省くことができます。

フォーム URL 入力欄には、URL を入力するためのテキスト入力フィールド、そしてロード・ボタンがあります。ロード・ボタンの右には「待機中」と表示されています。

図:フォーム URL 入力欄

指定可能なページの URL は、本 CGI が設置されたドメインまでは完全に同じでなければいけません。つまり、本 CGI が設置されたサイトとは異なるサイトの URL を指定することはできませんので注意してください。

この手順は必須ではありません。本CGIが設置されたドメインとは異なるフォームでご利用の場合は、手順2へ進めてください。

手順2:組込タグの生成

組み込みタグを生成するためには、該当の入力フォームの情報を定義しなければいけません。フォームの文字コードや郵便番号を入力するためのテキスト入力フィールドの情報、そして、郵便番号から住所を検索した後に、その検索結果となる住所情報を差し込むためのテキスト入力フィールドの name 属性値の指定、そして、郵便番号から住所を検索する際のオプション情報です。

フォームの情報

フォーム情報設定欄には、ページの文字コードを選択するためのラジオボタンが 3 つ用意されています。それぞれの選択項目は、UTF-8、Shift_JIS、EUC-JP です。さらに、この設定欄には、郵便番号の入力欄のタイプを選択するためのラジオボタンが 3 つ用意されています。それぞれの選択項目は「7 桁ハイフン付き」、「7 桁ハイフンなし」、「上 3 桁と下 4 桁に分離」です。

図:フォーム情報設定欄

フォームの HTML の文字コードを UTF-8、Shift_JIS、EUC-JP のいずれかから選択してください。手順1でフォームをロードしている場合は、自動的に文字コードが認識され、事前にチェックが入っているはずです。

ご利用のフォームの郵便番号の入力欄のタイプを選択してください。本 CGI が対応しているタイプは、郵便番号をハイフン込みで 1 つの入力欄に入力するタイプ、郵便番号をハイフン無しで 1 つの入力欄に入力するタイプ、そして、郵便番号を上 3 桁と下 4 桁の 2 つの入力欄に分離されたタイプです。郵便番号を全角で入力するのか半角で入力するのかについては、ここでは考慮する必要はありません。

入力欄の name 属性

入力欄の name 属性設定欄には、input 要素の name 属性値を指定するためのセレクトメニューが用意されています。これらのセレクトメニューは、郵便番号、都道府県、市区町村、町域名、番地、会社名、住所検索ボタンのぞれぞれに用意されています。

図:name 属性指定欄

フォームの郵便番号や住所入力欄の input 要素の name 属性の値を指定してください。ここでは、本システムがセット可能なすべての値が列挙されています。不要な値は空欄にしてください。

ひとつの入力欄に複数の種類の値をセットしたい場合は、該当の入力欄の input 要素の name 属性値をそれぞれの箇所に指定してください。例えば、<input type="text" name="addr" /> とマークアップされた入力欄に、都道府県、市区町村、町域名のすべてをセットしたい場合は、下記の都道府県、市区町村、町域名の漢字のすべてに addr を指定します。住所が選択されたときに該当の入力欄には、例えば 東京都新宿区西新宿 がセットされます。

例 1

たとえば、次のように 1 つの郵便番号の入力欄(name 属性の値が zcinput 要素)、そして、1 つの住所入力欄(name 属性の値が addrinput 要素)があったとしましょう。

<p><label>郵便番号 <input type="text" name="zc" /></label></p>
<p><label>住所 <input type="text" name="addr" /></label></p>
マークアップ例

郵便番号と住所を入力するテキスト入力フィールドが 2 つあります。

レンダリング例

この住所欄に都道府県、市区町村、町域名をまとめてセットしたい場合は、次のようにセットします。

name 属性指定欄では、郵便番号に対するセレクトメニューは zc が、都道府県、市区町村、町域名に対するセレクトメニューは addr が選択された状態です。それ以外のセレクトメニューは未選択の状態です。

name 属性指定例

このように、郵便番号には zc を、都道府県、市区町村、町域名にはいずれにも addr をセットします。この場合は、郵便番号入力欄に入力があると、途中までの入力だとしても、リアルタイムに検索結果が入力欄の直下に現れることになります。

郵便番号のテキスト入力フィールドには 123 がセットされ、その直下に、検索された住所の一覧が表示されたウィンドウが表示されています。このウィンドウには 10 件の住所が表示されており、その一番上の住所にフォーカスが当たっています。このフォーカスが当たった住所は「〒123-0841:東京都足立区西新井」です。

レンダリング例

検索結果から住所を選択すると、郵便号欄には選択した郵便番号が、住所欄には選択した住所がセットされることになります。

郵便番号のテキスト入力フィールドには「123-0841」が、住所のテキスト入力フィールドには「東京都足立区西新井」がセットされています。

レンダリング例
例 2

先ほどの例に加え、もし郵便番号入力欄の隣に button 要素を使って住所検索ボタンを用意したとしましょう。

<p>
  <label>郵便番号 <input type="text" name="zc" /></label>
  <button type="button" name="btn">住所検索</button>
</p> <p><label>住所 <input type="text" name="addr" /></label></p>
マークアップ例

郵便番号と住所を入力するテキスト入力フィールドが 2 つあります。郵便番号を入力するテキストフィールドの右には「住所検索」と表示されたボタンがひとつあります。

レンダリング例

この住所欄に都道府県、市区町村、町域名をまとめてセットしたい場合は、次のようにセットします。加えて、住所検索ボタン欄には、button 要素の name 属性を指定します。

name 属性指定欄では、郵便番号に対するセレクトメニューは zc が、都道府県、市区町村、町域名に対するセレクトメニューは addr が選択された状態です。さらに住所検索ボタンに対するセレクトメニューは btn が選択された状態です。それ以外のセレクトメニューは未選択の状態です。

図:name 属性指定例

このように、郵便番号には zc を、都道府県、市区町村、町域名にはいずれにも addr を、住所検索ボタン欄には btn をセットします。この場合は、住所検索ボタンを押した時点で、検索結果が表示されることになります。

郵便番号のテキスト入力フィールドには 123 がセットされています。その右にある住所検索ボタンのさらに右に、検索された住所の一覧が表示されたウィンドウが表示されています。このウィンドウには 10 件の住所が表示されており、その一番上の住所にフォーカスが当たっています。このフォーカスが当たった住所は「〒123-0841:東京都足立区西新井」です。

レンダリング例

検索結果から住所を選択すると、郵便号欄には選択した郵便番号が、住所欄には選択した住所がセットされることになります。

郵便番号のテキスト入力フィールドには「123-0841」が、住所のテキスト入力フィールドには「東京都足立区西新井」がセットされています。

レンダリング例

住所検索結果

住所検索結果表示の子ウィンドウには、5 件の住所が表示されています。表示件数が少なくなった分だけ、ウィンドウの縦幅が小さくなっています。

図:住所検索結果指定欄

「表示件数」欄には、住所検索結果ボックスに表示するレコードの数を指定してください。デフォルトでは 10 件となっています。次の図は、表示件数を 5 にセットした場合の検索結果表示ウィンドウです。

図:表示件数を 5 件にした場合の検索結果表示ウィンドウ

「郵便番号の全角・半角」欄には、郵便番号入力フィールドにセットする郵便番号を半角でセットするのか全角でセットするのかを指定してください。

「住所のカタカナの扱い」欄には、検索結果が選択され、その住所がテキスト入力フィールドにセットされる際に、カタカナを半角にするのか全角にするのかを指定してください。デフォルトは「全角」です。

「住所の英数字の扱い」欄には、検索結果が選択され、その住所がテキスト入力フィールドにセットされる際に、英数字を半角にするのか全角にするのかを指定してください。デフォルトは「全角」です。

以上の指定が終わったら「生成」ボタンを押してください。引き続き手順 3 に進んでください。

手順3:組込タグの貼り付け

手順 2 によって「生成」ボタンが押されると、組込タグ表示欄に、タグが表示されます。

組込タグ表示欄には 1 つのテキストエリアがあります。このテキストエリアの中に、組込タグが表示されています。

図:組込タグ表示欄

このタグを、フォームの HTML に貼り付けてください。貼り付ける場所は、head 要素の中、または、body 要素の終了タグ(</body>)の直前のいずれかです。

サーバーの負荷低減

このタグは、貼り付けるだけで簡単にご利用頂けますが、動的にスクリプト・ファイルが生成されます。もしサーバーの負荷が気になるようでしたら、スクリプト・ファイルをダウンロードしてご利用ください。

組込タグが生成されると、画面下にスクリプト・ファイルのダウンロード・リンクが表示されます。もし、そのリンクをクリックしたときに、スクリプト・ファイルの中身がブラウザーに表示されてしまう場合は、ダウンロード・リンクを右クリックして対象のファイルに名前を付けてダウンロードしてください。ブラウザー画面に表示されてしまったソースコードをコピーしても正しく動作しませんのでご注意ください。

ダウンロードしたスクリプト・ファイルをウェブサーバーにアップロードして、そのファイルがフォームのページにロードされるよう、フォームのページに script 要素を記述してください。

たとえば、ダウンロードしたスクリプト・ファイルを zip.js という名前にして、フォームの HTML と同じ場所にアップロードしたとすれば、次のような script 要素をフォーム HTML に埋め込みます。

<script type="text/javascript" src="zip.js"></script>
script 要素のマークアップ例