#author("2022-06-17T20:48:42+09:00;2021-07-26T22:31:14+09:00","default:kanateko","kanateko")
#author("2022-07-06T04:29:04+09:00;2021-07-26T22:31:14+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);
#ref(ac.jpg,nolink,center,wrap,500x)
#contentsx
*指定した範囲を折りたたんで表示するプラグイン [#ke30fe8a]
#infobox(plugin){{
name=ac
ver=1.6
pukiwiki=1.5.3
update=2021-07-26
}}
マルチライン部分を折りたたみ、指定した見出し部分をクリックorタップすることで展開するプラグイン。プラグイン名は "''ac''cordion" から。使う頻度が高そうだから短く書けるようにということでこの名前に。
折りたたみプラグインといえば昔からよく使われるregionプラグインがあるが、これは開閉用の小さなボタンをピンポイントで押さないと動作しないため、より使いやすいものを新たに作成した。
以前にも同じ理由で似たようなプラグイン ([[expandプラグイン>../expand]]) を作っているが、本プラグインにはページの見出しを使った折りたたみやリスト内、テーブル内での折りたたみといった新たな機能が備わっている。
:このプラグインでできること|
--指定した範囲を折りたたんで表示する
---折りたたみ部分の見出しはregionと同様に指定可能
--ページの見出しを使って折りたたみ表示をする
--インラインプラグインとしてリストやテーブル内でも使用可能
--最初から展開した状態での表示
--折りたたんであることを明示する文章を表示できる
--複数のアコーディオンを同時に開閉するボタンを表示できる &size(8){&color(red){new!};};
---ボタンは複数設置可能で、開閉する範囲を制御できる (詳細は後述)
#clear
*ダウンロード [#i62b3f12]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]
|~日付|~バージョン|~備考|h
|90|||c
|2021-07-26|1.6|#ul(他の要素をアコーディオンのヘッダーに指定した際 (hオプション) に、元々ある疑似要素と開閉用アイコンが干渉しないよう、アイコン表示用の要素を追加)|
|~|1.5|#ul(プラグインの呼び出し毎に挿入されていたスクリプトを大幅に削減、基本的に1回のみ挿入するよう変更)|
|2021-07-07|1.4|#ul(全開閉ボタンの制御範囲の終了位置を作成する機能を追加,全開閉ボタンが連打できた問題を修正,全開閉ボタンにも状態に合わせてクラスを切り替える機能を追加)|
|2021-07-06|1.3|#ul(複数のアコーディオンの開閉を制御する機能 (ボタン) を追加)|
|2021-07-05|1.2|#ul(ページの見出しを使用する場合はオプションで指定するよう変更 (元々は自動だった))|
|2021-07-04|1.1|#ul(インライン型を追加)|
|2021-04-02|1.0|#ul(初版作成)|
*セットアップ [#ma9d057e]
+GitHubから「plugin-ac」フォルダをDLする。
+中の「ac.inc.php」をpluginフォルダへ追加し、「ac.css」の内容をskinフォルダのpukiwiki.cssに加える。
+jQueryとFontAwesomeを使うので、pukiwiki.skin.phpの<head>～</head>の間に以下の内容を追加する。
#prism(php,false){{
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet" >
}}
+pukiwiki.ini.phpでマルチラインプラグインを許可する。
#prism(php,false){{
define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
}}
#br
cssの内容は最小限の記述のみにしてあるので、装飾やアニメーションなどは各自でサイトに合わせて追加するように。
FontAwesomeを使いたくない場合は::beforeと::afterのfont-familyの指定を削除し、::beforeのcontentを '+'、::afterのcontentを '-' などに変更すればOK。
#style(class=table_compact){{
|CENTER:300|c
|&ref(pkwk2.jpg);&br;配布版の見た目 (デフォルトPukiWiki)|
}}
*プラグイン設定 [#x57d4f61]
:PLUGIN_AC_ALT_MESSAGE|altオプションで表示する文章
*使用方法 [#c0927415]
&marker(blue){ブロック型};
#ac([折りたたみ部分の見出し][,h,open,alt,all,end]){{
折りたたむ内容
}}
&marker(blue){インライン型}; (リスト内やテーブル内のみ)
&ac([折りたたみ部分の見出し][,open,alt]){折りたたむ内容};
-見出しを設定する場合は必ず第一引数として記述すること。
-見出しを設定していない場合 (空白の場合を含む) は自動的に "..." になる。
-hオプションを指定した場合、見出しの内容は無視される。
-オプションと同じ文字列を見出しにしたい場合は先頭に "~" (チルダ) を入れる。
**オプション [#a2e2779b]
:h|&marker(yellow){直上の要素}; (兄弟要素) を折りたたみ部分の見出しとして使用する。主にページの見出しを使って折りたたむ際に使用する。''インライン型では使用できない''。
:open|折りたたみ部分を開いた状態で表示する。
:alt|折りたたんでいる際にその旨を示す文章を表示する。
:all|複数のアコーディオンを同時に開閉するためのボタンを表示する。複数設置可能。
設置した位置よりも下にある、同階層のアコーディオンが対象。複数ボタンがある場合は次のボタンまでが対象。
:end|allオプションで設置したボタンの制御範囲の終了位置を作成する。一番下まで対象にする場合は特に必要ない。
*使用例 [#e51bc32f]
**ベーシック [#pcf02b79]
#ac{{
この部分が折りたたまれる。
}}
#ac{{
この部分が折りたたまれる。
}}
**折りたたみ部分の見出しを指定する [#ze21c690]
#ac(詳細を表示){{
必ず第一引数として指定する。
}}
#ac(詳細を表示){{
必ず第一引数として指定する。
}}
**最初から開いた状態にする [#ra190965]
#ac(開いてる,open){{
押すと閉じる
}}
#ac(開いてる,open){{
押すと閉じる
}}
**ページの見出しで折りたたむ [#e15b69e4]
***見出し
#ac(h,alt){{
必ず見出しの真下に置くこと。
ついでに閉じているときにメッセージを表示。
折りたたみに使った見出しは目次にちゃんと表示されるし、見出しごとの編集にも使える。
}}
***見出し [#h50250ec]
#ac(h,alt){{
必ず見出しの真下に置くこと。
ついでに閉じているときにメッセージを表示。
折りたたみに使った見出しは目次にちゃんと表示されるし、見出しごとの編集にも使える。
}}
**リスト内やテーブル内で使用する [#h8fa7cb1]
インライン型で使う。
注：インライン型はリスト内やテーブル内でのみ使用すること。
--リスト
--&ac(リスト){リスト内でも折りたためる};
--リスト
|&ac{テーブル内でも折りたためる};|
--リスト
--&ac(リスト){リスト内でも折りたためる};
--リスト
|&ac(open){テーブル内でも折りたためる};|
**複数のアコーディオンを開閉するためのボタンを設置する [#b26777ea]
&marker(yellow){ボタンよりも下にある同階層のアコーディオン};が対象。次のボタンがある場合はそこまでが制御の範囲となる。
#ac(all)
#ac{{
︙
#ac(all)
#ac{{
︙
#ac(end) // 必要に応じて設置。ページには表示されない。
#ac(ソース全体){{{{
#ac(all)
#ac(このアコーディオンは1つ目のボタンで開閉されます){{
制御の対象です。
}}
#ac(このアコーディオンは1つ目のボタンで開閉されます){{{
#ac(制御の対象外です。){{
このアコーディオンは階層が違うため制御の対象外です
}}
}}}
#ac(このアコーディオンは1つ目のボタンで開閉されます){{
制御の対象です。
}}
#ac(all)
#ac(このアコーディオンは2つ目のボタンで開閉されます){{
制御の対象です。
}}
#ac(このアコーディオンは2つ目のボタンで開閉されます){{
制御の対象です。
}}
#ac(end) // 必要に応じて設置。ページには表示されない。
#ac(このアコーディオンは対象外です){{
ボタンに反応しません。
}}
}}}}
#br
#ac(all)
#ac(このアコーディオンは1つ目のボタンで開閉されます){{
制御の対象です。
}}
#ac(このアコーディオンは1つ目のボタンで開閉されます){{{
#ac(制御の対象外です。){{
このアコーディオンは階層が違うため制御の対象外です
}}
}}}
#ac(このアコーディオンは1つ目のボタンで開閉されます){{
制御の対象です。
}}
#ac(all)
#ac(このアコーディオンは2つ目のボタンで開閉されます){{
制御の対象です。
}}
#ac(このアコーディオンは2つ目のボタンで開閉されます){{
制御の対象です。
}}
#ac(end)
#ac(このアコーディオンは対象外です){{
ボタンに反応しません。
}}
*追加したい機能など [#ud342f39]
-%%全開閉を終わらせるためのオプションが欲しいかもしれない。%% v1.4で追加
*余談 [#i45e68b9]
&marker(green){hオプションの仕様について};
#ac(h){{{
なぜ直上の要素を指定するという奇妙な仕様なのか。
似たようなプラグインで見出しの折りたたみをする場合、引数を (h1やh2に) 装飾して出力していることが多いのだが、これだとPukiWikiの見出し作成機能を通していないため、その影響でcontentsプラグインに表示されなかったり、見出しごとの編集を行えなかったりとなにかと不都合があった。
この問題を解決するには見出しをPukiWikiに読み込ませて出力させた上で利用する必要があったため、色々と悩んだ末にJavascriptで動的に指定するという方法を選んだ。
基本的にページの見出しの下に置いて使うということになっているが、直上に要素があればどこに置いても使える。例えば、この折りたたみ要素は直上の段落 (p) を指定することで、折りたたみ部分の見出しに別のプラグインを使って装飾した文章を表示している。
&marker(green){hオプションの仕様について};
#ac(h){{
なぜ直上の要素を指定するという奇妙な仕様なのか。
︙
}}
ただ、この見出しのように入れ子の構造になっている場合、子要素を押しても反応がないという問題がある。pointer-eventsをnoneにしてやれば解決するが、こうすると今度は入れ子になったリンクが押せなくなる。悩ましい。
}}}
&marker(green){インライン型について};
#ac(h){{{
インライン型と言いつつ実際には''ブロック要素'' (div) を出力している。リスト内で使えるようにするためやむなくインライン型ということにした。
ちなみにテーブル内では普通にブロック型のプラグインが使える。ただしマルチラインは使えないので下記のように一行で書く必要がある。
|#ac(open,折りたたまれる内容)|
|#ac(open,折りたたまれる内容)|
}}}
*コメント [#tcd76a4f]
#pcomment(,10,above,reply)
#pcomment(reply)
