SublimeText3のスニペットでサムネイル付きサイトリンクをつくるタグを登録

サイトを紹介するようなリンクを作る時、今までは ShareHtml という Javascript を使っていましたが、SSL対応の https:// のサイトでは使えません。
最近どのサイトでもSSL導入が進み、Javascriptが使える場面も少なくなってきました。

サムネイル付きのリンクコード

ShareHtmlで出力されるサイト画像のサムネイルが付いたリンクコードの完成形は、このようになります。

WEBLOG

そのコードが、こちら。

<a href="http://weblog10.com/" target="_blank"><img class="alignleft" align="left" border="0" src="http://capture.heartrails.com/150x130/shadow?http://weblog10.com/" alt="" width="150" height="130" /></a><a href="http://weblog10.com/" target="_blank">WEBLOG</a><a href="http://b.hatena.ne.jp/entry/http://weblog10.com/" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/http://weblog10.com/" alt="" /></a><br style="clear:both;" /><br>

セクション毎に分解してみると、このようになります。

<a href="http://weblog10.com/" target="_blank"><img class="alignleft" align="left" border="0" src="http://capture.heartrails.com/150x130/shadow?http://weblog10.com/" alt="" width="150" height="130" /></a>

<a href="http://weblog10.com/" target="_blank">WEBLOG</a>

<a href="http://b.hatena.ne.jp/entry/http://weblog10.com/" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/http://weblog10.com/" alt="" /></a>

<br style="clear:both;" /><br>

上からサムネイル部分、タイトル部分、はてなブックマーク数、さいごにスタイルクリア命令です。

サムネイル取得

サムネイルの取得は、こちらのウェブサービスを使っているようです。

HeartRails Capture | サムネイル画像/PDF ファイル作成サービス

リンクしたい URL の頭に、”http://capture.heartrails.com/150x130/shadow?” を付けるだけで、自動的にサムネイルを取得してくれるサービスです。

サムネイルのサイズも任意に決めることができます。

まさに至れり尽くせりの神サービスですね。

はてなブックマーク

コードの後半部分は、はてなブックマーク数を表示させるためのリンクコードです。
はてなブックマークされている数がわかるようになるので、人気度合いが一目瞭然となります。

ただ個人的には、必要ないかなとも思います。

はてなブックマークが0件だった場合、リンク切れとして検出されることがあるため、リンク切れチェッカーを導入していると、頻繁に通知されます。

今回作ったスニペットには、一応入れていますが、人気サイトばかり紹介するわけではないため、しばらく様子を見て外すと思います。

スニペットの登録

登録方法は、こちら。

Sublime Text3 の便利機能スニペットに自作コードを登録する方法

今回実際に登録した内容は、こちら。

<snippet>
    <content><![CDATA[
<a href="${1}" target="_blank"><img class="alignleft" align="left" border="0" src="http://capture.heartrails.com/150x130/shadow?${1}" alt="" width="150" height="130" /></a><a href="${1}" target="_blank">${2}</a><a href="http://b.hatena.ne.jp/entry/${1}" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/${1}" alt="" /></a><br style="clear:both;" /><br>${0}
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>link</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

リンクURLを複数箇所、同時貼付けできるように、キャレット(カーソル)を複数配置し、貼付け後 tab を押すと、タイトル位置にキャレットが移動します。

運用方法

実際にどのように運用するかで、結構悩みました。
ただのスニペットですので、貼り付ける URL とタイトルは、事前にコピーしておく必要があります。

悩んだ末に考えついた方法です。もっと簡単にできる方法があったら教えてください。

URL + タイトルのコピー

URL とタイトルのコピーは、2ステップの工程を踏む必要があります。
ShareHtmlスクリプトのときは、ブックマークからJavascript一発だったので簡単でしたが、致し方ありません。

ブラウザからコピー

ブラウザのアドオンを使って、簡単に取得できるものがありました。Google Chrome を使っているので Chrome での紹介です。

Copy Title+URL to clipboard – Chrome ウェブストア

拡張機能のインストール完了後、設定を変更します。

デフォルトの設定だと、このような状態でクリップボードに格納されます。

Copy Title+URL to clipboard - Chrome ウェブストア : https://chrome.google.com/webstore/detail/copy-title%2Burl-to-clipboa/hbnaclhngkhpmpgmfakaghgjbblokeeh

このままでは、URL とタイトルを、それぞれコピーするには不向きです。

Copy Title+URL to clipboard - Chrome ウェブストア
https://chrome.google.com/webstore/detail/copy-title%2Burl-to-clipboa/hbnaclhngkhpmpgmfakaghgjbblokeeh

このように1行ではなく、2行に分けてコピーするように設定変更します。

オプション設定画面を開きます。

この部分で、どのようなスタイルでコピーするかを選べます。

「 CR 」を選択します。改行の意味ですね。

実際にコピーをするときは、「 Title : URL 」または「 Title : short 」を選択します。

SublimeText3 上でコピー

上記の方法でコピーした内容は、改行されているだけで、1個の文字列としてコピーされていますので、SublimeText3 へ一旦貼り付けて、URL とタイトルに分けて、それぞれコピーし直す必要があります。

ここも色々と試してみましたが、行選択自体は分割選択して、それぞれにキャレットがある状態にできるのですが、その状態でコピーしても1個の文字列としてしか認識されず、一度に2個分分けた形でクリップボードに持っていくことはできませんでした。
それぞれ
command + L などを駆使してコピーしてください。

コピーするときは、連続してコピーしてもOKです。
クリップボード履歴から貼り付けるためのアプリを利用することもできますし、SublimeText3 にも標準機能で搭載しています。

CopyClip – Clipboard History Manager
価格: 無料(記事公開時)
サイズ: 1.7 MB
カテゴリ: ユーティリティ, 仕事効率化

Copied – Copy and Paste Everywhere
価格: ¥960(記事公開時)
サイズ: 2.1 MB
カテゴリ: ユーティリティ, 仕事効率化

SublimeText3 のクリップボード履歴から貼り付けという便利な標準機能も、使い方は簡単です。
command + option + v で履歴が出るので、その中から選択して貼り付け出来ます。

過去15回分ほど履歴が残っているようです。

履歴は、SulimeText3 内でコピーした分のみしか、保存されていません。
ブラウザなどでコピーしただけでは、履歴に反映されていません。クリップボードを見ているのではなく、SublimeText3 でのコピー操作を監視しているということですね。

まとめ

一連の流れはこんな感じ。

ブックマークレット一発に比べると手間はかかりますが、SSLなどの暗号化サイトでも関係なく使えるという点では、ある意味使い勝手が良い方法かもしれません。

CopyClip – Clipboard History Manager
価格: 無料(記事公開時)
サイズ: 1.7 MB
カテゴリ: ユーティリティ, 仕事効率化

Copied – Copy and Paste Everywhere
価格: ¥960(記事公開時)
サイズ: 2.1 MB
カテゴリ: ユーティリティ, 仕事効率化

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする