PukiWiki/自作プラグイン/TreeView

最終更新: 2009-01-01 (木) 23:36:06

treeview.inc.php †

サマリ	JavaScript で開閉できるツリーメニュー
リビジョン	1.3
対応バージョン	1.4.7 で動作することは確認済み
作者	revulo

▲

目次 †

▲

概要 †

pagetree.inc.php プラグインを JavaScript を利用するように作り直したものです。 JavaScript が使えないブラウザでも、それなりに動きます。

ページの階層構造をツリーメニューとして表示します
現在参照しているページの付近を展開して表示します
JavaScript が使える場合は、クリックすることでメニューの折り畳み・展開ができます
MenuBar ページに #treeview と書くだけで、自動的にメニューが作られます

機能的には ajaxtree.inc.php プラグインとまったく同じですが、次のような違いがあります。

treeview.inc.php プラグイン
- 全ページ分のリストを一度に読み込むため、ページ数が少なめのサイトに向いています
- 非表示の内部リンクを大量に張ることになるので、検索エンジンには良く思われないかもしれません
- 比較的簡単に設置できます

ajaxtree.inc.php プラグイン
- 必要な部分の HTML をその都度 Ajax で読み込むため、ページ数が多めのサイトに向いています
- 内部リンクを適度に張ることになるので、SEO 対策にもなります
- 設置するのが少し大変かもしれません

▲

サンプル †

このサイトのメニューバーに ajaxtree.inc.php プラグインによるツリーメニューを設置してあります。見た目と機能はこれと同じなので、適当に触って試してみて下さい。

▲

インストール †

アーカイブファイルをダウンロードし、 PukiWiki をインストールしてあるディレクトリで展開します。

$ tar xvfz treeview-1.3.tar.gz

スキン (skin/pukiwiki.skin.php, skin/default.skin.php など) の <head>～</head> のどこかに、以下の設定を追加します。

(PukiWiki の場合)
<link rel="stylesheet" type="text/css" href="<?php echo SKIN_DIR ?>treeview/treeview.css" />

(PukiWiki Plus! の場合)
<link rel="stylesheet" type="text/css" href="<?php echo SKIN_URI ?>treeview/treeview.css" />

または、スキンのスタイルシート (skin/pukiwiki.css.php, skin/default.css など) の @charset 行の直後に、次のように書き加えても良いです *1。

@import "./treeview/treeview.css";

本家 PukiWiki の場合は、plugin/menu.inc.php の最後の部分を以下のように書き換えて下さい *2。

--- menu.inc.php.orig
+++ menu.inc.php
@@ -53,7 +53,7 @@
             // Cut fixed anchors
             $menutext = preg_replace('/^(\*{1,3}.*)\[#[A-Za-z][\w-]+\](.*)$/m', '$1$2', get_source($page));

-            return preg_replace('/<ul[^>]*>/', '<ul>', convert_html($menutext));  
+            return convert_html($menutext);
         }
     }
 }

あとは MenuBar ページに以下のように書いて下さい。

#treeview

なお、 Help や MenuBar などの階層化されていないページは、デフォルトでは表示しないようにしています。それらのページも表示したい場合は、PLUGIN_TREEVIEW_HIDE_TOPLEVEL_LEAVES や PLUGIN_TREEVIEW_INCLUDE_LIST の設定を変更して下さい。

▲

使い方 †

書式は次のようになっています。

#treeview

引数は取りません。MenuBar ページのどこかに #treeview と書くだけです。

▲

設定 †

設定方法は基本的に pagetree.inc.php プラグインと同じなので、そちらの説明を見て下さい。ただし、いろいろと機能を追加してあるので、追加分の説明を以下に記しておきます。

▲

プラグインの設定 †

treeview.inc.php の先頭部分で以下の値を設定することで、動作をカスタマイズできます。

PLUGIN_TREEVIEW_CACHE
(デフォルト: true)
- キャッシュ機能を有効にする (true, false のいずれか)

PLUGIN_TREEVIEW_COUNT_DESCENDANTS
(デフォルト: true)
- 子孫ページの数をカウントして表示する (true, false のいずれか)

PLUGIN_TREEVIEW_SORT_TYPE
(デフォルト: name)
- ページの並び順の設定 (name, reading のいずれか)

PLUGIN_TREEVIEW_EXPAND_LIST
(デフォルト: なし)
- 常に展開して表示するページのリスト (正規表現)

キャッシュ機能は、ext3 や NTFS などのファイルシステムでないと正常に機能しません *3。ほとんどの環境でこの条件は満たされていると思いますが、ファイルシステムが FAT32 などの場合は、このオプションを false に設定して下さい。

PLUGIN_TREEVIEW_SORT_TYPE を reading に設定すると、ページの並び順を制御することができます。この機能は、sonots さんの lsx プラグインの実装をほぼそのまま利用しています。詳細については以下のページをご覧下さい。

Plugin/lsx.inc.php - Sonots' PukiWiki プラグイン

ツリーの一部分を常に展開して表示しておきたい場合は、展開したいページを PLUGIN_TREEVIEW_EXPAND_LIST に正規表現で指定して下さい。書き方の例をいくつか挙げておきます。

// PukiWiki ページと PHP ページは常に展開して表示
define('PLUGIN_TREEVIEW_EXPAND_LIST', '^(PukiWiki|PHP)$');

// PukiWiki ページの下は全て展開して表示
define('PLUGIN_TREEVIEW_EXPAND_LIST', '^PukiWiki');

// ２階層目まで全て展開して表示
define('PLUGIN_TREEVIEW_EXPAND_LIST', '^[^\/]+$');

▲

スタイルシートの設定 †

skin/treeview/treeview.css を書き換えることで、レイアウトや配色やアイコンを変更することができます。一応 PukiWiki の標準スキンにあわせて調整してあるつもりですが、設定を変えたい場合は background や padding-bottom の値を適当に変えて下さい。

また、ツリーの上にある TreeView というタイトルが要らない場合は、

#treeview h5 {
    display: none;
}

という設定を追加すると消すことができます。

▲

静的コンテンツに偽装している場合の設定 †

rewritemap.inc.php プラグインなどを使って PukiWiki/Install.html のような階層化された URL に見せかけている場合、以下のように設定をする必要があります。

pukiwiki.ini.php で定数 SKIN_URI を、define('SKIN_URI', '/pukiwiki/skin/'); のように絶対 URI 形式で指定する

PukiWiki Plus! には SKIN_URI の設定項目がもとからありますが、本家 PukiWiki の場合は自分で設定を追加して下さい。

▲

ライセンス †

基本的には MIT & GPL のデュアルライセンスです。ただし以下のファイルについては、別途ライセンスを定めます。

プラグイン本体: GPL
- PukiWiki 内部の関数を利用する場合、GPL 以外のライセンスにはできないため

画像ファイル: Public Domain
- 使用に一切の制限を設けません

他のライセンスを希望する場合は、連絡をいただければ対応を検討します。

▲

ダウンロード †

treeview-1.3.tar.gz

▲

更新履歴 †

Version 1.3 (2009/01/01)
- JavaScript のコードがグローバル名前空間を汚染しないように変更
- 不要な ignore_user_abort() を削除

Version 1.2 (2008/07/28)
- 子孫ページの数をカウントして表示する機能を追加
- PageReading の機能を利用してページを並び替える機能を追加 (BBS: 260)
- 指定したページを常に展開して表示する機能を追加 (BBS: 150)
- GS2 スキンとの組み合わせでも動くように対策 (BBS: 96)
- スタイルシートに overflow: hidden; の設定を追加 (Blog: 2008-02-08)
- マーカーをダブルクリックした時の動作を改善
- アイコンの大きさを 16×16 ドットに変更
- 不要な flock() を削除
- ライセンスについて明記

Version 1.1 (2007/07/16)
- JavaScript のイベント処理を簡略化

Version 1.0 (2007/07/14)
- スタイルシートを調整し、IE6 での動作がおかしかったのを修正

Version 0.4 (2007/07/08)
- JavaScript が使えない場合でも、現在のページ付近だけを展開して表示するように改良

Version 0.3 (2007/07/07)
- キャッシュ機能を追加

Version 0.2 (2007/07/05)
- JavaScript のコードを jQuery を使わないようにして高速化

Version 0.1 (2007/06/30)
- jQuery 版を試作

*1 ただし @import を使ってスタイルシートを追加すると、描画が遅くなるそうです。(参考:

Choose <link> over @import)
*2 何のつもりでこんな処理をしているのか知りませんが、書き換えても問題ないはずです。
*3 キャッシュ更新のタイミングを調べるのに、wiki ディレクトリの更新日時を利用しているためです。