この拡張機能は、Fandomの初期状態では有効化されています。
- このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。
- 原文 : w:Help:Tab view。
タブビュー（Tab View）は、既存のページをタブ状に表示するFandomの拡張機能です。ページを組み立てる際、タブビューによって簡単に、魅力的で便利な表示方法をとることができます。
似たような拡張機能で、複数のページを用いない方法については、タブバーをご覧ください。
詳しい手順[編集 | ソースを編集]
- まず、事前にそれぞれのタブで表示したい内容を含んだページを作成しておきます。同じコミュニティに作成されているページならどれでも、タブビューで表示させることができます。
ここでは、例として、このページに3つのサブページを作成し、タブビューに使用します。タイトルは：
- タブビューを追加したいページを開いて編集モードにし、ソースモードに切り替えます。
- 以下の形式で、タブビューのコードを入力します。
<tabview> ページ名1|表示名1 ページ名3|表示名2 ページ名3|表示名3 </tabview>
今回の例では、既に作成してあるページを以下のように並べます。
<tabview> Help:タブビュー/ページ1|タブ1 Help:タブビュー/ページ2|タブ2 Help:タブビュー/ページ3|タブ3 </tabview>
こうすると、以下のように表示することができます。
カスタマイゼーション[編集 | ソースを編集]
表示名に加え、ほかにふたつタブ上で有意義に変換できる部分があります：
- キャッシュ
- プリセット
以下でそれぞれ解説します。配置は下記のとおりです：
<tabview> ページ名|表示名|キャッシュ|プリセット </tabview>
キャッシュの無効化[編集 | ソースを編集]
キャッシュを利用している関係で、更新頻度の高いページを表示するとタブビューでは正常に表示できない場合もあります。その際には、キャッシュを無効にする事で最新データの表示を行うことができます。キャッシュを無効化したいタブについて、2つ目のパイプに続けて、「false」と入力します。ただし、これを多用すると、ページの読み込みが遅くなることに注意してください。
<tabview> Help:タブビュー/ページ1|タブ1|false Help:タブビュー/ページ2|タブ2 Help:タブビュー/ページ3|タブ3 </tabview>
デフォルトで表示するページを指定する（プリセット）[編集 | ソースを編集]
タブビューを利用したページを表示した際に、最初に表示するページを指定できます。デフォルトではタブはすべて閉じられていますが3つ目のパイプの後に「true」と記入することでオープンにするタブを選択できます：
<tabview> Help:タブビュー/ページ1|タブ1 Help:タブビュー/ページ2|タブ2||true Help:タブビュー/ページ3|タブ3 </tabview>
すると：
パラメータ[編集 | ソースを編集]
タブビューで使用できるただふたつのパラメータ（変数）は「title」と「id」です。ページ内ではそれぞれのタブビューをカスタムできません。現在はCSSを通じて設定されます。そのパラメータは：
<tabview title="..." id="...">
スタイル[編集 | ソースを編集]
idをセットしたらすべてのタブを調整できます。例えば、id = Exampleとすると：
ul.tabs > [data-tab="flytabs_Example0"] {
/* style goes here for data-tab="flytabs_Example0" (first tab) */
}
ul.tabs > [data-tab="flytabs_Example1"] {
/* style goes here for data-tab="flytabs_Example1" (second tab) */
}
ul.tabs > [data-tab="flytabs_Example2"] {
/* style goes here for data-tab="flytabs_Example2" (third tab) */
}
<tabview> ページ名|タイトル|キャッシュ|デフォルトで表示するページ </tabview>
このタブ自身はid "flytabs_Example"と共にdivに現れます。そしてコンテンツはid "flytabs_Example-content-wrapper"と共に分離されたdivに制定されます。
問題点[編集 | ソースを編集]
携帯機器での表示[編集 | ソースを編集]
タブビューは携帯機器で表示する場合「破壊」されることに気をつけてください。拡張機能のPHP部分で作成されたHTMLはdivの要素の中に詰め込まれたリンクのリストを作成するだけです。それ以外は拡張機能のJavaScriptによって動かされます。もしタブビューのJavaScriptがロードできない場合、ページが下のリンクに戻るため、これは通常良きコード練習となります。
ところが、PHPコードによって生成されたリンクはユーザーを実際のwikiページに誘導しません。代わりに直接生成ページにリンクします。これはFandomのモバイルサイトがタブビューのJSを読み込まないことを考慮しない限り大した問題ではありません。事実、モバイルサイトはほとんどの拡張機能が依存しているJavascriptをまったくロードしません。そのため携帯機器でそのリンクを使えば記事の内容のみが表示されるページに移動します。
従来のこのようなコード実装はオリジナルコンテンツへのリンクのhrefポイントを持っており生成ページのデータ属性ポイントも持っています。
タブコンテンツの閲覧/編集[編集 | ソースを編集]
タブビューにはオリジナルページを閲覧/編集する簡単な方法は存在しません。これはタブ内のコンテンツを編集したいと思っている経験の少ないユーザーにはわかりづらくなることがあります。タブは実際にはリンク要素であるためユーザーは右クリックしてリンクに従ってマニュアル通りに開くをクリックできます。しかし上記の問題によりユーザーは生成ページに移動します。
関連情報[編集 | ソースを編集]
その他のヘルプとフィードバック[編集 | ソースを編集]
- ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
- 最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
- この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
- このヘルプはコミュニティセントラル内にて管理されています。
