- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2021-07-05T23:37:22+09:00;2021-07-05T22:57:55+09:00","default:kanateko","kanateko")
#author("2021-07-06T15:33:33+09:00;2021-07-05T22:57:55+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);
#flex{{
|CENTER:&ref(ac.jpg,nolink,500x0);|
}}
#contentsx
*指定した範囲を折りたたんで表示するプラグイン [#ke30fe8a]
#style(class=summary){{
|>|~ac.inc.php|h
|RIGHT:100|150|c
|~製作者|kanateko|
|~ライセンス|GPLv3|
|~動作確認|PukiWiki 1.5.3 ～|
|~最終更新|2021-07-05|
}}
マルチライン部分を折りたたみ、指定した見出し部分をクリックorタップすることで展開するプラグイン。プラグイン名は "''ac''cordion" から。
折りたたみプラグインといえば昔からよく使われるregionプラグインがあるが、これは開閉用の小さなボタンをピンポイントで押さないと動作しないため、より使いやすいものを新たに作成した。
以前にも同じ理由で似たようなプラグイン ([[expandプラグイン>../expand]]) を作っているが、本プラグインにはページの見出しを使った折りたたみやリスト内、テーブル内での折りたたみといった新たな機能が備わっている。
:このプラグインでできること|
--指定した範囲を折りたたんで表示する
---折りたたみ部分の見出しはregionと同様に指定可能
--ページの見出しを使って折りたたみ表示をする
--インラインプラグインとしてリストやテーブル内でも使用可能
--最初から展開した状態での表示
--折りたたんであることを明示する文章を表示できる
#clear
*ダウンロード [#i62b3f12]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]
|~日付|~バージョン|~備考|h
|2021-07-05|1.2|ページの見出しを使用する場合はオプションで指定するよう変更 (元々は自動だった)|
|2021-07-04|1.1|インライン型を追加|
|2021-04-02|1.0|初版作成|
*インストール [#ma9d057e]
+GitHubから「ac.inc.php」フォルダをDLする。
+中の「ac.inc.php」をpluginフォルダへ追加し、「ac.css」の内容をskinフォルダのpukiwiki.cssに加える。
+jQueryとFontAwesomeを使うので、pukiwiki.skin.phpの<head>～</head>の間に以下の内容を追加する。
#prism(html,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" >
}}
cssの内容は最小限の記述のみにしてあるので、装飾やアニメーションなどは各自でサイトに合わせて追加して欲しい。
FontAwesomeを使いたくない場合は::beforeと::afterのfont-familyの指定を削除し、::beforeのcontentを '+'、::afterのcontentを '-' などに変更すればOK。
#style(class=table_compact){{
|CENTER:300|c
|&ref(pkwk.jpg);&br;配布版の見た目 (デフォルトPukiWiki)|
}}
*プラグイン設定 [#x57d4f61]
:PLUGIN_AC_ALT_MESSAGE|altオプションで表示する文章
*使用方法 [#c0927415]
&marker(blue){ブロック型};
#ac([折りたたみ部分の見出し][,h,open,alt]){{
折りたたむ内容
}}
&marker(blue){インライン型};
&ac([折りたたみ部分の見出し][,h,open,alt]){折りたたむ内容};
&ac([折りたたみ部分の見出し][,open,alt]){折りたたむ内容};
-見出しを設定する場合は必ず第一引数として記述すること。
-見出しを設定していない場合 (空白の場合を含む) は自動的に '...' になる。
-見出しを設定していない場合 (空白の場合を含む) は自動的に "..." になる。
-hオプションを指定した場合、見出しの内容は無視される。
-オプションと同じ文字列を見出しにしたい場合は先頭に "~" (チルダ) を入れる。
**オプション [#a2e2779b]
:h|&marker(yellow){直上の要素}; (兄弟要素) を折りたたみ部分の見出しとして使用する。主にページの見出しを使って折りたたむ際に使用する。''インライン型では使用できない''。
:open|折りたたみ部分を開いた状態で表示する。
:alt|折りたたんでいる際にその旨を示す文章を表示する。
*使用例 [#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){テーブル内でも折りたためる};|
*追加したい機能など [#ud342f39]
-特になし
*備考 [#i45e68b9]
&marker(green){hオプションの仕様について};
#ac(h){{{
なぜ直上の要素を指定するという奇妙な仕様なのか。
似たようなプラグインで見出しの折りたたみをする場合、引数を (h1やh2に) 装飾して出力していることが多いのだが、これだとPukiWikiの見出し作成機能を通していないため、その影響でcontetntsプラグインに表示されなかったり、見出しごとの編集を行えなかったりとなにかと不都合があった。
この問題を解決するには見出しを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)
