Top/pukiwikiプラグイン/divregion

pukiwikiプラグイン/divregion

2026-09-26 (土) 13:53:34
お名前:

表記、そんな感じのものを作ったので、一応公開しておきます。

プラグイン概要†

pukiwiki 本家ページにある、他の方が作った 「region プラグイン」 （region.php.inc、endregion.php.inc）をもとに改造・ひねり出したプラグインです。
この既存プラグインが html的には table を利用して実現していたのに対して、本プラグインは div によって実現しています。
正直見た目対応です：table はいろいろとレイアウト問題がありますので。

▼
変更履歴
↑

インストール方法†

  1. 本ページに添付されている下記ファイルをダウンロードし、pukiwiki の pluginフォルダにおいてください。
      filedivregion_151.inc.php →「divregion.php.inc」で保存
      fileenddivregion_110.inc.php →「enddivregion.php.inc」で保存
      divregion V1.4以前からバージョンアップする場合、enddivregion v1.1 とセットで採用してください（両方同時にアップデートするのがよいです）。
    • 旧版：古いregiongroupとの組み合わせ用。「divendregionとの組み合わせチェック」もサポートしていません。
      filedivregion_130.inc.php →「divregion.php.inc」で保存
  2. 使用しているスキンの cssファイルを編集し、以下のクラスを定義してください。
    • div.divregion 標準でのヘッダ行
    • div.divregion_contents 標準での本文部分
    • div.divregion_h1 h1指定時のヘッダ行
    • div.divregion_h2 h2指定時のヘッダ行
    • div.divregion_group 「まとめて開く/閉じる」ボタン用（全幅）
    • span.divregion_group 「まとめて開く/閉じる」ボタン用（クリックエリア）
      • 参考までに、本Wikiで使用している css記述は以下です。
        ▼
        CSS例
  3. 望むならば、さらに別タイプのスタイル指定を登録してもよいです。
    下記のようにxx、yy部分に任意名称（英数字のみ）を付けることで、そのカスタムスタイルを使用できます。
    • div.divregion_contents_xx 本文用のカスタムスタイル
      • これは後述の「cstyle:xx」パラメータ指定で利用できます。
    • div.divregion_yy ヘッダ用のカスタムスタイル
      • これは後述の「hstyle:yy」パラメータ指定で利用できます。
    • div.divregion_gloupe_zz 「まとめて閉じる/開く」用のカスタムスタイル
    • span.divregion_gloupe_zz 「まとめて閉じる/開く」用のカスタムスタイル
      • これは後述の「gstyle:zz」パラメータ指定で利用できます。
↑

改造的オプション†

以下、プラグイン内を書き換えるタイプの改造ネタ。
実施する場合、一部PHP・HTMLの知識が欲しいところです・・・

  • 折りたたみ先頭に表示されている「▼」のような記号表示は、テキストベースで書き換えできます。
    ソース内、次の記載があるところを修正してください。 
    $this->headchar_opened = "▼";
$this->headchar_closed = "<div style='transform:rotate(270deg);'>▼</div>";
    • 上記の通り、ヘッダ部分に html のブロック要素を書き込むこともできます。
↑

使い方†

regionプラグイン同様に、divregion と enddivregion とで本文を挟み込むように記載します。

#divregion(タイトル)
本文
#enddivregion

上記記載により、以下のような表示となります。「タイトル」部分をクリックすることで、折りたたみが開閉されます。

▼
タイトル
  • Ver1.3 以降では、マルチライン引数にも対応しています。
    この場合、enddivregionは記載しないでください。 
    #divregion(マルチライン タイトル,open){{
マルチライン本文
}}
    ▼マルチライン タイトル

    マルチライン本文

  • Ver1.5 以降では、#divregion⇔#enddivregionの組み合わせ簡易チェックの仕組みを入れています。
    以下のように、ページの最後に「#enddivregion(clear)」と記載しておくことを推奨します。これによりページ記述時の組み合わせ不備を検出、エラー表示＆できる範囲でのつじつま合わせをするようになっています（記載しなくても「end忘れ」のエラーチェックが動かないだけで、致命的なエラーにはなりません） 
    #divregion(タイトル,open)
本文
#enddivregion
折りたたみ外の、当該ページの記事、最終行。
#enddivregion(clear)
↑

パラメータ†

divregion には、以下のパラメータを使うことができます。

  • 第一パラメータは「折りたたみのタイトル」文字列として扱います。
    • 指定必須、省略はできません。

これ以降のパラメータはすべてオプションであり、省略可能、順番も任意です。

  • open, close
    • region プラグインにもあったもの。折りたたみの初期状態を指定することができます。
      省略は「close」と同じです。
  • h1,h2
    • タイトル部分に、別スタイルを適用できます。
    • 注意：このh1,h2 は今後廃止予定。次のhstyleを利用するようにしてください。
      「hstyle:h1」と書くと、「h1」指定と同じ意味になります。
  • hstyle:xx
    • タイトル行のスタイルを指定できます。
      指定されたxxを利用して「div.divregion_xx」のスタイルを適用します。
    • 例
      #divregion(タイトル,hstyle:h1)
本文
#enddivregion
      ▼
      タイトル
  • cstyle:xx
    • 本文用のスタイルを指定できます。
      指定されたxxを利用して「div.divregion_contents_xx」のスタイルを適用します。
  • color:#xxxxx|(色名), background-color:#xxxxxx|(色名)
    • スタイルシート指定を無視して、タイトル部分の文字色/背景色を変更できる。
    • xxxxxは16進（0-9,A-F)指定。「Red」などの色名称での指定も可能。
    • 例
      #divregion(タイトル,color:red,background-color:#eee)
本文
#enddivregion
      ▼
      タイトル
  • content-color:#xxxxx|(色名), content-bgcolor:#xxxxxx|(色名)
    • スタイルシート指定を無視して、本文部分の文字色/背景色を変更できる。
    • xxxxxは16進（0-9,A-F)指定。「Red」などの色名称での指定も可能。
    • 例
      #divregion(タイトル,content-color:#00F,content-bgcolor:palegreen,open)
本文
#enddivregion
      ▼タイトル
      本文
  • group
    • 「まとめて開く/閉じる」用のクリックエリアを設定します。
      これをクリックすると、これよりも後ろに置かれている divregion エリアがまとめて開く/閉じる動作をします。
      • これより後方に別の「group 指定行」がある場合、そこで開放処理は終わります。
      • このオプションがある場合、対となる#endregion は記述しないでください。
  • groupend
    • 「まとめて開く/閉じる」範囲を制御するための特別な指定方法です。
      このオプションを指定した場合、この行は利用者側には直接表示するものはありません。「タイトル」部分に記載した文字は意味をもちません。
      • このオプションがある場合、対となる#endregion は記述しないでください。
    • group/groupend 例 
      #divregion(テスト用1,group)
#divregion(対象１-1)
対象1-1、本文
#enddivregion
#divregion(対象1-2)
対象1-2、本文
#enddivregion
#divregion(テスト用2,group)
#divregion(対象2-1)
対象2-1、本文
#enddivregion
#divregion(対象2-2)
対象2-2、本文
#enddivregion
#divregion(テスト用2の終端指定,groupend)
#divregion(対象3)
対象3、本文
#enddivregion
      [テスト用1 ]をまとめて開く
      ▼
      対象１-1
      ▼
      対象1-2
      [テスト用2 ]をまとめて開く
      ▼
      対象2-1
      ▼
      対象2-2
      ▼
      対象3
  • gstyle:zz
    • 「まとめて開く」指定用のスタイルを指定できます。
      指定されたzzを利用して「div.divregion_contents_zz」および「span.divregion_contents_zz」のスタイルを適用します。
    • 例 
      #divregion(h1スタイル,group,gstyle:h1)
#divregion(対象1-1,hstyle:h2)
対象1-1、本文
#enddivregion
#divregion(対象1-2,hstyle:h2)
対象1-2、本文
#enddivregion
#divregion(h1スタイルの終端指定,groupend)
      [h1スタイル ]をまとめて開く
      ▼
      対象1-1
      ▼
      対象1-2
↑

技術的な話。†

↑

基本的なメカニズム†

このプラグインは、単純にいうと以下のようなHTMLを構築するものです。

  • divregion が生成するのは・・・
    <div class=divregion_closed> 
▼タイトル ←閉じたときのタイトル行。
</div>
<div class=divregion_opened> 
▲タイトル ←開いたときのタイトル行
</div>
<div class=divregion_content> 
本文 ←本文
  • enddivregion が生成するのは・・・
    </div>

開閉は JavaScript で実施。
dicregion_closed がクリックされたら、 closed を非表示、opened と content を表示。
dicregion_opened がクリックされたら、 closed を表示、opened と content を非表示。

  • Ver 1.4 では、コンテンツの折りたたみの処理方法を変更しました。
    以前はコンテンツ部分の div のスタイルを「Display:none」として隠し、表示する際には「Display：block」に変更することで対応していましたが、これだと折りたたまれている部分の記述がページ内検索にヒットしません（Display:noneは、表示に際して一切存在しない状態に指定するものであるため）。折りたたみの趣旨からは「検索でヒットしてよい」ものなので、この動作はやや不満でした。
    これを div に「hidden='until-found'」属性をつけて隠すように変更しました（この属性は、存在しているが隠している、という意図のものです）。またそれに伴い、折りたたみ開閉処理もこの属性の操作を行う形にしています。
↑

マルチライン引数対応後の話†

Ver1.3 以降ではマルチライン引数に対応していますが、必ずしもその方式で記述しなければならないというわけではありません。
今まで通りの「divregion・enddivregion の挟み込み」式はサポートし続けますし、むしろそちらを推奨します。

過去互換というのもそうですが。
pukiwikiの仕様上、マルチライン引数は「入れ子的な記述」や「他のブロック型プラグイン・マルチライン引数」との兼ね合いで記述が難しいためです。

↑

Ver1.5での「組み合わせ不備」対策†

divregionプラグインは、enddivregionプラグインとの組み合わせで「本文を挟み込む」かたちになっています。
そのメカニズム上、旧バージョンでは始点終点のどちらかが多い場合にページが崩れてしまう問題がありました。
divregion Ver1.5 では、enddivregion ver1.1 との組み合わせで、それに対して緩和の仕組みをいれています。

divregionを使うページでは、従来通りの divregion ⇔ enddivregion のペア以外に、そのページの最後に以下の記載を追加することを推奨します。

#enddivregion(clear)

これを踏まえて、以下のような判断処理をします。：

  • divregionプラグインでは、それによる「開始点」が記述されるたびに内部的にカウントを行います。
  • enddivregionプラグイン（パラメータなし時）は、内部的に divregionプラグインを呼び出し。divregionプラグイン側で「終了点」をカウントし、開始点と終了点との差分を監視します。
    • この時点で「endが多すぎる」ケースは検出できるので、警告をします。 
      alert: too much #enddivregion.
  • 文末にある enddivregion(clear) では、それが呼ばれた時点で「開始点が過剰」な場合に「終了点」処理を1回行います。
    そのうえで、まだ「開始点」が過剰ならば「過剰警告」を行い、その過剰分の「終了点」を追加します。警告の最後に過剰な「開始点」の数を併記するので、参考にしてください。 
     alert: too few #enddivregion: 1
    • 記述者が自力で正常にペア記述しているなら、最終行の enddivregion(clear) はなくても、それ自体な何も悪さをしません。
↑

スタイル直接表記時、色指定に文字名称（例：Red）などを認めていない理由†

ものすごくシンプルに、判定がめんどくさかったからです（笑）

任意の文字列を許可するといわゆる「インジェクション攻撃」のリスクが発生するためプラグイン側で切り捨てる必要があります。
理想的には「Webカラーで指定できる文字列」か否かをチェックしてはじけばいいんですが、それが地味に面倒くさい。
スクリプトとかクオート類だけを弾くだけでもインジェクション対策としてはそこそこ効くと思うのですが、楽＆安全な方向に倒しています。

→ Ver1.51 で色名での指定に対応しました。
インジェクション系攻撃への対応として、正規表現で使用できる文字を限定しています。

↑

コメント†

ご意見などがあれば。


お名前:

  • ＞れにしても特急レスに驚きです(^o^)／
    たまたま別ページを見ていただけです（笑）
    ああ。一応 dicordpostプラグインの効果でもありますね。書き込み発生するとDiscordに通知来るので。 -- ともせ％管理人。 2026-08-28 (金) 20:17:38
  • ともせ様
    リスト構造でレイアウトが崩れる件の続報です。当方の別環境(Docker上のLinux)pukiwikiへもdivregionを導入したところ、以下のコードで問題なく動作しました。レイアウトが崩れたWindows環境は、cssも少し手を入れているのでそのせいだと思われます。お手数をおかけしました。それにしても特急レスに驚きです(^o^)／

    "-テスト
    #divregion(テスト)
    本文
    #enddivregion" -- ささけん 2026-08-28 (金) 20:16:38
  • あ。でも確かに下の添付画像だと、引数の与え方によって微妙に改行幅とか違ってくるなぁ。中カッコによる引数指定だと改行付与とかで多少値がかわるから、その干渉はありそう。 -- ともせ％管理人。 2026-08-28 (金) 19:49:53
  • 〇ささけんさん
    情報ありがとうございます。html生成のメカニズム上、スクリプト宣言とか改行とかが入るタイミングがあるので、書き方によっては発生する可能性はあるかと思います。
    ただ、ちょっとこちらだと試した感じだと、以下のようなかたちで相応にうまく動いているようにもみえるので、もうちょっと情報いただけると助かります（画像内下側が編集しているpukiwikiテキスト、上側の黄色背景がプレビュー的なものです）。
    テストした状態
    -- ともせ％管理人。 2026-08-28 (金) 19:45:21
  • ともせ様
    　Ver1.40をPukiwiki_v1.5.4で使用してみました。私の環境依存かもしれませんが、リスト構造（"-"で始まる段落）内で#divregionを宣言すると、レイアウトが激しく崩れます。リスト構造段落の次の行に#divregionを宣言しなければ正常動作します。例えばレイアウト構造段落と#divregion宣言行の間に改行をいれると回避できます。
    　当方の環境はplug-inを複数使用しているのでそれが原因かもしれません。もう少し試してみますね。 -- ささけん 2026-08-28 (金) 19:28:20
  • 〇ささけんさん
    どうもです。なにか問題があれば適時情報提供いただけると助かります！ -- ともせ％管理人。 2026-08-23 (日) 19:38:23
  • オリジナルのregionを使用してはや10年ほど。最近になって、regionのインデントずれのバグが気になって修正しようとしているところ、こちらのdivregionを見つけました。
    　これは使い勝手も変わらず良いですね。しばらく使わせていただきます！ -- ささけん 2026-08-23 (日) 01:02:15
  • テスト -- ともせ％管理人。 2025-07-30 (水) 15:05:52
▼
ver1.1でのコメント
▼
ver1.0でのコメント
お名前: