自作プラグイン/fusen.inc.php の履歴ソース(No.23)

** fusen.inc.php [#eea6c276]
|RIGHT:100|LEFT:360|c
|~サマリ|付箋プラグイン|
|~リビジョン|1.9|
|~対応バージョン|1.4.5_1|
|~投稿者|[[ohguma]]|
|~投稿日|&new{2005-03-12 (土) 18:06:30};|

* 付箋機能プラグイン [#l1387f19]

**概要 [#n7514f17]

pukiwikiに付箋機能を追加するプラグインです。~
本文中に以下を記述するとそこにメニューを表示します。
 #fusen 
 
付箋のデータは添付ファイルのfusen.datに格納します。
fusen.datを削除すると、全付箋データが消えます。~
JavaScriptを使っています。
MSIE6.0SP1とFireFox1.0で動作確認しました。
[[wema]]を参考にしています。~
他のプラグインを参考に作成しましたが、こんなつくりでよいのかご意見等お願いします。

V1.8 からJavaScript:XMLHttpRequest()を使っています%%(よって、Opera7.54では動きません。対応する予定もありません。)%%(V1.9でOpera対応。Operaの場合、リアルタイム更新しません)。


**ファイル [#ob92a89c]
|更新日|バージョン|修正点など|h
|2005/04/15|1.9|バグ修正,Opera対応,リアルタイム更新パラメータをjsからphpへ移行|
|2005/04/03|1.8|1.7で入れたバグ対応, Auto set, リアルタイム更新|
|2005/04/02|1.7|HELP,入力欄変更,付箋データ保持方法変更,fusen.js大幅変更,onLoad修正,onDblClick対応|
|2005/03/28|1.6|新規追加時のID付与にあったバグ修正(phpのみ)|
|2005/03/18|1.5|真のRecentChanges対応、検索機能修正など|
|2005/03/18|1.4|RecentChanges対応、検索機能追加|
|2005/03/17|1.3|XHTML1.1対策他|
|2005/03/16|1.2|XSS対策他|
|2005/03/16|1.1|バグ修正|
|2005/03/12|1.0|初版|

&ref(fusen.inc.php.1.9); は fusen.inc.php とリネームし plugin へ、~
&ref(fusen.js.1.9); は fusen.js とりネームし、skinへコピーしてください。~

**ライセンス [#qfe3c4be]
wema1を参考にしていますので修正BSDライセンスです。

**コメント [#df78c2d6]
-おもしろいですね！私の管理してるページではFUSEN_SCRIPT_FILEを「DATA_HOME . SKIN_DIR . '/fusen.js'」としたらうまくいきました。 -- [[u*j*2*6*:http://slavadev.sourceforge.jp/]] &new{2005-03-13 (日) 21:26:34};
-付箋の中は、PukiWikiの他のコンテンツと同様、すべての機能が使えます。表も作れますし、数式のプラグインも動作し、キーワードの扱いも一緒です。ただ、付箋の中で使えるかと思って、付箋の中に#fusenと書いてはいけません。PukiWikiがエラーをはいて、落ちてしまいます。これはNGワードとして処理していただいた方が良いかと思われます。 -- [[試した人]] &new{2005-03-15 (火) 21:02:18};
--付箋内に#fusenを入れた際のフリーズ回避ほか、付箋内にformが表示された際の不具合、削除時に線が消えないなどのバグ修正版をリリースしました。 -- [[ohguma]] &new{2005-03-16 (水) 12:16:11};
--早速の対応有り難うございました。これで安心して使えます。(_/_( -- [[試した人]] &new{2005-03-16 (水) 12:17:00};
-付箋内に"><script>alert('XSS');</script>と書くとスクリプトが実行されてしまいます。これは危険ですね。
 		$fusens .= $fusen;
 +		$s_txt = htmlspecialchars($dat['txt']);
 		$backyards .= <<<EOD
  <input type="hidden" id="tc{$id}" name="tc{$id}" value="{$dat['tc']}" />
  <input type="hidden" id="bg{$id}" name="bg{$id}" value="{$dat['bg']}" />
  <input type="hidden" id="ln{$id}" name="ln{$id}" value="{$dat['ln']}" />
 -<input type="hidden" id="d{$id}" name="d{$id}" value="{$dat['txt']}" />
 +<input type="hidden" id="d{$id}" name="d{$id}" value="{$s_txt}" />
--ご指摘のXSS対策を取り込みました。バージョン1.1以前を使われている場合は至急1.2に更新してください。 -- [[ohguma]] &new{2005-03-16 (水) 22:34:02};
-バージョン1.3 でW3C Markup Validation Serviceでエラーが出ない程度にXHTML1.1対応しました。また、1.2で新たに追加したバグ(背景を透明にできない)を修正しました。Windows版IE6SP2,FireFox1.0.1で動作確認しています。 -- [[ohguma]] &new{2005-03-18 (金) 00:38:09};
-付箋がついたページはRecentChangesに反映されると嬉しいのだけど、普通の添付でも反映されてないから難しいのかな。。 --  &new{2005-03-18 (金) 11:21:47};
--v1.4でRecentChangesを反映するようにしました。また、wema2の検索機能を真似しました。 -- [[ohguma]] &new{2005-03-18 (金) 13:04:59};
--ところで、このページの不要な添付ファイルはどうやって削除したらよいでしょうか？>管理人殿 -- [[ohguma]] &new{2005-03-18 (金) 13:05:59};
-- 管理者にしか削除できません。受け皿として[[WebTrack/37]]を作っておきました。 -- [[henoheno]] &now{&new;};
-v1.4でRecentChangesに更新が反映されなかったので最終更新日を更新したあとに put_lastmodfield() が必要かもしれません --  [[tester]] &new{2005-03-18 (金) 14:49:24};
-- fusen.inc.php 294行:if (file_exists($fname)) touch($fname); の下に、put_lastmodified(); を追加してください。次に何か追加したときに対応します。 -- [[ohguma]] &new{2005-03-18 (金) 16:03:28};
-編集認証を使ってるページには付けられないんですか？ --  &new{2005-03-18 (金) 18:14:25};
--編集認証がされているページでも動きました。管理者に#fusenの記述をお願いしてください。 -- [[ohguma]] &new{2005-03-18 (金) 18:32:32};
-V1.5リリースです。RecentChangesの反映追加、検索時に入力テキストでなく表示テキストを見るように修正、XSS対策修正。 -- [[ohguma]] &new{2005-03-18 (金) 18:43:13};
--XSS対策は[[ぱんだ]]さんがされている方法を参考にさせていただきました。 -- [[ohguma]] &new{2005-03-18 (金) 18:51:32};
--付箋のメニュー部分はqwikWebを参考にさせていただきました。分かりやすくなったと思います。 -- [[ohguma]] &new{2005-03-18 (金) 18:53:34};
--検索時にプラグインで表示しているテキストを検索するようにしました。(V1.4は編集欄に表示される文字列で検索をかけていました。) -- [[ohguma]] &new{2005-03-18 (金) 18:54:56};
-新規追加時のID付与にあったバグを修正したV1.6をリリースしました。jsファイルは1.5をそのまま使います。 -- [[ohguma]] &new{2005-03-28 (月) 23:36:28};
-ヘルプで■を押すと、とか書いてありますが現バージョンにはないようです？？？ --  &new{2005-03-30 (水) 19:39:07};

 fusen.inc.php
  <form id="edit_frm" method="post" action="index.php" style="padding:0; margin:0">
    <p style="margin:0">
      文字色：
      <select name="tc" size="1">
        <option id="tc000000" value="#000000" style="color: #000000">■</option>
        <option id="tc808080" value="#808080" style="color: #808080">■</option>
        <option id="tcC0C0C0" value="#C0C0C0" style="color: #C0C0C0">■</option>
        <option id="tc000000" value="#FFFFFF" style="color: #FFFFFF" selected>□</option>
        <option id="tcFF0000" value="#FF0000" style="color: #FF0000">■</option>
        <option id="tcFFFF00" value="#FFFF00" style="color: #FFFF00">■</option>
        <option id="tc00FF00" value="#00FF00" style="color: #00FF00">■</option>
        <option id="tc00FFFF" value="#00FFFF" style="color: #00FFFF">■</option>
        <option id="tc0000FF" value="#0000FF" style="color: #0000FF">■</option>
        <option id="tcFF00FF" value="#FF00FF" style="color: #FF00FF">■</option>
        <option id="tc800000" value="#800000" style="color: #800000">■</option>
        <option id="tc808000" value="#808000" style="color: #808000">■</option>
        <option id="tc008000" value="#008000" style="color: #008000">■</option>
        <option id="tc008080" value="#008080" style="color: #008080">■</option>
        <option id="tc000080" value="#000080" style="color: #000080">■</option>
        <option id="tc800080" value="#800080" style="color: #800080">■</option>
      </select>
      背景色：
      <select name="bg" size="1">
        <option id="bg000000" value="#000000" style="color: #000000">■</option>
        <option id="bg808080" value="#808080" style="color: #808080">■</option>
        <option id="bgC0C0C0" value="#C0C0C0" style="color: #C0C0C0">■</option>
        <option id="bg000000" value="#FFFFFF" style="color: #FFFFFF">□</option>
        <option id="bgFF0000" value="#FF0000" style="color: #FF0000">■</option>
        <option id="bgFFFF00" value="#FFFF00" style="color: #FFFF00">■</option>
        <option id="bg00FF00" value="#00FF00" style="color: #00FF00">■</option>
        <option id="bg00FFFF" value="#00FFFF" style="color: #00FFFF">■</option>
        <option id="bg0000FF" value="#0000FF" style="color: #0000FF">■</option>
        <option id="bgFF00FF" value="#FF00FF" style="color: #FF00FF">■</option>
        <option id="bg800000" value="#800000" style="color: #800000">■</option>
        <option id="bg808000" value="#808000" style="color: #808000">■</option>
        <option id="bg008000" value="#008000" style="color: #008000" selected>■</option>
        <option id="bg008080" value="#008080" style="color: #008080">■</option>
        <option id="bg000080" value="#000080" style="color: #000080">■</option>
        <option id="bg800080" value="#800080" style="color: #800080">■</option>
        <option id="bgtransparent" value="#transparent">透</option>
      </select>
      <br />
      線を引く：<input type="text" name="ln" id="edit_ln"/><br />
      <textarea name="body" id="edit_body" cols="40" rows="10"></textarea><br />
      <input type="submit" value="書き込み" />
      <input type="hidden" name="id" id="edit_id"/>
      <input type="hidden" name="z" id="edit_z" value="1" />
      <input type="hidden" name="l" id="edit_l" />
      <input type="hidden" name="t" id="edit_t" />
      <input type="hidden" name="pass" id="edit_pass" value="" />
      <input type="hidden" name="mode" id="edit_mode" value="edit" />
      <input type="hidden" name="plugin" value="fusen" />
      <input type="hidden" name="refer" value="{$refer}" />
    </p>
  </form>

 fusen.js
 function editbox_show() {
  getElement('edit_id').value = '';
  getElement('edit_ln').value = '';
  getElement('tc000000').selected = true;
  getElement('bg008000').selected = true;
  getElement('edit_body').value = '';
  getElement('edit_l').value = mouseX;
  getElement('edit_t').value = mouseY;
  show('edit_box');
  obj = null;
 }

 function edit(id) {
  obj = getElement(id)
  getElement('edit_id').value = id;
  getElement('edit_l').value = parseInt(obj.style.left.replace("px",""));
  getElement('edit_t').value = parseInt(obj.style.top.replace("px",""));
  getElement('edit_ln').value = getElement('ln'+id).value;
  getElement('edit_body').value = getElement('d'+id).value;
  tcid = getElement('tc'+id).value;
  tcid = 'tc' + tcid.substr(1);
  getElement(tcid).selected = true;
  bgid = getElement('bg'+id).value;
  bgid = 'bg' + bgid.substr(1);
  getElement(bgid).selected = true;
  show('edit_box');
 }

とても面白いプラグインですね。
fusen.inc.php と fusen.js を上記のようにして
色んな色を簡単に追加、選択できるようにして使っています。
今後とも宜しくお願いします。
-上記の書き込みは「けぴ与太郎」です。 -- [[けぴ与太郎]] &new{2005-03-30 (水) 23:06:05};
-PukiWikiスキン「bluebox」を使っているのですが、線がずれてしまいます。PukiWiki本体は1.4.5です。 -- [[カーズV3]] &new{2005-03-31 (木) 14:21:02};
-おそらく、tableを使わずに段組が構成されているスキンでは線がずれるのだと思います。CSSの設定自体ややこしい、CSSの動作の規格もややこしい、そもそもUAのCSS対応が厳格ではない、というCSS的問題がまずあります。さらに、線はJavaScriptで描かれています。以上から、現実的な解決案としては、スキン（もしくはUAにも？）にあわせて線の位置のオフセットを設定できるようにするのが良いのではないかと、勝手に考えていたことがありました。 -- [[sloth]] &new{2005-03-31 (木) 15:34:24};
-JavaScriptでonloadを設定していますが、他のプラグインやスキン等でもonloadを設定している場合に、上書きされてしまうようです。対策方法はいろいろあるようですが、以下のようにイベントハンドラを変数に退避しておくのが楽みたいです。 -- [[jitte]] &new{2005-03-31 (木) 23:55:46};
 var __fusen_onload_save = window.onload;
 window.onload = function () {
   if (__fusen_onload_save) __fusen_onload_save(); init();
 }
-[[自作プラグイン/exlink.inc.php]]、[[自作プラグイン/cookie.inc.php]] もonloadをつかっていますが、同様の修正をすれば共存可能でした。「bluebox」スキンもonloadを設定しているので、上記の線ずれ現象もひょっとすると関係するかもしれません（環境がなく、未確認ですみません）。 -- [[jitte]] &new{2005-04-01 (金) 00:06:13};
-ver1.6を取り込んだのですが、新規⇒登録を行うと「Runtime errorError message : PKWK_READONLY prohibits editing」というエラーが出てしまいます。何が原因なのでしょうか？ -- [[ichi]] &new{2005-04-01 (金) 15:11:50};
--PKWK_READONLYを1にしている場合、そう出るようにしています。 function plugin_fusen_actioin()　の if (PKWK_READONLY)...の行を削除すれば使えると思います。 -- [[ohguma]] &new{2005-04-01 (金) 22:36:21};
-V1.7リリースです。これまでのコメントの内容を反映させ追加で大幅修正しました。スキンの問題については環境が無いため、今回対応していません。 -- [[ohguma]] &new{2005-04-02 (土) 03:12:14};
-1.7使ってみました。まず、少なくともInternet Explorerではblueboxでの線のずれが無くなりました。ただ、Operaでblueboxの場合、付箋が表示されなくなりました。新規ウィンドウやヘルプは表示されます。Opera+標準スキンでは何の問題もありません。私自身は、付箋優先で標準スキンなので関係ないのですが。以上ご報告でした。 -- [[sloth]] &new{2005-04-02 (土) 03:48:22};
-対応ありがとうございます。こちらも線のずれがなくなりました。Internet ExplorerとGeckoエンジンブラウザでは正常に表示されました。 -- [[カーズV3]] &new{2005-04-02 (土) 16:59:29};
-V1.8リリースです。趣味でAJAXしています。 -- [[ohguma　]] &new{2005-04-03 (日) 01:44:13};
--Drag&Dropした際に、reloadなしでsetするようにしました -- [[ohguma]] &new{2005-04-03 (日) 01:50:48};
--fusen.js.1.8のパラメータ変更でreloadなしで付箋を自動更新します。自動更新する場合は「var fusenInterval = 0;」で更新タイミングをミリ秒単位で指定します。0の場合は自動更新しません。サーバに負荷がかかることが予想されるため、設定は慎重におこなってください。 -- [[ohguma]] &new{2005-04-03 (日) 01:52:27};
-とっても素晴らしいプラグインですね。ここ数日夢中なっちゃいました。 :p&br;[[PukiWikiMod用に改造してみた:http://hypweb.net/xoops/modules/pukiwiki/1873.html]]ので、配布したいのですが、ライセンスはどのようになっていますか？ -- [[nao-pon]] &new{2005-04-15 (金) 08:52:01};
--wema1を参考にしていますので修正BSDライセンスです。 -- [[ohguma]] &new{2005-04-15 (金) 14:49:12};
---了解しました。 :) -- [[nao-pon]] &new{2005-04-16 (土) 08:56:52};
-V1.9リリースです。バグ修正しています。 -- [[ohguma]] &new{2005-04-15 (金) 14:58:43};


#comment