2008年11月17日月曜日

マッシュアップサイト作成2

今回は前回に引き続き光速じゃらん について述べていきたいと思う。前回は言語の習得のしやすさとレンタルサーバでどの言語が使いやすいのかと言うような点から話を進めたが、今回はWebサイト全体のプログラミング構成やなぜこのようなインタフェースにしたか?、という点について様々な観点から説明して行きたい。



1.Javascriptでほとんどの処理を記述
今回作成したプログラムでサーバの担う役割はXmlHttpRequestによって送られた情報を読み取り、じゃらんWebサービスに送信するクエリを作成し、受け取ったデータをそのままクライアント側に送信するという極めてシンプルなものである。一方でjavascript側ではdomの操作、オブジェクト配列のソート等結構重い処理を行っている。これはサーバの負担の問題からである。javascriptを使いユーザ側のパソコンで処理させたほうがサーバの負担が少なくてすみ、アクセス数が上がっても耐える事ができる。それゆえ費用も少なくて済む。ただ、その分クライアント側のパソコンに負担が掛かって動作が鈍くなる可能性がある。しかし現在では現在Firefox3やGoogle Chome等次々とjavascriptを高速に動作させるブラウザが誕生してきているし、パソコンの性能も相当上がっているので今後問題とはならないであろう。Web動向全体の流れとしてもjavascriptを多用する方向に確実に向かっていると思う。光速じゃらんで99件のホテル情報を取得して安い順、口コミ順などに並び替える時、IE6,7を用いるを結構もっさりとした動作になるのだが最新のIE8はそこそこ高速であると聞いているしユーザをいらだたせる事もなくなるであろう。

 このような理由から処理をクライアント側にまわし、Webサービスからの情報の取得回数を減らし、こちら側のサーバとWebサービス側のサーバの負担の低減に努めた。Webサービス側のサーバの負担を低減させるためにできる限りクエリを短くするように配慮もしている。(というよりはクエリが長いと情報取得が遅くなるので短くするようにした。)



2.ユーザインタフェースについて


  • なぜ全画面で大きく表示せず全体をコンパクトにまとめたのか?
    大抵の地図マッシュアップサービスを見ているとページの余白領域をなくしできる限り大きく地図を表示していることが多い。インタフェース上でのメリットは画面を目いっぱい生かすことができ見やすいと事が挙げあられる、逆にデメリットとしては全画面を使う事により画面構成が難しくなる、画面が広くなりすぎる事によりマウスの移動に時間が掛かってしまうなどが挙げられると思う。文章も横いっぱいに広がると逆に読みにくくなる。大抵のサイトでも画面全体で表示すると言う事はあまり行っておらずせいぜいWidthが950くらいで固定されていることからもこのデメリットは大きいと思う。また解像度により画面が変わってしまい違和感を覚える人も多いと思う。で、サイトにもよるがどちらかと言えば画面全体を使うよりもwidth950くらいでレイアウトするのが最もインタフェース的に優れているのではないかと思う。そのような理由で全体をwidth960に抑える事にした、またサイトの現状がその程度の幅のものが多いためWebサイトに自然にマッシュアップサービスを埋め込ませるにはページ全体ではなくその程度の幅が求められる。そしてページにマッシュアップサービスを埋め込ませるという行為はSEO上で非常にメリットがある。通常のサイトのトップページにそのようなサービスを埋め込むとトップページのユーザ滞在時間(グーグルのアルゴリズムの一つとしてユーザがどれだけそのページに滞在したか?というデータを取っておりそれを利用している可能性は高い)も稼げ、そのページにブックマークしてくれる人も増えるであろう。逆にトップページから全体画面のマッシュアップサービスのページにリンクしているような場合であると、ユーザはどちらにブックマークするかも迷いそうであるし、トップページ下ではSEOが弱く、トップページに全体画面のマッシュアップサービスを持ってこようとすると、トップページのレイアウトが難しくなり、好きなキーワードをなかなか埋め込めなくなる可能性が高い。検索エンジン対策を考えるのであれば全体画面表示はやめた方が良いだろうとは思う。

  • 機能はドメインに特化させろ、Webにおいて「すべてある」は何もないのと変わらない
    ネットで何かを調べる時たいていの人は検索エンジンを利用する。検索エンジンにより情報のフィルタリングを行っているのである。ところがそのフィルタリングを行った先のサイトに何でもそろっていると返ってユーザは戸惑ってしまう。例えば「ホテル」と検索して地図情報なら何でも検索可能な「グーグルマップ」がトップに出てきても困る。このように我々は検索エンジンの返す結果に専門性というものを望み、何でもありでコンセプトがはっきりしないサイトを望むわけではないのである。でだ、このような背景があるにも関わらず「何でもよいから詰め込めるものは全部詰め込みました」っていうマッシュアップサイトが多い。そしてそのようなサイトは情報量が多すぎてうまく整理されていない場合が多く、分かりにくい。このような観点から見ればリクルートのドコイク?ってサイトは完全にミスっている。食べ物の口コミを調べるなら食べログの方が分かりやすいし、ホテルを検索するならば今回僕が作った光速じゃらんの方が断然分かりやすい。ドコイク?は目的が明確でない人が主なターゲットであり、リクルートというバックボーンがあってある程度認知されたものであり(検索エンジン起点で認知されるということはありえない)、個人がこのようなサイトを作ったところで誰からも見向きもされないことは目に見えている。色々なWebサービスを融合させたい気持ちも分かるが現状で儲かるサイトを作ろうと思ったらもう少しターゲットを明確にして機能をドメイン依存にすべきである。
  • 初心者でも簡単に使えるべき
    ユーザインタフェースの巨匠であるシュナイダーマンによると、良いインタフェースとは初心者でも簡単に扱え、上級者になれば更に素早く操作することが可能なものだそうだ。つまり最初からゴタゴタと使い方を読ますようなマッシュアップサイトは良いサービスとは言えない。使い方を読まずとも簡単に活用でき、使うに連れて徐々に理解できるサイトが良いマッシュアップサイトなのである。最初にごたごた説明を読ますサイトはRPGで言えば最初から全ての技・機能が使えるゲームみたいなものである、これではユーザは最初に何をやったらよいのかわからず困惑してしまう。できれば使い方を読まずとも徐々に使い方を理解して行けるというのが良いのである。一応光速じゃらんもそのような事を意識してつくっている。おそらくチュートリアルビデオを作っているようでは一般ユーザには普及しないであろう。まあチュートリアルビデオを見てでも使いたいほどの魅力があるならば話は別であるが・・・・

以上長くなったがマッシュアップサイト作成の上で特に考慮した点である。何らかの参考にして欲しいし、何か異論があるようならば積極的に連絡して欲しいと思います。

2008年11月9日日曜日

マッシュアップサイト作成

まあこのサイトを見る人で知らない人はいないであろうが近年マッシュアップサイトというものが盛んに作られている。WebにおいてマッシュアップというのはグーグルやYahoo!などが提供しているWebAPIを組み合わせて何か新しいサービスを構築する事を言う。材料となるデータや地図を会社が提供してくれるので比較的簡単に高度なWebサイトを構築する事ができるのである。
それで何か作ってみようと思い立ち光速じゃらん というマッシュアップサイトを作成してみた。光速じゃらんはGoogle maps API とじゃらんWebサービスを利用しており、じゃらんnetのホテル情報をじゃらんWebサービスから取り出して、それをグーグルマップに重畳表示している。
このサイトを作るに置いて気付いた点、苦労した点などについて色々述べていこうと思う。恐らく今後このようなマッシュアップサイトを作る人にとって参考になるはずである。
まず言語の選択である。PHP,Perl,Python,Javaサーブレット+JSPなどなどサーバサイド技術は数多くあるが一体何が適しているのか、筆者はPerlは使った事がないのでよくわからないがPHP,Python,Javaサーブレット+JSPの中ではPHPが適しているということを今回実感した。サーバの問題と習得のしやすさの2点がその理由である 。

まずサーバの問題であるがJavaはリソースの消費が大きいためレンタルサーバでなかなか使えるところがない。だいたい月2000円は取られ少々懐が痛い。次にPythonはGoogle App Engineという2008年4月にスタートしたグーグルの新サービスを使えば無料でサーバーを貸してもらえる。そこではサーバーサイドとしてはPythonだけが使用できるのである。更にグーグルのインフラを用いるので頑健性がある、いざとなった時でも安全そうである。しかし唯一のWebAPIサービスへのアクセス手段となるurlfetchという関数が曲者である。これはWebサービスにアクセスして5秒応答が返ってこないと接続を自動で切ってしまうため少しWebサービス側の動作が遅いとすぐにタイムアウトして結局情報を得られなくなる事が多い。光速じゃらんを作成するにあたって、前に2つのサイトをGoogle App Engineで作ったのだが(楽天Webサービスを使った楽々ホテル検索じゃらんWebサービスを使った楽々ホテル検索)いずれも少し長めのクエリを投げればタイムアウトする事が多い、楽天のWebサービスは特に応答が遅すぎて使い物にならない、関係ないがクエリにより料金に矛盾などしょっちゅう生じている。楽天トラベルAPIを使ったサイトがほとんど出てこないのはこのような理由からであろうと悟った。まあWebサービスがJSONP形式に対応していればjavascriptだけでサーバを持たなくても良いのでurlfetchを使わなくてもWebサービスから情報を取得する事はできるのだが、現状のWebサービスでJSONPに対応しているところは少ない。Google App Engineのサーバが海外におそらくあるということも問題である。「光速じゃらん」とじゃらんWebサービスを使った「楽々ホテル検索」では同じクエリを投げても大抵国内のサーバを使用している光速じゃらんの方が圧倒的に速い。それもそのはずでユーザがブラウザからリクエストを投げる(国内)→グーグルのサーバがキャッチ(海外)→じゃらんにリクエストを飛ばす(国内)→グーグルがじゃらんからのリクエストを受け取る(海外)→結果をユーザのブラウザに返す

とアメリカと日本を2往復するのだから当然返って来るのが遅いわけである。よってGoogle App EngineでPythonを使用してマッシュアップサイトを作ると言うのはあまり得策ではないと言える。他のレンタルサーバはどうかというとJavaよりはましだがあまり対応してない模様である。

最後にPHPであるが、これはほとんどのレンタルサーバで対応しており最も素早くサービスをスタートできる。圧倒的に個人でマッシュアップサイトを作ろうとするとサーバではPHPが有利であると言える。

次に習得のしやすさであるが、言語的には最も記述が少なくて覚えやすいのがPythonであると思う。Javaは冗長で難しいし,PHPもPythonほど可読性は高くない。ところがPythonは世界的にはPHPより普及しているが日本ではほとんど普及していない、それゆえ良くわからない所を検索エンジンで調べてみてもなかなか解答までたどり着けない、逆にJavaやPHPなら、特にPHPならば書籍もWebでの情報も充実しておりマッシュアップがやりやすい。以前JavaでAjaxプログラムを組んだ事があるのだがJavaであってもまだまだ情報量が少ない感じであった。これらの事情を考えると最も習得しやすいのはPHPであろう。Pythonは今後が期待されるが今のところはまだ時期尚早といった感じである。勉強しておいて損はしないと思う。

これらの理由でPHPで安い国内サーバを借りてマッシュアップサイトを作っていくと言うのが現状の流れであると思う。