いい感じでJQueryを利用しているサイト：トヨタ自動車株式会社

またまた久しぶりの更新に；；

と思っていたけどひと月経っていませんでしたね。
4月～5末にかけて絶望的な案件がひたすら続いていたのですが、、、
ようやく終わりが見えてきたところです。

6月からは新卒さんが入ってくる予定なので、教育係になれたらいいなー。
人に何かを伝える、教えるということにとても興味があるので、できればかかわりたい分野です。



また前置きが長くなりましたが、、、
先日、職場のチームリーダーからトヨタ自動車（本社）のサイトがいい感じだと教えてもらったので分析してみました。

---

トヨタ自動車株式会社　公式企業サイト

http://www.toyota.co.jp/

JQueryがいい感じで利用されているサイトです。

プラグイン解説：

sweetPages jQuery plugin

ページ内の「おすすめコンテンツ」ページネーションに使用しています。
上記のデモページにはない「戻る」「進む」ボタンと、Lightboxによるコンテンツ全表示の機能を加えていますね。

元のJSを解析する時間がなかったので、
「戻る」「進む」機能を付与できるスクリプトを記載してくださっているサイトを掲載しておきます。

Make jQuery button for Sweetpages（英語）
とりあえず、ページ内に張ってあるスクリプトをJSに入れ込めば動いてくれる模様。
あとはCSSなどの調整ですね。

ついでに、試しに実装してみたデモURLも乗せておきますね。
http://www.granshe.com/ex/jsdemo01/

FancyBox

ライトボックス部分にはFancyBoxを使用。

グローバルナビゲーションの「クルマ情報」「テクノロジー」などをクリックすると、フキダシ形式でリンクバナーが表示されます。
フキダシの画像がメニューごとに変化している箇所は、Lightbox側で出し分けているわけではなく、
コンテンツはインラインに記述しておき、クリック時に表示されるように指定しているようです。

DD_belatedPNG_0.0.8a.js

IEで透過PNGを表示させるためのスクリプト。
Conditional Comments（条件付コメント）を用いてIE6のみに読み込ませています。

<meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1">

今さらかもしれませんが、「Google Chrome Frame」というテクノロジーを駆使して、IEでChromeと同じエンジンを使用できるようにする記載のようです。
（今回はじめて知りました・・・）

「Google Chrome Frame」とは、
オープンソースのプラグインで、Chromeのオープンウェブ技術とJSエンジンをIEに搭載できるようになるもの。
・IEが対応していないHTML5のCanvas機能などに対応できる。
・JSのパフォーマンスがあがって使用感が早くなる。
だとか（ざっと訳したので間違いあればご指摘ください）。

※本家版（英語）は下記です。
http://code.google.com/intl/ja/chrome/chromeframe/

ちなみに、ユーザが「Google Chrome Frame」をインストールしていなければ、上記のmetaを入れても特に何も起きません。

---

リーダーによると、各ボタン画像がいちいち大きいのは、
スマートフォンで見る際にも押しやすいように配慮されているのでは。とのことでした。

案件がぐだぐだで新しい技術を調べることもほとんどできなかったので、
こうやってサイトを分析すると勉強になることが多いです。


ただ唯一の欠点は、JSを切ると何も表示されなくなるところでしょうか・・・。
SSIのようにJSを用いている部分もありますし、
JSOFFの環境で表示が崩れるくらいなら、何も表示させないほうが良いのでは、という判断でしょうか。