- このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。
- 原文 : 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ポイントを持っており生成ページのデータ属性ポイントも持っています。
タブコンテンツの閲覧/編集[]
タブビューにはオリジナルページを閲覧/編集する簡単な方法は存在しません。これはタブ内のコンテンツを編集したいと思っている経験の少ないユーザーにはわかりづらくなることがあります。タブは実際にはリンク要素であるためユーザーは右クリックしてリンクに従ってマニュアル通りに開くをクリックできます。しかし上記の問題によりユーザーは生成ページに移動します。However there is a script on the Fandom Developers Wiki called TabViewEditLinks that adds the edit links.
Nesting tabs[]
Tabview does not handle nested tabs correctly. In other words, pages you include in your tabs cannot have their own tabview section. The viewer will start to experience the issue when they open a tab that contains another tabview section. Although the specifics of the glitch appear to be inconsistent, the general issue is that the content of the first tab will be displayed followed by the intended tab content. Another issue is that the nested tabs will be displayed as a bulleted list of links instead of tabs.
Once this has occurred, the offending tab's content will display at the end of each of the other tabs. Navigating back to the offending tab may append yet another copy of the tab's content to the end when viewing the other tabs. For example, let's assume we include a 4th page (as "Tab 4") that has its own tabview section. When the viewer opens "Tab 4", they will see the contents of "Tab 1" followed by the contents of "Tab 4". If they navigate to "Tab 3", they will now see the contents of "Tab 3" followed by the contents of "Tab 4". If they navigate to "Tab 4" again and then to "Tab 2", they will see the contents of "Tab 2" followed by 2 copies of the contents of "Tab 4".
If you wish to have nested tabs, you will need to use tabber instead of tabview.
Search engines[]
Because a page using Tabview must use JavaScript to extract other pages and insert them elsewhere, the results may slow down the performance of search engine crawling. Additionally, the same page content is shown in multiple result pages.
Include tags[]
Tabview does not transclude page content. As such, the original page will be displayed and elements such as wikitext include tags (<includeonly>, <noinclude>, and <onlyinclude>) will show the same content as the source page.
関連情報[]
その他のヘルプとフィードバック[]
- ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
- 最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
- この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
- このヘルプはコミュニティセントラル内にて管理されています。