rcmdnk's blog
Last update
  1. Top
  2. › Blog
  3. › Octopress , Vimperator

Vimperator

前回に引き続き ブログを書いてる時に参考にしたりしたページの リンクなどを簡単にブログ用に整形して取得するための 便利な取得方法。 今回は Vimperatorでの取得方法について。 ショートカットキーを使って直接クリップボードに入れられるので 慣れればかなり便利です。

Firefox + Vimperator

取り敢えず必須。

Firefox/ThunderbirdでVim

Vimperator並のアドオンがChrome等に実装されない限り移行できない。。。

copy.js

copy.js

Vimperatorのプラグインで、指定した返り値をクリップボードにコピーしてくれる プラグイン。 色々とカスタマイズしやすいのも素晴らしいです。

上のスクリプトを取ってきて~/.vimperator/plugin/に入れれば導入完了。 (またはruntimepathで指定したディレクトリ+/plugin/。 Windowsの場合はデフォルトの親ディレクトリは~/_vimperator/。)

~/.vimperatorrcでの設定

copy.jsを導入したら設定を~/.vimperatorrcに書いていきます。 copy.jsではcopy_templatesと言う値に 返り値の指定を配列で指定していくことが出来ます。

指定方法は基本的には

{label: 'url', value: '%URL%', map:',u'}

とこんな感じで各ラベルの意味は

  • value: クリップボードにコピーされる値。%で囲った値は特殊なキーワードで 以下の物について、置き換えが行われます1。
  • label: コマンドラインモードで:copy url等と打ってそこで指定されたvalueをコピー。
  • map: ノーマルモードでこのキーを打つことでvalueをコピー。

これ以外に、customというラベルもあり、

  • custom: functionかArrayを指定できる
    • function: 返り値をコピー。function() {...;return ret;}な感じで定義。
    • Array: 上のキーワードに加えて新たに置換キーワードを加える。
      • { label: 'aaa', value: 'replace test: bbb', custom:['bbb', 'ccc'] } みたいな定義をすると、bbbの部分がcccに置換されてコピーされる。

ということが出来ます。 特にfunctionの機能によって基本的にJavaScriptで取れるものはなんでもコピーできます。

下にあるのが現在の設定。 前回 も書いたマークダウン書式のリンク付きタイトル、 Octopressのブロッククォート、 Amazonの画像だけとテキスト付きのリンク、 に加えて、copy.jsのデフォルト設定にあるurlとanchorも入っています。 Amazonのコードなんかは前回 用いた物をほぼそのまま使っているだけです(最後に値を返してるくらいの違い)。

URLに関してはVimperatorデフォルトでyでコピーできるんですが、 日本語が含まれてるURLの場合だとOctopressとかだと通らない場合があります。

copy.jsで取ってくるURLは日本語部分をエンコードしてくれるのでそのまま使えるので 便利です。

追記: 2017/01/10

SSL化。

追記ここまで

~/.vimperatorrc 
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

javascript <<EOM
(function () {
  liberator.globalVariables.copy_templates = [
    { label: 'url', value: '%URL%', map:',u' },
    { label: 'anchor', value: '<a href="%URL%">%TITLE%</a>', map:',y' },
    { label: 'markdown', value: '[%TITLE%](%URL%)', map:',i' },
    { label: 'blockquote', value: '<blockquote><p>%SEL%</p><footer><strong>%TTITLE% %URL%</strong></footer></blockquote>', map:',bq' },

    { label: 'amazon',   value: 'amazon full link and image',
      custom: function() {
        var id = "rcmdnk0c-22";
        var x = "200";
        if(content.document.getElementById('ASIN')){
          var asin = content.document.getElementById('ASIN').value;
        }else{
          var aa = content.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(content.document.getElementById('prodImage')){
          var s = content.document.getElementById('prodImage').getAttribute('src');
        }else{
          var s = content.document.getElementById('main-image').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';
        var t = content.document.getElementById('btAsinTitle').innerHTML;
        var alt = t.split("<")[0];
        var u = '<a href="'+l+'/" rel="nofollow" target="_blank">';
        return '<div class="amazon-img">'+u+'<img src="'+i+'" alt="'+alt+'"/></a></div>';
      }, map:',am'
    },
    { label: 'ab',   value: 'amazon image',
      custom: function() {
        var id = "rcmdnk0c-22";
        var x = "200";
        if(content.document.getElementById('ASIN')){
          var asin = content.document.getElementById('ASIN').value;
        }else{
          var aa = content.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(content.document.getElementById('prodImage')){
          var s = content.document.getElementById('prodImage').getAttribute('src');
        }else{
          var s = content.document.getElementById('main-image').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';
        var t = content.document.getElementById('btAsinTitle').innerHTML;
        var alt = t.split("<")[0];
        var u = '<a href="'+l+'/" rel="nofollow" target="_blank">';
        return '<div class="amazon-box"><div class="amazon-img">'+u+'<img src="'+i+'" alt="'+alt+'"/></a></div><div class="amazon-txt">'+u+t+'<br><br>Amazonで詳しく見る</a></div></div>';
      }, map:',ab'
    },
  ];
})();
EOM

Sponsored Links
  1. キーワード 値
    %TITLE% ページのタイトル
    %URL% ページのURL
    %SEL% 選択してるテキスト
    %HTMLSEL% 選択してる部分のHTMLソース
    %HOSTNAME% ホスト名(ここならrcmdnk.github.io)
    %PATHNAME% ページのパス名(ここなら/blog/2014/02/14/blog-octopress-vimperator/)
    %HOST% ホスト名(大体の場合はHOSTNAMEと一緒。ポート指定などしているとこちらではポート指定も含む値になる。HOSTNAMEの方はポート指定は含まない。)
    %PORT% ポート指定がある場合はそのポートの値。そうでない場合は値無し。
    %PROTOCOL% https:だとかhttp:だとか
    %SERCH% 検索結果のページなどでのURLの値。googleだとhttps://www.google.co.jp/search?q=protocol...と言う値の?q=protocol...の部分。
    %HASH% ページ内でアンカー部分にいる場合、その値(#...)。(このページのContentsにあるFirefox + Vimperatorをクリックして移動した場合、#firefox--vimperator)

    ↩

Sponsored Links

« Octopressでブログを書く時に便利なブックマークレット Git 1.9.0リリース »

}