すずろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

引用リンク作成ブックマークレット「QuoteLink」を作成してみた!

こんにちは、すずしんです。

過去に、私は色々なタイプのブックマークレットを作成してきました。
そして記事に書いて紹介してみたのですが…。
WordPress時代では、それほど反響はありませんでした。

そこで、はてなブログでも改めて記事として書いて掲載してみたいと思います。
ぜひとも少しでも多くの方に使ってもらいたいですからね。

今回紹介するのは、引用リンクを作成するブックマークレット「QuoteLink」です。
これを使えば、引用リンクを作成するのがだいぶ楽になると思いますよ!
ぜひお試しあれ!

QuoteLinkとは?

QuoteLinkというのは、私が作成した引用付きのリンクを簡単に作成するブックマークレットです。

他のブログやホームページなどから文章の一部を引用したい時が時々ありますよね?
そんな時には、基本的には引用したい文章とリンクをblockquoteタグで囲います。
例えば、こんな感じですね。

<blockquote><p>
いずれにしても、読者にとって興味がありそうな記事を書くことができれば、読了時間の表示はメリットになるのではないでしょうか。
また、ユーザビリティを向上させるためにも、読了時間の目安は表示させておいた方が良いのではないかと私は思います。<br>
by <a href="http://www.suzushin7.jp/entry/2017/05/04/completing-reading-time" title="コピペでOK!はてなブログで記事の読了時間の目安を表示させてみた! - すずしんろぐ" target="_blank">コピペでOK!はてなブログで記事の読了時間の目安を表示させてみた! - すずしんろぐ</a>
</p></blockquote>

実際に、引用文を表示してみた例は以下の通りです。
正しく引用されているのが分かりますね。


いずれにしても、読者にとって興味がありそうな記事を書くことができれば、読了時間の表示はメリットになるのではないでしょうか。
また、ユーザビリティを向上させるためにも、読了時間の目安は表示させておいた方が良いのではないかと私は思います。

by コピペでOK!はてなブログで記事の読了時間の目安を表示させてみた! - すずしんろぐ

この引用の過程を見ると分かると思いますが…。
引用リンクを貼るためには、blockquoteタグを書く、引用文をコピペする、引用元のページへのリンクを貼る、という作業が発生します。
これ、実際やってみると数ステップかかるため意外と面倒くさいです。

そこで、登場するのが今回のQuoteLinkです。
このブックマークレットを使うと、引用リンク作成の手間が一気に減り、なんとコピペ一発になります。
これに一度慣れてしまうと、もう手作業には戻れないと思いますよ。

QuoteLinkの登録

QuoteLinkの登録は簡単です。
お使いのWebブラウザのブックマークバーの好きなところに、以下のリンクをドラッグアンドドロップしてください。
おすすめとしては、ブックマークバーに「ブックマークレット」フォルダを作成してその中に入れると良いと思います。

QuoteLink

QuoteLinkの使い方

QuoteLinkの使い方も実に簡単です。

まず引用したい文章があるページを開いておきます。
そして、引用したい文章をドラッグして選択状態にしておきます。

f:id:Suzushin:20170505081618j:plain

その後、さきほど登録したQuoteLinkをクリックします。
すると、プロンプトが表示されますが、そのプロンプトのテキストエリアにコードが自動生成されていますのでコピーします。

f:id:Suzushin:20170505081740j:plain

最後に、記事の任意の位置にコピーしたコードを貼り付けてください。
これで引用リンクの作成作業は終了です。

いずれにしても、読者にとって興味がありそうな記事を書くことができれば、読了時間の表示はメリットになるのではないでしょうか。
また、ユーザビリティを向上させるためにも、読了時間の目安は表示させておいた方が良いのではないかと私は思います。
by コピペでOK!はてなブログで記事の読了時間の目安を表示させてみた! - すずしんろぐ

QuoteLinkのソースコード

QuoteLinkのソースコードは以下の通りです。
それほど複雑な処理はしていないということが分かると思います。
選択テキストを取得して、aタグとblockquoteタグを作成、そしてプロンプトに表示、という手順を踏んでいます。

javascript:(function(){
var text = getSelection ? getSelection().toString() : document.selection.createRange().text;
var url = location.href;
var title = document.title;
var a = '<a href="'+url+'" title="'+title+'" target="_blank">'+title+'</a>';
var quote = '<blockquote><p>'+text+'<br />by '+a+'</p></blockquote>';
prompt('QuoteLink', quote);
})();

ひとこと

今回の記事では、簡単に引用リンクを作成することができるブックマークレット「QuoteLink」を紹介してみました。
いかがでしょうか?
従来の手作業と比べると、だいぶ手間が省けているというのが分かりますよね!

引用する機会というのは、あまり多くないかもしれませんが…。
QuoteLinkのようなブックマークレットを用意しておくと、後々便利だと思いますよ。
ぜひあなたもこのQuoteLinkをお使いくださいね。