Top / pukiwikiプラグイン / tableedit

pukiwikiプラグイン/tableedit

2022-03-01 (火) 18:47:22 (276d)

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

プラグイン概要 †

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

↑

インストール方法 †

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

↑

使い方 †

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

#tableedit(表ページ名称)

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

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

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

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

↑

パラメータ †

#tableedit(表ページ名称<,fix>)

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

↑

制約事項 †

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

↑

実施例 †

↑

実施例１ †

#tableedit(:tableedit_test)

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

h1	h2	h3	h4	foobar
1-1	1-2test	1-3	1-4	foobar
2-1	2-2	2-3	1-4	foobar
3-1	3-2htht	3-3ttththt	3-4	aflll
4-1left	4-2あ	4-4	4-4改行a	1-1
5-1	5-2long text	5-3	5-4	abbc

↑

実施例２：fix指定 †

#tableedit(:tableedit_test,fix)

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

h1	h2	h3	h4	foobar
1-1	1-2test	1-3	1-4	foobar
2-1	2-2	2-3	1-4	foobar
3-1	3-2htht	3-3ttththt	3-4	aflll
4-1left	4-2あ	4-4	4-4改行a	1-1
5-1	5-2long text	5-3	5-4	abbc

↑

実施例３：編集権限なしページを指定の例 †

#tableedit(:aaa)

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

h1	h2	h3	h4	h5
1-1h	test	1-3	1-4	1-5
2-1	2-2	2-3	1-4	2-5 a
3-1		3-3	3-4	3-5

↑

実施例４：参照権限なしページを指定の例 †

#tableedit(:非公開_表)

他の人が参照許可されていないページを対象にした場合、その人には「参照権限がない」旨の表示がなされます。
下記、一般に参照許可していない「:非公開_表」指定を指定した場合の動作です。

参照権限のない表です。

↑

技術的な話。 †

↑

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 の関係・動作 †

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

▼動作仕様詳細

↑

Step1：pukiwikiでの「tableeditを含むページの表示」。 †

サーバ側だけの話です。

pukiwiki 、tableeditプラグインを検出、呼び出し。
tableedit、指定された「表ページ」の有無チェック。
なければ初期データを持ったページを生成。
tableedit、pukiwikiの持つ「pukiwiki書式文書→HTML化」メソッドを使って、「表ページ」のデータをHTMLに変換。
- これが「元ページ」に表示される「表示用データ」になる。
tableedit、「表ページの編集可否」「fix指定有無」から、動作切換。
編集禁止（pukiwiki認証or fix指定）なら、ここで終了。
- この結果、pukiwikiは「表示用データ」だけを表示する。
編集可能な場合、tableedit, 編集用のHTML文書をcacheフォルダに作成。
- その際、表示用HTMLをa-tableが解釈可能な「a-table表」に変換して上記編集用HTML文書に埋め込む。
tableedit、この「編集用HTML」を「開く」スクリプトを生成。
- この結果、pukiwikiが「表示用データ」＋「編集HTMLを開くボタン」を表示するようになる。

↑

Step2. Tableeditによる「編集開始」ボタン押下後の動作。 †

こちらはクライアント（ブラウザ、a-table.js）の動作です。

「編集開始」に対応して、Javascript動作。
サーバから「編集HTML」がダウンロードされ、それが「別Window」で表示される。
編集HTMLが読み込み・処理開始されると、同時にそこに記載されたJavascriptが起動。
a-table.js がHTMLを解析し、そこにあるtable情報を取り込む。
a-table、取り込んだHTMLに基づいて「表領域」の描画。
各種編集用のボタンを表示する。
- 「編集完了」「取り止め」「最初から」のボタンは、a-tableとは関係ない tableeditが生成したボタンです。
以降、a-tableの動作環境。
表を加工すると、（友瀬が拡張した getPKWKtext()が動作して）適時対応する「pukiwiki書式の表データ」がブラウザ上で生成される。

↑

Step 3. 編集HTMLでの「編集完了」ボタン押下後の動作。 †

更新処理はサーバ側、「戻る」まわりはクライアント側。

ブラウザの機能で、すでに生成されている「pukiwiki書式の表データ」がpukiwiki/datatableプラグインに投入される。
datatableプラグイン、表ページの編集可否や編集衝突チェックをする。
- 編集できなければ「編集失敗」ページを出力。
- 編集可能ならば、受け取った「pukiwiki書式の表データ」を「表ページ」に上書き出力。
  加えて「編集成功」ページを出力。
- 編集成否に関係なく、「戻る」ボタン設置。
「戻る」ボタンが押されたら、Javascript動作。編集用Windowを閉じ、元ページ側を「更新」する（すなわち、Step1 に戻る）

↑

変更履歴 †

2020.Jan.23 Ver1.2
- 対象の表について参照権限を確認するように修正。以前の版では「権限のない表を表示できてしまう」セキュリティホールになっていました。

↑

コメント †

ご意見などがあれば。

＞tomoseDBG("match?" . $reg);
＞をコメントアウトすると正常に動作しました。
うわ。レポートありがとうございます。修整・差し替えを行いました。「12a」の名前がついています。 -- ともせ％管理人。 2022-03-01 (火) 18:41:00
PHP8、PukiWiki 1.5.4リリース候補版では
tomoseDBG("match?" . $reg);
をコメントアウトすると正常に動作しました。
//tomoseDBG("match?" . $reg); -- 2022-02-27 (日) 01:15:14
〇hogeringoさん
ありゃ。その動作だと、「編集」ボタンのJavascriptが適切に動いていないのかな。 403ということは「閲覧禁止」なのでアクセス権を疑ったのですが・・・「編集」ボタンを押すと別窓が開くつもりなのですが、403エラーはどこにでますか？別窓？それとも同じ窓？
さらにちなみに、ちなみにご使用のブラウザはなんでしょうか？ -- ともせ％管理人。 2020-07-21 (火) 00:40:13
お返事ありがとうございます、作成した表のhtmlデータ自体はブラウザで読み込んでくれるのを確認できたのですが、編集ボタンを押すとリンクを取得してくれないようです･･･DATAの部分をいじってみたのですがそちらも駄目でした･･･ -- 2020-07-20 (月) 23:29:49
〇hogeringoさん
すみません、今気づきました。
このphpではテーブルデータをpukiwikiの cache ディレクトリに置いていて、WYSIWYG編集するとそれを直接取得＆ブラウザ表示します。
「casheディレクトリからの html 取得ができるように、chaseディレクトリのアクセス権を変更する」、あるいはプラグイン内に何か所かある「CACHE_DIR」部分の記述をいじってアクセスできるディレクトリにテーブルデータを置く（例えばCASHE_DIR でなく DATA_DIR にする）ようにするような対応ができないか、当たってみていただけますか？ -- ともせ＠管理人 2020-07-20 (月) 00:00:07
はじめましてPukiwiki(1.5.2 PHP7.1環境下)でこちらのプラグインを入れたのですがWYSIWYGで編集の部分が403エラーとなってしまいます。(アクセス権限の部分も確認したのですが管理者の部分をすべて許可しても駄目でした)
何か対策等あればご教授いただけると助かります -- hogeringo 2020-07-15 (水) 23:20:49