無料＆簡単にウェブサイトの文章をメモ帳感覚でどんどん保存可能、HTML変換もできて便利なChrome拡張機能「Quotebacks」を使ってみた

ウェブサイトのテキストをブログやホームページに埋め込める形式で簡単にコピーできる「Quotebacks」は無料で使えるGoogle Chromeの拡張機能です。HTMLやマークダウン形式に対応した引用形式でもテキストをコピーできるというQuotebacksの使い心地を実際に使って確かめてみました。

Quotebacks - quote the web - Chrome ウェブストア
https://chrome.google.com/webstore/detail/quotebacks-quote-the-web/makakhdegdcmmbbhepafcghpdkbemach

Google Chromeに「Quotebacks」を追加するには、上記のURLにアクセスし「Chromeに追加」をクリック。

「拡張機能を追加」をクリック。

アドレスバーの右側に「→」のマークが追加されていれば、Quotebacksの追加は完了です。

Quotebacksを使うには、まずコピーしたいテキストを選択。この状態でWindowsならキーボードの「Ctrl」「Shift」「S」キーを同時に押下し、Macなら「Command」「Shift」「S」を同時に押下します。

するとウィンドウ右上にコピーしたテキストが表示されます。

コピーしたテキストの一覧は「→」のアイコンをクリックすると確認可能。

以下のようにテキスト一覧が表示されます。

右上にある検索ボックスに文字を入力すると、これまでにコピーしたテキストを一覧から検索することができます。

コピーしたテキストからだけでなくウェブサイト名からも検索できるので、例えば「gigazine」でテキストを検索するとGIGAZINEからコピーしたテキストを検索可能です。

テキストをコピーする際に表示されるボックスには、メモやコメントを入力できます。

書いたメモは一覧のページからも編集可能。また、書いた内容は上部にある検索ボックスの検索対象になるのでタグとして使うこともできそうです。

「Go to text」をクリックすると、コピー元のウェブサイトに移動できます。

一覧にあるテキストの右側にはメニューが表示されており…

「＜＞Embed」をクリックすると、HTMLの引用タグを入れた状態でテキストをコピーできます。

以下のようにHTMLタグをつけたテキストを貼り付け可能。改行も反映されます。

ブラウザで表示を確認してみると以下のようになりました。

「Copy Image」をクリックすると、コピーをPNGファイルとして書き出すことができます。

書き出されたPNGファイルは以下のような感じ。

「Copy Text」はコピーのテキストのみをコピー可能。

「Copy Markdown」はマークダウン形式でテキストをコピーできます。

テキストエディタなどに貼り付けると以下のようなテキストが表示されます。

ウェブブラウザで表示すると以下のようになりました。

「Delete」をクリックするとQuotebacksでコピーしたテキストを一覧から削除可能。

削除してもいいか確認のダイアログが表示されるので、「OK」をクリックすれば削除完了です。

なお、「＜＞Embed」と「Copy Markdown」のボタンはテキストをコピーした際にもウィンドウに右上に表示されるので、テキストを保存せず引用だけしたい時に時短でき便利です。

Quotebacksは手軽に引用タグがつけられるだけでなく、ソース込みでテキストを保存できるので、お気に入りのフレーズや覚えておきたい豆知識などをまとめて保存しておくのにも使えそうです。

記事作成時点でQuotebacksはGoogle Chromeにのみ対応しており、オープンソースソフトウェアであるためGitHub上でソースコードが公開されています。

GitHub - Blogger-Peer-Review/quotebacks: Quote the web
https://github.com/Blogger-Peer-Review/QuoteBacks