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.
Content-Type
XMLHttpRequestをあまり使ったこともなかったので、いざContent-Typeを設定しろと言われてもよくわからんので、W3Cさんに質問
どうやら以下のような書き方でいいらしい。
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としているのは、
- JSON形式のテキストがresponseとしてもらえる
- とりあえずparseする
- 短縮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が使えなくなる
また時間ができたら、解決してみますか