2011-11-28

JavaScriptとYQLでReadabilityの短縮URLを作る

Readabilityにはrdd.meという短縮URLサービスがあり、それを使ってReadability化された読みやすい状態の記事を共有することができます。短縮URLの取得はWeb UIやReadability化したページで行える他、ウィジェットもありますが、APIも用意されているのでWebアプリケーションへの統合にはこちらを使った方が自由度が高いでしょう。YQLを使えばJavaScriptだけでも何とかなります。

APIは認証不要の単純なHTTPリクエストで叩きます。

$ curl https://readability.com/api/shortener/v1/urls -d url=http://hail2u.net/documents/diveintohtml5-semantics.html

cURLで短縮URLの作成APIを叩く場合はこのようにリソースにurlパラメータとして任意のURLをPOSTで投げるわけです。レスポンスはJSONで返ってきます。

{
  "meta": {
    "url": "/api/shortener/v1/urls/thu5ivbh",
    "rdd_url": "http://rdd.me/thu5ivbh",
    "id": "thu5ivbh"
  },
  "messages": ["URL shortened."],
  "success": true
}

クエリが成功すればmeta.rdd_urlから短縮URLを拾うことができます。

JavaScriptで叩く場合はクロスドメインという壁があるのでYQLで逃げ……られると思いきや、POSTなので素のYQLでは叩けません(できるらしいですけどよく知らないです……)。しかし、Community Tableを有効にするとjsonpost(POSTでJSONが返ってくるサービスに使うテーブル)というまさに必要なものがあるのでこれを使います。

Demo: JavaScript rdd.me Shortener

YQLに投げるYQL文は以下のような形になります。

SELECT * FROM jsonpost WHERE url='https://readability.com/api/shortener/v1/urls' AND postdata='url=http://hail2u.net/documents/diveintohtml5-semantics.html'

postdataでリソースに投げるurlパラメータをセットして使います。クロスドメインの問題はYQLのJSONPラッパーで解決できるので、jQueryなどと組み合わせればデモのように数行のJavaScriptでReadabilityの短縮URLが作成可能になります。

Readabilityのウィジェットはカッコイイと思うんですけど、ちょっと主張が強いというかボタンボタンしすぎてる感じで白背景のクリーンなWebサイト(例えばReadability Blogなど)にしかハマらない気がします。それでAPIを叩いて短縮URLを作ってリンクを叩こうとしました。最初は思わずblosxomのプラグインとして作ったんですが、APIが結構遅いのとやることの割にガッツリ様々なPerlモジュールが必要になるあたりで放棄しました。で、JavaScriptでページのロード後に叩けば良いかなーということでこんな感じになりました。

JavaScriptでロード後に叩く場合でも結局APIが遅いというのがボトルネックになって、ユーザーが読み始めた後で短縮URLが表示される、もしくは短縮URLが表示される前に読むのをやめてタブを閉じそうというなんともアレな感じです……。キャッシュ作ったりとかちゃんとやらないと実用化するのは厳しそうです。フィードの再構築みたいに記事の公開時だけに短縮URLを作ってキャッシュして、それ以外ではそのキャッシュを読むだけのblosxomプラグインでも書こうかなでも面倒くさいな(←今ここ)みたいな。