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

ac.jpg

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

ac.inc.php
製作者kanateko
ライセンスGPLv3
動作確認PukiWiki 1.5.3 ～
最終更新2021-07-05

マルチライン部分を折りたたみ、指定した見出し部分をクリックorタップすることで展開するプラグイン。プラグイン名は "accordion" から。

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

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

このプラグインでできること
  • 指定した範囲を折りたたんで表示する
    • 折りたたみ部分の見出しはregionと同様に指定可能
  • ページの見出しを使って折りたたみ表示をする
  • インラインプラグインとしてリストやテーブル内でも使用可能
  • 最初から展開した状態での表示
  • 折りたたんであることを明示する文章を表示できる

ダウンロード

最新: GitHub

日付バージョン備考
2021-07-051.2ページの見出しを使用する場合はオプションで指定するよう変更 (元々は自動だった)
2021-07-041.1インライン型を追加
2021-04-021.0初版作成

インストール

  1. GitHubから「ac.inc.php」フォルダを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" >

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

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

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

プラグイン設定

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

使用方法

ブロック型

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

インライン型

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

見出しを設定する場合は必ず第一引数として記述すること。見出しを設定していない場合 (空白の場合を含む) は自動的に '...' になる。hオプションを指定した場合、見出しの内容は無視される。

オプション

h
直上の要素 (兄弟要素) を折りたたみ部分の見出しとして使用する。主にページの見出しを使って折りたたむ際に使用する。インライン型では使用できない。
open
折りたたみ部分を開いた状態で表示する。
alt
折りたたんでいる際にその旨を示す文章を表示する。

使用例

ベーシック 

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

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

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

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

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

押すと閉じる

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

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

見出し

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

インライン型で使う。

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

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

追加したい機能など

  • 特になし

備考

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