まちゅダイアリー

■ PukiWiki のカスタマイズ

先日ちょっと書いた Wiki 話の続き。 PukiWiki は確かに高機能なんだけど、それだけ敷居が高くなっている。 そこで、機能を削って使いやすくしてみたので、その記録を残してみる。

■ PukiWiki のカスタマイズ (2) - ナビゲーション

PukiWiki の画面を見てまず戸惑うのは、インタフェースの複雑さ。 ずらりと並んだメニューを見て、戸惑う人も多いと思う。 メニューを列挙してみると、

• リロード … いま見ているページを再読み込みする

• 新規 … 新しいページを作る
• 編集 … いま見ているページを編集する
• 凍結 … いま見ているページを編集できないようにする
• 差分 … いま見ているページの変更箇所を表示する
• 添付 … いま見ているページにファイルを添付する

• トップ … トップページ (FrontPage) を表示する
• 一覧 … このサイト内のページ一覧を表示する
• 単語検索 … このサイト内の語句を検索する
• 最終更新 … 最近更新されたページの一覧を表示する
• バックアップ … いま見ているページの更新履歴（バックアップ）を表示する
• ヘルプ … PukiWikiの使い方を表示する

• リンク元 … このページへリンクしているサイトを表示する
• TrackBack … このページへ TrackBack したサイトを表示する

とこんな具合。 特に、「いま見ているページ」への操作と「サイト全体」への操作が一緒になっていること（最終更新とバックアップなど）や、メニューに「編集」「添付」などの操作（動詞）を表す単語と、「トップ」「一覧」などの目的語を表す単語が混ざっていることが、分かりにくさの原因だと思う。 「バックアップ」というメニューもあるけど、これも「バックアップする」のか「バックアップを表示する」のかが分からない。

人間が同時に見分けることのできる数には限界がある（５つくらいだったかな？）ので、省略できるメニューは省略することにした。

まず、「リロード」は確実に不要。「新規」も「編集」で代用できる、というかするべきなので削除。「凍結」も使うのは管理者くらいなので、直接アドレスバーにコマンドを打ち込めばいいので削除。「添付」もセキュリティ的に問題があるので削除。もし使うとしても、tDiary の絵日記プラグインのように、編集画面にインタフェースがあればいい。

「トップ」は迷ったけど、ページタイトルやロゴをトップへのリンクにすれば代用できるので削除。 「検索」もサイドバーに検索ボタンをつければいい。 「バックアップ」は必要だけど、別の場所に移動させた。 「リンク元」と「TrackBack」は明らかに不要。

で、残ったのは以下の５つ。カッコ内はデフォルトのメニュー名。

• このページを編集する　（編集）
• 編集された箇所をみる　（差分）

• ページ一覧　（一覧）
• 最近更新されたページ　（最終更新）
• ヘルプ

分かりにくかった「編集」「差分」は、目的語と動詞を明確に書くことにした。 BitChannel では [EDIT] [DIFF] などと英語で書いてあってそれなりに分かりやすいんだけど、このようにメニューの数を減らして語句を長くするのもアリだと思う。

■ PukiWiki のカスタマイズ (3) - 画面デザイン

ナビゲーション以外にちょこっと修正した箇所。

• デフォルトでは「ページタイトル」をクリックするとその語句を検索するようになっているけど、このリンクを外した。理由は次の ReverseLink にて。
• Last-modified はページ上部の「ページタイトル」の近くに配置。これをクリックするとそのページの編集履歴（バックアップ）が表示されるようにした。
• サイドバーには「サイトメニュー」としてメインとなるページへのリンクを設置。これは、さくらのレンタルサーバ非公式FAQのインタフェースを参考にした。
• サイドバーにはそのほかに、「最近の7件」と「人気の7件」を表示。デフォルトでは「最近の20件」だけど、これは明らかに多すぎる。
• ページ下部のPukiWikiのライセンス表示をシンプルにした。

■ PukiWiki のカスタマイズ (4) - ReverseLink の追加

次に PukiWiki で気になるのが、ページ下の Link が機能していないこと。これは、リンク先のページとリンク元のページが一緒になっていることが原因っぽい。 BitChannel ではリンク元のページのみを ReverseLink として表示しているけど、これがブラウザの「戻る」ボタン的な働きをしていて都合がいい。 ページを階層化しなくても、ReverseLink を使えば効果的なナビゲーションができるはず。

ということで、PukiWiki のコードを修正してリンク元のページのみを表示するようにした。

--- pukiwiki-1.4.4/lib/file.php Sun Aug  1 23:23:20 2004
+++ lib/file.php        Tue Sep 28 12:11:07 2004
@@ -493,7 +493,7 @@
        if (isset($links[$page])) return $links[$page];

        // 可能ならmake_link()で生成した関連ページを取り込む
-       $links[$page] = ($page == $vars['page']) ? $related : array();
+       $links[$page] = array();

        // データベースから関連ページを得る
        $links[$page] += links_get_related_db($vars['page']);

補足

元祖 Wiki にて、ページ名をクリックするとそのページ名の検索結果を表示するのは、この ReverseLink を実現するためなんじゃないかと気がついた。 なので、 ReverseLink を実装した Wiki では、ページ名クリックによる検索は不要だと判断。

■ PukiWiki のカスタマイズ (5) - ページの編集方針

これはカスタマイズじゃないけど、PukiWikiのサイトを編集する上で気をつけたほうがよさそうな点をピックアップ。

• ページは階層化しない。階層化が必要なら複数の Wiki を立てたほうがよい
• 日本語を使うのであれば、URLが汚くなることには目をつぶる。Wikiに慣れていない人があつまるサイトであればページ名に日本語を使ったほうがなじみやすい。
  • AutoLink （ページ名と同じ単語を）を有効にして、はてなダイアリーのキーワードっぽい感じにする。日本語ページ名を使う場合は有効。ただしあまりにもページが増えると、誤ヒットが増えてしまうので柔軟に。
• 複雑な文法は使わない。見出しと箇条書きと定義リストと引用があれば事足りる。複雑な文法を使うと、他の人が編集しづらくなる。
  • $line_break を有効にして、改行をそのまま改行として表示させる。
  • 外部のページへのリンクは、URLをそのまま書くようにする。 エイリアスやBracketNameを外部へのリンクに使うと、 AutoLink によるページ内へのリンクとの見分けがつきづらくなる。

○ PukiWiki ( http://pukiwiki.org ) を使ってみました。
× [[PukiWiki:http://pukiwiki.org]] を使ってみました。

• 使用するプラグインは #comment, #ref, #include くらいにする。

と、こんな感じ。 もちろん、目的や使う人によってこの辺は代わってくると思うけど。

追記

Groovy の Wiki サイトでは、サイドバーに「Space Operations」と「Page Operations」を表示している。こういうインタフェースも面白そう。

■ PukiWiki のカスタマイズ (6)

書き忘れ。 デフォルトの PukiWiki のスキンでは、 table タグを使ってサイドバーを実現しているけど、CSS Depotを参考にスタイルシートで実現するようにした。

■ PukiWiki のカスタマイズ (7) - 編集画面をシンプルに

さらに書き忘れ。 PukiWiki では、ページの編集画面にて他のページをテンプレートとして読み込むことができる。しかし、ページ数が増えるとテンプレートのリストが膨大になってほとんど意味をなさなくなる （PukiWiki-dev の編集画面がいい例）。 ということで、このテンプレートのリストも削除した。

また、新しいページを作るときに、ページの先頭に作成元のページへのリンクが自動的に追加されるけど、これも ReverseLink で代用できるので削除。

具体的には lib/htmp.php をこのように変更している。

--- pukiwiki-1.4.4/lib/html.php Sat Aug  7 00:41:41 2004
+++ lib/html.php        Tue Sep 28 12:01:28 2004
@@ -156,18 +156,8 @@
                }
                ksort($pages);
                $s_pages = join("\n",$pages);
-               $template = <<<EOD
-  <select name="template_page">
-   <option value="">-- $_btn_template --</option>
-$s_pages
-  </select>
-  <input type="submit" name="template" value="$_btn_load" accesskey="r" />
-  <br />
-EOD;
+               $template = '';

-               if (array_key_exists('refer',$vars) and $vars['refer'] != '') {
-                       $refer = '[['.strip_bracket($vars['refer'])."]]\n\n";
-               }
        }

        $r_page = rawurlencode($page);
@@ -191,8 +181,10 @@
   <input type="submit" name="preview" value="$btn_preview" accesskey="p" />
   <input type="submit" name="write" value="$_btn_update" accesskey="s" />
   $add_top
-  <input type="checkbox" name="notimestamp" value="true"$checked_time />
+  <input type="checkbox" id="notimestamp" name="notimestamp" value="true"$checked_time />
+  <label for="notimestamp">
   <span style="small">$_btn_notchangetimestamp</span>
+  </label>
   <textarea name="original" rows="1" cols="1" style="display:none">$s_original</textarea>
  </div>
 </form>

※ ついでに、「タイムスタンプを変更しない」のチェックボックスにラベルをつけている。

※ テンプレートのリストを削除するためには、ソースを修正しなくても default.ini.php の $load_template_func を 0 にすれば良いようです（2004-11-02 追記）。

■ サンプル

• サンプル画面
• PukiWiki の skin ファイル
• スタイルシート

ファイルの添付には未対応。スタイルシートも軽量化したので、デザインの崩れるプラグインがあるかも。