Octopressでブログを書く時に便利なブックマークレット

ブログを書いてる時に参考にしたりしたページのリンクなどを簡単にブログ用に整形して取得するためのブックマークレットについて整理したのでまとめておきます。

ブックマークレット
まとめ

ブックマークレット

追記: 2017/01/10

SSL化。

追記ここまで

Markdown方式で、タイトルにリンクを付ける

ページのタイトルとURLを取ってきてマークダウン方式のリンク([タイトル](URL))に当てはめるだけのブックマークレットです。

Title with Link

javascript:(
  function(){
    prompt("[title](url)","["+document.title+"]("+location.href+")")
  }
)();

document.titleでページのタイトル、location.hrefでページのURLを取っています。

これを一行にしてブックマークレット様に書き換えたのが下のTitle with Linkのリンク。これをブックマークツールバーにドラッグすれば使える様になります。

Title with Link

リンクを取りたいページに行ってこのブックマークレットを押せば

prompt

こんなかんじでポップアップが出るので枠内の文字列をコピーしてください。 (既に選択されてるのでCtrl-cを押すだけでコピーできます。)

ちなみに、普通のHTMLのリンクにしたければ

Title with Link

 javascript:(
   function(){
-    prompt("[title](url)","["+document.title+"]("+location.href+")")
+    prompt("HTML Link","<a href="+location.href+">"+document.title+"</a>")
   }
)();

と置き換えてあげれば良いだけ¹。

ポップアップ等を出さずに直接クリップボードへ入れる、ということも出来ないわけでは無い見たいなんですが、JavaScriptだけで出来るのはInternet Explorerだけで ²、

FirefoxやChrome等で行いたい場合にはFlashを経由して、みたいなトリックを使うと出来るらしいです。 ZeroClipboard や Clippy と言ったFlashを使ったJavaScriptのライブラリも配布されてるので、これらを導入すればそれなりに出来そうですが、これらのライブラリはどちらかと言うとサイト側で使う用ですね ³。

選択範囲をブロッククォートにする

こちらはOctopress専用。選択した部分を取り出してblockquoteタグを使った引用を作ります。

Title with Link

javascript:(
  function(){
    var w=window.open().document;
    w.open();
    w.write('<TEXTAREA COLS=90 ROWS=20><blockquote><p>\n'+document.getSelection()+'\n</p><footer><strong>'+document.title+' '+location.href+'</strong></footer></blockquote></TEXTAREA>');
    w.close();
  }
)();

document.getSelection()で現在選択している部分のテキストを取っています。

書き出す部分が複数行になるので、このブックマークレットを使うとポップアップではなくて新しいWindowを開いてそこにコードが表示されます。

ドラッグして登録する用のリンクはこちら。

Block Quote

追記: 2014/02/14

すいません、上のコードとブックマークレットともにrawタグで囲うのを忘れてたため表示されてるコードもドラッグ用のリンクも共にすでに {% blockquote %}~というタグから<blockquote>...と変換されてました。

ただ、普通にblockquoteタグをhtmlで使うにも便利かもしれないので残しておきます。改行とか少し手を加えた方が良いかもしれませんが。

正しいOctopress用のコードとドラッグ用リンクは以下です。

Title with Link

javascript:(
  function(){
    var w=window.open().document;
    w.open();
    w.write('<TEXTAREA COLS=90 ROWS=20>{% blockquote '+document.title+' '+location.href+' %}\n'+document.getSelection()+'\n{% endblockquote %}</TEXTAREA>');
    w.close();
  }
)();

Block Quote

追記ここまで

こんな感じのコードが取れます。

{% blockquote multi_clipboad/sd_cl/trashのアップデート - rcmdnk's blog https://rcmdnk.github.io/blog/2014/02/02/computer-bash-zsh/ %}
sentakuと言うスクリプトを作って 自分なりに便利になったと思うので、 同じ様な機能を持つ物たちをまとめました。
{% endblockquote %}

出力はこんな感じ。

sentakuと言うスクリプトを作って自分なりに便利になったと思うので、同じ様な機能を持つ物たちをまとめました。
multi_clipboad/sd_cl/trashのアップデート - rcmdnk's blog rcmdnk.github.io/blog/2014/02/…

Amazonの画像だけのリンクを作る

たまに適当な画像がないときに良くページのトップ画像に使ってるもの。 Amazonの適当なページで使うと縦横最大200pxの画像だけのリンクを作ってくれます。

Amazon Image

javascript:(
  function(){
    var id="rcmdnk0c-22";
    var x="200";
    if(document.getElementById('ASIN')){
      var asin=document.getElementById('ASIN').value;
    }else{
      var aa=document.querySelector('link[rel="canonical"]').href.split("/");
      var asin=aa[aa.length-1];
    }
    var l='https://www.amazon.co.jp/o/ASIN/'+asin+'/'+id;
    if(document.getElementById('prodImage')){
      var s=document.getElementById('prodImage').getAttribute('src');
    }else if(document.getElementById('main-image'){
      var s=document.getElementById('main-image').getAttribute('src');
    }else{
      var s=document.getElementById('landingImage').getAttribute('src');
    }
    var p=s.replace(/http.*\/I\/([^\.]+).*$/,'$1');
    var a=s.replace(/(http.*com).*/,'$1/images/I/');
    var i=a+p+'._SS'+x+'_.jpg';
    if(document.getElementById('btAsinTitle')){
      var t=document.getElementById('btAsinTitle').innerHTML;
    }else
      var t=document.getElementById('productTitle').innerHTML;
    }
    var alt=t.split("<")[0];
    var u='<a href="'+l+'/" rel="nofollow" target="_blank">';
    window.prompt("amazon link",'<div class="amazon-img">'+u+'<img src="'+i+'" alt="'+alt+'"/></a></div>');
  }
)();

追記: 2014/05/07

画像やタイトルが取ってこれないページがあったので以下の項目を追加。

var s=document.getElementById('landingImage').getAttribute('src');
var t=document.getElementById('productTitle').innerHTML;

下のブックマークレットや説明入りの方もアップデート。

追記ここまで

リンクページが通常ASINのIDで取ってこれるんですが、 Kindleのページとかだとこれが無いのでページのcanonicalリンクから取ってきます。

この例では自分のアソシエイトIDが入ってるのでその部分は変更してください。

あと、xの値が縦横の最大幅です。横長の画像とかだと横幅が200pxになって縦の部分のあまりは白くなります。

下の方にある

var i=a+p+'._SS'+x+'_.jpg';

が画像部分。ここの_SSの部分を_SXまたは_SYにしてやればそれぞれ横、縦の最大値を決めるだけになります。 (それぞれ縦、横の幅は元の画像に依る)

この辺もお好きな様に。

下がドラッグで登録用。IDの部分等を登録後にでも変更してください。

Amazon Image

こんな感じに:

Amazonの説明入りリンクを作る

Amazonの普通のリンクを作るブックマークレット。

Amazon Link

javascript: (function() {
  var id = "rcmdnk0c-22";
  var x = "200";
  if (document.getElementById('ASIN')) {
    var asin = document.getElementById('ASIN').value;
  } else if (document.querySelector('link[rel="canonical"]')) {
    var asin = document.querySelector('link[rel="canonical"]').href.split("/").pop();
  } else {
    alert("Failed to get asin!");
    return;
  }
  var l = 'https://www.amazon.co.jp/o/ASIN/' + asin + '/' + id;
  if (document.getElementById('prodImage')) {
    var s = document.getElementById('prodImage').getAttribute('src');
  } else if (document.getElementById('main-image')) {
    var s = document.getElementById('main-image').getAttribute('src');
  } else if (document.getElementById('landingImage')) {
    var s = document.getElementById('landingImage').getAttribute('src');
  } else {
    alert("Failed to get image!");
    return;
  }
  var p = s.replace(/http.*\/I\/([^\.]+).*$/, '$1');
  var a = s.replace(/(http.*com).*/, '$1/images/I/');
  var e = s.split(".").pop();
  var i = a + p + '._SS' + x + '_.' + e;
  if (content.document.getElementById('btAsinTitle')) {
    var t = content.document.getElementById('btAsinTitle').innerHTML;
  } else if (content.document.getElementById('productTitle')) {
    var t = content.document.getElementById('productTitle').innerHTML;
  } else {
    alert("Failed to get title!");
    return;
  }
  var alt = t.split("<")[0];
  var u = '<a href="' + l + '/" rel="nofollow" target="_blank">';
  window.prompt("amazon link", '<div class="amazon-img">' + u + '<img src="' + i + '" alt="' + alt + '"/></a></div>');
})()

追記: 2014/08/24

pngに対応したり失敗した時にエラープロンプトを出したり色々修正。

追記ここまで

URLとか画像の取り方は上と一緒。 promptの所でAmazon%...となってる不明な文字列はAmazonで詳しく見るです。

ドラッグ用リンクはこちら。

[Amazon Link](javascript:(function(){var%20id="rcmdnk0c-22";var%20x="200";if(document.getElementById('ASIN')){var%20asin=document.getElementById('ASIN').value;}else{var%20aa=document.querySelector('link[rel="canonical"]').href.split("/");var%20asin=aa[aa.length-1];}var%20l='https://www.amazon.co.jp/gp/product/'+asin+'?ie=UTF8&camp=1207&creative=8411&creativeASIN='+asin+'&linkCode=shr&tag='+id;if(document.getElementById('prodImage')){var%20s=document.getElementById('prodImage').getAttribute('src');}else%20if(document.getElementById('main-image')){var%20s=document.getElementById('main-image').getAttribute('src');}else{var%20s=document.getElementById('landingImage').getAttribute('src')}var%20p=s.replace(http.*\/I\/([^\.]+).*$/,'$1');var%20a=s.replace(/(http.*com).*/,'$1/images/I/');var%20i=a+p+'._SS'+x+'_.jpg';if(document.getElementById('btAsinTitle')){var%20t=document.getElementById('btAsinTitle').innerHTML}else{var%20t=document.getElementById('productTitle').innerHTML};var%20alt=t.split("<")[0];var%20u='<a%20href="'+l+'/"%20rel="nofollow"%20target="_blank">';window.prompt("amazon%20link",'<div%20class="amazon-box"><div%20class="amazon-img">'+u+'<img%20src="'+i+'"%20alt="'+alt+'"/></a></div><div%20class="amazon-txt">'+u+t+'

Amazon%E3%81%A7%E8%A9%B3%E3%81%97%E3%81%8F%E8%A6%8B%E3%82%8B</a></div></div>');})())

修正版(pngに対応したり失敗した時のもエラープロンプトを出すように): Amazon Link

こんな感じで出ます。

基礎から始めるJavaScript [Kindle版]

Amazonで詳しく見る

なお、上の二つのAmazonのリンクではCSS(SCSS)で

sass/plugins/_plugins.scss

// amazon
.amazon-box{
  @extend .group;
}
.amazon-img{
  float: left; margin-right: 1.5em;
  margin-bottom: .8em;
}
.amazon-txt{
  float: left; margin-right: 1.5em;
  margin-bottom: .8em;
  width: 500px;
}