忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[162] [161] [160] [159] [158] [157] [156] [155] [154] [153] [152

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

いい感じで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の環境で表示が崩れるくらいなら、何も表示させないほうが良いのでは、という判断でしょうか。


PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
04« 2017/05 »06
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
ブログ内検索
忍者ブログ [PR]