Koonies/こりゃいいな！

GMailやはてなに[校正する]ボタン追加するgreasemonkeyの対応サイトを2倍に増量

greasemonkey

日本語文章校正ツールとの連携グリースモンキーのスクリプト（gmail_and_blog_de_japaneseproofreader）をバージョンアップしました。今回ははてな系サービスを重点的に増やし、トータルでは12のサイトに対応しました。

スクリプトはgmail_and_blog_de_japaneseproofreader for Greasemonkeyからダウンロードしてください。

なおgreasemonkeyをご存じない方は以下のサイトが参考になると思います。

■Firefox

Greasemonkey入門 〜よくわかるグリースモンキーの使い方 〜 | Google Mania - グーグルの便利な使い方

■Google Chrome

Greasemonkey - Google Chrome まとめWiki

■Opera

User JavaScript - Opera Wiki

このスクリプトは、インストールすると様々なサイトの編集画面に「校正する」という新たなボタンが追加し、このボタンを押すと日本語文章校正ツールを使用して編集中の文章が校正できるというものです。（前回記事）

日本語って難しいですね。

そして、以下が対応サイトです。

はてなダイアリーの場合

人力検索の場合

匿名ダイアリー（増田）の場合

はてなハイクの場合

mixiの場合

nanapiの場合

FC2ブログの場合

Yahoo!ブログの場合

Seesaaの場合

livedoorブログの場合

gooメールの場合

GMail（簡易HTML版）の場合

サイトによっては「校正する」ボタンがまったくデザインにマッチしていませんが、その辺はご容赦をｗ

人に「質問する」「教える」というＱ＆Ａのサイトで正しい日本語を書くということは、内容をよりダイレクトに伝えることにつながると思うので、人力検索にはマッチしているじゃないかなと思うんですがどうでしょうか。

なお、対応するサイトを増やすのは簡単なのですが、持っていたアカウントでは目ぼしいところをすべて追加したので、このスクリプトに関しては大きなバグがない限りこれで打ち止めです（多分）。

日本語文章校正ツールを使いたいけど、サイトが対応していない、またはサイトのレイアウトが変更になって使えなくなった場合は「校正する」ボタン追加する「gmail_and_blog_de_japaneseproofreader」の対応サイト追加方法をご覧ください。

【関連エントリ】

「Simple YourFileHost」のGoogle Chrome対応版 - Koonies/こりゃいいな！

快適！PDFのリンクをGoogle docs Viewer経由に置き換えるgreasemonkey - Koonies/こりゃいいな！

KINGJIM デジタルメモ「ポメラ」 DM10シロ パールホワイト キングジム ￥ 27,300

ツイートする

Permalink | コメント(0) | トラックバック(0)

「校正する」ボタン追加する「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"]'
		},

これでソースの編集は終わりです。保存して対象ページを開いてみてください。

問題がなければ[挿入する]ボタンが出現し、ボタンを押せば日本語文章校正ツールが表示されると思います。

とまあ、簡単ながら説明は以上です。

普段お使いのいろんなサイトにボタンを追加してみてください。

またGMailの通常版が追加できたら教えてください。僕が使いたいので。

（ソース自体を手直ししないとダメかもしれませんが。）

ツイートする

Permalink | コメント(0) | トラックバック(0)