アークウェブのブログ

まずは「スコヤカ屋さん」です。

▼スコヤカ屋 ― カンロの健康通販ショップ
http://www.sukoyaka-ya.com/

こちらのサイトではのど飴で有名なカンロがオンラインで販売しています。
ポイントは、カートからの個人情報入力画面で実装されている「郵便番号から住所を検索」する部分です。郵便番号を入力するだけで、対応する住所が補完されるわけですね。

ライブラリ的には下記のものを利用しています。

▼ajaxな住所入力フォーム
http://www.kawa.net/works/ajax/zip/ajaxzip.html

上記サイトにも書かれていますが『日本郵便』で公開されている郵便番号ファイルを利用しています。
ただ 1点注意が必要なのは、住所(町名)が異なるのに同じ郵便番号になってしまう。という場合があります。
例えば、753-0091という郵便番号は、山口県山口市上宇野令と山口県山口市天花の2つの地名がありました。

その場合でも、都道府県と市区町村までは自動入力されるのでゼロから入力する手間を考えればまだ良いと思います。また、入力フォームですから、もし間違っていてもユーザに直してもらうことができます。

少し話がそれました。
具体的にこの関数を使うには、上記サイトに書かれているようにサーバへファイルをアップロードする必要があります。そのアップロードが終わった前提で、実際に利用している箇所を見てみます。

フォームの方は↓このように作っておきます。

<form name="order_form" id="order_form" method="post" action="order_form.html">
　.
　.
　.
<th bgcolor="#ccff99">都道府県<span class="notnull">※</span></th>
<td><select name="order_pref_id">
<option value=""></option>
<option value="1">北海道</option><option value="2">青森県</option>
<option value="3">岩手県</option><option value="4">宮城県</option>
<option value="5">秋田県</option><option value="6">山形県</option>
<option value="7">福島県</option><option value="8">茨城県</option>
<option value="9">栃木県</option><option value="10">群馬県</option>
<option value="11">埼玉県</option><option value="12">千葉県</option>
<option value="13">東京都</option><option value="14">神奈川県</option>
<option value="15">新潟県</option><option value="16">富山県</option>
<option value="17">石川県</option><option value="18">福井県</option>
<option value="19">山梨県</option><option value="20">長野県</option>
<option value="21">岐阜県</option><option value="22">静岡県</option>
<option value="23">愛知県</option><option value="24">三重県</option>
<option value="25">滋賀県</option><option value="26">京都府</option>
<option value="27">大阪府</option><option value="28">兵庫県</option>
<option value="29">奈良県</option><option value="30">和歌山県</option>
<option value="31">鳥取県</option><option value="32">島根県</option>
<option value="33">岡山県</option><option value="34">広島県</option>
<option value="35">山口県</option><option value="36">徳島県</option>
<option value="37">香川県</option><option value="38">愛媛県</option>
<option value="39">高知県</option><option value="40">福岡県</option>
<option value="41">佐賀県</option><option value="42">長崎県</option>
<option value="43">熊本県</option><option value="44">大分県</option>
<option value="45">宮崎県</option><option value="46">鹿児島県</option>
<option value="47">沖縄県</option><option value="48">海外</option>
</select></td>
</tr>
<tr class="order_addr1">
<th bgcolor="#ccff99">市区町村<span class="hosoku2">（全角）</span><span class="notnull">※</span></th>
<td><input name="order_addr1" value="" size="40" type="text"><div class="hosoku01">例）中野区新井</div></td>
</tr>

そして、郵便番号入力の部分を↓このように作っておきます。

<input name="order_zip" value="" size="10" maxlength="8" 
 onkeyup="getAddress('order_form','order_zip','order_pref_id','order_addr1');" type="text">

この getAddress で郵便番号を取ってきて該当フォームに住所を表示します。

order_formは、<form>のid属性名です。
order_zipは、郵便番号の入力フィールド名です。
order_pref_idは、都道府県のプルダウン名です。
order_addr1は、市区町村名の入力フィールド名です。

JSONを使った新バージョンも用意されているようなので、今ならこちらを利用する方が良さそうです。

▼AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版）
http://www.kawa.net/works/ajax/ajaxzip2/ajaxzip2.html

つぎは「symbaloo」について見ていきます。

▼symbaloo - start simple
http://www.symbaloo.com/us/search/

このサイトは百式で紹介されたサイトです。

▼iPhoneっぽいインターフェースの検索エンジン『Symbaloo』 - 百式
http://www.100shiki.com/archives/2007/07/iphonesymbaloo.html

特徴はやはりiPhone風のインタフェースであるということですね。
アイコンがかわいくて、あちこち押したりドラッグして移動したくなる、と社内でも評判でした。このサイトでは、JavaScriptによるドラッグ＆ドロップのテクニックが特徴的ですね。

以前、tkrb.jpでベストサイトセレクション20のために調査した時は、Fork JavaScript というフレームワークを使っているようでした。

▼Fork JavaScript
http://forkjavascript.org/

Ruby on Railsのプラグインとして動作可能なフレームワークのようです。

▼Fork JavaScript - JavaScript統合ライブラリ - あるＳＥのつぶやき
http://fnya.cocolog-nifty.com/blog/2007/01/fork_javascript_166d.html

こちらでもおっしゃっているように、「Cookieを簡単に操作できる機能」によって
アイコンの配置をcookieで記憶させている形でした。

…が！

現状ではjQueryに転向したようです。
また、Cookieを覗いてもセッションIDなどのみでした。

そして、ロードの際に様々な値をサーバからAjaxでロードしています。

▲これはロード後のFireBugのConsole状態です。

最初にサーバから描画するのは、ロゴと(+)(-)[default]等が書いてある上のバーと、languageのある下のバーだけであとは全てAjaxによるクライアントサイドでの描画を行っています。

WindowsXP+IE7(CPU 2.8GHz, MEM 1GB)で描画に10秒程度を要します。
# 転送速度の問題が若干あるかもしれません...

クライアントサイドの描画時間が気になるところですが、サーバ側はAPIを用意してクライアントからAPIを利用して画面描画を行い、ドラッグ＆ドロップで配置が変わったらそれもAPIでサーバに通知する。
というような作業切り分けをしておくと、サーバ側はAPIに専念できるし、クライアント側はJavaScriptに専念できるので分業しやすい効果もあると思います。

次回は、下記の２つのお題について説明する予定です。

「お題６＞検索が楽しくなるサイト」
「お題７＞写真/動画で魅せるサイト」

それでは、次回もがんばります！