さんまがおいしい季節だねー(´・ω・`)

jQuery から bit.ly API を呼び出す時にハマりましたw

ウェブアプリ — タグ: , — さくら @ 2009/08/21 15:35

さくらです☆こんちわww

Twit Delay の入力フォームを bit.ly の API に対応させたんですが、超くッだらねーところで2時間ぐらいハマったのでご報告w

Twit Delay

まず bit.ly API のマニュアルですが、Google Code の bitly-api から見れます。こちらのページから、REST API のドキュメントJavaScript API のドキュメントにリンクされているのですが、ブラウザから JavaScript 経由で bit.ly API を呼び出す際も JavaScript API は使わない方が無難です。

というのも、bit.ly の JavaScript API は以下のステップでプログラミングできるように構成されているのですが、

  1. http://bit.ly/javascript-api.js?version=latest&login=LOGIN&apiKey=API_KEY 形式の URL で JavaScript ファイルを読み込む
  2. JavaScript ファイル中で定義されているクラスやらを使って bit.ly にアクセスする

ポックンの環境だとブラウザからリロードした際に、この JavaScript ファイルの読み込みがほぼ毎回(たまに速い)めちゃくちゃ重いので、使い物にならないと思います。実測したところ最大で42秒ぐらいかかってました。ナメとんかいww

ちなみにハマったってのは、これをなんとか速くできないかとあれこれ試してた時間がほぼ2時間って感じですorz

REST API でも callback パラメータが指定できますので、JavaScript API を使わなくてもブラウザから bit.ly API を呼び出せますので、REST API を JSONP で使用した方が良いと思います。

JSONP は jQuery で呼び出すのが一番手っ取り早いと思いますので具体例も書いときます。

var LOGIN = "Your bit.ly username";
var API_KEY = "Your bit.ly apiKey";

var longUrl = "http://cnn.com";
$.ajax({
    type: "GET",
    url: "http://api.bit.ly/shorten?version=2.0.1&longUrl=" + encodeURIComponent(longUrl) + "&login=" + LOGIN + "&apiKey=" + API_KEY,
    dataType: "jsonp",
    success: function(data) {
        if (data.results && data.results[longUrl]) {
            alert(data.results[longUrl]);
        } else {
            alert("No shortUrl");
        }
    }
});

と、いい忘れてましたが、bit.ly API を使用する場合、bit.ly に Sign up して API KEY をゲットする必要があります。API KEY の発行手続きは無く、 Sign up 後 アカウントページ を開くと書いてありますのでコピペしたらおkです。

で、JSONP からの戻り値の results は、API 呼び出し時の longUrl をパラメータをキーにしたオブジェクトで、こんな感じです。

{
    "errorCode": 0,
    "errorMessage": "",
    "results": {
        "http://cnn.com": {
            "hash": "31IqMl",
            "shortKeywordUrl": "",
            "shortUrl": "http://bit.ly/15DlK",
            "userHash": "15DlK"
        }
    },
    "statusCode": "OK"
}

longUrl パラメータには複数の URL を指定することもできます。bit.ly API は結構重いみたいなので、一度のリクエストでできるだけたくさん URL を短縮するようにした方が良いと思います。

最後に、REST API もあんまり速く無かったりします。JavaScript API では HTML ドキュメント中からスクリプトをロードする時点で待ち時間が発生するので、ユーザーへのページ表示が bit.ly API に引きずられてえらい時間かかってヤレヤレだぜって感じなのですが、REST API はそれに比べると(体感的には)だいぶん速いんですけど、実際の API のレスポンスは bit.ly の混み具合で充分悪かったりします。

統計ページとか API 以外のシステム自体が便利なので bit.ly を使っていますが、どっかにもっと良い URL 短縮サービス無いのかしらね…って文句言い過ぎ?ww

さくら

7件のコメント »

  1. whoah this blog is magnificent i love reading your articles.

    Keep up the good work! You already know, many individuals are searching round for this information, you can help them
    greatly.

    コメント by does hair transplant work for everyone — 2013 年 7 月 14 日 @ 04:20
  2. Very good article! We will be linking to this particularly great article on our site.
    Keep up the great writing.

    my blog post CD Key Kaufen

    コメント by CD Key Kaufen — 2013 年 8 月 11 日 @ 13:51
  3. Very nice post. I simply stumbled upon your blog and wanted to say that
    I’ve truly enjoyed surfing around your blog posts. In
    any case I’ll be subscribing on your rss feed and I’m hoping you write once
    more soon!

    Have a look at my weblog: Salze von Schüssler (wiki.oszone.net)

    コメント by wiki.oszone.net — 2013 年 9 月 28 日 @ 03:34
  4. I’m truly enjoying the design and layout of your site.
    It’s a very easy on the eyes which makes it much more enjoyable for me to come
    here and visit more often. Did you hire out a designer
    to create your theme? Superb work!

    コメント by Maus auf das nächste Internet-Seite — 2013 年 10 月 19 日 @ 16:53
  5. I’ll right away snatch your rss feed as I can’t to find your e-mail subscription hyperlink or e-newsletter service.
    Do you’ve any? Please let me realize in order that I may just
    subscribe. Thanks.

    Check out my webpage: haarausfall frauen ursachen

    コメント by haarausfall frauen ursachen — 2013 年 11 月 8 日 @ 11:20
  6. I love your blog.. very nice colors & theme. Did you create this website
    yourself or did you hire someone to do it for you?
    Plz reply as I’m looking to construct my own blog and would like to know where u got this from.
    thanks

    コメント by Besuchen Sie die Webseite — 2013 年 12 月 21 日 @ 05:00
  7. CSCS Test Booking

    jQuery から bit.ly API を呼び出す時にハマりましたw | さくらたんどっとびーず

    トラックバック by CSCS Test Booking — 2014 年 7 月 30 日 @ 05:05

この投稿へのコメントの RSS フィード。 TrackBack URI

コメントする

Copyright © 2017 さくらたんどっとびーず | powered by WordPress with Barecity