ユーザーの情報を入力するフォームですが、データを実際に入力するユーザーの心理としては入力作業自体を非常に面倒に思うはずです。そのためできる限り、ユーザーの負担を軽減するための工夫を凝らして、入力作業を必要最低限に抑える必要があるでしょう。
本来なら、一度入力した情報をサーバ側に覚えておくようなログインの仕組みを用意すべきだと思いますが、プログラムの簡易化のためその機能は作っていません。その代わり、Flex Builder 2の便利なコンポーネント HTTPService を利用して、郵便番号をWeb API を利用して自動取得する仕組みを作ってみます。
最近では、郵便番号を送信すると、それに対応した住所を返してくれるというWebサービス(Web API)を提供しているサイトがいくつかあり、これは非常に便利です。ここでは、「郵便番号API」を利用することにします。
Flex Builder 2では、こうしたWeb APIを利用するのに、プログラミングはほとんど不要で、以下のようなタグを記述するだけです。URLや送信するパラメータを指定して、結果が返って来たら、イベントが発生するので任意の処理を行えます。
<!-- 郵便番号の自動取得 -->
<mx:HTTPService id="zip_service"
url="http://api.aoikujira.com/zip/zip.php"
method="GET" resultFormat="e4x"
result="zip_service_onResult()">
<mx:request>
<zn>{zip_txt.text}</zn>
</mx:request>
</mx:HTTPService>
 |
郵便番号を入力すると、Web APIを経由して住所を取得します |
また、Flex 2では、E4X(ECMAScript for XML)をサポートしていますので、XMLデータを非常に簡単に扱えます。最近の Web APIで得られるデータは、XML形式で戻り値が返されることが多いので便利です。
「郵便番号検索API」を使うと、以下のようなデータが得られますが、これを利用して住所情報をTextInputコントロール「addr_txt」に設定するには、次のようにします。
郵便番号APIの戻り値(1500002を検索した例)
<?xml version="1.0" encoding="utf-8" ?>
<ZIP_result>
<result name="api.aoikujira.com/zip" />
<result version="1.00" />
<result request_zip_num="1500042" />
<result result_code="1" />
<ADDRESS_value>
<value city_kana="ﾄｳｷｮｳﾄ" />
<value city_kana="ｼﾌﾞﾔｸ" />
<value address_kana="ｳﾀﾞｶﾞﾜﾁｮｳ" />
<value state="東京都" />
<value city="渋谷区" />
<value address="宇田川町" />
</ADDRESS_value>
</ZIP_result>
XMLの値をテキストボックスに設定するプログラムは、次のようになります。
private function zip_service_onResult():void {
var r:XML = zip_service.lastResult as XML;
addr_txt.text = r.ADDRESS_value.value.@state +
r.ADDRESS_value.value.@city +
r.ADDRESS_value.value.@address;
}
E4Xのアプローチを使うことで、XMLの要素を「.」区切りで取得でき、属性要素を「@」を使うことで取得できます。上記の郵便番号情報(XML)の場合、「ADDRESS_value.value.@state」とすることで、「東京」という値を取り出せます。
