(はてブ数表示つき)Markdown用のリンクを生成するブックマークレット書いた

投稿日: 2016/07/15

先日、こんなのを書きました。
Markdown用のリンクを生成するブックマークレット書いた | Shimabox Blog
そしてついでといってはなんですが、上記リンクにはてブ数も表示するタイプも書いてみたのでサラッと残しときます。

Table of Contents

はてブ数を表示するには

まず、はてブ数を表示する方法ですが自分のブログに「○○users」を表示する – はてなブックマークヘルプにある通り、

<img src="http://b.hatena.ne.jp/entry/image/はてブ数を表示したいサイトのURL">

といった形式でimgタグを書く必要があります。そうすると、はてブ数が表示されます。
今回のタイプは上記のタグを前回生成したリンクの後に付与しただけのものになります。

例

こんな文字列を生成します。

[自分のブログに「○○users」を表示する - はてなブックマークヘルプ](http://b.hatena.ne.jp/help/entry/count#count "自分のブログに「○○users」を表示する - はてなブックマークヘルプ")<img src="//b.hatena.ne.jp/entry/image/http://b.hatena.ne.jp/help/entry/count#count" style="vertical-align:middle;margin:3px 0 3px 5px;">

　　
貼り付けるとこうなります。　　
自分のブログに「○○users」を表示する – はてなブックマークヘルプ

ソース

ソースはこんな感じです。

javascript:!function(){var e=document.body,t="___bookmarklet-display-title___",l=document.getElementById(t),i=document.title,n=location.href,o="["+i+"]("+n+' "'+i+'")',a='<img src="//b.hatena.ne.jp/entry/image/'+n+'" style="vertical-align:middle;margin:3px 0 3px 5px;">';null!==l&&e.removeChild(l);var d=document.createElement("textarea");e.insertBefore(d,e.firstChild),d.id=t,d.value=o+a,d.style.width="100vw",d.style.position="fixed",d.style.top=0,d.style.left=0,d.style.zIndex=2147483647,d.focus()}();void(0);

この文字列をコピー後ブックマークに保存して、任意のサイトで実行するとマークダウン用リンク + はてブ数を表示する文字列が生成されます。

ソースを修正したい場合

ソースを修正したい場合の手順は以下になります。

1. 元のソースを修正してコピーする

元のソースがこの様になっていますので、

(function() {
  var body = document.body;
  var dummyId = '___bookmarklet-display-title___';
  var dummy = document.getElementById(dummyId);
  var title = document.title;
  var url = location.href;
  var md4link = '[' + title + '](' + url + ' "' + title + '")';
  var hatenaCntImg = '<img src="//b.hatena.ne.jp/entry/image/' + url + '" style="vertical-align:middle;margin:3px 0 3px 5px;">';
  
  if (dummy !== null) {
    body.removeChild(dummy);
  }
 
  var content = document.createElement('textarea');
  body.insertBefore(content, body.firstChild);
 
  content.id = dummyId;
  content.value = md4link + hatenaCntImg;
  content.style.width = '100vw';
  content.style.position = 'fixed';
  content.style.top = 0;
  content.style.left = 0;
  content.style.zIndex = 2147483647;
  content.focus();
})();

修正したい箇所を適宜修正して、コピーします。

CMSで使う場合のポイント

もし仮にCMS(WordPressとか)でそのまま使う場合、

var hatenaCntImg = '<img src="//b.hatena.ne.jp/entry/image/' + url + '" style="vertical-align:middle;margin:3px 0 3px 5px;">';

のimgタグを作っている箇所のスタイルになるかと思いますので style="vertical-align:middle;margin:3px 0 3px 5px;" の部分を適宜修正してください。

あと、もう一つのポイントとしては

<img src="//b.hatena.ne.jp/entry/image/' + url + '" ~ >

の様にプロトコル(http://~とかhttps://~)をsrcで指定しないってところです。
※srcをhttp://~で読み込むと、参照元のサイトがhttpsの場合怒られます

2. ソースを圧縮(1行に)する

多分、圧縮(1行に)しないと困ることがある(IEとかで動かない?)気がするので Refresh-SF – Online JavaScript and CSS Compressor を使ってソースを圧縮します。
手順は以下キャプチャを参考にしてください。

Refresh-SF – Online JavaScript and CSS Compressor 上での作業

補足

1.元のソースを修正してコピーするでコピーしたソースをテキストエリアにペーストします
テキストエリア右上のjavascriptボタンをクリックします
少し待つと圧縮されたソースが表示されるので全て選択してコピーします

3. コピーしたソースの修正を行う

圧縮後のソースは

!function(){ ここにソース }();

となっていますが、このソースの後ろに

void(0);

をつけます。
こんな感じにします。

!function(){ ここにソース }();void(0);

こうしないとFirefoxでうまく動きません。
※ (function(){ ここにソース })(); の形式に変える方法でもいいです。

そして、変更後のソースをコピーしておきます。

4. ブックマークレット形式にしてブックマークする

3.コピーしたソースの修正を行うでコピーしたソースの頭に

javascript:

を付与します。

こんな感じ

javascript:!function(){ ここにソース }();void(0);

javascript:(function(){ ここにソース })();

ここまで終わったら上記文字列をコピー後、任意の名前でブックマークに保存します。
後は、任意のサイトで保存したブックマークを実行すればOKです。

以上です。

余談

今更 マークダウンリンクブックマークレットでググったら腐るほど出てきてびっくりしたのは内緒。そりゃあみなさん書きますよね。
window.prompt で完結出来る様にしたりとか、document.title.replace(/([\[\]])/g,'\\$1') できちんとタイトルをエスケープしていたりとか、そっちのほうがええやん、、まぁでも書いちゃったので残しておきます。