たたみラボ

  • about
  • member
  • r&d
  • blog
  • tatamicast

blog

RSS

Googleの実験サイトsearchmashに学ぶAJAXの取り入れ方

icon October 8, 2006 1:08 AM by ooi1 このエントリーを含むはてなブックマーク

大井宏友です。

GoogleがUIの実験サイトsearchmashを公開し始めましたが、 実際に使ってみて勉強になったことを書いてみたいと思います。

ページングが素晴らしい。

searchmashでは、 初めに検索結果が10件出てきます。ここまでは普通の検索サイトですが、「more web pages」をクリックすると、 次のページに遷移するのではなく、次の10件がページの下にペロペロ追加されます。これがとても理に適っている。

サイトを探しているときに、一回ページングした後、やっぱり始めのほうの結果のほうが良かった、ってことはよくありますよね。 普通の検索サイトだと「戻る」をクリックして画面遷移しないとだめですが、searchmashの場合、ページ上部にスクロールすればいいだけ。 検索結果が増えていっても一つのページの中でサイトの比較ができるのが非常に便利だと思いました。

AJAXの使い方がうまいですね。

「more web pages」に限らず、結果リストの順番をDragで変えられるとか、URLをクリックすると (右クリックしなくても)その後のアクションを選択できたりとか、AJAXを積極的に取り入れて試している感じですが、 その使い方がうまいのはさすがだなと思いました。

ここまでAJAXを取り入れた実験サイトだったら、全部AJAXにしちゃって、 トップページから検索するときも画面遷移なしにページ下部に検索結果を表示したくなりそうなもんですが、SEO的には最悪です。 自分もすぐbizでやってしまいました。searchmashはそうじゃなくて、 最初の10件の検索結果は静的コンテンツとして表示、それ以降の結果は動的に画面に表示。 こういう感じでのAJAXの使い方はSEO対策としてもいいんじゃないでしょうか?

最初に静的に出すコンテンツというのは非常に重要だったり、サイト作成側が見せたいと思っているものであることが多いですよね。 重要なもの・見せたいものは静的ページにして検索でも引っかかるように、 重要度は下がるけれどユーザーのために情報を提供するようなものは動的に更新するという感じでAJAXを取り入れていくと、 バランスもいいしユーザー体験も優れたものになるんじゃないかなと思ったので、 自分たちもそのようなバランスを気にしながらAJAXを取り入れていきたいと思いました。

COMMENTS

はじめまして。

現在、私が開発を担当している業務システムにAJAXを導入しており、大変興味深く拝見しております。

searchmashのページング形式には感心しました。(というか、私の設計中では思いつきませんでした)

ただ、一般ユーザ向けの検索サイトの開発経験が無いので、いまいち、大井さんが仰る様な、先頭10件を静的ページとすることによるSEO対策の有用性が、いまいち実感できませんでした。
(サーバ側で検索文字列に対応するページをまるごとキャッシュすることによるレスポンスタイムの改善、とかかな?)

サーバ側の処理は複雑になると思うのですが、それに見合う利点について、もう少し詳しく解説していただけると幸いです。

January 17, 2007 8:40 PM by bmg  

bmgさん、コメントありがとうございます。

検索サイトのSEOとしては、まずサイト自体をサーチエンジンのロボットに引っかかりやすくする必要があると思います。

実際の検索結果をロボットに引っ掛けてもらうようにすると、ユーザーが実際に検索した言葉と、検索結果のサイトの説明文がその検索サイトのコンテンツとしてロボットが認識してくれますので、ロボットに認識される言葉が雪だるま式に増えることになります。

検索結果が静的ページだったらロボットはクロールしてくれますが、検索サイトで検索結果をすべてAJAXで動的に表示してしまうと、サーチエンジンのロボットはJavaScriptを実行できないので検索結果はクロールされず、結果としてサーチエンジンに引っかかりにくくなります。
ということで静的ページは必要だと思います。

yahoogle(http://www.yahoogle.jp/)というGoogleとYahooのAPIを使った検索マッシュアップサイトは、トップページに「街しらべ」のようにユーザーがよく検索する言葉をリストアップしてあり、検索のURLリクエストに検索ワードが含まれていて、検索結果が静的ページ。
Googleの検索結果にyahoogleの検索結果ページがよく出てきているので、SEO対策がうまくいっている検索サイトのひとつだと思います。参考までに。

January 18, 2007 11:36 AM by 大井宏友  

大井さん、丁寧な解説ありがとうございました。
パブリックなwebサイトでは、ロボット検索に引っ掛かる事も意識しなければならないのですね。
専門外なので、勉強になりました。
searchmashのページング形式は、現在私が開発中のシステムでも使えそうです。
というのは、そのシステムはRDB上の情報を操作する AJAX クライアントの web アプリなのですが、文字列検索をする場合、
1. 完全一致
2. 前方一致
3. 部分一致
順に表示しています。
HTMLベースの web アプリだと、この順番を得るには、SQL を複数回発行するか、UNION でつなぐかをしないといけなくなると思うのですが、AJAX ならばそれぞれ別にリクエストを発行して、Javascript で検索結果を後付けしていくようにしています。
が、この場合、データの distinct を Javascript 側で行なう為、一般的なページ遷移をするのが面倒なので断念していました。
しかし、searchmashのページング形式ならば、あまり気にせずできそうです。
長々と、失礼致しました。

January 18, 2007 12:51 PM by bmg  

御社の求人に応募したので、技術的アピールを兼ねて、もう少しコメントを(笑)

searchmash のページング形式について、大井さんは SEO 的視点から評価をされていますが、実は JavaScript/DHTML 的な視点からも大変賢い選択をしています。

大井さんが仰るような「全部AJAXにしちゃって、トップページから検索するときも画面遷移なしにページ下部に検索結果を表示」では、検索結果を表示する際に、
1. 既に表示されている検索結果を削除する
2. サーバから取得した検索結果を表示する
という、2段階の処理が必要になります。

しかし、ユーザは 2. の処理を JavaScript で実行中にも再度検索を実行する可能性があり、その結果、1. を実行するプロセスと 2. を実行するプロセスが衝突する可能性が出てきます。

JavaScript では、Java の synchronized に相当する機能が無い為、検索結果を表示するオブジェクトについて、プログラマがマルチスレッドを意識した設計を行わないと、最悪、ユーザのマシンを壊してしまいます。
(実は、私も Ajax 実験的に使用したとき、このあたりの設計をきちんとしておらず、何度もマシンを落としてしまいました)

マルチスレッドセーフ化については、多種のデザインパターンが存在するものの、危険な処理には変わりなく、検索エンジンの様な大量のユーザが使用するサイトでは、その様な処理はなるべく回避したいと、searchmash の設計者は考えたのではないかと思います。

February 9, 2007 11:43 AM by bmg  

POST COMMENT




(書式を変更するような一部のHTMLタグを使うことができます)

必ず利用規約に同意いただいた上で送信ください。

ページトップへ



(C) RECRUIT MEDIA COMMUNICATIONS CO., LTD.