Tab - ToggleSwitch

タブ切り替え機能

タブによるコンテンツの表示切替は、FirefoxやIE7などに搭載されているブラウザでのタブ切替と同様に、 ある限られた範囲の中でより多くの情報を持たせ、それぞれの情報に容易にアクセス出来るようにする為の有効な手法となります。 ブラウザでのタブ切り替えでは、切り替える情報の単位はWebページになりますが、 JavaScriptでのタブ切り替えでは、本来はページに分けるほどの情報量のコンテンツから、数行の項目、あるいは画像単位というように、その応用範囲は多岐に渡ります。

このようなタブ切替は、実装の手間の簡易さにも拘わらず大きな効果を得る事が出来る機能である為、 JavaScriptを利用したUI実装としては、ナビゲーションメニューと共に広く利用される形態と言えます。

タブによるページ単位での切替
ページ内の一部の項目表示切替
Fragment-idを利用した
URLでの表示項目指定
Cookieを使ったタブ選択状態の保持と反映
GoogleAnalyticsでのアクセス解析への対応

ページ単位のタブ切り替え

これは、このページ(tabtoggle.html)自体に実装しているような、ある程度のサイズのコンテンツを切り替える手法になります。

通常ならば数ページに渡るような分量のコンテンツを1ページ(1HTTPリクエスト)にまとめ、 さらにそれらのページを新たなリクエストのレスポンスを待つ事無く、瞬時に切り替える事を可能にします。

ページの構成としては、 ある程度の分量の1つのコンテンツを複数ページに分割するケースや、 あるいは複数のコンテンツをそれぞれ1ページとして記述するなど、 どのような構成においても、任意のラベル(ページ番号やコンテンツの内容説明)を設定出来ますので、 幅広い利用用途に適応出来ます。


このような場合には、以前からページ内リンク(<a name="#link">形式)を設定してのコンテンツ移動が利用されています。 タブ切り替えがページ内リンクより優れている要素としては、コンテンツを表示する範囲(レイアウト)を必要最小限に留める事で、 個々のコンテンツを目立たせ、より素早く目的とする情報を見付けられるようになるという点があります。 また他のタブ切り替えと同様に、複数のページを同時に表示する設定も可能である為、 ページ内リンクとは異なり、任意に選択した複数のページだけを表示するという、ユーザー側での簡易的な編集も行う事が出来ます。

WebJADEでのタブ切り替えによるページ切り替えでは、JavaScriptが無効な環境の為に、ページ内リンクも併用しています。 これはナビゲーションメニューでのCSSによる記述と同様に、JavaScriptが無効な環境に対応する為の保険的な役割となります。


利点
  • ページ切り替えが瞬時に行われる為、 HTTPリクエスト完了までの待ち時間が削減される事によるユーザーの使用感の向上。
  • 関連する複数のコンテンツを1ファイルに纏める事が可能である事から、 ページ遷移に伴う状態保持(Cookieやfragment-idによる)処理が不要。
  • リクエスト数減少による、サーバー側の負荷と転送量の軽減。
  • JavaScriptが無効な場合でも、ページ内リンクによるコンテンツ移動が可能。
  • 1ページに複数のコンテンツが含まれる為、より多くのキーワードが検索対象になるというSEO的利点。
欠点
  • 構成されるページ群の大部分のページを見るという前提においては、上記の利点が活きるが、 最初の1ページ目しか見ないというユーザーの場合には、 ユーザー/サーバー側共にリクエストサイズの増大というデメリットにしかならない。
  • JavaScriptが無効な場合では、ページのレイアウト的なサイズも大きくなる為、目的とする情報が判り辛くなる恐れ。
  • リクエスト数減少=PV(ページビュー)減少である為、PV数が重要であるようなWebサイトには不向き。
  • 1ページに多数の同様なキーワードが含まれるケースもある為、スパムと判定されSEO的に不利となる場合も。

ページ内での項目切り替え

タブを使ったページ内項目の切り替えでは、ページ内の一部分のコンテンツの表示切替を行います。

ページ単位の切替では、それぞれに関連性のある(一連の)コンテンツを本のページをめくるように、他のコンテンツとの置き換えを行いますが、 ページ内項目切替は、あるページにおいて補足情報として扱われるような複数の情報の中から選択表示するような形態となります。


ページ単位の切り替えは、主にページ切替時のレスポンス速度を改善する為に利用されますが、 ページ内項目の切替では、ページのレイアウト上の構成に自由度を持たせる為に利用されるケースが多くなります。

HTMLのみで記述されたWebページでは、そのページに記載される情報量が増えるに従い、当然のようにそれらの情報のレイアウト上での占める割合も増大します。 そこで、情報量は増やしたいが、レイアウト的に広い範囲を割り当てる事が難しいようなケースでは、 このタブによる項目切り替えが有効に機能します。 タブクリックなどにより表示する項目を選択する事で、一定のレイアウトを保ちながら多数の情報へのアクセスが可能となります。


  • JavaScript
  • CSS
  • Flash

JavaScript - ジャバスクリプト

現在ではECMAScriptの各種Webブラウザでの実装がJavaScriptとも言えますが、Webブラウザ上のスクリプト以外の用途にも利用されるようになっています。

CSS - カスケーディングスタイルシート

主にWebページでのデザインやレイアウト設定を行います。
非常に便利ですが、一部ブラウザでは仕様とは違った奇妙な動作をするのが困りものです。

Flash - フラッシュ

インタラクティブなコンテンツや映像などのマルチメディアコンテンツに最適です。
ナビゲーションメニューなどのUI実装だけに使うのはあまり薦められません。

この例では、JavaScript,CSS,Flashというタブがあり、それらをクリックする事でそれぞれの項目の説明が表示されます。 タブ切替を使用せずにただ並べる場合と比較しますと、表示する為に要するレイアウトサイズの縮小は勿論ですが、 ユーザーでクリックし選択表示するという能動的な行動を伴いますので、 より対象の情報に対する注目度は高くなります。


タブとして設定出来るのは、クリックなどのマウスイベントに反応する任意のエレメントです。 この例では、上部に並ぶ3つのサムネイル(縮小画像)がタブとなっていますので、それぞれのサムネイルをクリックし選択する事で、 その下の画像が切り替わります。

  • ビーチ
  • 海からの風景
  • 芝生
  • PLAY
ビーチ
海からの風景
芝生

そしてこのサンプルでは、タブの自動切替も設定されています。

このようなコンテンツの自動切替は、FlashやJavaScriptなどそれぞれの実装方法に違いはありますが、 Webサイトのトップページに置かれる複数のヘッドライン情報を表示する機能として、 多くのサイト(NFL/MLB/Sonyなど)で利用されるポピュラーな手法と言えます。


WebJADEでのタブの自動切替では、
・切替時間間隔設定 (このサンプルでは4秒)
・ユーザーがタブをクリックし能動的にコンテンツを選択した場合に、
 自動切替を止めるか、あるいは自動切替を再開するまでの時間設定 (このサンプルでは12秒後に自動切替再開)
・ユーザーが自動切替のon/offをコントロール可能
WebJADE仕様の各種エフェクトによるアニメーション効果とエフェクト自体のon/off
などの機能が利用出来ます。


画像の表示切替にタブ切替を利用する場合には、画面上にフルサイズの画像を並べるような事にもなりませんし、 フルサイズの画像表示用に別ページを用意する必要も有りませんので、非常に有効だと思われるかもしれません。 が、画像が大量にあるような構成では、ページの読み込み時に(即時に利用しない)画像までも大量に読み込む事にもなりますので、あまり使い勝手が良いとは言えません。 そのようなケースには、ブラウザのキャッシュを利用したデータ先読み、あるいは別項で説明するAjaxとの組み合わせが大きな威力を発揮します。


利点
  • 限られたレイアウトの中で、より多くのコンテンツを設置する事が可能。
  • ページのレイアウトをコンパクトに纏める事が出来る為、ページの構成が判り易く、ユーザーがより速く求める情報を見付けられる。
  • インタラクティブ性のあるUIは、ユーザーの関心を引き、対象のコンテンツへの興味を深める事に役立つ。
欠点
  • JavaScriptが無効な環境への対応が状況によって大きく変わる。 ページ切替のように、切替表示される対象の全てのコンテンツを表示する場合もあるが、 タブ切替表示のレイアウトサイズが固定されているような場合(w:400px h:200pxなど)には、デフォルト(初期状態)以外は非表示にするような対応も必要となる。
  • 基本的にこのタブ切替の初期化処理はページの読み込み完了後に行われる為、読み込み中の状態から変化するケースもあり、 その場合には、コンテンツが一瞬表示されるなどちらつく場合もある。その対策としてCSSの記述をJavaScriptで書き出すなどの対応が必要。
  • タブクリックなどで情報の切替が行われない場合には、デフォルト以外の情報は目にされないという事なので、 受動的あるいは元々そのページへの興味が薄いユーザーに対する訴求力はさらに低下する。

リンク(URL)での表示項目指定

タブによるページ切替では、1HTTPリクエストに複数のコンテンツが含まれる事になる為、 通常の1HTTPリクエスト(あるいは1URL)=1コンテンツのような単純な関係では無くなります。

このページのURL(http://distraid.co.jp/webjade/tabtoggle.html)においても、 ページ切替/項目切替/リンク指定/Cookie利用/GoogleAnalyticsという5つのコンテンツが含まれますが、 上記URLだけではデフォルト設定のコンテンツが表示されるだけで、 それぞれのコンテンツを表示指定する事は出来ません。

そこで、ページ内リンクの記述方法を利用して、表示するコンテンツ指定を行います。


URLの#以降の部分はfragment-id(fragment identifier)と呼ばれ、 サーバーから返されたデータをクライアント側でどのように扱うのかという、クライアント側だけで使われる補足情報として利用されます。 HTML(とWebブラウザ)では、fragment-idとアンカータグ(<a id="pageLink"あるいはname="pageLink">)やIDが設定されたエレメント(<div id="pageLink">)を使い、 ページのどの部分を表示するかという位置合わせ、あるいは同ページ内にアンカー(<a href="#pageLink">)を記述する事でページ内リンクを設置出来ます。

またfragment-idは、多くのWebアプリケーションにおける利用法として、 操作の条件や結果をfragment-idに設定し、そのfragment-idを含んだリンク(URL)をブラウザに渡す事で、 その操作を行った状態が復元出来るような機能を実装しています。


WebJADEでのタブによるページ切替では、上記2つのfragment-idの利用法を兼用し、 JavaScriptが利用不可な環境ではページ内リンク、JavaScript環境では項目の選択表示が出来るようになっています。 またWebアプリと同様に、タブによる操作毎にfragment-idを更新しhistory(履歴)に記録する事で、back(戻る)機能を有効にするような設定も可能になります。


ページ切替(./tabtoggle.html#tabpage)
項目切替(./tabtoggle.html#tabarea)
リンクでの表示指定(./tabtoggle.html#link)
Cookieを利用した状態保持(./tabtoggle.html#cookie)

上記のリンクを新しいページで開くと、それぞれの項目が選択された状態でページが表示されます。


  • 利点
  • 欠点

利点

  • リンク(URL)での表示項目指定が可能な為、 それぞれのコンテンツが別ページとなっているような構成と同様の利便性を得て、 タブによるページ単位切替の使い勝手が向上する。
  • タブ操作毎にfragment-idを更新する設定では、historyに記録し前回表示したタブにback機能で戻る事が可能。 これも、通常の別ページ構成と同様の使い勝手を実現出来る機能となる。
  • JavaScript可/不可のどちらの環境にも対応出来る。

欠点

  • fragment-idの処理はタブ切替の初期化時(画面上に初期コンテンツが表示された後)に行われる為、 コンテンツのちらつきが発生するが、その対策にはさらに追加の対応が必要となる。
  • 複数のタブを使う場合にはそれぞれのタブ用の表示項目指定が可能だが、その場合にはfragment-idにも複数のidが含まれる事になる為、 JavaScript不可な環境用のページ内リンクが機能しない。

ここでは複数項目の選択表示の例として、 ページ単位切替での表示指定と、ページ内項目切替での表示指定という2つの選択表示設定を行います。

上記の利点/欠点説明の項目切替にもfragment-id利用の設定が行われていますので、
リンク指定の表示と欠点説明の表示(./tabtoggle.html#link&tl=liTlTab2)
のリンクを新しいページで開く事で、このページ(リンクでの表示項目指定)を表示し、 さらにデフォルトでは利点説明が表示される上記ページ内項目で、欠点説明が表示されます。

複数項目指定では設定数に限度はありませんので、ページ内の全ての項目切替で選択表示を行う事も可能です。 ただし、欠点説明にもありますように、複数指定ではJavaScriptが無効な環境用のページ内リンクが機能しません。


Cookieを利用した状態保持

前項のリンク(URL)での表示項目指定は、ユーザーをコンテンツへと導く機能になりますが、 このCookie(クッキー)を利用した状態保持は、ユーザーがコンテンツを利用する際の利便性を向上させる機能となります。


  • 社会
  • 経済
  • 国際
  • スポーツ
  • ガソリン価格高騰 1リットル=160円に (13:02)
  • 緊急地震速報に課題 予測方法の見直しも (10:23)
  • ミャンマーに職員派遣 サイクロン被災で日赤 (09:41)
  • 工場で塩素ガス漏れ (05/08 21:23)
  • 私的録音録画補償金の課金対象広がる方向に (21:09)
  • 欧州中銀 金利据え置き 11カ月連続 (19:40)
  • MSとヤフーの買収交渉決裂 (15:38)
  • コメ輸出全面解禁へ (12:52)
  • ミャンマーのサイクロン被害 死者10万人突破の可能性も (03:49)
  • イランの宗教施設爆発は爆弾テロ (01:21)
  • 米大統領選挙 クリントン陣営正念場 (05/08 21:54)
  • チリの火山噴火 住民4000人避難 (05/08 19:47)
  • クルム伊達公子 ベスト8入り (16:49)
  • スーパーアグリF1撤退 (14:21)
  • 松井稼は3四球2盗塁 アストロズ勝利 (13:18)
  • ディープインパクトが競馬殿堂入り (10:16)

例えば、複数のジャンルの情報を扱っているWebサイトで、 上記のように、それぞれのジャンル毎のヘッドライン情報がタブ切替によるページ内項目として実装されているケースを考えます。

ユーザーが最初にページを訪れた場合には、デフォルト(初期値)として設定されているジャンルが表示されますが、 次回以降にページを表示した時には、前回訪れた際に最後に選択したジャンルのヘッドラインや、 自分の好みのジャンルがまず表示された方が、一々ジャンルを選択する手間が省けて便利だと考えるかもしれません。 そこでCookieを利用し、タブの選択状態の保存と復元を行います。


上記のページ内項目切替ではタブを切り替える度にCookieを更新していますので、次回このページを訪れた場合には、Cookieに保存されたデータを反映し最後に選択したタブが表示されます。 また、このタブ項目切替は、項目の複数選択が可能ですので、興味があるジャンルを複数表示するような設定もCookieに保存されます。

このCookie更新をタブ切り替え時では無く設定画面などで行う事で、タブ選択履歴に拘わらず常に最初に表示されるタブを設定する事も可能です。

勿論これはページ内項目だけではなくページ単位での切替にも適用可能ですので、サイトの構成に合わせた設定が出来ます。


GoogleAnalyticsでのアクセス解析への対応

1URLに複数のコンテンツが含まれるページ単位の切り替えの場合には、 通常のアクセス解析やサーバーログでは、初回リクエスト時のユーザーアクセスが記録されるだけで、 実質的なコンテンツ移動であるタブ切り替えは反映されません。 その為、ユーザーが複数回タブを切り替え、複数のコンテンツを表示したとしても、初回の1アクセスしか記録されませんので、 アクセス解析データに実際のユーザー動向が反映されているとは言い難い状態になります。

そこでWebJADEのタブ切り替えでは、タブ選択時にもアクセス解析のトラッキングが適用されるような設定が可能になっています。


WebJADEのデフォルトではGoogle Analytics(グーグルアナリティクス)に対応した設定が可能になっていますが、 JavaScriptの関数呼び出しによるトラッキング記録が可能なアクセス解析であるならば、対応可能な設計となっています。

無料ながら高機能なWebアクセス解析サービスとして広く利用されているGoogle Analyticsは、 単純なページ埋め込み型のアクセス解析だけでは無く、JavaScriptを利用したコンテンツ切替にも対応していますので、 これを利用し、ページ遷移を伴わないユーザーの操作を反映したトラッキングが可能となります。


タブ切替では、非選択状態のタブが選択されたタイミングがコンテンツ切り替えと考えられますので、 そのタブ切替で選択状態になったページのIDを引数とし、GoogleAnalyticsのトラッキング用の関数(ga.jsのpageTracker._trackPageview又はurchin.jsのurchinTracker)を呼び出します。 これにより、タブ選択時にもアクセス解析に記録されるようになりますので、より正確なユーザー動向を知る事が出来ます。

また、このアクセス解析はページ単位のタブ切り替えだけでは無く、項目単位のタブ切り替えにも適用出来ますので、 単純なページ単位でのアクセスだけでは無く、よりミクロで詳細なトラッキングを記録する事も可能です。


WebJADE