pukiwikiプラグイン/tableedit

2018-04-19 (木) 09:43:36 (574d)
お名前:

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

プラグイン概要

pukiwiki での表編集をアシストするためのプラグインです。

MITライセンスで公開されている「a-table」という Javascript を使用して、 WYSIWYG 的な表編集を実現します。
このページの下のほうに具体的な実施例を提示していますので、使い勝手はそちらをご覧ください。

  • pukiwiki 1.5.1 で動作確認済。

「a-table」はこちら: テーブル編集用UIライブラリ、a-table.js
https://www.appleple.com/blog/javascript/a-table.html

インストール方法

  1. 「a-table」をセットアップします。
    1. 上記リンク先から a-table のzipファイルをダウンロードしてください。
    2. ダウンロードしたzipファイルを解凍してください。
    3. あなたのpukiwiki 環境に、以下のような位置関係でフォルダツリーを構築し、a-table の各ファイルをコピーしてください(下記はこのサイトのツリーのスクリーンショットです。「junk」フォルダがpukiwikiのルートフォルダです) tableedit.png
    4. 本ページに添付されている a-table.js ファイルをダウンロードし、js/a-table/build にある同名ファイルを置き換えてください。
  2. 本ページに添付されている下記ファイルをダウンロードし、pukiwiki の pluginフォルダに「tableedit.inc.php」の名前でおいてください。
  3. pukiwikiのcasheフォルダのアクセス権を見直し、「tableedit(.*)\.html」をブラウザから参照できるようにしてください。

使い方

表を書き込みたいページ・場所に、以下のように記載してください。

#tableedit(表ページ名称)

ここで指定する「表ページ名称」の名前で、pukiwiki 上に新しいページが作成されます。 見かけ上、この表ページに記述した表を、このプラグインを置いたページに「インポート」するような体裁になります。

上記のように記載したページには、「表」と「WYSIWYG編集ボタン」「Pukiwiki編集ボタン」とが表示されます。

「WYSIWYG編集」ボタンを押すと、新規にwindowが1つ開き、そこに表編集用の画面が構築されます。
編集用画面で「変更終了」ボタンを押すと、「変更完了」画面になります:そこにある「元ページに戻る」ボタンを押すと 編集用に使っていたWindowが閉じます。

「pukiwiki編集」は、普通に表ページを「編集」するのと同じふるまいです。

パラメータ

#tableedit(表ページ名称<,fix>)
表ページ名称
表のデータを置くページの名称です。省略できません。
fixパラメータ
表の編集を禁止する設定。このオプションが記載されると、「編集ボタン」が表示されません。
これによりこのプラグインは実質的に「別ページをインポートする」だけのためのものになります。

制約事項

  • pukiwiki記述と再編集
    • このプラグインでの表編集中、セル内にpukiwiki書式を記載することは可能です。
      が、そのようにして作られた表をこのプラグインで「再編集」すると、pukiwiki書式は失われてしまいます。
      • 例えばセル内に &colorプラグインを使って以下のように「赤文字指定」することは可能です:編集完了後、そのセル内に赤文字表示されるでしょう。
        &color(red){赤文字記述};
      • ですがこれを「再編集」した場合、a-tableの編集画面からは&color部分が消えてしまいます。
      • 「pukiwiki書式→HTML化」する表生成メカニズムを再開発するような手間をかければ、できないことはないのですが・・・

実施例

実施例1

#tableedit(:tableedit_test)

表ページに「:tableedit_test」指定。このJunkyardでは :tableedit_testページを「誰でも編集可能」にしてあるため、ここで実際に編集テストできます)

h1h2h3h4
1-11-21-31-4
2-12-22-3
3-13-23-33-4
4-1left4-2あ4-34-4
改行
5-15-2long text5-35-4

実施例2:fix指定

#tableedit(:tableedit_test,fix)

fix指定してあると、ページの編集可否に関係なく「編集」ボタンが表示されません。

h1h2h3h4
1-11-21-31-4
2-12-22-3
3-13-23-33-4
4-1left4-2あ4-34-4
改行
5-15-2long text5-35-4

実施例3:編集権限なしページを指定の例

#tableedit(:aaa)

編集許可されていないページを対象にした場合、編集ボタンが表示されません。
下記、許可していない「:aaa」指定を指定した場合の動作です。

h1h2h3h4h5
1-1htest1-31-41-5
2-12-22-32-5
a
3-13-33-43-5

技術的な話。

a-table.js に対する改造

上記設置手順に記述したとおり、本プラグインでは a-table ライブラリの一部を変更しています。
その変更内容は、a-table の編集画面上でいじったデータを「pukiwiki書式」にするためのメカニズムの追加です。より詳しくは、以下を参照のこと。

▼a-table改造詳細

改造のヒント

  • a-table のセル編集機能で、「選択できる背景色」は変更・追加・削除できます。
    • tableeditプラグインのファイルを開き、xxxを検索してください。
      「赤:red」というような、「日本語色名:英語色名」が列挙されている部分があると思います。
      ここを編集してください。
      • 日本語の色名が、編集画面のドロップメニューに表示される名称です。
      • 対応する英語色名が、いわゆる「Web指定カラー」です。
    • a-table.js を開き、xxxxを検索してください。
      そこに switch 〜case 文があります。
      ここを、tableeditプラグインで行った編集(追加・変更した色名)にあわせて編集してください。

pukiwiki本体・tableeditプラグイン・a-table.js の関係・動作

このプラグインが書かれているページが「表示」されたときの流れは以下の通りです。 以下、ざっくりと振る舞いを記載します。

▼動作仕様詳細

コメント

ご意見などがあれば。


お名前:

  • あ〜。1点セキュリティホールがありますね。
    「表ページ」に参照権限が指定されるような条件で、このプラグインでその「参照権限のあるページ」を指定すると、権限を越えてみえてしまいます。
    近く修正します。 -- ともせ%管理人。 2018-04-19 (木) 09:43:36
お名前: