「校正する」ボタン追加する「gmail_and_blog_de_japaneseproofreader」の対応サイト追加方法

2009 | 06 | 07 | 08 | 10 | 11 | 12 |
2010 | 01 | 02 | 03 | 04 | 05 | 10 |
2011 | 01 | 02 | 05 | 06 | 07 | 08 | 09 |
2012 | 05 |

Koonies/こりゃいいな！ > 2009-10-23 > 「校正する」ボタン追加する「gmail_and_blog_de_japa...

2009-10-23

「校正する」ボタン追加する「gmail_and_blog_de_japaneseproofreader」の対応サイト追加方法

greasemonkey

GMailやはてなに「校正する」ボタン追加するgreasemonkeyの対応サイトを2倍に増量のgreasemonkey スクリプトを普段お使いのページでも動作させる方法を簡単ながら書いてみます。興味のある方はどうぞ。

説明を簡単にするために

１．対象ページの

２．記事本体にある文章を

３．[校正する]ボタンを押すと日本語文章校正ツールに渡す

ようにスクリプトを動作させることを考えます。

サンプルとして「はてなダイアリー」（以下はてダ）を使います。（既に対応していますが、一番シンプルだったので）

１．アドレス 情報の追加

まずは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を使って説明します。（別にこれじゃなくても要素情報が分かれば何でもいいです）

この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"]'
		},