今回、なでしこで作るのは、「住所入力フォーム」です。ネット通販やカタログの請求など、住所を入力する機会は多くあります。多くのWebサイトでは、郵便番号を入力すると、自動的に住所のほとんどが自動入力される仕組みになっています。今回は、郵便番号の自動入力の仕組みを作ってみましょう。

  • 住所入力フォームを自動化するプログラム

    住所入力フォームを自動化するプログラム

郵便番号データはオープンで公開されている

実は、郵便番号から住所を取得するのは、それほど大変なことではありません。というのも、郵便局のWebサイトで、郵便番号のデータをダウンロードすることができるようになっているからです。

  • 郵便番号情報は自由に利用できるオープンデータ

    郵便番号情報は自由に利用できるオープンデータ

そのため、ここで公開されている郵便番号データを利用すれば、番号から住所を導き出すのはそれほど難しいものではありません。しかし、郵便番号のデータはそれなりに大きなデータです。そこで、今回は、郵便番号データを送信すると、住所データを返送してくれる、郵便番号APIを使ってみましょう。

郵便番号APIを使ってみよう

郵便番号のデータがオープンであることから、いろいろな郵便番号検索APIが存在しますが、ここで利用するのは、筆者が趣味で公開している「クジラ郵便番号API」です。既に、さまざまな書籍やWeb連載でサンプルとして紹介しているので、仕様があまり変わらないことが、メリットの一つです。

使い方は単純で以下のような形式でアクセスすると、住所情報をJSON形式で返します。

 [APIのURL]
 https://api.aoikujira.com/zip/zip.php?fmt=json&zn=(郵便番号)

例えば、郵便番号「105-0011」から住所を調べてみましょう。これは、東京タワーのある東京都港区芝公園の住所ですが、正しく郵便番号から住所を調べることができるでしょうか。「なでしこ3簡易エディタ」にアクセスしたら、以下のようなプログラムを入力して、実行してみましょう。

 ZIP=「105-0011」
 API=「https://api.aoikujira.com/zip/zip.php?fmt=json&zn={ZIP}」
 APIへGET送信した時には
     J=対象をJSONデコード
     J["result"]を表示。
 ここまで。

簡易エディタの[実行]ボタンを押すと、以下のように表示されます。

  • 郵便番号APIを使って見たところ

    郵便番号APIを使って見たところ

プログラムの一行目、変数ZIPの値を変更して、いろいろ実行してみてください。実行結果として表示される住所が変わることが確認できるでしょう。

次に、プログラムの三行目に注目してみましょう。郵便番号APIのURLにアクセスし、値を得るには「GET送信した時」命令を使うことができます。この命令によって、指定のURLにアクセスを実行します。

ただし、APIの結果がすぐに得られる訳ではなく、プログラムを実行した少し後で得られます。そのため、「... には ... ここまで」構文を使うことで、手軽にAPIの結果を取得できる仕組みになっています。

『GET送信した時』を実行して得られる結果は変数『対象』に入ることになっているので、それを参照します。郵便番号APIでは、JSON形式の文字列が結果として得られるので、四行目にあるように『JSONデコード』命令を使うと、なでしこのオブジェクトとしてデータを手軽に取り出すことができます。

郵便番号APIで得られるパラメータ

郵便番号APIでは、郵便番号に相当する住所全部を返すresultパラメータの他に、都道府県を表すstate、市区を表すcity、それ以降の住所を示すaddressパラメータなどを得ることができます。

以下のプログラムを実行すると、取得出来るパラメータの一覧を表示します。

 ZIP=「105-0011」
 API=「https://api.aoikujira.com/zip/zip.php?fmt=json&zn={ZIP}」
 APIへGET送信した時には
     J=対象をJSONデコード
     Jを反復
         「{対象キー}={対象}」を表示。
     ここまで。
 ここまで。

以下は、実際に実行して見たところです。

  • 郵便番号APIで取得できるパラメータの一覧

    郵便番号APIで取得できるパラメータの一覧

住所入力フォームを作ってみよう

ここまで分かれば、郵便番号から住所の自動入力のプログラムを作る準備が整ったと言えます。実際には、HTMLへ組み込んで使うことになりますが、プログラムの動きを確かめるために、なでしこ簡易エディタを使って住所入力フォームを作ってみましょう。

  API=「https://api.aoikujira.com/zip/zip.php?fmt=json&zn=」
  # --- 住所入力フォーム --- (*1)
  FORM=『
  <style> .nako3 { background-color: #f0f0f0; } </style>
  <div class="nako3"><form>
    <div>郵便番号:<br><input id="zip" value="105-0011">
      <input type="button" id="auto_btn" value="自動入力">
    </div>
    <div>住所<br><input id="addr" size="40"></div>
    <div><input type="submit" value="送信"></div>
  </form></div>
  』
  「#nako3_div_1」にFORMをHTML設定。

  # --- フォームにイベントを設定 --- (*2)
  「#auto_btn」をクリックした時には
      V=「#zip」のテキスト取得
      「{API}{V}」へGET送信した時には
          Ｊ＝対象をJSONデコード。
          「#addr」にＪ["result"]をテキスト設定。
      ここまで。
  ここまで。

簡易エディタにプログラムを書き込んで、実行ボタンを押すと、住所入力フォームが表示されます。そこで、郵便番号を記入して「自動入力」ボタンをクリックすると、住所項目が自動で入力されます。

  • 住所入力フォームを作ったところ

    住所入力フォームを作ったところ

HTMLに組み込む方法

それでは、試作が完成したので、HTMLを完成させましょう。以下のプログラムを、テキストエディタに記入してファイルを保存します。そして、Webサーバにアップロードすると、プログラムを動かすことができます。

<!DOCTYPE html><html><meta charset="UTF-8"><body>

<!-- (*1) なでしこを使うために必要 -->
<script type="text/javascript" src="https://nadesi.com/v3/3.0.41/release/wnako3.js?run" defer></script>

<!-- (*2) 住所入力フォーム -->
<style> #addr_form { background-color: #f0f0f0; } </style>
<div id="addr_form"><form>
  <div>郵便番号:<br><input id="zip" value="105-0011">
    <input type="button" id="auto_btn" value="">
  </div>
  <div>住所<br><input id="addr" size="40"></div>
  <div><input type="submit" value="送信"></div>
</form></div>

<!-- (*3) プログラム -->
<script type="なでしこ">
API=「https://api.aoikujira.com/zip/zip.php?fmt=json&zn=」
「#auto_btn」に「自動入力」をテキスト設定。
「#auto_btn」をクリックした時には
    V=「#zip」のテキスト取得
    「{API}{V}」へGET送信した時には
        Ｊ＝対象をJSONデコード。
        「#addr」にＪ["result"]をテキスト設定。
    ここまで。
ここまで。
</script>
</body></html>

HTMLファイルをブラウザにドロップしただけで動く場合もありますがセキュリティの制約があるため動かすことができない環境もあります。Webサーバーにアップロードすると環境に依らず動作します。

  • サーバーにアップすると動かすことができます

    サーバーにアップすると動かすことができます

このHTMLファイルですが、＜script＞タグを記述して、なでしこのプログラムを動かすことができるようにしています。(＊1)の部分では、なでしこを動かすために必要なライブラリをリンクし、(＊2)の部分では、HTMLで住所入力フォームを記述します。そして、(＊3)の部分に、なでしこのプログラムを記述します。なでしこのプログラム自体は、先ほど試作で作った物とほとんど同じです。

まとめ

以上、今回は、郵便番号APIを使って、住所入力を自動化するプログラムを作ってみました。HTML部分を除けば、わずか9行のプログラムで、郵便番号から住所を自動入力するプログラムを作ることができました。今では、さまざまなWeb APIが公開されています。JavaScriptに対応したAPIであれば、なでしこ3から利用することができます。住所以外にもいろいろと応用できると思いますので、参考にしてみてください。