PukiWiki改造 その５ (treeview)
概要: †
HPのページが増えると目次が長くなり、見にくくなります。かと言って目次の項目を減らすと目的のページが表示できなくなります。そこでエクスプローラーのフォルダーバーように階層的な目次を開閉するプラグインを作成しました。項目の開閉にいちいち画面を書き換えていたのでは使い勝手が悪いので、開閉の実行はJavaScriptで行うようにしました。
従ってtreeview部分のhtmlを作成するphpのプラグインと項目を開閉するJavaScriptで構成されています。もちろんJavaScriptを読み込むようにSKINの改造が必要ですが、この変更は簡単です。
サイドメニューでtreeview機能ができるのであれば本文の方でもtreeviewを実現させるのは簡単なので本文でも使用出来るように機能を拡張しました。
１．インストール方法 †
オリジナルのPukiwikiに対してできるだけ変更が少ない方法で説明します。独自の構成やSKIN等に応じて変更してください。
treeviewを使用できるようにするためには既存のモジュール(pukiwiki.skin.php,menu.inc.php)の修正が必要になります。
- ) pluginの下にtreeview.inc.phpをコピーし、ユーザー、権限を変更します。
- ) skinの下にtreeview.cssとtreeview.jsをコピーし、ユーザー、権限を変更します。
- ) imageの下にアイコンのファイルcollapsed.gif、expanded.gif、leaf.gifをコピーし、ユーザー、権限を変更します。
- ) pukiwiki.skin.phpを以下のように2行を追加する修正をします。これはtreeviewで必要となる上記のtreeview.cssとtreeview.jsを取り込むためです。treeview.cssについては、その内容を既存のpukiwiki.css.phpの中に記述方法でも可能です。
:
:
<link rel="stylesheet" type="text/css" media="print" href="skin/pukiwiki.css.php?charset=
<?php echo $css_charset ?>&media=print" charset="<?php echo $css_charset ?>" />
<link rel="stylesheet" type="text/css" href="skin/treeview.css" charset="<?php echo $css_charset ?>" />
←追加
<link rel="alternate" type="application/rss+xml" title="RSS" href="<?php echo $link['rss'] ?>" />
<?php // RSS auto-discovery ?>
:
:
</div>
<script type="text/javascript" charset="UTF-8" src="skin/treeview.js"></script> ←追加
</body>
</html>
- ) menu.inc.phpを以下のように修正します。これはplugin_menu_convertの中でulタグの属性やstyleなどをカットしているので、treeview.inc.phpで設定したdisplayプロパティーをカットしないようにします。
:
:
// Cut fixed anchors
$menutext = preg_replace('/^(\*{1,3}.*)\[#[A-Za-z][\w-]+\](.*)$/m', '$1$2', get_source($page));
return preg_replace('/<ul([^d>]*)(d(([^i>][^d>]*)|(i[^s>][^d>]*)))*>/', ←変更
'<ul>', convert_html($menutext));
}
}
}
?>
２．解説 †
- 種別
マルチブロック型プラグイン
- 書式
#treeview(
[option1[,option2[,option3]]]
){{
ブロック要素
}} <== 必ずブロック要素は {{ , }} と改行して下さい。
- 概要
ブロック要素内をTree状に表示し、各項目を展開、折りたたみできます。
- 引数
option1 : none : default = *。設定なしの場合、*と同じ。
* : defined at line。開閉の初期状態は各行の先頭の
Tree記号に従います。
+ : all collasped。初期状態はすべてを閉じた状態で
表示します。
- : all expanded。初期状態はすべてを開いた状態で
表示します。
option2 : none : default。設定なしの場合、countと同じ。
count : Treeの下層の行数を表示します。
nocount : Treeの下層の行数を表示しません。
option3 : none : default。設定なしの場合、ページ内にある
Treeviewを指定します。
menu : Menu。メニュー内にあるTreeviewを指定します。
ブロック要素
Tree記号 + 表示内容
各行がTreeの1行(Line)になります。
各行はTreeの階層と初期状態を表すPrefix部分の記号(Tree記号)と
表示内容から成り立っています。
Tree記号は各行の先頭に*（アスタリスク）、+（プラス）、
-（マイナス）記号で記述したもので、その合計数が
Treeの階層になります。
option1が*の場合、+と*はDefault（最初に表示された時）で
下層を閉じた状態にして表示しません。
-はDefaultで下層を展開した状態で表示します。
Tree記号 （4階層目の場合）
**** : collasped。Defaultで閉じた状態
***+ : collasped。Defaultで閉じた状態
***- : expanded。Defaultで開いた状態
表示内容
表示内容には以下のものが使用できます。
テキスト
PageName
[[Alias>PageName]]
[[LinkName>URL]]
- 備考
treeview部分を入れることができるのはサイドメニューと本文で1箇所です。
Treeの開閉状態をあまり気にしないのであれば、本文に複数入れることが可能です。
３．使用方法 †
メニューの場合(オリジナルのPukiwikiのページ)
以下の内容をMenuBarのページに記述して試して下さい。
#treeview(*,count,menu){{
*[[サイトトップ>FrontPage]]
-[[PukiWikiについて>PukiWiki]]
**[[プラグインマニュアル>PukiWiki/1.4/Manual/Plugin]]
***[[A-D>PukiWiki/1.4/Manual/Plugin/A-D]]
***[[E-G>PukiWiki/1.4/Manual/Plugin/E-G]]
***[[H-K>PukiWiki/1.4/Manual/Plugin/H-K]]
***[[L-N>PukiWiki/1.4/Manual/Plugin/L-N]]
***[[O-R>PukiWiki/1.4/Manual/Plugin/O-R]]
***[[S-U>PukiWiki/1.4/Manual/Plugin/S-U]]
***[[V-Z>PukiWiki/1.4/Manual/Plugin/V-Z]]
**[[InterWikiName]]
}}
表示内容が長い場合は、エリア内で改行します。改行しないようにするには、以下の黄色の行のコメントを外します。オリジナルのままだと、エリアを超えた部分が隠れてしまうので、SKINを改造することになります。
:
:
.treeview * a {
color: #000066;
font-size: 100%;
display: block;
width: 90%;
padding: 2px 0 3px 0;
text-decoration: none;
/* white-space: nowrap;*/
}
:
:
本文の中での例
以下を本文の中に記述して、*,-,+やcountオプションの効果を試して下さい。但し、一回アイコンをクリックして開閉してしまうと、その状態がCookieに保存されてしまうので、初期状態の確認には別のブラウザーでクリックせずに見る必要があります。
#treeview(*,count){{
*A1
-B1
*-BA2
***BAA3
****BAAA4
****BAAB4
**-BAB3
****BABA4
****BABB4
***BAC3
***BAD3
*+BB2
***BBA3
***BBB3
*C1
**CA2
***CAA3
***CAB3
}}
以下のように表示されます。
- A1
- B1(12)
- BA2(8)
- BAA3(2)
- BAB3(2)
- BAC3
- BAD3
- BB2(2)
- C1(3)
アイコンは好みにより他のアイコンに変更して下さい。その場合、treeview.cssを修正してアイコンとテキストの間隔や大きさの調整をして下さい。間隔は以下の部分を変更します。
:
:
.treeview li a {
margin-left: 4px; /* (width of image) - (indent) */
}
:
:
４．treeviewの仕組み †
- ) treeview Pluginはブロック要素中の各行のPrefix（Tree記号）に応じて字下げやDefaultの開閉状態を設定したtreeview用のhtmlを書き出します。
- ) Treeの開閉はhtmlのul要素のstyleのdisplayプロパティーをblock/noneにすることで実現しています。
- ) JavaScriptは各行のアイコンが押下されたイベントにより、下層の項目を開閉します。
- ) 開閉状態を表すアイコンの変更はCSSにより変更します。
- ) ページが変わるとPukiwikiは全画面を書き換えますが、その時前回開閉したTreeがまた初めの状態に戻ってしまいます。それでは使いづらいので開閉した状態を記憶しておき、画面が書き換えられた時に、前回の状態に開閉状態を変更します。開閉状態はユーザーのCookieに記録します。開閉状態の記憶場所をメニューとサイト全体の本文用に1づつしか用意していないので、サイト全体の本文中に１箇所しかTreeviewを作成することができません。今のところ本文中でTreeviewを多用してないのでTreeviewのあるページ間で頻繁に行き来しなければ、ページを移動して戻ってきた時にTreeの開閉状態が変わっていても気付きにくいので改善は現在考えていません。
![[a羅針盤]](image/pukiwiki.png "[a羅針盤]")
treeview.css 5405件
[詳細]
leaf.gif 4157件
[詳細]
collapsed.gif 4206件
[詳細]
expanded.gif 4115件
[詳細]
