JavaScript でタブ切り替え UI を実装する | WWW WATCH(http://hyper-text.org/archives/2007/09/javascript_tab.shtml) のエントリーをみていいなコレっと思ったので、タブUI導入で参考になるいいサイトなんかを紹介してみたいと思います。
以前のエントリーブログGTD WEBデザイナー独立するために（その１） - WEBデザイン BLOG「jQuery・javascriptを使ってのさまざまなアプローチ方法を実践する」の中でとWEB標準でのC O U L D長谷川様の「解体Apple.com」のPDFを見て、ユーザーアプローチに使えるってことで紹介しようと思っていたネタです。実際に、自分サイトを立ち上げる時もタブの実装は考えていましたので今日の勢いで。
タブでもさまざまなタイプがあって、導入してみたいものと実際に使っているサイトを紹介しておきます。ご参考にどうぞ。また、javascriptに強い方にはぜひ、参考にしていただきjQueryなんかでプラグインなど作ってもらえたらと思います。
jQuery UIのタブ
www watchさんで紹介されているタブは、UI - jQuery JavaScript Libraryの中でのTabs - jQuery plugin for accessible, unobtrusive tabsの中の”Custom HTML structure”と基本的には同じタイプですね。私もこのタイプ（jQueryの中では、コレ）を使おうって決めていました。やっぱり、javascriptオフのときの表示を考えますからね。なんかちょっとjQueryプラグイン増えましたね。すごいなー。新しいのがいっぱい増えてます。
jQuery UI Tabが採用されている参考サイト
Madison Park Church of God | Anderson, IN | (765) 642-2000
このサイトはかなりデザインでもディテールまできれいに作られているのでとても参考になります。他の面でも真似したいところがたくさんあります。ちょっとスクリプトが追加されています（/functions.js）。（一応オフの時の表示も見てくださいね。そこが重要）
Movabletypeで使うなら
とりあえず、トップページで使うつもりでいます。それから、各エントリーページにて、本文下に〔関連エントリーリンク〕〔コメント〕〔トラックバック〕の3つのコンテンツをタブ表示でスマートにするつもりでもいます。（もちろんテンプレートにも導入するつもりでいます。）ユーザビリティを考えるならその程度でいいかと。あまり多用しすぎても・・・・。
その他参考サイト
DSL Internet, Phone, Wireless and Satellite TV Services | AT&T
iPhoneの登場で見るようになりました。ちょっと無理っぽさが感じられるデザインですが、独自のタブスクリプトでトップに表示しています。
Adobe Labsで採用されているタブ
次に採用してみたいと思ったタブは、Adobe Labsで採用されているもの。見出し<h3>タグがタブに切り替わって表示されるので、オフのときの見栄えもいいです。
このタイプは、javascriptオフの時にもきれいに表示されるのでオススメかと思います。コレでjQueryで実現できるプラグインがあればいいかとも思います。
確か、YUIでも同じタイプのものがあったのですが、最近変わったみたいですね。サンプルページがなくなってました。まだ、jQueryのプラグインが少ない時は、YUIもAdobe Labsと同じようなタイプをサンプルで表示していて使おうって決めていました。プラグインができてからは、読み込みなどを考えてjQueryの方が軽いの乗り換えました。
（YUIはすばらしいですが、素人目でWEBアプリケーションタイプのライブラリーだと思っています。イベントの処理なんかが複雑なのもあるし、いろんなライブラリーに分けられすぎていて、ファイルも増えるし、読み込みに結構時間がかかるのかと思います。jQueryは、ベースが軽いのとプラグインが豊富でMovabletypeのテンプレートパターンを考えても必要な分だけスクリプト（プラグイン）を追加すればいいという感じで企業・個人サイトレベルには無難かと思っています。あと、サーバーのキャパにもよりますね。）
とりあえず、導入してみたいと思っていたのはこの二つです。
javascriptオフの時の表示について
今YUI Library Examples: TabView Control: Build from Markupでサンプル紹介されているタイプは、オフの時は他のタブは何も表示されません。また、デザインも崩れません。
しかし、iGoogleやYahoo!ニュースなどでタブに慣れているユーザーがもし、オフの状態で何も表示されていなかったらどうおもうのでしょうか？って考えます。ここがポイントかと思います。
さて、Yahoo!なんですが、トップページで同じようにデザインが崩れないタブが設けられています。オフの時にクリックすると、ちゃんと別ページに飛ぶようになっています。あれ？って調べてみたら、ちょっと変わったことをしていました。
baseタグで別ページに移動
オフの時には、baseタグが有効になるようになっています。気になる方は、ソースmetaの次のscriptを覗いてみてください。このbaseタグで指定されているアドレスが有効になり、スクリプトオフのときでもちゃんと別ページに飛ぶように設計されています。ここが気になる。（実はとっても前から気になっていつか記事にしてやろうと考えていたけど・・・・詳しく調べれなかったのでそのままに）
一応baseタグについて引用表示しておきます。
このページに記述されたリンク先 URL の基準となる URL や、基準となるターゲットウィンドウ（ターゲットフレーム）を指定します。<head>〜</head> のヘッダ部に指定します。
Yahoo!JAPANもこのタイプに切り替わるのは直です。また、ユーザーもタブやらajaxを使った動きに慣れるのは必然です。どうぞお詳しい方、エントリーにて仕組み（オフ時に適用されるのはわかりますが、あの複雑なアドレスとか他いろいろ）を説明してくださる方がいれば幸いです。
タブっぽくないですがデザイン・機能で真似したいサイト
ExpressionEngine - Publish Your Universe!
このサイトのデザインとjavascriptはとてもいいです。オフの時もデザインが崩れません。これも自サイトで真似するつもりでいます。ただ、if switchのパターンではなく、jQueryで実現できるプラグインができればと思っているところです。
各訴求項目の画像もあらかじめ読み込ませているのもいいですね。企業サイトなんかには参考になるデザインとスクリプトの使い方だと思います。
site mapのリンクは、jQueryの基本的なtoggleを使っています。これをサーチやタグクラウド表示もしくは、フィード表示に中身を変えて使ってみたいと思っています。ネタフルさんなんかも使ってみてもいいんじゃないかと。同じ読み込みするなら、こっちの方がクールな動き・表示ができます。
実現できるならぜひjQueryで作っていただきたい機能
いまから紹介するサイトは2つ。とてもカッコいい動きをします。ｊQueryで実現してほしいと一番に思う機能です。一応タブ表示もされています。
HBCWeb.com » Web Design, Web Development, Web Hosting
Panic - Coda - One-Window Web Development for Mac OS X
共にコンテンツがスライドします。これはスゴイと思いました。また、HBCWeb.comはオフの時は全くうごきませんが、オリジナルスクリプトでスライドするCodaはちゃんとオフ時にもコンテンツ表示が切り替わります。ちょっと無理がありますが、両サイトともとてもいい動きをします。
お時間ある方はぜひソースコードも覗いてみてください。確か、一つはprototypeベースだったような。
以上で参考にするサイトは終わりです。また何かいいデザインと機能をもつサイトを知っている方がみえましたら、トラックバックください。情報共有しましょう。
No script Firefoxエクステンション
javascriptオフの時のサイト表示確認にはもってこいのアドオンの紹介です。
Firefoxを使いはじめて2年ぐらい経つ。最初目にした頃、売り文句が"Safety & fast"だったような。”安全でかつ早い快適ブラウジング”が代名詞だった気がする。そんな頃から、NoScript :: Firefox Add-onsがあって、導入をしている人が多かったのでずっと使っています。
このエクステンション（って最近アドオンって言うみたい）は、サイトに訪れた時、勝手にスクリプトを実行させないという機能。昔からjavascriptを使ってのクリップボードの記録などを盗んだりする悪事防止なんかで有名だったかと。最近では、cross-site scripting attacks (XSS)で有名になっているみたいですね。とりあえず、導入をオススメしておきます。
クリック一つでスクリプトの読み込みのON/OFFが可能なエクステンションです。何かと最初は手間だけど、なれると便利。やはりcross-site scripting attacks (XSS)防止にはもってこいです。普通にgoogleアドセンスなんかもOK出さない限り表示されないので、広告がウザイと思う方にもある意味オススメかも。（但し、URLでの許可・不許可するものなので、そのサイトのjavascriptがすべて不能になる。）
アコーディオン機能
WEB標準でのC O U L D長谷川様の「解体Apple.com」で取り上げられていたアコーディオンはやはり、取りやめになったのでしょうかね。ちょっとappleのサイトもまた変わりました。
ユーザーにとってはアコーディオン機能がどういう動きをするのか？とかリンクなのか？といった点で導入は検討した方がいいと思っていた矢先になんか無くなっていたような。多くの方を対象に考えた場合は、設置はよく検討した方がいいかもしれません。
これまた、わかりやすいボタン表示などで解決できるかもしれませんが、しばらくYahoo!が導入し、それにユーザーが慣れてからの方がベターかと思います。
以上です（今回は急に書き出したくなりました。最近さぼりぎみで・・・・今後ともよろしくお願いします）。
コメントする