vimperatorのcopy.jsにgoo.glの短縮URLを使う

Firefoxが好き、というかvimperatorが好きなのです
そして、ちょいちょい、copy.jsを使っています

  • copy.js
    • vimperatorで、:copyとかうつと、タイトルとURLとか、一気にコピー出来る優れもの。もちろんcustomisable

よく、良記事の共有とかにcopy.jsでコピーしたタイトルとURLを使うのですが、URLが長いとイケテない気がするわけです

ということで、goo.glで短縮URLにしたものをコピー出来るようにカスタマイズしてみました。

やりたいこと

vimperatorのcopy.jsでコピーされるURLをgoo.glで短縮したURLにしたい


前例

id:mollifierさんが、1年くらい前に実際にやられてます!もちろん参考にしました!
ただ、当時はオフィシャルなAPIではなかったようです

前例からの学び
  • .vimperatorrcにtemplateを追加する、という方法でcopy.jsに簡単に追加できること
  • つまり、copy.js本体をいじったりする必要はない

前準備

APIを確認します
Getting Started - Google URL Shortener API - Google Code

と、どうも、POSTを使うとか、Content-Typeに指定があるとか、なんやらかんやらあるわけですが、多分XMLHttpRequestで行けるのだろうと考えて仕様を把握

Note: An API key is highly recommended.

ということで、APIキーが必要らしいので、APIキーも取得

Content-Type

XMLHttpRequestをあまり使ったこともなかったので、いざContent-Typeを設定しろと言われてもよくわからんので、W3Cさんに質問

XMLHttpRequest

どうやら以下のような書き方でいいらしい。

setRequestHeader(header, value)

Vimperator的な

いざ、開いてるページのURLを取得しようとしてもできない。。。

document.location.href

どうやら、Vimperatorがdocumentオブジェクトをwrapしてるらしい
ということで、

content.document.location.href

とすることで普通に取れました

スクリプトが完成

できました
goo.glへのリクエストに関する仕様は、googlなんてオブジェクトをつくってでまとめてみましたヽ(´ー`)ノ←自己満?

var longUrl = content.document.location.href;
var googl = {
  'url' : 'https://www.googleapis.com/urlshortener/v1/url?key=',
  'key' : [API KEY],
  'method' : 'POST',
  'contentType' : 'application/json',
  'longJson' : '{ "longUrl" : "' + longUrl + '" }'
};
var request = new XMLHttpRequest();
request.open(googl.method, googl.url + googl.key, false);
request.setRequestHeader('Content-Type', googl.contentType);
request.send(googl.longJson);
return JSON.parse(request.responseText).id;

JSON.parse(request.responseText).idとしているのは、

  1. JSON形式のテキストがresponseとしてもらえる
  2. とりあえずparseする
  3. 短縮URLは、そのなかのidというkeyのvalueになっている

ということですね。なんでidなんでしょう???

実用化してみました

以下のスクリプトを.vimperatorrcにはっています

javascript <<EOF
// copy.js expand template with goo.gl
// see: http://code.google.com/apis/urlshortener/v1/getting_started.html
// this script required google api key
// see: https://code.google.com/apis/console
liberator.globalVariables.copy_templates = [
  {
    label: 'goo.gl',
    value: 'copy url with goo.gl',
    custom: function() {
      return getShortUrl();
    }
  },
  {
    label: 'goo.gl with title',
    value: 'copy title&url with goo.gl',
    custom: function() {
      var title = content.document.title;
      return title + "\n" + getShortUrl();
    }
  },
  {
    label: 'goo.gl4hatena',
    value: 'copy title&url with goo.gl for hatena syntax',
    custom: function() {
      var title = content.document.title;
      return "[" + getShortUrl() + ":title=" + title + "]";
    }
  }
];

var getShortUrl = function() {
  var longUrl = content.document.location.href;

  var googl = {
    'url' : 'https://www.googleapis.com/urlshortener/v1/url?key=',
    'key' : [API KEY],
    'method' : 'POST',
    'contentType' : 'application/json',
    'longJson' : '{ "longUrl" : "' + longUrl + '" }'
  };

  var request = new XMLHttpRequest();
  request.open(googl.method, googl.url + googl.key, false);
  request.setRequestHeader('Content-Type', googl.contentType);
  request.send(googl.longJson);

  return JSON.parse(request.responseText).id;
};
EOF

githubに.vimpetatorごと公開しています
https://github.com/sugilog/dotfiles/blob/master/.vimperatorrc

問題点

  • goo.glにリクエストする分だけ、コピーされるまでに間が開く
  • .vimperatorrcに上記の内容を追加すると、もともとcopy.jsに設定されているtemplateが使えなくなる

また時間ができたら、解決してみますか