最終更新：2005-04-17 18:15:47
あたらしいプラグインを実装した。まずはフッターにある「Edit」ボタンを押してみてください。いかがでしょう。
よいところ、気になるところ
- その場ですぐ編集を始められる
- 外部エディタで編集することを前提に、小さいテキストエリアになっています
- ちょっとソースを確認したいときに
- 本当はパート編集ができると真価を発揮すると思う
- このWikiで使っても、正直メリットを感じない人のほうが多いかもしれない。編集画面に遷移するとき、重いサーバで使っている人は負荷軽減＆ストレス軽減に役立つかと。
- 凍結したページや、アクセス制限したページにはこのボタンを置かないほうがいいでしょう。（FSWikiLiteには両方ともありませんが。）ソースを見せたくない場合も、使わないほうがいいです。
- 普段はボタンは非表示にしておいて、Bookmarkletでフォームを出すというのも、サイトの方針によってはアリですね。
- Bookmarkletを使っています。ページの先頭に強制スクロールするのが、今一歩。その場で開いて欲しいのだけど、良い方法がわからなかった。
- もう少し汎用につくれば、JitEdit対応サイトで共通のBookmarkletでいける。
参考
MirrorMan
「編集」の動きはJitEdit?と同じ。それ以外のあらゆる要素がJavaScript?で実装されている。また、QuickHackBar?というのが、まさにやりたかったモノにかなり近い。
* マウスを重ねるとおおよそ文章の位置と対応しているソースが表示されるので、クリックすると一行編集。
* 上から下へドラッグすると、複数行をまとめて編集。
これらの先例がある。似ているところもある。こちらのほうはまだまだ半端であります。
- SikiWiki? インライン編集 Siki/Help
- サーバサイドでの実装なので、「JIT」という方向性に基づいているわけではなさそうに思った。Wikiにありがちな、編集画面に移動したけれで、「いったいどこをいじっているorいじればいいのだろう」という状況になりにくい？というところを目指しているのでしょう。
- miki Wiki編集インタフェース
- アイデアとして私がこうしたいとおもっていることにかなり近いと思う。クライアントサイドのイベントから起動するというのも共通している。ただ、mikiでは特定の要素をダブルクリックすることになっているのに対して、私はUI的に洗練された方法としてBookmarkletを採用したいと思っている。
Bookmarklet
javascript:void(show_hide('clippad'))
ソース1 plugin
#=============================================================================
# すぐに編集する。【パラグラフプラグイン】
#=============================================================================
# いしだなおと 2004-07-06
sub just_in_time_edit_layer {
my $page = shift || $main::in{"p"};
my $time = time();
if ($page =~ /\[|\]/) {
&Util::error("ページ名にブラケットを含めることはできません。");
}
if($page ne '' or &Wiki::exists_page($page)){
$time = &Wiki::get_last_modified($page);
}
my $edit_form = qq{
<div id="clippad">
<div class="form">
<form id="myform" class="form" method="post" action="%s">
<input type="hidden" name="a" value="save" />
<input type="hidden" name="t" value="%s" />
<input type="hidden" name="p" value="%s" />
<div class="caption"><a name="c">%sの編集</a></div>
<div class="textarea">
<textarea name="source" id="source" accesskey="e" cols="64" rows="5" warp="hard">
%s
</textarea><br />
</div>
<div class="button">
<input type="submit" name="do_save" value=" 保 存 " />
<input type="submit" name="preview" value="プレビュー" />
<input type="button" class="button" name="hide_button" value="hide Edit" onclick="show_hide('clippad');" />
<br />
</div>
</form>
</div>
</div>
<div class="form">
<form name="buttons" class="form" method="post" action="#">
<input type="button" class="button" name="show_hide_button" value="Edit" onclick="show_hide('clippad');" />
</form>
</div>
};
return sprintf(
$edit_form,
$main::EDIT_SCRIPT,
&Util::escapeHTML($time),
&Util::escapeHTML($page),
&Util::escapeHTML($page),
&Util::escapeHTML(&Wiki::get_page($page)),
);
}
ソース2 JavaScript?
<script type="text/javascript">
function show_hide(id) {
var marker = document.buttons.show_hide_button;
if (! document.getElementById) return;
if (marker.value == "hide Edit"){
document.getElementById(id).style.visibility = "hidden";
marker.value = "Edit";
}else{
document.getElementById(id).style.visibility = "visible";
marker.value = "hide Edit";
}
}
</script>
ソース3 CSS
form {
margin: 0px;
}
div#clippad {
/* display: none; */
visibility: hidden;
position: absolute;
left: 5px;
top: 5px;
width: 600px;
overflow: scroll;
margin: 0em;
padding: 1em;
border-width: 6px;
border-style: double;
border-color: black;
background-color: white;
color: black;
}
div#clippad form input {
font-weight: bolder;
background: white;
border: 1px solid black;
padding: 0.3em;
letter-spacing: 0.1em;
width: 8.5em;
}
label {
font-weight: bold;
letter-spacing: 0.1em;
}
ご意見
- エラー処理がおざなりだ…。FSWikiLiteにかぎらず、たいていのWikiに移植するのは簡単だと思います。気に入っていただけたならゼヒどうぞ。 - いしだなおと (2004-07-06 04:00:59)
- とりあえずこのJavaScript?が汚すぎ。名前決め撃ちが問題。でもうまく動く方法が他に見つからなかったんだよねー。少なくとも、認知しやすい名前に変更するというぐらいはすべきか。 - いしだなおと (2004-07-10 16:53:23)
- document.buttons.show_hide_button no - いしだなおと (2004-07-10 16:55:20)
いしだなおと it＠isnot.jp