長いページをタブで整理する。ぴったりのjQueryプラグインを探してみた

20100720170942
ページ全体のナビゲーションとしてではなく、1つのページをタブで整理するデザインってありますよね。
価格.comの、「価格比較」「スペック」「特徴」みたいな……。

価格.comぐらい大規模なウェブサイトであれば、ページ全体のナビゲーション同様、一つ一つのタブにURLを割り当てればいいのですが、小規模のサイトの場合、1ページの段落分けの代わりにタブを……ということもあると思います。

一定の条件に沿う、そういう用途にぴったりのスクリプトを探すのに苦労したので、記録しておきます。

まず、希望の条件を整理してみる

1.htmlは1つのページにまとめられること
2.html、cssのデフォルトは、「display:none;」を使わないこと
3.CSSによるデザインがこなれていること
4.jQueryを使うこと

ajaxとかはどうでもいいです。上の条件を満たすことが大事。条件の数は少ないのですが、全部満たしていることを確認するのが結構手間でした。

1.htmlは1つのページにまとめられること

3つの理由があります。
(1) タブ間の遷移に時間がかかると、閲覧者が大変（離脱されてしまう可能性が高くなる）
(2) 既にGoogle等にインデックスされているので、インデックスの対象を増やしたくない
(3) これ以上ページの数が増えると管理が大変
用途によっては、別々のhtmlの方がいいときもありますよね。
タブ毎に別々のページにするスクリプトもあるので、こういうのも検討してみるとイイと思います（しかし、この場合あえてJavaScript使う必要あるんでしょうかね…ピンと来ない）

2.html、cssのデフォルトは、「display:none;」を使わないこと

html、cssベースのデフォルトで「display:none;」を使っていると、JavaScriptを使えないブラウザでそのページを表示できません。一々JavaScriptを使えないブラウザ向けのページを作るのも面倒です。
そして何より、安易に「display:none;」を使うと、SEO的に不利になる可能性があります。だからこれ、大事です。

3.CSSによるデザインがこなれていること

CSSは全部自分で書くぜって場合にはあまり気にする必要ないのでしょうが、なにせデザイン心のない私にとってはこれもとっても大事。できれば複数のデザインを選択できればなお可です。

4.jQueryを使うこと

もうコンフリクトだなんだと面倒くさいので、jQueryのプラグインで全部まとめることにしちゃいました(^^;

以下、個別に検討します。

【候補.1】否 Ajax タブインターフェース for jQuery

スクリプトのサイズが小さい。デザインもすっきり。つまりとてもいい！全ての条件を満たすのですが、使い方がよくわかりませんでした。全文コピペしてスクリプトのURLをフルパスに書換えても駄目だったので、なにか致命的な見落としがあるのではないかと思うのですが……。

【候補.2】Rotating jQuery tabs

「タブは設定した間隔で自動的に移動」するというのが特徴的。デザインもすっきり、設置も簡単そう。……ですが、2年以上前のスクリプトであることと、「自動的に移動」する機能をオフにできるかわからなかったことから、見送りました（ちゃんと確認してません）。
しかし使い勝手はよさそうです。

【候補.3】jQuery UI タブ

デザインがあれこれ選べること、jQuery UIというjQueryの公式UIプラグイン(?!)ということで継続的メンテナンスが期待できることから採用しました。

今回はタブ機能だけ使えればいいので、「Core」「Widget」「Tabs」だけチェックをいれたのですが、JavaScript部分の圧縮前サイズは約17KBもあります。そしてCSSは、機能毎に絞り込むようになっていないので、こちらも同じくらいサイズがあります。うーん、でかい。
しかしデザインをあれこれ選べるのは楽なので、今回はこれを採用することにします。

使い方は、「長〜いページもスッキリ！jQueryでタブ表示」(ASCII.jp)の解説がとてもわかりやすいです。
記事の当時とは操作の流れが若干変わっているので、補足しますね。

現在の表示はjQuery UIのStable (1.8.2: for jQuery 1.4+)とLegacy (1.7.3: for jQuery 1.3+)に対応しているみたいです。

1.最低限必要な「Core」「Widget」「Tabs」以外のチェックを外す。

ファイルサイズが大きいですから最小限の構成にしましょう。

2.Themeで好みのCSSテーマを選択する。

名前だけじゃわかりませんから、「design a custom theme」をクリックしましょう。3に遷移します。

3.カスタマイズをする

特にカスタマイズをする気はなく、好みのCSSテーマを選択したいだけの場合は、左側のメニューから「Gallery」をクリック。左側に2.のThemeに対応したスクリーンショットが表示されるます。適当にスクリーンショットをクリックしてみましょう。右側のサンプル表示が切り替わります。

その後、好みのものが決まったらスクリーンショット下の「Download」をクリック。
すると、2の画面に戻ります。Versionは特に差し支えなければ1.8.2のままでいいので、あとは「DOWNLOAD」をクリック。するとzipファイルを生成してダウンロードがはじまります（結構な確率で失敗するので、その際はブラウザの戻る画面で戻って再度「DOWNLOAD」をクリックすればOKです）。

あとはASCII.jpの記事どおりでいいと思います（記事の説明とは異なり、CSSファイルは1つにまとまっています）。

4.で、完成したもの（まとめ）

1.htmlは1つのページにまとまっています。
2.html、cssのデフォルトは、「display:none;」を使っていません。
　※変更直後から1週間程度、そのPHP スクリプトで生成していた5000ページ近くがGoogleのインデックスから削除されましたが、ウェブマスターツールから再審査リクエストをしたのもあってか、今では元に戻っています。【07/30更新】
3.CSSによるデザインもまぁこなれていると思います（外枠を外して、浮いているタブにしています）
4.jQueryを使っています。
5.http://ottava.suki.net/item/16149/#comment等と、#でタブを指定してリンクすることもできます。