利用者:２Ｐ/collapsible
このページでは、折り畳み機能をポケモンWikiに最初に持ち込んだ本人が、半ば後悔しながら解説します。
この文書について
- このページでは公式や財団を凌駕する無駄に高品質なヘルプを作成することを目論んでいるため細部まで仕様や振る舞いを解説していますが、正直言って使って欲しくない機能もあります。というか#機能概要に書き殴ってますが折り畳み自体積極的に使って欲しいものではありません。
- 複数の環境で動作検証していますが、全ての環境でこの通りになるとは限りません。
- このページの内容はCreativeCommons NonCommercial Share-Alike 2.5 Genericでの利用も許諾します。
機能概要
MediaWiki1.18以降、クリックにより折り畳み/展開を切り替えられるような要素を簡単に作れるようになりました。
この機能によって得られる可能性がある唯一の利益は見かけの省スペース性です。すっきりするのはあくまでも見かけ上のことであり、ページサイズはむしろ増大します。これは読み込みに要する時間が延びることを意味します。また折り畳み/展開の切り替えにも時間がかかることがあります。もしもコンテンツが多くの人にとって不要であり、見たい人だけが見れば良いということであれば、折り畳みではなく別ページ化を検討すべきです。
非対応環境での表示
この機能はすべての環境で働くとは限りません。たとえば、ニンテンドー3DSブラウザーではこの機能は働きません。そのような環境では、初期値が非表示となっているものも含め、すべての部分が展開された状態で表示されます。また機能が利用可能な環境であってもページが読み込まれてからスクリプトが実行されるまでの間は同様の状態となります。つまり、この機能は折り畳まれた要素が閲覧者の操作無しには表示されないことを全く保証しません。もちろん、そのようにするhackも存在します[1]が、スクリプト無効の環境で表示されることのないコンテンツを書くことにどんな事典的意義があるのでしょうか。
また、印刷版においても問題があります。スクリプトが有効な状態で取得した印刷版ページでは、実際に印刷した後の紙上では当然スクリプトが作動しないにもかかわらず、ブラウザでの閲覧時と同じ状態となります。そのような環境で初期状態が非表示となっている部分を印刷したい場合は、ひとつずつクリックして展開する必要があります。さらに、折り畳み/展開用のリンクも印刷対象になってしまいます。これは頭の硬い事典では避けるべき自己言及と考えられているもののひとつです (w:Wikipedia:ウィキペディアへの自己言及#印刷版に配慮する) が、向こうでも黙認されている[2]ようです。
右フロート問題
さらに、機能が働いたとしてもそれがすべての環境で使いやすいとは限りません。tableやリスト要素以外の折り畳みは折り畳み/展開を行うためのリンクが右端に表示されますが画面の横幅が広い環境では左揃えのコンテンツとの間が大きく開いてしまうことがあり、使いにくいです。さらに複数の折り畳みが連続して設定されていると、どれがどれに対応するのか分かりづらくなります。
テーブルを折り畳み可能にする
テーブルを折り畳み可能にするには、tableにmw-collapsibleクラスを適用します。
| このテーブルは折り畳めます。 |
|---|
| 内容 |
{| {{bluetable|mw-collapsible}}
!このテーブルは折り畳めます。
|-
|内容
|}
すると、ボタンを押すことで最初の行のみを残して折り畳むことができるようになります。
また、キャプションが存在する場合キャプションのみを残し、先頭行も折り畳まれるようになります。
| 先頭行も折り畳まれます |
|---|
| 内容 |
{| {{bluetable|mw-collapsible}}
|+キャプションがあると
!先頭行も折り畳まれます
|-
|内容
|}
その他の要素を折り畳み可能にする
table以外の要素を折り畳み可能にすることもできます。(見やすいように枠線やマージンをつけています: 本来は不要です)
mw-collapsibleクラスを適用したdiv要素 (長いので以下"外側のdiv"と呼びます) の内の右上端に折り畳み/展開ボタン (同様に以下"トグル") が生成されます。
内側にmw-collapsible-contentクラスの子要素がある場合、その子要素のみが折り畳まれ、外側のdivそのものは残ります。
ここではmw-collapsible-contentの子要素があるため、外側のdiv直下のこの部分は折り畳まれません。
複数の折り畳み可能な子孫要素があっても構いません。ひとつの外側のdivにつき生成されるトグルは1つだけで、そのトグルは当該要素のすべての"mw-collapsible-content"クラスの子要素の折り畳み/展開を切り替えます。
外側のdivの内側にさらにmw-collapsibleクラスの子要素を置くこともできます。できますが、トグルの位置がずれることがあります。
折り畳める要素
折り畳まれる要素は必ずしもdivでなければならないわけではありません。p要素も使用できます。
pre要素も実は折り畳めます。
mw-collapsible-contentクラスによる折り畳み部分の指定では、折り畳まれる要素はブロック要素でなければならないようです。このsmall要素はstyle="display:block"でブロック要素を装っていますが、元がインライン要素なので受け付けられません。
- リスト要素は
- 折り畳めます。
- ulやolも
- mw-collapsibleクラスを直接指定することで
- 一応折りたためますが
- ブラウザによってはリストマーカーが消失するバグが発生します
インライン要素やリストを折り畳むなら、
- div要素の
- 内側に
- 入れるのが
- 良いでしょう。
mw-collapsibleクラスを直接付ければどんな要素でも折り畳めると言われており、確かに一見そのように見えますが、実際には当該要素の内側にmw-collapsible-contentクラスのdiv要素を挿入する処理が行われており、つまりこの方法で折り畳めるのはフロー・コンテンツを子要素に持てるものに限られます (table, ul, ol要素は例外的に別の処理が行われているため、問題ありません)。
最初から非表示
"mw-collapsible"クラスと"mw-collapsed"クラスが同時指定されている場合、最初から折り畳まれた状態になります。以下のように書きます
<div class="mw-collapsible mw-collapsed">
== 最初から非表示 ==
<div class="mw-collapsible-content">
非表示内容
</div></div>
トグルを変更する
ラベルの変更
[開く]の部分はdata-expandtext属性、[折り畳む]の部分はdata-collapsetext属性で任意の文字列を指定できます (片方だけ指定することもできます)。{{int:show}}, {{int:hide}}を指定するとそれぞれ[表示], [非表示]が利用者の設定した言語で表示されます。角括弧は自動で追加されます。この機能はHTML5の技術を使用しており、古いブラウザには認識されないことがあります (それでも通常の折り畳み機能が有効な環境であれば、ラベルが書き換わらないだけで折り畳み自体は動作します)。
折り畳み直前の文章
折り畳む内容
<div class="mw-collapsible" data-expandtext="展開リンクテキスト" data-collapsetext="非表示リンクテキスト">
折り畳み直前の文章
<div class="mw-collapsible-content">
折り畳む内容
</div></div>
mw-collapsible-toggle
mw-collapsibleクラスの子要素にmw-collapsible-toggleクラスを適用すると、その要素がトグルとして使用されます。トグルはmw-collapsible要素の子要素としてであれば任意の位置に、任意の数設置できます。通常の自動生成されるトグルと異なり、この方法で指定した要素はスクリプト非対応ブラウザであっても表示されます[3]。そのような環境では意味の分からない文となるため、頭の堅い事典では「ここをクリック」といったラベルは自己言及的として避けるべきものと言われていますが、一方でそのような表示がないとトグルがそこに存在することに利用者が気付かないおそれがあります。また、折り畳み時と展開時でラベルを変更することはできません。
折り畳まれない
mw-collapsible-toggleクラスはブロック要素にのみ有効のようです。
テーブルに適用する場合は、キャプションの子要素またはキャプションが無い場合は最初の行のセルの子要素としてのみ設置できます。キャプションの子要素として設置する場合float:right;スタイルが自動で無効になります。キャプションまたはセルの子要素として設置する場合mw-collapsible-toggleクラスは任意の要素に有効であるように見えますが、セルの子要素として設置してfloatを解除する場合インライン要素ではブラウザによっては正常にはたらかないことがあります。そのようにしたければdiv要素にdisplay:inline;float:leftを適用して使用しましょう。
| 1行目ならどのセルでもok | やはり複数設置できます | セル内の 一部 のみとするならdiv要素が無難
|
|---|---|---|
| 2行目以降のものは無効です | 内容 | 内容 |
| captionがあるので, このボタンははたらきません |
|---|
| 内容1 |
ulやolの折り畳みについても、やはり最初のli要素の子要素の場合のみ有効です。captionの場合と同様float:right;スタイルが自動で無効になります。
- 切り替えボタンです
- ないよう
<ul class="mw-collapsible">
<li><span class="mw-collapsible-toggle">切り替えボタン</span>です</li>
<li>ないよう</li>
</ul>
customcollapsible
id属性に"mw-customcollapsible-○○"を指定すると通常のトグルが生成されず、代わりに、"mw-customtoggle-○○"クラスが適用された任意の要素がトグルとしてはたらくようになります。("○○"には適当な名前を付けてください。) mw-collapsible-toggleのものと同様スクリプト無効の状態でも表示されます[3]。展開時と折り畳み時で別のラベルを表示することはできませんが、トグルは任意の位置に、任意の数設置することができ、そのすべてが対応するcustomcollapsibleの折り畳み/展開を行います。逆にidは一意でなければなりません。複数の部分をひとつのcustomtoggleで制御したい場合は、customcollapsibleの子要素として複数のmw-collapsible-contentクラスの要素を配置するか、もしくは折り畳む各部分ごとにidを設定した上でトグルとなる要素に複数の"mw-customtoggle-○○"クラスを同時に適用します。
また、このcustomcollapsibleを利用するとmw-collapsible-contentクラスの子要素が存在しない場合も内側にdivタグを挿入する処理が行われないため、フロー・コンテンツの内包可否を問わず任意の要素を折り畳み可能にできます。
[折り畳み/展開]
[折り畳み/展開]折り畳まない部分[折り畳み/展開]折り畳まない部分
折り畳む内容
[<span class="mw-customtoggle-test">[[#mw-customtoggle-test|折り畳み/展開]]</span>]
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-test">
[<b class="mw-customtoggle-test">折り畳み/展開</b>]折り畳まない部分[<span class="mw-customtoggle-test">折り畳み/展開</span>]折り畳まない部分
<div class="mw-collapsible-content">
折り畳む内容
</div></div>
