「校正する」ボタン追加する「gmail_and_blog_de_japaneseproofreader」の対応サイト追加方法
GMailやはてなに「校正する」ボタン追加するgreasemonkeyの対応サイトを2倍に増量
説明を簡単にするために
１．対象ページの
２．記事本体にある文章を
３．[校正する]ボタンを押すと日本語文章校正ツールに渡す
ようにスクリプトを動作させることを考えます。
サンプルとして「はてなダイアリー」（以下はてダ）を使います。（既に対応していますが、一番シンプルだったので）
１．アドレス情報の追加
まずはgreasemonkeyに対象のサイトであることを認識させるため、ソース上で2ヶ所追加します。
はてダの記事編集ページのアドレスは"http://d.hatena.ne.jp/username/edit"なので、これをメモっておいて
スクリプトの5行目にこれを追加します。ただそのまま追加するのではなくアドレスに汎用性を持たせるため'*'（アスタリスク）を使って下記のようにします。
// @include http://d.hatena.ne.jp/*/edit*
こうすることで「http://d.hatena.ne.jp/username/edit」や「http://d.hatena.ne.jp/username/edit?date=20091023」でもスクリプトが動作するようになります。
次に、ソース中の下記部分（１〜２）をコピーして３の部分に貼り付けてください。
(function(){ var arr = [ //← ３：この次の行に貼り付け（挿入） { "url" : 'mail\.google\.com', "title" : '//input[@name="subject" and @class="i"]', （中略） /* { //← １：この行から "url" : '', "title" : '', "body1" : '//', "body2" : '', "body3" : '', "preview" : '//' } //← ２：この行までをコピー */
この貼り付けたところの url のところに 「http://○○.△△.◇◇/」 の中の 「○○.△△.◇◇」 を挿入します。
はてダの場合なら「d.hatena.ne.jp」になります。*1
で、追加するとこうなります。
(function(){ var arr = [ { "url" : 'd.hatena.ne.jp', "title" : '', "body1" : '//', "body2" : '', "body3" : '', "preview" : '//' }, { "url" : 'mail\.google\.com', "title" : '//input[@name="subject" and @class="i"]',
これでアドレス情報の追加はOKです。
２．記事本体の要素情報の追加
"body1" : '//',
先に追加したこの body1 ってところに、記事本体がどれかを特定するための情報（XPath）を挿入します。
ここでの指定方法はいろいろありますが、ここも簡単な方法でやります。
普段僕が使っている「Mouseover DOM Inspector
このbookmarkletをブックマークに追加します。
そしてこれを起動し、マウスカーソルをテキストエリアの上へ動かします。
そうすると記事本体の要素情報が表示されますので、ここでキーボードの[P]を押します。*2
一番上に表示されるのがタグ名です。その下にidとかclassとかnameなどプロパティ(?)が表示されているのでこれらをメモします。ちなみにidがあればidを、なければ他のプロパティを使います。
はてダなら
タグ名 ：textarea
プロパティ：id textarea-edit
これを
//textarea[@id="textarea-edit"]
この形に並び替えます。'@' や '"' などもお間違いなく。それで↓こうなります。
"body1" : '//textarea[@id="textarea-edit"]',
３．[校正する]ボタンを挿入する左隣の要素情報の追加
記事本体のときと同様に挿入先のボタンの要素を調べ、XPathの形にします。
はてダなら
タグ名 ：input
プロパティ：name preview
これを
//input[@name="preview"]
と並び替えて preview ってところに挿入して下さい。
ここまでで以下のようなソースになりました。
// @include http://d.hatena.ne.jp/*/edit* （中略） (function(){ var arr = [ { "url" : 'd.hatena.ne.jp', "title" : '', "body1" : '//textarea[@id="textarea-edit"]', "body2" : '', "body3" : '', "preview" : '//input[@name="preview"]' },
これでソースの編集は終わりです。保存して対象ページを開いてみてください。
問題がなければ[挿入する]ボタンが出現し、ボタンを押せば日本語文章校正ツールが表示されると思います。
とまあ、簡単ながら説明は以上です。
普段お使いのいろんなサイトにボタンを追加してみてください。
またGMailの通常版が追加できたら教えてください。僕が使いたいので。
（ソース自体を手直ししないとダメかもしれませんが。）
