ニコニコ大百科のWYSIWYGエディタ+Greasemonkeyでの不具合。

概要

ニコニコ大百科WYSIWYGエディタと一部のGreasemonkeyスクリプトが衝突するというお話。解決策を探そうとしたけど,ぐりもんスクリプトの方に手を入れないと多分解決できないだろうなーと。

結論

「スクリプトを実行しないページ」に「http://dic.nicovideo.jp/p/*」を追加するのが一番手っ取り早い。

問題

実際に衝突して困ったスクリプトは「Minibuffer」,「Fast look up JP and EN」と,拙作の「nicovideo Thumbinfo popup」。
「Minibuffer」は,WYSIWYGエディタ内で「:」を入力すると,編集エリア内にコマンド入力欄が表示され,divが挿入される。コマンド入力欄を消去するには,記事のHTMLソースを直接編集するしかない。
「Fast look up JP and EN」は,余計な要素は挿入されないものの,「y」が入力できなくなる。
「nicovideo Thumbinfo popup」は,編集エリア内のリンクにマウスカーソルを載せると,リンクのclass属性に「_GM_nicovideo_thumbinfo_popup_created」が追加されてしまう。
追加された要素や属性は,そのまま編集結果に反映されてしまう。現在のニコニコ大百科の仕様では,編集者が要素にclass属性を与えることが禁止されている。よって,編集後の確認画面で「class属性は使えません」といったエラーが出て,意図せぬ要素/属性が追加されたことを知ることができる。しかし,今後の仕様変更で編集者がclass属性を付与できるようになった場合*1,余計な要素/属性が追加されてもエラーメッセージが表示されず,余分な要素の追加された記事を投稿してしまうかもしれない。
というわけで,この問題の回避策を考えてみた。

Greasemonkey本体の設定だけで問題を回避できない理由

WYSIWYGエディタのiframe内でGreasemonkeyスクリプトが実行されなければよい。そういう場合は「実行しないページ」にURLを指定するのが一番手っ取り早い,のだが,今回は事情が複雑だ。WYSIWYGエディタのiframeの内容は,特定のURLを参照しているのではなく,scriptによって動的に生成されたものだからだ。
Firebugで調べてみると,「iframe.contentWindow.window.location.href」が「window.location.href」と全く同一のものだった。これじゃあURLだけでフィルタリングできるわけがない。フィルタリングするとしたら,iframeを含むページごと除外しなければならない。

結局どうしたか

「Minibuffer」,「Fast look up JP and EN」は「http://dic.nicovideo.jp/p/*」で実行しない設定にした。エディタ内だけでなく,編集ページ全体で実行できなくなったが,この2つのスクリプトを編集ページ内で使うことは少ないので,個人的に問題は無い。
しかし,「nicovideo Thumbinfo popup」は記事を書く時に役立つことが多いので,無効にしていない。よって,余分なクラス属性が付与される問題は未解決だ。スクリプト本体をいじって「http://dic.nicovideo.jp/p/*」のiframe内では実行しない,という風にするしかない。

*1:ニコニコ大百科の残り作業項目一覧の中に<style>タグを使えるようにするというのがある。<style>を有効活用しようとしたらclass属性はあった方がいいので,編集者がclass属性を使えるようになるのもあり得ない話ではないと思う。