ブラウザ上で動く住所検索アプリの制作です。
HTML/CSSとJavaScript特にjQueryを利用して作成する方法もあります。
今回は、もっと簡単に、もっとシンプルにGitHubで公開されているajaxzip3を使います。
郵便番号データのソースは郵便事業株式会社提供のデータを使用して、あえて手作業で更新してくれています。
ajaxzip3を利用することで得られるメリットがあります。
- jQueryやprototype.jsが不要
- 製作者サイドがWebAPIを呼び出したりする手間が省ける
- なにせscript作業は１行
- 常に最新版のデータにアクセスできる
body内の記述
日本の郵便番号の上３桁と下４桁を分けて入力するパターンです。
AjaxZip3.zip2addr('郵便番号上３桁', '郵便番号下４桁', '都道府県', 'それ以降')
の構成になっているそうです。
これ以外のパターン（７桁全て入力するとか）も、公式のページに掲載されています。
素晴らしいのは、数字を入力し終えると自動で結果が表示されます。
よくあるWebサービスだと、数字を入力して「検索」ボタンを押します。
あれがありません。
完成品→「住所けんさくアプリ」
CSSの記述
普通に組むだけなら、今回ここは不要です。
説明の文字のmarginをなくしているのと、フォントサイズの変更。
あとは、inputのボックスの背景色とサイズ変更程度です。
JavaScriptの記述
今回はajaxzip3に頼っています。
したがって、自分でJavaScriptを記述するものはありません。
検討事項
JavaScriptを組みます！
ってことを目的に、このBlogで紹介してきましたが、今回はとうとう肝心なJavaScriptを組まないという技に出てしまいました。
個人的に学習をする上だったり、Webサイト構築をするときに役に立つかなと思います。
が、高校の情報の授業としては使えませんね。
WebAPIを自分で呼び出して作成することも、もちろん可能です。
が、高校のプログラミング教育で求められているものは違いますね。
便利で有益なものを書こうとすると、ちょっと授業からは離れていってしまいます。
逆に言えば、授業で考え方や応用方法を教えていくことで、ajaxzip3のようなサービスを考える思考を身につけられたらいいんでしょうかね。
コメント