Yahoo!のユーザーインターフェイスブログ（YUIBlog）

実装フォーカス：レンタカーエクスプレス

レンタカーExpressは、インターネット上の主要な独立系レンタカー比較サイトです。 それにより、ユーザーは世界中の1000以上の都市と空港のオンライン車を借りることができます。

私たちのユーザーベースは、できるだけ簡単に価格と家賃の車を比較することを意味する、主に非技術系です。 2010年6月に当社のウェブサイトのリニューアルで私たちは直感的な経験をお客様に提供できるようにYUI 2の多くのコンポーネントを実装しています。

我々はどのYUIコンポーネントを使用していますか？

我々が使ってきたというコンポーネントが含まれる接続マネージャ 、 オートコンプリート 、 データソース 、 カレンダー 、 アニメーション 、 JSON 、およびコンテナを 。

我々はYUIを選んだ理由

我々は潜在的に使用することができることを別のJavaScriptライブラリ見直す際レンタカーExpressを 、我々はYUIが私たちのニーズに最も完全であることがわかった。 私たちにとって最大のセールスの機能は、YUIが、さまざまなデザインパターンを実装するために取った非常にモジュラーアプローチだけでなく、彼らが提供する堅牢なドキュメントとサンプルがあった。 開発の観点から、これはライブラリに苦労することなく、我々のアプリケーションの急速な発展につながった。

我々は、YUIを使う方法

我々はいくつかの方法でYUIを利用する。 私たちの4つの最使用されるコンポーネントは、オートコンプリート、カレンダー、コンテナ、および接続マネージャです。 我々はこれらの各コンポーネントを使用する方法のいくつかはここです。

オートコンプリート

オートコンプリートコンポーネントは、ユーザーが車を借りるための都市や空港を見つけるのを助けるために私たちのサイトで広く使用されています。 私たちは本当にそれがこのコンポーネントを実装するがいかに簡単かが好き、そしてどのように迅速にそれが応答する。 検索結果を向上させるための我々のキャッシュ検索の結果、サーバー側は、しかし、クライアント側のキャッシュを持つことも、コンポーネントの応答を高速化する上で大いに役立った。 私たちが本当ににかかった別の特徴は、結果がスタイルにあった方法は簡単でした。 我々は都市に見られる場所や空港で発見されたどの場所を識別するために、必要に応じてユーザーに場所を表示する場合、これは重要だった。

カレンダー

賃借人が検索を行うために日付を記入されるとカレンダコンポーネントは、サイト全体で使用されます。 私たちは、ジョンPeloquinのカスタマイズしたバージョンを使用している区間の選択カレンダーをし、それを表示YUIダイアログ 。 その日付を選択する際に本質的に我々が何をしたいか賃借人を2ヶ月間のビューを提供しただけでなく、視覚的に彼らは、現在選択されているものを日付の範囲、それらを示す。 繰り返しますが、これは、YUI 2カレンダーを使用して実装することは非常に簡単でした、そしてそれは基本的には、そのdi​​vにYUIの間隔のカレンダーを添付、カレンダーのdivを含むように体を設定し、YUIのダイアログを作成するに降りてきた。

コンテナ

我々はさまざまな方法で当社のウェブサイトを通じてYUIのコンテナを利用する。 上記の例では、ユーザーが日付を選択したときに私たちはインターバルのカレンダーを表示するためのダイアログを使用していた。 私たちの金利の検索結果のページで我々は、賃借人のより多くのレンタカー会社のさまざまな側面に関する情報と、彼らが潜在的に借りるかもしれない車を与えるためにコンテナを多用します。 このページ上のコンテナのほとんどはパネル我々はそれぞれ異なるリストについては、再使用すること。 例えば、車載ディスプレイは、パネルを備えています。

物事には、代理店の格付けを定格賃借人にもう少し楽しみを得た。 定格を表示しているとき、私たちは本当に代理店が受け取ったスコアにユーザーの注意を集中するときれいに、簡単にビューの方法でこの情報を表示したいと考えていました。 ダイアログコントロールを利用することにより、我々は、私たちはこの目標を達成するために、簡単にビューポートと中心ダイアログを制約することができた。 空白のヘッダーとフッターを設定することで、それは単に私たちのCSSに適切なスタイルを追加することにより、シンプルなスタイリングしました。 最終結果は、彼らが欲しい情報と賃借人を提供するクリーンな格付けのコンテナだった。

接続マネージャ

我々はXHRリクエストを介してデータを取得する必要があるたびに、接続マネージャは、サイト全体で使用されます。 上記の例の一部では、オートコンプリートimplementaitonsのための都市と空港を要求し、ダイアログ定格借主のための評価の情報を引き出すために、このコンポーネントを利用する。

我々は、接続マネージャを利用している1つ興味深いの方法は、ほとんどのページに座る私たちのレンタルセンターブロックを使用することです。 パフォーマンスを支援する我々のコンテンツページの多くにフルページキャッシュの多くを行う。 しかし、我々はまだこれらのページに動的な賃貸センターのブロックを表示したいと考えていました。 これは、我々はConnection Managerと解決することができた問題を私たちに提示。 むしろ私達の完全にキャッシュされたページと我々はそれだけで単純な非同期の要求を介してレンタルセンターのブロックを含むように簡単だった見つけたページのキャッシュのみの側面を分割するよりも。 我々は、これが私たちが完全にキャッシュされたページを持っていることから、パフォーマンスを保持、まだ、まだ私たちのレンタルセンターボックスで動的コンテンツを表示するために許可されてことがわかった。

最終的な考え

全体的に我々はYUIを使用するために我々の選択で非常に満足しています。 それは使用すると実装が容易な、よく文書化されているモジュラーライブラリを提供してくれます。

会話して下さい： Bloglinesの | テクノラティ

共有し、拡張する： del.icio.usでブックマーク | Diggそれ！ | のreddit！