第11回：引用（blockquote）を簡単にするブックマークレット

前に書いたリンクタグを生成するブックマークレットにも関連するんだけど、ブログを書く上で頻繁に行う引用の手順を簡単にしてくれるブックマークレットを作ってみようと思う。
通常は、引用するサイトの「URL」「ページタイトル」「引用部分」をそれぞれコピーしてきて、<blockquote>で修飾するっていうのがお決まりの手順なんだけど、いちいちソースみたりするのはメンドウなのでその辺をブックマークレットで一気にやってしまおうと。
今回、色々探したり自分で作ったりしたので何種類か紹介できます。
自分にあったものを使ってもらえたらうれしいです。

１）高性能な「引用マークアップを生成 – 徒書」のブックマークレット

・引用マークアップを生成 – 徒書
色々検索でヒットした中で一番スゴかったのがコレです。
　1.　フレームの下階層まで引用できる。
　2.　引用部分のHTML構造もコピーできる
　3.　表示中の画面にdiv要素でソースを表示＋コピー状態にしてくれる。
「FirefoxなどのMozilla系ブラウザ用」と書いてあり、Safariでも動きました。
以下のブログでも紹介やカスタマイズしています。

引用を簡単にできるjavascriptを作ろうかと思っていたら、やはり先駆者がいて、その方のスクリプトがスゴく、それを把握するのにも時間がかかっていたのもある。

via: 簡単に引用マークアップ(blockquote要素)を生成できる-javascript – WEBデザイン　BLOG

私は blockquote 要素の cite 属性だけで充分 ( だけどさりげなくリンクアンカーを配置することもあり ) という方針ですので、 cite 要素部分は使いません。

via: hxxk.jp – 「選択箇所を blockquote 」の導入手順や使用方法や注意点のまとめ

生成されるHTMLコードは以下の通りです。

<p><a href="引用元の URI" title="引用元の title 要素"><cite>引用元の title 要素</cite></a>より引用:</p>
<blockquote cite="引用元の URI" title="引用元の title 要素">
引用元の選択部分の、マークアップ部分も含んだ内容
</blockquote>

２）「引用マークアップを生成 – 徒書」を自分流にアレンジ

引用におけるblockquote要素とcite要素のマークアップ方法については諸説あるようですが、以下のページが細かく書かれておりました。

機械向けには、《cite属性＋title属性》で、人間向けには、cite 要素を用いて出所を「明示」するのが良いと思います。

via: XHTMLでの引用方法

以下のようなマークアップを推奨しているようです。

<blockquote cite="URI" title="詳細情報">
<p>被引用箇所</p></blockquote>
<p>[<cite><a href="URI">出所</a></cite>]>/p>

１）の引用マークアップを生成とはcite属性の前後の差はあれど、ほとんど一緒ですね。
しかーし！オレの場合スタイルとの兼ね合いもあり、下記のような形式にしたいのです。

<blockquote cite="URI" title="詳細情報">
<p>被引用箇所</p>
<cite>via: <a href="URI">出所</a></cite>
</blockquote>

そこで早速改造します。
引用マークアップを生成のBookmarklet中にblockquote要素のフォーマットを決めているquoteという変数があるのでそれを以下のように変更

var quote='<blockquote cite="'+url+'" title="'+t+'"><p>' +src+'</p><cite>via: <a href="'+url+'" target="_blank">' +t+'</a></cite></blockquote>';

ついでに、Bookmarkletが短くなるようにJSを外部ファイル化して呼び出す方式にしました。

bookmarkletを作るとき、IEでは500文字ちょい、Firefoxでは2000文字ぐらい(?)の文字数制限がある。また、作った後に一行にまとめたり、デバッグしたりも大変面倒。

via: 川o・-・）＜2nd life – bookmarkletの文字数制限を無くす

色々試してみたところ、Internet Explorer 6 で動作しない理由は、スクリプトが長すぎるためであることが分かった。IE6 には文字数制限があるようで、508 文字までしか動作しないのである。

via: nlog(n): 汎用ブックマークレットは可能か?

以下のリンクをブックマークしてください。
引用マークアップを生成（改
呼び出している外部ファイルはこちらです。
http://labs.creazy.net/bookmarklet/blockquote.js

３）さらにスピードアップ！簡易版ブックマークレットを自作しました

ここまで非常に高性能な例を参照してありがたい思いをしたにも関わらず、結局自分で作る事にしました。理由は・・・
　1.　IEに対応していない。
　2.　むしろ、HTML構造までコピーしたくない
　3.　div要素をcreateElementするんじゃなくてpromptで速攻コピーしたい
1.せっかくFirefox拡張じゃなくてBookmarkletにしてるんだからIEでも同じの使いたいじゃん。
2.アンカーや強調文字等もそのまま引用したいという意見もわかるけど、引用元のマークアップを完全に信用する事はできないし、選択した部分によってマークアップが壊れている可能性もある。引用部分はプレーンテキストで十分（改行くらいは反映させたい）。
3.DOMを使ってソースをコピーする要素を作っているが、コピー後いちいち「閉じる」ボタンをマウスで押さなきゃいけないのはわずらわしい。
という事で作ったのが以下のブックマークレットです。
以下のリンクをブックマークしてください。
簡易引用ブックマークレット
呼び出している外部ファイルはこちらです。
http://labs.creazy.net/bookmarklet/blockquote_light.js

(function(){
var d = document;
var w = window;
var u = location.href;
var t = d.title;
if ( d.selection ) {
src = d.selection.createRange().text;
} else if ( w.selection ) {
src = w.selection.createRange().text;
} else if ( d.getSelection ) {
src = d.getSelection();
} else if ( w.getSelection ) {
src = w.getSelection();
} else {
src = '';
}
src = src.replace(/¥n/g,"<br />");
var q
= '<blockquote cite="'+u+'" title="'+t+'">'
+ '<p>'+src+'</p>'
+ '<cite>via: <a href="'+u+'" target="_blank">' +t+'</a></cite>'
+ '</blockquote>';
var r = w.prompt('Copy Blockquote',q);
})();

ポイントは以下の通り
・選択部分の取得をクロスブラウザ対応している
・改行は自動的に<br />に変換（promptに１行で表示するため）
・HTMLコードはpromptに文字を選択状態で表示されるので、コピーして「Enter」でダイアログは消えます。
IEとFirefoxで動くのでかなり使えると思います。
IEのURL文字数制限の問題があったため、外部ファイル化しています。
HTML構造を自分用に変更したい方は外部JSファイルをダウンロードして、フォーマットを変更の上、自分のサーバにアップロードしてください。
Bookmarkletから呼び出す外部JSのURLを自分でUPしたものに変えるのをお忘れなく。

初めてのJavaScript―Ajax&DOM対応
	Shelley Powers 武舎広幸武舎るみオライリージャパン 2007-05 売り上げランキング : 12902 Amazonで詳しく見るby G-Tools