スクリーンショット(2009-12-07 10.04.35).jpeg

昨日までWebサイト開発合宿で作りかけのサイト「半径1km以内」をご紹介します。

作りかけ、ということでもちろん完成していないし、不具合もありますので、あらかじめご了承ください。

合宿では「HTML5」化を勉強しようという目的のもとにスタートしました。

せっかくなので 「HTML5」でブラウザからの位置情報を送信できるAPIを利用しようということで、結局ありきたりですが、現在位置を送信して周囲のお店を紹介するサイトになっています。

デフォルトでは新宿駅近辺が表示されています。

左ナビゲーションで今いる場所や位置を指定して、絞り込んでいくというステップを掲載しています。 スクリーンショット(2009-12-07 10.10.12).jpeg

Firefox3.5でしか動作確認されていませんが、「現在いる場所を送信!」をクリックすると、近辺の無線LANアクセスポイントの位置情報をもとに現在位置を割り出して、周辺地図を表示します。

ブラウザによってはそれができないので、代替案としては今のところ、ドラッグアンドドロップで地図を動かせば、次のステップに進めます。

(駅名、住所、スポット名検索を実装予定です)

スクリーンショット(2009-12-07 10.13.38).jpeg

これはホットペッパーの絞り込み条件からいくつかピックアップしたのですが、チェックを入れていくだけで絞り込めていくようにしました。絞り込んだ後も現在の絞り込み条件を残してさらに絞り込めるようにしてあります。

という感じで操作していくとお店情報が表示されます。

スクリーンショット(2009-12-07 10.15.15).jpeg

<address>タグやルビふりのタグをここでは使ってみました。

もうちょっと情報は充実させようと思っています。

そして、最後にケータイにメールして、お店情報と電話番号、ホットペッパーへのリンク情報を送りつける予定でしたが、ここはまだ未実装です。

つまり、移動しながらケータイで地図みたり、電話して予約したりができることを想定して最後に、ケータイにメールを送るという機能を想定しました。また、ケータイメールだけでなく、Twitterなどにもつぶやけるようにして、集合場所としてポストできるようなことも考えています。

マップに「A」しか表示されてないなど、中途半端なところが残っていますが、1日半で企画してここまで作りました。

レビューアーよりいろいろと意見もいただいたので、それをどうにか実装して仕上げてみたいと思います。

なお、一番大きな意見としては、「半径1km以内 でも駅と反対方面の飲み屋に行くのは辛い」という発想のもとで、駅に近い場所、また、最寄り駅サーチ、駅方面にあるくが駅の反対側には行きたくない、とかコメントをいただきました。

こういった細かいところのケアが、実用的なサイトに近づけるひとつのヒントだと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です