自作プラグイン/ac

2021-07-26 (月) 22:31:14

カテゴリ：プラグイン 自作 追加

ac.jpg

指定した範囲を折りたたんで表示するプラグイン

ac.inc.php
製作者kanateko
ライセンスGPLv3
バージョン1.6
動作確認PukiWiki 1.5.3 - 1.5.4
最終更新2021-07-26

マルチライン部分を折りたたみ、指定した見出し部分をクリックorタップすることで展開するプラグイン。プラグイン名は "accordion" から。使う頻度が高そうだから短く書けるようにということでこの名前に。

折りたたみプラグインといえば昔からよく使われるregionプラグインがあるが、これは開閉用の小さなボタンをピンポイントで押さないと動作しないため、より使いやすいものを新たに作成した。

以前にも同じ理由で似たようなプラグイン (expandプラグイン) を作っているが、本プラグインにはページの見出しを使った折りたたみやリスト内、テーブル内での折りたたみといった新たな機能が備わっている。

このプラグインでできること
  • 指定した範囲を折りたたんで表示する
    • 折りたたみ部分の見出しはregionと同様に指定可能
  • ページの見出しを使って折りたたみ表示をする
  • インラインプラグインとしてリストやテーブル内でも使用可能
  • 最初から展開した状態での表示
  • 折りたたんであることを明示する文章を表示できる
  • 複数のアコーディオンを同時に開閉するボタンを表示できる new!
    • ボタンは複数設置可能で、開閉する範囲を制御できる (詳細は後述)

ダウンロード

最新: GitHub

日付バージョン備考
2021-07-261.6
  • 他の要素をアコーディオンのヘッダーに指定した際 (hオプション) に、元々ある疑似要素と開閉用アイコンが干渉しないよう、アイコン表示用の要素を追加
1.5
  • プラグインの呼び出し毎に挿入されていたスクリプトを大幅に削減、基本的に1回のみ挿入するよう変更
2021-07-071.4
  • 全開閉ボタンの制御範囲の終了位置を作成する機能を追加
  • 全開閉ボタンが連打できた問題を修正
  • 全開閉ボタンにも状態に合わせてクラスを切り替える機能を追加
2021-07-061.3
  • 複数のアコーディオンの開閉を制御する機能 (ボタン) を追加
2021-07-051.2
  • ページの見出しを使用する場合はオプションで指定するよう変更 (元々は自動だった)
2021-07-041.1
  • インライン型を追加
2021-04-021.0
  • 初版作成

セットアップ

  1. GitHubから「plugin-ac」フォルダをDLする。
  2. 中の「ac.inc.php」をpluginフォルダへ追加し、「ac.css」の内容をskinフォルダのpukiwiki.cssに加える。
  3. jQueryとFontAwesomeを使うので、pukiwiki.skin.phpの<head>～</head>の間に以下の内容を追加する。 
    <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" >
  4. pukiwiki.ini.phpでマルチラインプラグインを許可する。 
     define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
     

cssの内容は最小限の記述のみにしてあるので、装飾やアニメーションなどは各自でサイトに合わせて追加するように。

FontAwesomeを使いたくない場合は::beforeと::afterのfont-familyの指定を削除し、::beforeのcontentを '+'、::afterのcontentを '-' などに変更すればOK。

pkwk2.jpg
配布版の見た目 (デフォルトPukiWiki)

プラグイン設定

PLUGIN_AC_ALT_MESSAGE
altオプションで表示する文章

使用方法

ブロック型

#ac([折りたたみ部分の見出し][,h,open,alt,all,end]){{
折りたたむ内容
}}

インライン型 (リスト内やテーブル内のみ)

&ac([折りたたみ部分の見出し][,open,alt]){折りたたむ内容};
  • 見出しを設定する場合は必ず第一引数として記述すること。
  • 見出しを設定していない場合 (空白の場合を含む) は自動的に "..." になる。
  • hオプションを指定した場合、見出しの内容は無視される。
  • オプションと同じ文字列を見出しにしたい場合は先頭に "~" (チルダ) を入れる。

オプション

h
直上の要素 (兄弟要素) を折りたたみ部分の見出しとして使用する。主にページの見出しを使って折りたたむ際に使用する。インライン型では使用できない。
open
折りたたみ部分を開いた状態で表示する。
alt
折りたたんでいる際にその旨を示す文章を表示する。
all
複数のアコーディオンを同時に開閉するためのボタンを表示する。複数設置可能。
設置した位置よりも下にある、同階層のアコーディオンが対象。複数ボタンがある場合は次のボタンまでが対象。
end
allオプションで設置したボタンの制御範囲の終了位置を作成する。一番下まで対象にする場合は特に必要ない。

使用例

ベーシック 

#ac{{
この部分が折りたたまれる。
}}
...

折りたたみ部分の見出しを指定する 

#ac(詳細を表示){{
必ず第一引数として指定する。
}}
詳細を表示

最初から開いた状態にする 

#ac(開いてる,open){{
押すと閉じる
}}
開いてる

押すと閉じる

ページの見出しで折りたたむ 

***見出し
#ac(h,alt){{
必ず見出しの真下に置くこと。
ついでに閉じているときにメッセージを表示。
折りたたみに使った見出しは目次にちゃんと表示されるし、見出しごとの編集にも使える。
}}

見出し

リスト内やテーブル内で使用する

インライン型で使う。
注：インライン型はリスト内やテーブル内でのみ使用すること。

--リスト
--&ac(リスト){リスト内でも折りたためる};
--リスト

|&ac{テーブル内でも折りたためる};|
  • リスト
  • リスト
  • リスト
...
テーブル内でも折りたためる

複数のアコーディオンを開閉するためのボタンを設置する

ボタンよりも下にある同階層のアコーディオンが対象。次のボタンがある場合はそこまでが制御の範囲となる。

#ac(all)
#ac{{
︙
#ac(all)
#ac{{
︙
#ac(end) // 必要に応じて設置。ページには表示されない。
ソース全体
 
全て開く
このアコーディオンは1つ目のボタンで開閉されます
このアコーディオンは1つ目のボタンで開閉されます
このアコーディオンは1つ目のボタンで開閉されます
全て開く
このアコーディオンは2つ目のボタンで開閉されます
このアコーディオンは2つ目のボタンで開閉されます
このアコーディオンは対象外です

追加したい機能など

  • 全開閉を終わらせるためのオプションが欲しいかもしれない。 v1.4で追加

余談

hオプションの仕様について

インライン型について

コメント

最新の10件を表示しています。 コメントページを参照

  • attachrefプラグインと併用した際の挙動がおかしい気がします。#ac内と外に&attachrefを書いた場合に、&attachrefで生成される画像参照URIの数字がおかしくなり、意図したところと違うところに画像がUPされてしまいます。 -- yu 2021-10-23 (土) 00:38:12
    • コメントありがとうございます。その件に関しては個々のプラグインではなくPukiWikiのシステム上の問題で、記述した位置に関わらずインラインプラグインのほうがブロックプラグインよりも先に処理されるため起こります。そのため正常に動作させるにはPukiWiki本体 (おそらくconvert_html.php) の処理を大幅に変える必要があり、残念ですが今の所は対処できません。 -- kanateko 2021-10-23 (土) 00:53:56
      • 早速の返信ありがとうございます。そうなんですね。。。ありがとうございました。 -- yu 2021-10-23 (土) 02:42:11
  • stepをacで囲む、というのってできないでしょうか？ -- 高柳健志 2022-03-29 (火) 01:08:26
    • コメントありがとうございます。
      stepプラグイン全体をacプラグインで折り畳めるか、という質問であっていますか？
      基本的にマルチラインプラグインは波括弧の個数を増やせば入れ子で使用することができます。 
      例：
#ac{{{
#step{{
#:ステップ1
1つ目のステップ
}}
}}}
      このようにacの波括弧を3つ、stepの波括弧を2つにしてみて下さい。 -- kanateko 2022-03-29 (火) 01:17:14
  • 回答ありがとうございます。
    ただ、ご指摘のとおりでやっても
    pukiwiki-plugin/plugin-ac/ac.inc.php /
    Cannot retrieve contributors at this time
    こうなってしまいます -- 高柳健志 2022-03-29 (火) 02:01:01
    • Pukiwiki=1.5.3 PHP=7.4.25です -- 2022-03-29 (火) 02:05:21
      • 失礼しました。
        指摘通りの記述をして、ページの更新ボタンを押すと、
        acプラグインのGitHubのページに飛んでしまい、上記のメッセージが
        出ます。プラグインの配置は正常に配置しています。
        スキンを使ったりもしていた梨、ほかのプラグイン(基本的にkanatekoさんの
        プラグインを使用)しているので、そのせいかもしれません。
        こちらでもう少し調べてみます。 -- 2022-03-29 (火) 02:56:08
      • なんとも不思議な挙動ですね・・・。申し訳ないですが私の方では何が原因であるか判りかねます。
        通常のプラグインやPukiWikiの動作でGitHubにつながるというのはまず考えられませんので、ブラウザやその拡張機能等の影響である可能性が考えられます。 -- kanateko 2022-03-29 (火) 03:33:45
    • 正直エラーを見ても状況がよくわからないのですが、「ac.inc.php」や「step.inc.php」をPukiWikiのプラグインフォルダに配置し、PukiWiki上でこれらのプラグインを使った際にエラーが出るのですか？
      プラグインを正常に配置している場合、 
      plugin
┣ ac.inc.php
┗ step.inc.php
      このような配置になるため、「pukiwiki-plugin/plugin-ac/」という文字列は通常表示されません。
      後半の文に関しても、検索してみるとPukiWikiとは関係のないエラーのように思えます。 -- kanateko 2022-03-29 (火) 02:26:50
  • すみません、以下のファイルでcontentのバリュー2か所、文字化け？してないでしょうか。
    ＃私の環境だけ？
    https://github.com/kanateko/pukiwiki-plugin/blob/master/plugin-ac/ac.css
    .plugin-ac-header .ac-icon::before {

    opacity: 1;

    content: "";
    }
    .plugin-ac-header .ac-icon::after {

    opacity: 0;

    content: "";
    } -- morimo 2022-04-08 (金) 17:29:49

    • 素人質問ですみません。
      追加で一点、暇で暇で仕方ないときにでも、相談に乗っていただけないでしょうか。
      インストールしてみた所、折りたたみ機能は正常に動きます。
      しかし、ac-icon（+と-）が出てこないという状態です。
      恐らく、上のcontentは"\f0fe"と"\f146"を入れれば良さそうだったので、試したのですが改善しませんでした。
      そこで、切り分けのために、書かれていた「Font Awesome」を使わない手順を試してみましたが、それでも何も変わりませんでした。
      試した内容は以下です。

      - pukiwiki.cssを以下の通り更新。

      - 「font-family: "Font Awesome 5 Free";」を行ごと削除

      - contentを「content: "+";」と「 content: "-";」に変更。

      - 一応、'+'も試してみましたが、特に反応なし。
      上の切り分けで、そもそも、ac-iconを読みに行っていないような気もしました…。
      環境は、Pukiwiki 1.5.4、PHP7.4.25です。
      少し気になっている点として、以下がございます。

      - ac-pluginディレクトリは、pluginディレクトリ直下に置いている。

      - ac.css.mapとac.scssは、上記ディレクトリに置かれているだけで良い？
      以上です。 -- morimo 2022-04-08 (金) 19:11:48

    • コメントありがとうございます。
      まず、文字化けに関しては私の方でも確認しましたので、先程修正版を上げておきました。ご報告ありがとうございました。
      次にアイコンが表示されないとのことですが、1.5.4で動作を確認してみたところ、私の方では特に問題なく使用することができました。 (サンプル)
      FontAwesomeを使用しないための手順は合っていますし、開閉機能が問題なく動いているのであればjQueryはちゃんと読み込んでいそうなので、あとはキャッシュの問題でしょうか。一度スーパーリロード (Ctrl + F5) を行って症状が改善するか確認してみて下さい。
      最後に、動作に必要なのは「ac.inc.php」と「ac.css (の中身) 」のみです。mapとscssはおまけで特に必要ないなら削除して問題ありません。「ac.inc.php」をpluginフォルダに、「ac.css」の内容をpukiwiki.cssに追加して使用して下さい。 -- kanateko 2022-04-08 (金) 20:47:01
      • 早速のご回答、ありがとうございます。
        正にキャッシュの問題で、スーパーリロードで解決しました…。
        また、ご連絡が遅れましたが、大変便利な機能をありがとうございます。
        他の機能も探したり試したりしたのですが、折りたたみはこちらに行きつきました。
        ありがたく使用させていただきます。
        （あと、コメントの使い方が汚くてすみません。お邪魔でしたら、消したりいただいても大丈夫です。） -- morimo 2022-04-08 (金) 21:52:53
  • この記事で折りたたみ表現ができるようになりました。
    ありがとうございます。
    不明な点が2つあるので質問させてください。
    1.#ac(alt)で「クリック or タップで詳細を表示」という文言が出ています。
    ここのサイトだとタップして開くと上記文言が徐々に透明になり非表示されています。
    私の場合だと、「クリック or タップ〜〜」の表記が残ってしまいます。
    この文言の非表示方法を教えてください。
    2.見出しの左側にある「+」と「-」のアイコンが表示されません。
    スーパーリロードもしてみましたが、だめでした。
    お手数をおかけしますが、宜しくお願い致します。 -- oohasi 2023-04-21 (金) 19:24:50
    • どちらもCSSの問題と思われますが、セットアップの手順2にあるように、「ac.css」の内容を「pukiwiki.css」に追加しましたか？
      こちらのプラグインは最近作成したプラグインと違ってフォルダに放り込むだけでは正常に動作しませんので注意してください。 -- kanateko 2023-04-21 (金) 19:34:48
  • コメントありがとうございます！
    すみません。セットアップ手順2が抜けていました。
    ご指摘の通りに「ac.css」を「pukiwiki.css」に追加したら正常に動作しました！
    ありがとうございます。 -- oohasi 2023-04-21 (金) 19:42:18
  • Font Awesomeを使わずに文字にしたいという方で、
    正常な手順実行後も + と - が表示されない方へ。
    css編集内容の + と - を半角ではなく「全角」の＋と－に変えてみてください。
    PukiWiki 1.5.4 + PHP 7.4.33 環境ですがこれだけで改善しました。 -- 2023-08-17 (木) 10:23:48
  • もしかして、このプラグインはもう使用できないのでしょうか？HTTP ERROR 500 HTTP ERROR 500になります。自分の環境が悪いのかな？と思ったのですが、上のコメントをみると、作者さんのサンプルサイトもエラーになるので、プラグインの問題でしょうか？https://jpngamerswiki.com/_sample/ -- ふむぅ 2024-08-23 (金) 22:18:06
    • サンプルサイトが表示されないのはPukiWikiのバージョンが当時の古いままだったからですね。更新したので現在は表示されるようになっています。プラグインも特に問題なく動作しているようです。 -- kanateko 2024-08-25 (日) 13:59:35
  • 折りたたみプラグイン便利ですね！質問なのですが、このサイトで使われている目次の折りたたみプラグインは、このプラグインを応用したものなのでしょうか？それとも目次用のプラグインがあるのでしょうか？綺麗で使いやすそうな目次だったので気になりました。 -- 2024-08-24 (土) 02:34:55
    • 目次はcontentsxプラグインを自サイト用に改造したものですのでacプラグインとは特に関係ありません。 -- kanateko 2024-08-25 (日) 14:01:01
  • 余計なご報告にて失礼いたします。「リスト内やテーブル内で使用する」を実践してみたところ、私の環境ではテーブル内で使用した時のみ改行と行頭にスペースが発生してしまいました。調べてみた所、228行目あたりにある 
           <div class="{$class['contents']}" id="$id" style="display:{$this->options['display']}">
           $contents
       </div>
    を改行・スペースなしの1行にしたところ改善し、問題なく表示することができました。 -- 2024-08-28 (水) 10:58:30