サムネイル付きで今見てるページをカンタンにリンク&引用するブックマークレット

 今見ているページをカンタンにリンク&引用できるブックマークレットlinclip Singlesに、ページのサムネイルを加える機能を追加しました。
Singles00 自作ツールのはかで普段から一番よく使っているもの。要望にお応えする形で機能追加してみました。
 これで、記事へのリンク、ページ内の文字列の引用に加えて、記事ページのサムネイル(縮小画像)も同時に掲載できるようになります。
 以下、例。
 このブックマークレットを紹介した記事を新機能を使って引用してみます。
今見ているページをカンタンに紹介。リンクと引用を手間なくできるブックマークレット: point of view point

今見ているページをカンタンに紹介。リンクと引用を手間なくできるブックマークレット: point of view pointはてなブックマーク - 今見ているページをカンタンに紹介。リンクと引用を手間なくできるブックマークレット: point of view point

いま見ているページを紹介する際に、URLとタイトル、引用したい文章(ドラッグで範囲選択)を一気にコピーできるというブックマークレットです。



 上記のように、記事タイトルがリンクとなっており、はてなブックマークの登録数なども同時に掲載できます。ページ内の引用部分はblockquoteタグで囲まれる形となっています。引用部分(blockquote)の背景色点々のボーダーが指定されているのは、当ブログのスタイルシートによるものです。
(追記 2014/09/11)
 リンクと引用部分をマージンを設定したDIVで囲み、画像の下にまわりこまないようにしました。詳しくはここ
(追記終わり)
 引用部分がない場合はこんな感じ。
はてブ やニュースまとめにも! ページからリンクを抽出してコピペしたい linclip: point of view pointはてブ やニュースまとめにも! ページからリンクを抽出してコピペしたい linclip: point of view pointはてなブックマーク - はてブ やニュースまとめにも! ページからリンクを抽出してコピペしたい linclip: point of view point

 サムネイルが表示されるまで時間がかかるようです。のんびりお待ちください。
 サムネイル画像表示は他社のサービスを利用しているので、こちらができることはありません。
 また、サムネイルが表示できないページもあるようです(もしかするとブログサービスによるのかもしれませんが、未確認)。
 その他の機能は、従来どおり。導入方法や詳しい使い方は「今見ているページをカンタンに紹介。リンクと引用を手間なくできるブックマークレット」をご覧下さい。
 新画面では、一番下の左右2段がページのサムネイル画像入りのコードとなっています。
 とりあえず、はてなブックマークの有無、MovableType系への対応の有無(blockquote内の改行にbrタグを付加、ココログ含む)で、合計4種類のコードが追加されています。
Signleszoom_2
 起動後の画面には上記のような項目が追加されています(クリックで拡大)。
 デザインなどは、掲載するブログのスタイルシートによって変わります。
 生成されるHTMLタグはシンプルなものなので、とくにむずかしいところはないかと思います。


 機能追加を思い立ったきっかけはこちら。
2011年11月のブックマークレット12選|Ameblo Enjoy Methodはてなブックマーク - 2011年11月のブックマークレット12選|Ameblo Enjoy Method

ブロガー必須のブックマークレット。
引用を超絶簡単にしてくれる優れもの。
ブログ用やBBS、MT用、twitter用等、さまざまな出力方法がある。
はてぶ数表示やブックマーク登録ボタン等も取り付けれる。
HeartRails Capture | サムネイル画像/PDF ファイル作成サービスと連携してサムネイル取得して表示も出来たらいいのにな~と思う。
PC・iphone・ipadに対応。

 「HeartRails Capture」というのは知らなかったので、調べてみると、なるほど便利かも! と思い、追加にいたりました。ご紹介&ご提案ありがとうございました(なお、なぜかサムネイルが表示されないので、割愛させていただきました)。
HeartRails Capture | サムネイル画像/PDF ファイル作成サービスHeartRails Capture | サムネイル画像/PDF ファイル作成サービスはてなブックマーク - HeartRails Capture | サムネイル画像/PDF ファイル作成サービス

 サムネイル画像の利用に関しては上記サイトの規約などをご覧になったうえでお願いします。
 まだ、デザイン(というか出力するHTMLコード)に一考の余地はあるかと思いますが、ここからブラッシュアップしていければなあ、と考えています。
 タグはこうしたほうがいい、スタイルシートでなんとかできるようこういうclassをつけてほしい、みたいなことがありましたらコメントください。バグが出てるよ!の報告なども。できる範囲と好みで対応できればと思ってます。
 それでは、ご活用のほど、よろしくお願いします。

コメント