« linclipの設定を保存できるようにしました(フォームの状態をjQueryで保存) | トップページ | Safariのlocation.hrefで文字化け »

2011年3月18日 (金曜日)

広めたい情報を効率よくリンク(タイトルを部分引用付きでリンク作成するブックマークレット)

(追記)
改良版を作成しました。以下からお試しください。
今見ているページをカンタンに紹介。リンクと引用を手間なくできるブックマークレットはてなブックマーク - 今見ているページをカンタンに紹介。リンクと引用を手間なくできるブックマークレット
(追記終わり)


 Twitterやブログで情報を発信しようとしている人も多いかと思います。そのための一助となれば。

 手っ取り早く言うと、Webで見ている記事/ページを紹介した場合、以下のブックマークレットを利用すれば、Twitter投稿時なら、このような形で一発でコピーできるようになります。

記事タイトル / http://www.example.com/ 「引用したい部分」

 こんな感じ(実際には色はつきません。ここでは、見やすいようつけてあります。以下同じ)。

 また、テキストのみ使えるBBSやSNS用にはより見やすい形での出力が可能です。BBS/SNS用の場合は以下のような形になります。


記事タイトル
http://www.example.com/
--------
引用したい部分
--------

 さらに、HTMLが使えるブログ用のコード出力も可能です。
 ひとまず、Windows版IE 7、Firefox 3.6.3で動作確認のうえ公開(随時情報追加予定)。

●どんな時に使う?

 有用な情報を拡散するために、ニュース記事やブログ記事などをTwitterやブログで紹介する際の手間をなるべく省き、効率よく(すばやく)作業を進めたいものです。通常は、入力欄で以下の手順をとることでしょう。


  1. URLをコピーして投稿欄に貼りつけ

  2. タイトルをコピーして投稿に貼りつけ

  3. 引用したい部分をコピーして投稿に貼りつけ

 このように、なんどもコピー&ペーストを繰り返すことになります。けっこうな手間です。

 これを解消するためのブックマークレットが以下で公開されています。

 snsにリンクを貼りつけるためのブックマークレットを作る課程で分かったブラウザの制約 : Media Technology Labs (MTL) : メディアテクノロジーラボ ブログ

 上記のブックマークレットを使えば、手順の1、2におけるコピーが1回で済みます。ここではさらに、記事内で引用したい部分も同時にコピーできないかと考え、改造版を作成してみました。

●ブックマークレット

 以下をお気に入り(ブックマーク)に追加してください。クリックではありません(詳細は後述)

●ブックマークレットの登録方法

 ブックマークは通常はURLを登録しておけば、いつでもすぐに呼び出せるというもの。これに対して、ブックマークレットはJavaScriptによる処理をカンタンに呼び出せるというものです。

 WindowsのIEであれば右クリックで「お気に入りに追加」(安全でない可能性があるとかいわれますが、「はい」で続行)。Firefoxであればツールバーのブックマークツールバーにドラッグ&ドロップで登録が可能です。

 いったん登録してしまえば、あとは、紹介したい記事のページを開いた状態でブックマークレットをクリックすれば記事のタイトル、URL、引用箇所を一発でコピーできるようになります(詳細は次項)。登録作業は一回で済みます。

 ブックマークレットは投稿先のサービスに応じて選択してください。

●利用方法

 ブックマークレット登録後、通常の投稿時の手順は以下のとおり。

  1. 紹介したい記事のページを開く
  2. 引用したい箇所があれば選択(マウスのドラッグで反転させる)
  3. ブックマークレットをクリック
  4. テキスト/HTMLコードが画面の上部に追加されたテキストエリアに表示される
  5. テキスト/HTMLコードは選択された状態になっている(フォーカス/focusされている状態)
  6. テキスト/HTMLコードをコピーする(Ctrl+CまたはCommand+C)
  7. 投稿欄に貼りつけ(Ctrl+VまたはCommand+V)
  8. 必要に応じて編集のうえ投稿

 表示されるテキスト/HTMLコードは、ブックマークレットにより異なります(詳細は次項)。
 また、テキストエリアをダブルクリックすれば、画面上部に追加されたテキストエリアは消えます。

●表示されるテキスト/HTMLコードの例

 ブックマークレットによってコピーできるテキスト/HTMLコードは異なります。用途に合わせて、テキストのみ、HTMLタグ込みのコードをそれぞれ出力するためです。

 以下はその出力例。当ブログの「DOOPEES、キャロライン・ノバクは誰だったか?」というページを開き、最初の段落を選択(マウスでドラッグ)した状態でブックマークレットを起動した場合です。

◆BBS/SNS用

DOOPEES、キャロライン・ノバクは誰だったか?: point of view point
http://pointofviewpoint.air-nifty.com/blog/2004/06/doopees.html
--------
DOOPEES(ドゥーピーズ)のキャロライン・ノヴァクの話。
--------

 テキストのみ。タイトル、URLごとに改行。選択した部分は引用部分がわかるよう、ダッシュで囲んだといったテキストを出力します。

◆Twitter用

DOOPEES、キャロライン・ノバクは誰だったか?: point of view point / http://pointofviewpoint.air-nifty.com/blog/2004/06/doopees.html 「DOOPEES(ドゥーピーズ)のキャロライン・ノヴァクの話。」

 テキストのみ。文字数が限られるため、タイトルとURLは「 / 」で区切り、引用部分はカギカッコで囲んでいます。改行なし。

◆ブログ用


DOOPEES、キャロライン・ノバクは誰だったか?: point of view point
DOOPEES(ドゥーピーズ)のキャロライン・ノヴァクの話。

 リンク用タグを含んだHTMLコードを出力します。引用部分はblockquoteタグで囲まれます(表示の際のデザインはCSSによります。上で背景が水色になっているのはブログサービスに設定したCSSによるものです)。
 ブログ以外のサービスでも、HTMLが使用できる場合はこちらをご使用ください。

●補足

 ブログ用はHTMLコードを出力しますが、はてなブックマークの登録数や、はてなブックマークボタンを追加したい場合は以下をご使用ください。

 たとえば、はてブ登録数付きの場合は以下のようになります。

DOOPEES、キャロライン・ノバクは誰だったか?: point of view pointはてブ - DOOPEES、キャロライン・ノバクは誰だったか?: point of view point

DOOPEES(ドゥーピーズ)のキャロライン・ノヴァクの話。

 今回紹介したブックマークレットでは1記事ごとの作業となりますが、複数記事を楽に紹介したいという要望もあるでしょう。
 そんな時は、はてなブックマークに登録した記事から、複数を取捨選択してリンクできる、以下のサービスを使えばより効率的に作業できるかと思います。

はてブに登録した記事をブログでカンタンに紹介する - linclip使い方

 以前から、この手のブックマークレットを作っていろいろやっていたのですが、IEではセキュリティのため、情報バーのクリックといった手間が増えてしまい、公開できるものにはならないなあと思っていたところ。上記のメディアテクノロジーラボさんところの記事を知り感動、感銘をうけ改造版を作らせていただきました。すばらしい記事の公開ありがとうございます。

 それでは、不具合や動作報告などあればコメントください。


|

« linclipの設定を保存できるようにしました(フォームの状態をjQueryで保存) | トップページ | Safariのlocation.hrefで文字化け »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35726/51151464

この記事へのトラックバック一覧です: 広めたい情報を効率よくリンク(タイトルを部分引用付きでリンク作成するブックマークレット):

« linclipの設定を保存できるようにしました(フォームの状態をjQueryで保存) | トップページ | Safariのlocation.hrefで文字化け »