Ajax Safari Books Online

 いつの間に、と言うか多分ごく最近、O’Reillyの”Safari Books Online”がリニューアル。Safariは、O’ReillyやAddison-Wesleyといった出版社の本を、有料・冊数限定ながらオンラインで閲覧できるサービスだ。ソフトウェア・エンジニア的には垂涎ものの技術書が結構な割合で揃っているため、英語に抵抗さえなければかなり重宝するだろう。実際、僕にとっては既に手放せないツールとなりつつある。

20060614_01.jpg

 普段からこのサービスを使ってる僕的には結構大きなニュースなのだけど(具体的に例えるとSlashdotにスレを立てたいくらい)。あまりにもウェブ上で話題になっていないので、狸か狐に化かされているんじゃないだろうかと色々試してみたが(具体的にはjpドメイン以外からアクセスしたり)。やっぱりちゃんとリニューアルしているようなので、どんな変更なのか調べてみる。

 これまでのSafariは、FrameMaker形式のデータを無理矢理webにしました的な古くさい技術で動いており、お世辞にも最先端のウェブサービスとは言えない代物だった。それが今回のリニューアルで、Ajaxを駆使したページ表示と遷移になり、デザイン的にも現代風にファンシーなものと変貌を遂げている。また、”Head First”シリーズに代表される”Graphically Rich Books”とか言うカテゴリーが追加された。これまでのSafari本はテキスト+イメージだったが、この新カテゴリーではページ全体が一枚のイメージとして表示される。Amazonの”Search Inside”みたいな感じで、他のSafari本とはちょっと違う技術が使われているようだ。

 まずは普通のSafari本。これまでは一回のGETで本文も本文以外もまとめてロードされていたのが、TOC(”Table of Contents”)やindexを除いた本文とその周辺情報は、全てAjaxで動的にロードされるようになった。次ページ、前ページもAjaxによりページ全体のリロード無しに本文→周辺の優先順位で読み込まれ、体感的にも随分良くなっている。加えてAjax遷移でありながらブラウザの「戻る」「進む」で移動できるので、Ajaxの気持ち悪さにさえ慣れれば違和感なく使えるだろう。ただし、印刷ボタンがさりげなく無くなっていたり、”Errata”や”Example”があったはずの本からそれらの項目が消えていたりと、微妙なデグレードもあったりする。

20060614_02.jpg

 一方”Graphically Rich Books”は、Google Mapsみたいに複数の分割イメージファイルをロードして一枚のページに見せる、という方式。イメージのレイアウタ自体もAjaxでロードし、そのレイアウタが複雑にエンコードされたイメージURLを持っているので、こちらも単純にソースを見ただけではイメージURLは分からない(firefoxならページの情報→メディアで簡単に分かるけれども)。また、Google Mapsばりのドラッグによるスクロールも実装している。Adobeの「紙を掴むアイコン(何て言うの?)」風の操作感で、なかなか気持ち良く動いてくれる。

 他、ちょっと面白いのが検索語に対するハイライトで、これは、ハイライト部分を赤塗りしたGIFファイルをサーバー側で生成し、”Show Search Terms”で低透明度で上に重ねて表示する、というもの。昔のAmazonはページ画像に直接合成してから送信していたので、それに比べると随分スマートだ(と思ったら、本家Amazonの”Search Inside”もすっかり様変わりしていて、全然別物になっていた)。

 何にせよ、これみよがしにAjaxを駆使した若干やり過ぎ感のあるリニューアルではあるけど、操作感は上々だ。「AjaxでどんなUIが実現できるか」という例としても悪くないだろう。ただし、JavaScriptのコードがスクランブルみたいになっているので、コーディングの参考にはならない。あと、Ajax(Asynchronous JavaScript + XML)とは言いつつも、ロードしている中身は長さ+HTMLコードで、多分innerHTMLにそのまま突っ込んでいるだけ。どこにもXMLは絡んできません。


Leave a Reply


Learn More

Related Posts: Web , [Google][ブラウザ] Google のブラウザ、まさか WebKit ベースとは。 , [Web] Amazon.com は刑務所にも発送できる? , [Web][メモ] HP Upline は使えない。 , [Web][メモ] Amazon Web Services が地味に進歩を。 , [Web][メモ] Google App Engine! , [Web] South Park!! , [Web] 「internet Adventure」?? , [web] Amazonで返品してみた。 , [Web][映画] “Devil’s Trade” , [メモ][web] 海外のWeb2.0サイトの長大なリスト。