サイトを紹介するようなリンクを作る時、今までは ShareHtml という Javascript を使っていましたが、SSL対応の https:// のサイトでは使えません。
最近どのサイトでもSSL導入が進み、Javascriptが使える場面も少なくなってきました。
もくじ
サムネイル付きのリンクコード
ShareHtmlで出力されるサイト画像のサムネイルが付いたリンクコードの完成形は、このようになります。
そのコードが、こちら。
<a href="https://weblog10.com/" target="_blank"><img class="alignleft" align="left" border="0" src="https://capture.heartrails.com/150x130/shadow?https://weblog10.com/" alt="" width="150" height="130" /></a><a href="https://weblog10.com/" target="_blank">WEBLOG</a><a href="https://b.hatena.ne.jp/entry/https://weblog10.com/" target="_blank"><img border="0" src="https://b.hatena.ne.jp/entry/image/https://weblog10.com/" alt="" /></a><br style="clear:both;" /><br>
セクション毎に分解してみると、このようになります。
<a href="https://weblog10.com/" target="_blank"><img class="alignleft" align="left" border="0" src="https://capture.heartrails.com/150x130/shadow?https://weblog10.com/" alt="" width="150" height="130" /></a><a href="https://weblog10.com/" target="_blank">WEBLOG</a>
<a href="https://b.hatena.ne.jp/entry/https://weblog10.com/" target="_blank"><img border="0" src="https://b.hatena.ne.jp/entry/image/https://weblog10.com/" alt="" /></a>
<br style="clear:both;" /><br>
上からサムネイル部分、タイトル部分、はてなブックマーク数、さいごにスタイルクリア命令です。
サムネイル取得
サムネイルの取得は、こちらのウェブサービスを使っているようです。
HeartRails Capture | サムネイル画像／PDF ファイル作成サービス
リンクしたい URL の頭に、”https://capture.heartrails.com/150x130/shadow?” を付けるだけで、自動的にサムネイルを取得してくれるサービスです。
サムネイルのサイズも任意に決めることができます。
まさに至れり尽くせりの神サービスですね。
はてなブックマーク
コードの後半部分は、はてなブックマーク数を表示させるためのリンクコードです。
はてなブックマークされている数がわかるようになるので、人気度合いが一目瞭然となります。
ただ個人的には、必要ないかなとも思います。
はてなブックマークが０件だった場合、リンク切れとして検出されることがあるため、リンク切れチェッカーを導入していると、頻繁に通知されます。
今回作ったスニペットには、一応入れていますが、人気サイトばかり紹介するわけではないため、しばらく様子を見て外すと思います。
スニペットの登録
登録方法は、こちら。
Sublime Text3 の便利機能スニペットに自作コードを登録する方法
今回実際に登録した内容は、こちら。
<snippet>
<content><![CDATA[
<a href="${1}" target="_blank"><img class="alignleft" align="left" border="0" src="https://capture.heartrails.com/150x130/shadow?${1}" alt="" width="150" height="130" /></a><a href="${1}" target="_blank">${2}</a><a href="https://b.hatena.ne.jp/entry/${1}" target="_blank"><img border="0" src="https://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 とタイトルのコピーは、２ステップの工程を踏む必要があります。
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
このように１行ではなく、２行に分けてコピーするように設定変更します。
オプション設定画面を開きます。
この部分で、どのようなスタイルでコピーするかを選べます。
「 CR 」を選択します。改行の意味ですね。
実際にコピーをするときは、「 Title : URL 」または「 Title : short 」を選択します。
SublimeText3 上でコピー
上記の方法でコピーした内容は、改行されているだけで、１個の文字列としてコピーされていますので、SublimeText3 へ一旦貼り付けて、URL とタイトルに分けて、それぞれコピーし直す必要があります。
ここも色々と試してみましたが、行選択自体は分割選択して、それぞれにキャレットがある状態にできるのですが、その状態でコピーしても１個の文字列としてしか認識されず、一度に２個分分けた形でクリップボードに持っていくことはできませんでした。
それぞれ
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
カテゴリ: ユーティリティ, 仕事効率化
