第11回:引用(blockquote)を簡単にするブックマークレット

前に書いたリンクタグを生成するブックマークレットにも関連するんだけど、ブログを書く上で頻繁に行う引用の手順を簡単にしてくれるブックマークレットを作ってみようと思う。

通常は、引用するサイトの「URL」「ページタイトル」「引用部分」をそれぞれコピーしてきて、<blockquote>で修飾するっていうのがお決まりの手順なんだけど、いちいちソースみたりするのはメンドウなのでその辺をブックマークレットで一気にやってしまおうと。

今回、色々探したり自分で作ったりしたので何種類か紹介できます。
自分にあったものを使ってもらえたらうれしいです。

1)高性能な「引用マークアップを生成 - 徒書」のブックマークレット

引用マークアップを生成 - 徒書

色々検索でヒットした中で一番スゴかったのがコレです。
 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>

2)「引用マークアップを生成 - 徒書」を自分流にアレンジ

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

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

via: XHTMLでの引用方法

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

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

1)の引用マークアップを生成とは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

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

ここまで非常に高性能な例を参照してありがたい思いをしたにも関わらず、結局自分で作る事にしました。理由は・・・

 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に1行で表示するため)
・HTMLコードはpromptに文字を選択状態で表示されるので、コピーして「Enter」でダイアログは消えます。

IEとFirefoxで動くのでかなり使えると思います。
IEのURL文字数制限の問題があったため、外部ファイル化しています。
HTML構造を自分用に変更したい方は外部JSファイルをダウンロードして、フォーマットを変更の上、自分のサーバにアップロードしてください。
Bookmarkletから呼び出す外部JSのURLを自分でUPしたものに変えるのをお忘れなく。

初めてのJavaScript―Ajax&DOM対応
初めてのJavaScript―Ajax&DOM対応Shelley Powers 武舎 広幸 武舎 るみ

オライリージャパン 2007-05
売り上げランキング : 12902

Amazonで詳しく見る
by G-Tools
JavaScriptクイックリファレンス 第5版―JavaScript1.5対応 WEB+DB PRESS 総集編 [Vol.1~36] JavaScript 第5版 まるごとJavaScript & Ajax ! Vol.1 WebクリエイティブのためのDOM Scripting

第13回:URLエンコードとURLデコードを簡単にするブックマークレット
第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法
・第11回:引用(blockquote)を簡単にするブックマークレット
第10回:Windowsフォントをアンチエイリアスでキレイに見せる方法
第9回:閲覧しているサイトへのリンクタグを生成するブックマークレット
第8回:Twitter JavaScript Badges の日付フォーマットを自由にカスタマイズ
第7回:サムネイル作成APIをJavaScriptで簡単に切り替える方法
第6回:TinyURL の遷移先が怖くて開けない場合の対処法
第5回:twitter の JavaScript Badge を改造する
第4回:twitter の JavaScript Badge をIEで表示するとおかしい件に対応してみる
第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く
第2回:タグに関わる基本的な事
第1回:CSSで画像にborderをつけてみる

同じカテゴリーの記事

このページの一番上に戻る
  • Facebook
  • Twitter
  • Tumblr
  • Instagram
  • miil