pukiwiki改造/Table処理改造

2021-10-12 (火) 12:47:21 (53d)
お名前:

表記、友瀬のサイトで実施している独自拡張。
他の方にも役に立つと思われるので、一応公開しておきます。

改造目的

pukiwiki公式サイトにあった相談質問
『表のヘッダを固定して、データ部分をスクロールさせられないか』
というものについての対応です。

いろいろ書くより見てもらったほうが早いと思うので、サンプル。

H1H2H3
124
248
3612
4816
51020

追加した仕様

pukiwikiの「|」を使った表組にある「行末にc をつけると、書式行」という仕様を流用。
「行末にsをつけると、スクロール式の書式指定になる」「行末sの後ろに数値指定でスクロールエリアの高さ指定」というようにしました。
上述のサンプルでは、次のように記載しています。

|LEFT:100|LEFT:200|LEFT:50|s100
|H1|H2|H3|h
|1|2|4|
|2|4|8|
|3|6|12|
|4|8|16|
|5|10|20|

この場合「s100」と記載しているので、「高さ100px分の領域で表示、その範囲をあふれる場合スクロール表示」となります。

注意点

次のような使い方が必要です。

  • 行末にsをつける書式行は、表の一番最初に記述してください。
    そしてその直後にヘッダ行が来るようにすべきです。
  • ヘッダ行指定(行末にhをつける)は必須ではありません。その場合表全体がスクロール対象です。以下、ヘッダ行を指定していない例。
    124
    248
    3612
    4816
    51020
  • ヘッダ行を指定する場合、書式行ではすべてのセルに対して幅指定(LEFT:w のような記述)を指定することを推奨します。
    • 指定しないと「ヘッダと本体とでセル幅がズレる」可能性が高いです。以下、幅指定していない場合の表示。ヘッダのH3の位置と、表内1行目の「4」の位置がずれていることがわかると思います。
      H1H2H3
      1長い言葉があると。4
      248
      3612
      4816
      51020

具体的な改造内容

pukiwikiのコア部分である convert_html (\lib\convert_html.php)を書き換えて対応しています。

さすがにファイルを差し替えるのは問題があると思うので、以下に変更を記載します。
大きく5か所に加工をいれています。

▼改造ヶ所その1
▼改造ヶ所その2
▼改造ヶ所その3
▼改造ヶ所その4
▼改造ヶ所その5

メモ。

参考にしたサイト類。

convert_html での表まわりの改造ネタ

テーブル幅をパーセントで指定したい。 (pukiwiki_dev)

表のヘッダ固定に関するCSS情報

ヘッダを固定してスクロールする方法(so-zou.jp)

技術的には、表の「ヘッダ」部分と「本体」部分とを別パーツにとし、それぞれにスタイル指定することで実現しています。
詳しくは上述の「表のヘッダ固定に関するCSS情報」をご確認ください。

コメント

ご意見などがあれば。


お名前:

お名前: