スポンサーリンク

【JavaScript】住所検索アプリの制作【ajaxzip3を利用】

post Code

ブラウザ上で動く住所検索アプリの制作です。
HTML/CSSとJavaScript特にjQueryを利用して作成する方法もあります。
今回は、もっと簡単に、もっとシンプルにGitHubで公開されているajaxzip3を使います。
郵便番号データのソースは郵便事業株式会社提供のデータを使用して、あえて手作業で更新してくれています。

ajaxzip3を利用することで得られるメリットがあります。

  • jQueryやprototype.jsが不要
  • 製作者サイドがWebAPIを呼び出したりする手間が省ける
  • なにせscript作業は1行
  • 常に最新版のデータにアクセスできる

body内の記述


日本の郵便番号の上3桁と下4桁を分けて入力するパターンです。

AjaxZip3.zip2addr('郵便番号上3桁', '郵便番号下4桁', '都道府県', 'それ以降')

の構成になっているそうです。
これ以外のパターン(7桁全て入力するとか)も、公式のページに掲載されています。
素晴らしいのは、数字を入力し終えると自動で結果が表示されます。
よくあるWebサービスだと、数字を入力して「検索」ボタンを押します。
あれがありません。

完成品→「住所けんさくアプリ」

CSSの記述


普通に組むだけなら、今回ここは不要です。
説明の文字のmarginをなくしているのと、フォントサイズの変更。
あとは、inputのボックスの背景色とサイズ変更程度です。

JavaScriptの記述

今回はajaxzip3に頼っています。
したがって、自分でJavaScriptを記述するものはありません。

検討事項

JavaScriptを組みます!
ってことを目的に、このBlogで紹介してきましたが、今回はとうとう肝心なJavaScriptを組まないという技に出てしまいました。
個人的に学習をする上だったり、Webサイト構築をするときに役に立つかなと思います。
が、高校の情報の授業としては使えませんね。
WebAPIを自分で呼び出して作成することも、もちろん可能です。
が、高校のプログラミング教育で求められているものは違いますね。
便利で有益なものを書こうとすると、ちょっと授業からは離れていってしまいます。
逆に言えば、授業で考え方や応用方法を教えていくことで、ajaxzip3のようなサービスを考える思考を身につけられたらいいんでしょうかね。

コメント

タイトルとURLをコピーしました