org:自作プラグイン/wikinote.inc.php

Wikipedia-like Note(Discussion) Plugin

Table of Contents

Abstract Related 使い方 - 開発版 v1.7 との違い 初期設定 スキンへの設置 Sample skin/pukiwiki.skin.php pukiwiki.css.php Additional Configuration - template FAQ Compatibility Check Download 技術的詳細 - タブ css 備忘録 z-index wikipedia display:block;

Abstract

Wikipedia's Note like Plugin.

Related

• dev:morikawa/wikinote.inc.php　- 元祖
• http://wikipedia.org
• http://www.luntf.com - Monobook (Wikipedia デフォルトスキン) スキン

使い方 - 開発版

v1.7 との違い

以前は、とりあえず自動的にノートページを作成していましたが、コメント投稿後に始めてノートページが作成されるようになりました。 ページが存在していない最初の状態では template ファイルの内容か、デフォルトでは #comment が表示されます。

その時、template に使用して、新規にノートページを作ることができるプラグインに制限があります。 今のところ次の5つになります。

• article
• comment
• insert
• memo
• vote

他のプラグインも許可するプラグインリストに加えれば動くかもしれませんが、確認してません。永遠にベータ機能です。

またこの機能追加のため、初期設定はプラグイン中に直接記述してもらうことになった等、設定方法が変更となりましたのでご注意ください。

初期設定

ノートページの接頭辞、wikinote 機能を使用しないページなどを wikinote.inc.php を直接開いて編集するか、 init/wikinote.ini.php 中で設定します。※plugin ディレクトリと同階層の init ディレクトリを作成し（なければ）、wikinote.ini.php をおきます。設定を分離でき、プラグインアップデートの際に楽なのでお奨めです。

$default_options['prefix']       = 'Note';
$default_options['except']       = '^$';
$default_options['title_prefix'] = 'Talk:';

• prefix
  • ノートページの接頭辞。デフォルトでは Note/
• except
  • wikinote 機能を適用しないページを正規表現(ereg)にて指定。デフォルトでは排除なし。
• title_prefix
  • ノートページタイトルに使用する接頭辞（表示の際に prefix の文字列が title_prefix に置き換わる)。デフォルトでは Talk:

スキンへの設置

以下のようにスキンへ設置します。

$wikinote_navi = '';
if (exist_plugin('wikinote')) {
    $wikinote = new PluginWikinote();
    if ($wikinote->is_effect()) { 
        if ($wikinote->is_notepage()) {
            $wikinote_navi = $wikinote->show_tabs(array(
                array('cmd'=>'edit', 'label'=>'編集', 'href'=>'?cmd=edit&page=$page'),
                array('cmd'=>'diff', 'label'=>'差分', 'href'=>'?cmd=diff&page=$page'),
                array('cmd'=>'main', 'label'=>'本文'),
                array('cmd'=>'note', 'label'=>'コメント'),
            ));
        } else {
            $wikinote_navi = $wikinote->show_tabs(array(
                array('cmd'=>'main', 'label'=>'本文'),
                array('cmd'=>'note', 'label'=>'コメント'),
            ));
        }
    }
}
echo $wikinote_navi;

各関数の詳細はリファレンス

• phpdoc/plugin/PluginWikinote.html

を参照してください。

Sample

pukiwiki 本家デフォルトスキンでは次のように設置すると良いかもしれません。 せっかく隙間があるので topicpath も表示させています。

skin/pukiwiki.skin.php

  <td valign="top">
   <div id="body"><?php echo $body ?></div>
  </td>

↓

// ------------------------------------------------------------
// Setting

// Set wikinote plugin
$wikinote_autocreate_notepage = false;
$wikinote_notepage_prefix_title = 'コメント';
$wikinote_tabs = array(
     array('cmd'=>'main', 'label'=>'本文'),
     array('cmd'=>'note', 'label'=>'コメント'),
     array('cmd'=>'edit', 'label'=>'編集', 'href'=>'?cmd=edit&page=$page'),
     array('cmd'=>'diff', 'label'=>'差分', 'href'=>'?cmd=diff&page=$page'),
);

// ------------------------------------------------------------
// Code

// Navigation tab (Wikinote)
$wikinote_navi = '';
if (exist_plugin('wikinote')) {
    $wikinote = new PluginWikinote();
    if ($wikinote->is_effect()) { 
        $wikinote_navi = $wikinote->show_tabs($wikinote_tabs);
    }
}

// ------------------------------------------------------------
// Output
・
・
  <td valign="top">
   <?php if ($wikinote->is_effect()) { echo $wikinote_navi; } ?>
   <?php if (arg_check('read') && exist_plugin_inline('topicpath')) { 
     echo '<div class="topicpath">' . do_plugin_inline('topicpath') . '</div>'; 
   } ?>
   <?php if ($wikinote->is_effect()) { echo '<div style="clear:both;"></div>'; } ?>
   <?php if ($wikinote->is_effect()) { echo '<div id="wrap_body">'; } ?>
   <div id="body"><?php echo $body ?></div>
   <?php if ($wikinote->is_effect()) { echo '</div>'; } ?>
  </td>
・
・

日本語を label に使用する場合は pukiwiki.skin.php の文字コードを pukiwiki に合わせてください(EUC or UTF-8)。

pukiwiki.css.php

/* wikinote.inc.php */
ul.wikinote{
	float:right;
	list-style-type:none;
	padding:0;
	margin:0;
	line-height:2em;
	overflow:visible;
}
ul.wikinote li{
	display:inline;
}
ul.wikinote li a {
	border:1px solid black;
	text-decoration:none;
	background-color:#DDEEFF;
	margin:0 5px;
	padding:4px 10px 1em 10px;
}
ul.wikinote li a:hover {
}
ul.wikinote li.selected a {
	color:#000;
	position:relative;
	z-index:1;
	line-height:2em;
	background-color:#fff;
	border-bottom:none;
	padding-bottom:.45em;/*adjust me*/
	text-decoration:none;
}

div#wrap_body {
	position:relative;
	background:#fff;
	margin:0px;
	padding:0px;
	border-top:1px solid black;
	padding-top:5px;
}

ダウンロード: wikinote.css

配置を変えるような修正をする場合は、インラインのタブ・メニュー を読んで動作理解をしてからの ほうが最終的には時間短縮になるかもしれません。

Reference

• CSS Tabs | unraveled - ul で下線を引いて background-color 上書き可能に。そのため float:right; で下線が width:100%; 的にならず
• インラインのタブ・メニュー -- z-index: を用いて線を上書き（position:relative;のとき有効になる）。こちら式。

Additional Configuration - template

ノートページ用テンプレートが利用できます。

テンプレートページが作成されていない場合、

#comment

が使用されます。

テンプレートページ名の定義は通常ページと同じく、pukiwiki.ini.php 中の $auto_template_rules が使用されます。 デフォルト

$auto_template_rules = array(
        '((.+)\/([^\/]+))' => '\2/template'
);

の場合、例えば本文ページ名が ほげほげ/ぶらぶら の場合、ノートページ名が Note/ほげほげ/ぶらぶら になりますので、 Note/ほげほげ/template が探索されることになります。

私は

$auto_template_rules = array(
        '((.+)\/([^\/]+))' => '\2/template'
        '(([^\/]+)\/(.+))' => '\2/template'
        '(()(.*))'         => 'template'
);

のようにして、Note/ 接頭辞のついた全ページに Note/template を適用可、 ついでに全ページ用のテンプレート template を用意可にしています。 本当は Note/ほげほげ/ぶらぶら/ぺけぺけ → Note/ほげほげ/ぶらぶら/template → Note/ほげほげ/template → Note/template → template としたいのですが、この pukiwiki の仕様では無理があります。

ついでに $non_list にも template を登録して、隠れるようにしています。

$non_list = '^:|(^|\/)template$'

参考

dev:PukiWiki/1.4/マニュアル/テンプレート

FAQ

• 途中で prefix を代えたくなった場合は

  prefix を変更して設置し、 rename プラグインを用いてノートページ名を変更すると良いでしょう。

• 本文ページとノートページを一緒に移動したい

  それも rename プラグインでできます。

• 本文ページとノートページを一緒に消去したい

  delete.inc.php を使用してみてください。

• ノートページは最終更新(recent) に載って欲しくない

  prefix を :Note/ とするか、pukiwiki.ini.php 中の $non_list を

  $non_list = '^:|^Note\/';

  とすると良いでしょう。

Compatibility Check

Please join us to check compatibilities.

Compatible

Selection	Vote
PHP4	3
PHP5	3
1.3.7	0
1.4.3	0
1.4.4	1
1.4.5_1	1
1.4.6	1
1.4.7	4
1.4.5plus-eucjp	0
1.4.6plus-u1-eucjp	1
1.4.6plus-u2-eucjp	1
1.4.5plus-u2-i18n	0
1.4.6plus-u1-i18n	0
1.4.6plus-u2-i18n	0
1.4.7plus-i18n	3
1.4.7plus-u2-i18n	1

Incompatible

Selection	Vote
PHP4	1
PHP5	0
1.3.7	0
1.4.3	0
1.4.4	0
1.4.5_1	0
1.4.6	0
1.4.7	0
1.4.5plus-eucjp	0
1.4.6plus-u1-eucjp	0
1.4.6plus-u2-eucjp	0
1.4.5plus-u2-i18n	0
1.4.6plus-u1-i18n	0
1.4.6plus-u2-i18n	0
1.4.7plus-i18n	1
1.4.7plus-u2-i18n	1

Download

Save from right-click, and put into plugin directory.

開発版

wikinote.inc.php

旧版

更新履歴

What's new viewcvs Previous viewcvs.old

技術的詳細 - タブ css 備忘録

z-index

インラインのタブ・メニュー CSS Denctite

z-index (poisition: relative のとき有効になる）を用いて線を上書き。

• li を display:inline; で横並び

• li a で 上、左、右 ボーダー。padding-bottom の値を充分大きくとっておく。

• 本文で上ボーダー(タブの下ボーダー）。background-color を li. selected a とあわせる。

• li.selected a で z-index の値を大きくすることと、overflow:visible にすることで、本文ボーダーをかき消す。 padding-bottom の値を微調整し、ボーダーだけが消えたようにするために、ボーダーの太さが 1px なら1px 分だけ上書きできるように値を選ぶ。

問題点: あるブラウザで 1px ボーダーの上書きに成功しても、他のブラウザでは期待通り動いていない場合がある。Firefox で対応確認していれば、おそらく ie7, Opera でも動いているだろうが、ie6 ではおそらくだめになる。

wikipedia

li a ではなく li でボーダーを引き、z-index で li は本文の下に、li a は本文の上に。 微調整が必要なくなる。

• li を display:inline; で横並び

• li で上、左、右ボーダー。ポイント：これに z-index は指定しない（指定すると、子要素である li a は li を基準 (0) に z 軸を移動するようになり、本文とは違う軸体系を持ち、上書きできなくなる）。padding-left: 0; padding-right: 0; ie6 の問題により padding-top: 0; padding-bottom の値を充分大きくとっておく。

• li a で margin: 0; にし、li で引いたボーダーのすぐ内側が li a になるようにし、まるで、li a でボーダーを引いたかのように偽装する。padding-bottom は li と同じ値をとっておく。

• 本文で上ボーダー(タブの下ボーダー）。z-index: 1; background-color を li.selected a と合わせる。

• li.selected a で z-index: 2; (本文より大きく)かつ、overflow:visible にすることで、本文ボーダーをかき消す。li a にボーダーがなくなったので、padding-bottom の微調整はいらず、思い切って上書きしてよい。

問題点: li, li a で padding-top を指定できない。ie6 で不可思議な挙動になる。wikipedia のように上線と文字がくっついたようなデザインにせざるを得ない。

問題点: li で padding-left: 0; padding-right: 0; にしたにも関わらず、ie6 で、まるで padding-right; の値が指定されているような表示になった。wikipedia はでは問題なさろうに見える。FutureWork。

display:block;

先の li で padding-right: 0; にしたにも関わらず、padding-right の値が指定されているように表示される問題をふまえて、display:block; を使用する。

インライン要素に display:block; を使用すると、ブロック要素のように、横幅を親要素と同じ分ぴったり取れるようになる（備忘録：position:absolute; だと文字幅に応じた横幅になるようだ。例：このページ上のメニュー）

• li を float: left; で横並び (display:block; を使用するので display:inline; を使用できない) 前回と同様 li でボーダーを引く。上下の隙間調整は height, line-height で。padding-top, bottom が利かない。

• li a を display:block; padding-left, right で左右の隙間を調整。

• li.selected a で z-index の値を本文より大きくすることと、overflow:visible にすることで、本文ボーダーをかき消す。height の値を li よりも大きくしておく。

• 本文で上ボーダー(タブの下ボーダー）。z-index: 1; background-color を li.selected a と合わせる。 top: に (li の height) - (li.selected a の height) を指定する（ネガティブ値）（z-index を使用するために、position:relative;も指定しているはず。top が使える）。li.selected a の padding-bottom を変更すると、本来は下に伸び、本文を overflow するのだが、ie6 では上に伸びてしまうので、本文側を上に引き上げて li を overflow するために top を使用する。