2015年6月14日日曜日

Laravel5と郵便番号用ajaxのajaxzip3.js

Laravel5でちょっとしたWebシステムを開発することになった。ちなみに、2014年10月ごろにはLaravel4でWebシステムを開発した。Laravel4とLaravel5はフォルダの配置とデフォルトの設定が随分変わったので、最初かなり戸惑った。
 それはさて置き、 ajaxzip3.jsと郵便番号の話です。フォームに郵便番号を入れると住所欄に住所が入るWEBページがよくあります。自分で作らなければいけないと思い、日本郵便のページから郵便番号のファイルをダウンロードして、簡単なプログラムを書いて、郵便番号のデータをMySQLに取り込んだ。

<2015/6/14追加>
Google Codeがサービス廃止になり、Githubに移行したそうです。私のページも動かなくなったので驚きましたが、理由が分かれば、安心。
Github移行を機にこれまでhttp、httpsで分かれていたURLを一本化したそうです。
今後は、https://ajaxzip3.github.io/ajaxzip3.js に成ります。(http://でも使えるみたいですが、基本はhttps://です。)
今までは、http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js だった。下記の部分もこの部分は読み替えてください。書き換えてください。

その後Javascriptの見本が見たくて、Googleで検索したら、ajaxzip3 と言う、驚異的なページを見つけてしまった。  ajaxzip3.jsを使えば、もう自分で郵便番号を用意する必要はない。ホームページに書くコードも至極簡単だ。ヘッダーの中で下記:
http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.jsを読み込み。
本文のフォームの中に下記のように書く(私が書いたコードで、余分に、class="eisu"とtype="tel"で英数字化、placeholder="453"でグレーの初期値表示、onKeyPress="return submitStop(event)で改行キーでの送信の拒否、を入れている)。データベースを3桁4桁にしているので、入力用フォームも3桁4桁に分けている。
<td>
<input class="eisu" maxlength="3" placeholder="453" onKeyPress="return submitStop(event);" name="zip21" type="tel" value="">
</td><td>
<input class="eisu" maxlength="4" placeholder="0042" onKeyUp="AjaxZip3.zip2addr(zip21,zip22,addr21,addr21);" onKeyPress="return submitStop(event);" name="zip22" type="tel" value="">
</td>
ajaxzip3の動作見本ページはここです。

ajaxzip3のURLを見ると、https://code.google.com/p/ajaxzip3/と、google.comのドメインになっている。ajaxzip3.jsの設置場所も、googlecode.comになっている。Google Project Hostingというページで、オープンソースをGoogleが応援しているようだ。Googleがこのようなことを行っているのははじめて知った。(上に追加で記したように、Google Codeはサービス廃止だそうです。)


0 件のコメント:

コメントを投稿