ドラッグ&ドロップアップロード対応attachプラグインでPukiWikiに革命を起こす!

PukiWikiを独自に改造し、昨年の6月に太宰治生誕110年を記念して太宰治真理教サイトを無理やりオープンし、今年の1月に私設松本零士博物館サイトを強引にオープンして運営しているが、新規にページを作成する場合や、既存のページをメンテナンスする場合、ページに添付するファイルが多いと、ページを編集する作業が大変でしかない
そこで今年の3月~4月頃からPukiWiki標準のattachプラグインを改良すべく、色々と調査を重ね、画期的かつ革命的なプラグインを開発するに至った。開発とテストは非常に困難を極めたものの、やっと本サイトとGitHubに公開したので、その設置と設定方法を記事にしておく。

前回の記事と同様にサブドメインを連番で用意してあるので、今回はmuseum-25サブドメインの内容をmuseum-26サブドメインにコピーし、検証しながら作業を進めた。メニューページが「MenuBar」ではなく「メニューバー」になっている(日本語ページ名でPukiWiki用URL短縮ライブラリにより短縮される)ので要注意。

※2020/10/16追記
本プラグインの導入に当たっては、次の記事で紹介している改造がされている前提とします(正確には \skin\pukiwiki.skin.php ファイルの「head」タグ内で、jQueryライブラリを宣言するスクリプトタグが存在している前提です)。

添付ファイルに関する従来仕様の問題点

ページに何らかのファイルを添付する場合、PukiWiki標準のattachプラグインがその機能を提供する。PukiWikiユーザは(それがサイトを管理している運営者であっても)attachプラグインを意識することはないが、「ったく使えねぇな!」とは思っていることだろう。
そこで、添付ファイルに関する従来仕様の問題点を最初に指摘しておきたい。

ファイルを参照してアップロードする操作の限界

参照」ボタンをクリックし、アップロードするファイルを選択した上で(設定にもよるが標準設定では)管理者パスワードを入力して「アップロード」ボタンをクリックさせるオペレーションは、システム的に必要最小限の機能でしかない
一体いつの時代のUIなんだよ?
最悪なのは、「参照」の際に間違ったファイルを選択し、それに気付かずに「アップロード」してしまった場合だ。いちいち画面を遷移して添付ファイルを削除しなればならず、おまけに標準の設定では、管理者パスワードでファイルを削除してもファイル名がリネームされてバックアップされる。完全にファイルを削除しようと思うと、さらにイライラする操作を繰り返す必要がある。

添付済みファイルに対する操作が煩雑

すでにページに添付済みのファイルを削除・凍結・ファイル名の変更を行おうと思うと、

まず上図の「添付ファイル一覧」のリンクをクリックし、

添付ファイル一覧画面から操作対象のファイル(この場合は「銀河鉄道999.jpg」)の横にある「詳細」リンクをクリックして

やっと添付ファイルに対する操作が可能になる。
運営しているPukiWikiサイトのコンテンツがテキストメインで、画像ファイルその他、ページに添付するファイルが非常に少ないのであれば、このような操作をする機会は少ないだろうから、まだ許容されるのかも知れない。
前述したように、添付するファイルを間違えて添付(アップロード)した場合は、罰ゲーム以外の何物でもない。しかもページに添付しているファイルが多ければ多いほど混乱するのだから、本当にイヤになる
蛇足ながらその昔、個人的にPukiWiki1.4系を社内のサーバにインストールして運用していたことがあったが、当時から使えないと思っていた。それが現在の1.5系でも改善されていないとは、本当に驚く。今どきこんなオペレーションを強いるシステムなんて、使われなくて当然だろう。
PukiWiki公式は恥ずかしいと思わないのかね?

ページ編集画面に添付ファイルの参照が存在しない

ページにファイルを添付するということは、そのページで添付したファイルを使いたいからに他ならない。画像ファイルなら表示させたいかも知れず、ダウンロードさせたいかも知れない。
ところが、見ての通りページの編集画面には添付ファイルへの参照(例えば「添付ファイル一覧」等)が存在しないので、せっかく面倒な操作で添付したファイルをすぐに活かせない。ページに添付されているファイルの一覧は、前述した通り「添付」リンク→「添付ファイル一覧」リンククリックのオペレーションでしか表示されないので、添付ファイルを参照しながらページを編集しようと思うと、非常に煩雑だ。
こういった仕様的に使えない部分も、昔の1.4系から改善されずに放置されている。ページ編集テキストエリア(textareaタグ)のカラム数と行数がドキュメントルートのdefault.ini.phpに設定されている部分に関しては、CSSの変更により1.5.3でちょっとだけ改善されたに留まっている。

仕様的に管理者ユーザが存在しない

PukiWikiのユーザ管理は、ドキュメントルートのpukiwiki.ini.phpでユーザ名とパスワードを設定するが、そのユーザが管理者かどうかの属性は仕様的に持っていない
なので、管理者パスワードのみが別に設定されており、管理者パスワードを知っているユーザが添付ファイルをアップロードしたり削除したり出来る仕組みとなっている。
つまり、仕様的に管理者ユーザは存在しない。添付ファイルに関して、従来仕様の問題点を放置するのなら、これでも特に問題にならない。ところが、添付ファイルの操作にいちいち管理者パスワードを入力させるオペレーションだから、煩雑で使いにくいのである。
そこで、本プラグインの利用では、管理者パスワードを設定した管理者ユーザを用意するものとする
サイトを運営しているのが自分ひとりだけの「一人Wiki」の場合で、ユーザのパスワードが管理者パスワードになっていない場合は、単にログインユーザのパスワードを管理者パスワードに変更・設定して貰えれば、特に問題はない。
不特定多数のユーザでサイトを運営している場合は、別途管理者パスワードを設定した管理者ユーザを作成・設定し、添付ファイルのアップロードや削除・凍結・解凍(を管理者のみに設定する場合)、ページの凍結・解凍の際には管理者ユーザでログインして操作する運用となる。
基本的に本プラグインを導入して利用する制限事項はこの程度で、既存のページや設定を変更しないでも運用可能となっている。仕組みとしては簡単で、ログインしたユーザのパスワードが管理者パスワードかどうかをチェックし、設定によって処理を分岐する仕様に変更したのである。

プラグインの設置

これら従来仕様の問題点を解決するべく、プラグインを開発して本サイトのダウンロードページにアップロードし、公開した。
本プラグインを利用する場合は、ソートテーブル(表)プラグインの最新版の導入が前提となっており、必須ではないが、PukiWiki用URL短縮ライブラリが導入されている前提でPukiWiki標準ライブラリを修正している。PukiWiki用URL短縮ライブラリを導入しておらず、導入する気もない人は、自己責任でPukiWiki標準ライブラリを修正して欲しい。

ダウンロードページからドラッグ&ドロップアップロード対応attachプラグインをダウンロードし、ローカルの作業フォルダに解凍する。アーカイブの内容は、ザックリ次の通りだ。

  • attach_dndtoolフォルダ:ドラッグ&ドロップアップロードを実現するオリジナルカスタムファイル群
  • libフォルダPukiWiki標準ライブラリで置き換え(上書き)するファイル
  • pluginフォルダ:本プラグイン(2つ)
  • skinフォルダ:pukiwiki.cssの内容を変更する部分を記述(後述)
  • index.phpファイル:ドキュメントルートに忘れずアップロードすること!

skin」フォルダとMDファイル(2つ)以外をサーバにアップロードし、サブフォルダを含むフォルダのパーミッションを全部「755」に、ファイルのパーミッションを全部「644」に設定する。
次に、「skin」フォルダにあるpukiwiki.cssに手を入れる。とは言え、編集画面のCSSを1.5.3よりちょっとマシに修正したレベルでしかないが。

skin\pukiwiki.css(修正前)

/* html.php/edit_form() */
.edit_form {
  clear:both;
}
.edit_form textarea,.edit_form select {
  width:95%;
}

skin\pukiwiki.css(修正後)

/* html.php/edit_form() */
.edit_form {
  clear:both;
}
/* ↓PukiWiki1.5.3から追加されたCSS定義
.edit_form textarea,.edit_form select {
  width:95%;
} */
.edit_form select {
    width: 90%;
}
#template_read {
    width: 9%;
}
.edit_form textarea {
    width: 100%;
    resize: vertical;
}

ファイルを更新し、サーバの「skin」フォルダへFTPすれば、プラグインの設置は完了だ。

プラグインの設定

本プラグインは、従来のattachプラグインを拡張したattach.inc.phpと、新規に開発した添付ファイルリスト出力プラグインのattach_list.inc.phpの2つで構成されている。
ドラッグ&ドロップオペレーションでファイルをアップロードする部分は、Sebastian Tschan氏(blueimp)がGitHubで公開している、超多機能かつ高性能のjQuery-File-Uploadを利用し、独自にカスタマイズして「attach_dndtool」フォルダにまとめている。
サイトの運用によってプラグインの設定を変更する必要はあるが、基本的には推奨値を設定しているので、そのまま使えるとは思う。

attachプラグインの設定

ドラッグ&ドロップオペレーションでファイルをアップロードするPukiWiki側プラグイン部分の設定は、次の通りとなっている。

plugin\attach.inc.php

// 添付ファイルをドラッグ&ドロップでアップロードできるようにする
// FALSE:従来オペレーション・TRUE:ドラッグ&ドロップアップロード
define('PLUGIN_ATTACH_UPLOAD_DRAG_AND_DROP', TRUE);
// ファイルを上書きでアップロードする(ドラッグ&ドロップのみ有効)
// FALSE:ファイル存在チェック(推奨)・TRUE:常にファイル上書きアップロード
define('PLUGIN_ATTACH_UPLOAD_OVERWRITE', FALSE); // FALSE or TRUE
// 新規作成ページでもドラッグ&ドロップでアップロードする
// TRUE:ドラッグ&ドロップでアップロード可(非推奨)
// FALSE:ページの新規作成時のみドラッグ&ドロップでアップロード不可(推奨)
define('PLUGIN_ATTACH_UPLOAD_NEW_PAGE', FALSE); // FALSE or TRUE
// ドラッグ&ドロップアップロードツールフォルダ
define('PLUGIN_ATTACH_UPLOAD_TOOL_DIR', '/attach_dndtool/');
// 添付ファイルリスト出力プラグイン名
define('PLUGIN_ATTACH_UPLOAD_FILE_LIST', 'attach_list');
// 添付ファイル削除モジュール
define('PLUGIN_ATTACH_UPLOAD_FILE_DELETE', 'attach_file_delete.php');

注意しなければならない設定は、次の2点となる。

PLUGIN_ATTACH_UPLOAD_OVERWRITE

本プラグインでは、ドラッグ&ドロップ(もしくは「ファイル追加」ボタン)でアップロードするファイルを一旦画面表示させてから「全アップロード」(もしくは個別に「アップロード」)するオペレーションとしている。
よって、この設定を変更して「常にファイルを上書きアップロード」したいニーズは少ないかも知れないが、ドラッグ&ドロップファイルアップロード部分(jQuery-File-Upload)のカスタマイズで「ファイルをドロップした瞬間にアップロード」するように変更することも可能ではあるため、PukiWiki側プラグインとして設定を持っている。
注意しなければならないのは、ファイルを「凍結」した場合、この設定が「TRUE」(常にファイルを上書きアップロード)になっていると、ファイルの凍結に関係なく同名のファイルを上書きするので、設定と運用には注意が必要だ。

PLUGIN_ATTACH_UPLOAD_NEW_PAGE

本プラグインでは、ページの編集画面であっても添付ファイルの追加と削除が可能であるため、仕様的に新規作成ページでもドラッグ&ドロップでファイルをアップロードする仕組みを提供する。
しかし、新規にページを作成する場合、ページ編集画面で「ページの更新」ボタンをクリックしてページ内容が確定されないと、ページの実態(ファイル)はどこにも作成されない。この時、新規作成ページにファイルを添付し、しかもページを更新しなかった場合は、サーバの「attach」フォルダにページが存在しない添付ファイルがアップロードされたままになる。
自分一人で運営しているサイトで、新規にページを作成してファイルを添付し、且つ確実にページを更新する場合以外は、「FALSE」(ページの新規作成時のみドラッグ&ドロップでアップロード不可)にしておくことをオススメしておく。

その他、従来設定

なお、次の設定は従来のattachプラグインの設定部分だが、一部の設定を除き設定は踏襲するので、必要とあれば設定の見直しをしておいて欲しい。

plugin\attach.inc.php

// Max file size for upload on PHP (PHP default: 2MB)
ini_set('upload_max_filesize', '30M');

// Max file size for upload on script of PukiWikiX_FILESIZE
define('PLUGIN_ATTACH_MAX_FILESIZE', ((1024 * 1024)*30)); // default: 1MB

// 管理者だけが添付ファイルをアップロードできるようにする
define('PLUGIN_ATTACH_UPLOAD_ADMIN_ONLY', TRUE); // FALSE or TRUE

// 管理者だけが添付ファイルを削除できるようにする
define('PLUGIN_ATTACH_DELETE_ADMIN_ONLY', TRUE); // FALSE or TRUE

PLUGIN_ATTACH_UPLOAD_DRAG_AND_DROP」の設定が「TRUE」(ドラッグ&ドロップのみ有効)の場合は、従来仕様の設定は上記の設定のみ有効だ。当然「FALSE」に設定すれば従来仕様のオペレーションに戻るので、上記以外の設定も有効になる。
なお、「PLUGIN_ATTACH_MAX_FILESIZE」の設定に関しては、画面表示以外に使っていないのが実情で、各自のサーバ環境によって違うと思われる。適宜サーバ環境等を設定するなり、設定値を変更するなりの対応をして欲しい

添付ファイルリスト出力プラグインの設定

基本的にattachプラグイン系からコールされることを想定して開発をしているが、ページに添付されているファイル一覧を表示したいニーズ(ってあるのかな?)も考え、単独で利用可能なプラグインとして動作することも想定している。
プラグインとしての設定は次の通りだが、特に色にコダワリがない場合は、そのままの設定で良いハズだ。

plugin\attach_list.inc.php

// ソートテーブルヘッダ行バックグラウンドカラー
define('PLUGIN_ATTACH_LIST_HEAD_COLOR', '#f0f0f0');
// ソートテーブル奇数行バックグラウンドカラー
define('PLUGIN_ATTACH_LIST_ODD_COLOR', '#ffffff');
// ソートテーブル偶数行バックグラウンドカラー
define('PLUGIN_ATTACH_LIST_EVEN_COLOR', '#f6f9fb');
// ソートテーブルヘッダ行折返し禁止指定('nowrap' or '')
define('PLUGIN_ATTACH_LIST_HEAD_NOWRAP', 'nowrap');

アップロード許可・拒否ファイルの設定

PukiWiki標準のattachプラグインでは、特定のファイルタイプ(拡張子)の添付を禁止するといった仕様が存在しない。つまり、どんなファイルでもページに添付できるという、ある意味セキュリティがガバガバ状態である。
流石にこのままの仕様を放置するワケには行かないので、ドラッグ&ドロップでファイルをアップロード処理する部分(jQuery-File-Upload)を独自に拡張し、オプションでアップロード許可ファイルと拒否ファイルの設定を可能にしている。
具体的には、「attach_dndtool」フォルダにあるindex.phpファイルの71行目付近だ。

attach_dndtool\index.php

$options = array(
    // ファイルアップロード先変更
    'upload_dir' => $exOptions->uploadDir() . $upDir,
    'upload_url' => $exOptions->uploadUrl() . $upDir,
    // アップロード許可ファイル(アップロードファイル規制なし)
    'accept_file_types' => '/.*/i',
    // アップロード拒否ファイル(拡張子指定の拒否でアップロードファイル規制)
    'reject_file_types' => '/\.(html?|js|exe)$/i',
    // アップロードファイルのサムネイル出力を殺す
    'image_versions' => array(
    ),
);

アップロード許可・拒否ファイルの拡張子を正規表現で設定する形で実装し、標準ではアップロード許可は実質許可ファイルの設定無し(規制なし)とし、拒否ファイルとしてHTML(HTM)・JS・EXEファイルをアップロード不可としている。
アップロードファイルの許可および拒否ファイルの設定はサイトの運用によると思うが、この設定で特に問題はないと思われる。

ファイルタイプ別アイコン画像の変更

本プラグインでは、画像ファイル(GIF・JPEG・PNG形式)以外の添付ファイルをドラッグ&ドロップした際に、ファイルタイプ別アイコン画像を表示するようにカスタマイズしている。これはあくまで「好み」の問題なので必須ではないが、本サイトのダウンロードページで、ファイルタイプ別画像アイコンを公開している。

本プラグインのアーカイブに含まれているのは「ファイルタイプ別カラフルアイコン」だが、好みやサイトの背景色等によって、本サイトのダウンロードページで公開している「ファイルタイプ別デザインアイコン」や「ファイルタイプ別スタイリッシュアイコン」に差し替えるのでも、追加するのでも良い。
ファイルタイプ別アイコン画像ファイルの格納先は、「attach_dndtool」フォルダ内の「img」フォルダなので、自由に差し替えるなり追加するなりして欲しい。サーバにFTPする際に、ファイルのパーミッションを「644」に変更するのを忘れずに。

ここまでの改造の成果

本プラグインを導入し、任意のページで「添付」リンクをクリックすると、ドラッグ&ドロップのオペレーション(または「ファイル追加」ボタンクリック)により、単数または複数のファイルを添付(アップロード)することが可能になる。

特に「ここにファイルをドロップ」といったドロップゾーンはなく、ブラウザの表示範囲内であれば、どこにでも任意のファイルをドラッグしてドロップ可能としている。
また、特にドラッグ&ドロップ可能なファイル数の制限もしていないため、好きなだけファイルを追加し、個別に「アップロード」することも、一度に「全アップロード」することも可能だ。

ただし、前述の通りHTML(HTM)・JS・EXEファイルに関してはアップロードを禁止しているため、図のようなエラーメッセージが表示される(この場合は「キャセル」もしくは「全キャンセル」ボタンでエラーになっているファイルを画面から消すことが可能)。
ここで画面下部の添付ファイル一覧(ソートテーブル)のファイル名欄No1の「cf-b11.jpg」をクリックすると、別窓(target=”_blank”)で開くので、いつでも添付ファイルの内容を確認することが出来る。

同じくNo1のファイル操作欄のリンク「詳細(削除・凍結・名変)」をクリックすると、上図の通り従来のattachプラグイン画面+添付ファイル一覧となる。この画面では主にファイルの凍結やファイル名の変更を想定している。
ちなみに、この画面で図赤枠の「キャンセル」ボタン(独自に仕様拡張)をクリックすると、添付画面に戻るようになっている。

同様に、No1のファイルを削除する場合は、図赤枠の「削除」ボタンの押下により、アラートでの「OK」ボタンクリックで削除を実行するオペレーションを想定している。
ちなみに、上図No2のファイル「銀河鉄道999.jpg」は凍結ファイルになっているため、解凍処理を実施しないと「削除」出来ないようにしている

ページ編集画面でもファイル添付画面と同様の操作を可能としている。ただし、画面遷移が伴うファイル操作の「詳細(削除・凍結・名変)」リンクは出力しない
以上、ここまでの改造の成果であるPukiWikiはこちらなので、「実際どうなのか?」を確認したい人は参照して欲しい。

今回も前回と同様にゲストアカウントを用意したので、スパムや破壊行為は困るが(スパムフィルタspam_filter.phpは導入済みだが)、ユーザー名とパスワードは次の通りだ。

ユーザー名:guest
パスワード:guest

今回はファイルの添付と削除を可能にしているので、実際にどのようなオペレーションが可能なのか、色々と試してみて欲しい。「案外PukiWikiって使えるな」と思っていただければ、私としても嬉しく思う。

おわりに

私が運営している私設松本零士博物館サイトは、特に画像での「展示」がメインとなるし、太宰治真理教サイトの「太宰治アーカイブズ」コンテンツにしても、キモは各種資料をページに添付するファイル(記録)とその展示であるから、今後もPukiWikiを利用したサイト運営を続けるのには、時代遅れで使えない標準attachプラグインを見直し、大幅に仕様を拡張して実装する必要があった
そういった意味では、本プラグインの開発とテストは(私のスキル不足もあって)非常に困難を極めたが、PukiWikiでの情報発信や情報共有をするといった意味で、画期的かつ革命的なプラグインになったと思う。本稿を読み、ぜひ「PukiWikiに革命を起こせるか」を検証して欲しい。すでにPukiWikiでサイトを運営している人ならば、私の言わんとしていることを理解してくれるだろうと思うのだ。
確かにWordPressといったブログシステムの方が、システム的にも便利だし、使っている人も多いし、ノウハウや便利なプラグインも多いだろう。しかし、PukiWikiにはブログにはないWikiシステムの優位性を活かしたサイト展開が可能であると信じる。そして、PukiWikiでのページの作成とそのメンテナンスが、本プラグインによって飛躍的に改善されるだろうことを信じる。今後益々のPukiWikiによる積極的な情報発信や、情報共有が促進されることを祈念したい
最後に、、PukiWikiの添付ファイルの構造や、Sebastian Tschan氏(blueimp)のjQuery-File-Uploadについては情報が少ない上に、公式(英語)以外には古い日本語の情報がわずかにしかなく、かなり難儀した。要望があればこういった技術情報について記事にすることも考えようと思う。ネットの常だが、欲しい情報は断片的で古く、そして役に立たないモノが多い。本プラグインの開発は非常に大変だったので、後進のためにも、本サイトとしては今後も有意義な情報発信をしたいと思っている。

 

 

この記事が気に入ったら
いいね ! をお願いします


ITで何かお手伝いできることはありませんか?

CTA-IMAGE

本サイトでは、外部サービスと連携して「ITの困った」を解決します!

PukiWikiカテゴリの最新記事