すずろぐ

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

サムネイル付きリンク作成ブックマークレット「ShareLink」を作ってみた

プログラミング

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

以前の記事「ページのリンクを作成するブックマークレット「PageLink」を作ってみた」で、私はページのリンクを作成するブックマークレット「PageLink」を作成しました。 ですが、もう少し手のこんだものを作ってみたいと考えまして…。 今回はサムネイル付きのリンク作成するブックマークレットとして「ShareLink」を作ってみましたので今回紹介したいと思います。

ShareLinkとは?

「ShareLink」は、リンクを貼りたいページのサムネイル画像が付いたリンクタグを自動生成するブックマークレットです。 また、おまけでリンク先のはてなブックマーク数も表示します。

リンク先のサムネイルがあることで、リンク先のページの雰囲気がある程度分かりやすくなりますね。 また、画像があることで単にリンクを貼るよりもブログ記事の見栄えが良くなります。 ShareLinkは、まさにブロガーにおすすめのブックマークレットとなっています。

ShareLinkについて

ShareLinkの登録

ShareLinkを登録する方法としては、まず以下のコードをコピーします。 コード上でダブルクリックするとコード全体が選択状態になりますよ。 そして、お使いのブラウザのブックマークバー上で右クリック→「ページを追加」からブックマークの編集画面を表示させます。 ブックマークの名前に「ShareLink」、URLにコピーしたコードを貼り付けて保存して下さい。 ブックマークレットの保存場所は、ブックマークバー上か、ブックマークレットというフォルダを作ってその中に入れておくと分かりやすくて使いやすいと思います。

[js] javascript:(function(){var w = 120, h = 90, u = location.href, t = document.title;var a = ‘<a href="’+u+‘" title="’+t+‘" target="_blank">’, ca = ‘</a>’;var img = ‘<img src="http://capture.heartrails.com/’ +w+‘x’+h+‘/shadow?’+u+‘" width="’+w+‘" height="’+h+‘" style="float: left;">’;var hatena = ‘<a href="http://b.hatena.ne.jp/entry/’ +u+‘"><img src="http://b.hatena.ne.jp/entry/image/’ +u+‘" alt="はてなブックマーク - ’+t+‘" title="はてなブックマーク - ’+t+‘"></a>’;var tag = ‘<div class="sharelink" style="padding: 6px; border: 1px solid #aaaaaa;">’ + a + img + ca + a + t + ca + hatena + ‘<br style="clear: both;" /></div>’;prompt(‘ShareLink’, tag);})(); [/js]

補足ですが、コード内のwとhの値を変えればサムネイルのサイズが変わります。 デフォルトでは幅120px、高さ90pxのサムネイルを作成するようにしています。 これらのサイズはお好きなように変更しても構いません。

ShareLinkの使い方

ShareLinkの使い方としては、まずリンクを貼りたいページを表示しておきます。 その後、ShareLinkをクリックするとプロンプトにタグが表示されます。 例えば、このブログのトップページにリンクを貼ろうとすると以下のようなタグが自動生成されます。

[html] <div class="sharelink" style="padding: 6px; border: 1px solid #aaaaaa;"><a href="http://suzushin7.com/blog/" title="すずしん - 人生大逆転を目指す、鈴木俊吾の成長日記" target="blank"><img src="http://capture.heartrails.com/120x90/shadow?http://suzushin7.com/blog/" width="120" height="90" style="float: left;"></a><a href="http://suzushin7.com/blog/" title="すずしん - 人生大逆転を目指す、鈴木俊吾の成長日記" target="blank">すずしん - 人生大逆転を目指す、鈴木俊吾の成長日記</a><a href="http://b.hatena.ne.jp/entry/http://suzushin7.com/blog/"> src="http://b.hatena.ne.jp/entry/image/http://suzushin7.com/blog/" alt="はてなブックマーク - すずしん - 人生大逆転を目指す、鈴木俊吾の成長日記" title="はてなブックマーク - すずしん - 人生大逆転を目指す、鈴木俊吾の成長日記"></a><br style="clear: both;" /></div> [/html]

後はこのタグをコピーして、ブログ記事に貼り付けるだけです。 ねっ、簡単でしょ? ちなみに、上記コードを表示させるとこんな感じになります。 意外とスッキリしていて良い感じだと思いませんか?

ShareLinkのソースコード

ShareLinkのソースコードは以下のようになっています。 基本的な考え方はPageLinkと同様で、タグの文字列を生成してプロンプトに表示させるという方法で実現しています。 今回はサムネイルの取得、リンクタグの作成、はてなブックマーク数の表示もさせていますので少々コードが長くなっていますが、じっくりコードを読めば大したことはしていないというのがお分かりになると思います。 これくらいのコード量になってくると、何となくプログラミングしたという感じになってきますね。

今回サムネイルを取得するにあたって、「HeartRails Capture」のAPIを使用しています。 また、はてなブックマーク数の取得には、はてなブックマーク数を画像で取得するAPIを使用しています。 それぞれのページヘのリンクを貼っておきますので、詳しくはリンク先を参照下さい。

[js] javascript:(function(){ var w = 120, h = 90, u = location.href, t = document.title; var a = ‘<a href="’+u+‘" title="’+t+‘" target="_blank">’, ca = ‘</a>’; var img = ‘<img src="http://capture.heartrails.com/’ +w+‘x’+h+‘/shadow?’+u+‘" width="’+w+‘" height="’+h+‘" style="float: left;">’; var hatena = ‘<a href="http://b.hatena.ne.jp/entry/’ +u+‘"><img src="http://b.hatena.ne.jp/entry/image/’ +u+‘" alt="はてなブックマーク - ’+t+‘" title="はてなブックマーク - ’+t+‘"></a>’; var tag = ‘<div class="sharelink" style="padding: 6px; border: 1px solid #aaaaaa;">’ + a + img + ca + a + t + ca + hatena + ‘<br style="clear: both;" /></div>’; prompt(‘ShareLink’, tag); })(); [/js]


まとめ

今回は、サムネイル画像がついたリンクを作成するブックマークレットである「ShareLink」を作ってみました。 このShareLinkを使うことで、スッキリしていて見栄えの良いリンクを貼れるようになります。 比較的リンクを貼ることの多いブロガーにとっては、非常にオススメできるブックマークレットだと思います。

サムネイル画像付きのリンクを貼るのに、毎回あれだけの量のタグを入力するのは大変ですよね…。 このShareLinkを使ってサクッとリンクタグを生成してしまいましょう! ShareLinkは、ブロガーの良い相棒になってくれると思います。 私も今後ブログ記事にリンクを貼るときにはShareLinkを使おうと考えています。

もしこのブックマークレットが気に入っていただけたら、ぜひブログ記事やSNSなどでシェアしていただけると非常に喜びます。 その際は、ぜひShareLinkを使ってこのページヘリンクを貼ってくださるとありがたいです。 1人でも多くの方にこのShareLinkを知ってもらい、また使っていただきたいですね。