rcmdnk's blog
Last update

20140214_bookmarklet_200_200

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

Sponsored Links

ブックマークレット

追記: 2017/01/10

SSL化。

追記ここまで

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

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

Title with Link
1
2
3
4
5
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
1
2
3
4
5
6
 javascript:(
   function(){
-    prompt("[title](url)","["+document.title+"]("+location.href+")")
+    prompt("HTML Link","<a href="+location.href+">"+document.title+"</a>")
   }
)();

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

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

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

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

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

Title with Link
1
2
3
4
5
6
7
8
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
1
2
3
4
5
6
7
8
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

追記ここまで

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

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

出力はこんな感じ。

sentakuと言うスクリプトを作って 自分なりに便利になったと思うので、 同じ様な機能を持つ物たちをまとめました。

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

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

Amazon Image
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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

こんな感じに:

基礎から始めるJavaScript

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

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

Amazon Link
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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

こんな感じで出ます。

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

sass/plugins/_plugins.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
// 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;
}

としてあります4

画像だけの時は左寄せ。 なので画像だけの時は適当な所で clear:both;を使って解除するか(もしくは上のを使って<div amazon-box></div>を挿入するか) 適当な範囲を<div amazon-box>~</div>で囲ってやる必要があります。

まとめ

ブックマークレットについてまとめてみましたが、 基本的にはポップアップを出してそこからコピーする、と行った作業です。

次回はFirefoxでVimperatorを使ってショートカットキーで直接 クリップボードに入れる方法を紹介したいと思います。

Sponsored Links
  1. ブックマークレットにする際には、空白部分が%20と変換されます。 ブックマークへ登録する際には通常勝手に変換してくれるので特に気にする必要ないですが、 後で直接URLを変更する際にはURLに%20が含まれてたら空白を示してる、 と言うことです。

  2. IE上だと

    window.clipboardData.setData( form, input )
    

    と言う関数でクリップボードに入れられます。 formにはText(通常テキスト)かURL(URL形式)を入れて、 inputに入れたい情報を入れます。

  3. javascript - copy to clipboard - not working in FF,Chrome - Stack Overflow

    How to copy to the clipboard in JavaScript? - Stack Overflow

  4. groupはOctopressのデフォルトのscssでbase/_layout.scss

    .group { @include pie-clearfix; }
    

    と定義されてるclearfixです。

    単に展開してるだけなのでgroupamazon-boxは上の例では全く一緒です。

Sponsored Links

« multi_clipboad/sd_cl/trashのアップデート Octopressでブログを書く時に便利なVimperatorのcopy.jsプラグインを使ったショートカット »