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

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

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

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

---

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

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

---

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

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

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

---

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

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

---

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

---

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

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

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

---

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

---

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

---

リンク(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)

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

---

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

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

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

Cookieを利用した状態保持

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

---

例えば、複数のジャンルの情報を扱っている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)を呼び出します。 これにより、タブ選択時にもアクセス解析に記録されるようになりますので、より正確なユーザー動向を知る事が出来ます。

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