読者です 読者をやめる 読者になる 読者になる

tumblr

tumblr(タンブラー)は、メディアミックスブログサービス。ブログとミニブログ、そしてソーシャルブックマークを統合したマイクロブログサービスである。アメリカのDavidville.inc(現: Tumblr, Inc.)により2007年3月1日にサービスが開始された。

twitterの対応APIすごい

web製作


数カ月前にtwitterに「最近の画像」というギャラリー機能が追加されました。これにくわえて各種メディアのurlの入ったツイートを選択すると、そのツイートの下に画像を出してくれる機能もつきました。





僕はPCでツイッターやるときはクライアントを入れずにhttp://twitter.com/からそのまま使ってるので、この機能が地味に便利で気に入っていたわけです。上の画像のようにtwitpicやflickrフォト蔵などの画像共有系有名サイトの画像はもちろん、youtubeslideshareなんかまで引っ張ってきてくれるので、これはすごいと関心していたわけです。





twitpicとかだと、ツイートに含まれるhttp://twitpic.com/5alibcのようなurlを叩いただけでは、….jpg のような画像urlのみを取得することはできず、twitpicのサイト自身に飛ばされます。じゃあどうやってtwitpicから画像urlを取得しているのかというと、XHRで地道にtwitpic側の提供するAPIを叩いているわけです。

で、どのくらい多くのサイトのAPIに対応しているか気になったので、調べてみました。


ソースを見てみた

http://a2.twimg.com/b/1/bundle/phoenix-more-ja-201110201003.jsAPI叩くときの情報が書かれていました。ここの一番下のクソ長い一行の中にお目当てのAPIの記述があるわけです。


この一行を必死にコピーしてjsDecoderで読みやすくしてみたわけなんですが、ここだけで27000行ありました。なんかもう凄いを通り越してキモイです。vimでないとテキスト抽出とかできないわこりゃ。
で、ここのソース部分から「twitpic」とかで検索してやると、そのAPIの記述部分が出てくるわけです。

twttr.mediaType("TwitPic", 
{
    icon : "photo", domain : "//twitpic.com",
    flaggable : true,
    matchers : 
    {
        media : /^#{optional_protocol}?twitpic\.com\/(?!(?:place|photos|events)\/)([a-zA-Z0-9\?\=\-]+)/i
    },
    ssl : true,
    metadata : function (E)
    {
        var F = this, G = "";
        if (this.options.size == "medium") {
            G = "//twitpic.com/show/thumb/"
        }
        else {
            G = "//twitpic.com/show/mini/"
        }
        twttr.sandboxedAjax.send(
        {
            url : "//api.twitpic.com/2/media/show.jsonp", type : "GET", dataType : "jsonp", 
            data : {
                id : this.slug
            },
            success : function (I)
            {
                var H = 
                {
                    image : G + F.slug, title : I.message, author : {
                        name : I.user.name || I.user.username, url : "//twitpic.com/photos/" + I.user.username
                    }
                };
                if (I.events && I.events.length > 0) {
                    H.description = I.events[0].description
                }
                E(H);
            }
        })
    },
    process : function (E)
    {
        this.data.src = this.slug;
        this.data.href = this.url;
        this.data.name = this.constructor._name;
        E()
    },
    getImageURL : function (F, E)
    {
        if (this.slug)
        {
            var G = "";
            if (F == C.constants.imageSizes.medium) {
                G = "//twitpic.com/show/thumb/" + this.slug
            }
            else
            {
                if (F == "small") {
                    G = "//twitpic.com/show/mini/" + this.slug
                }
                else {
                    G = "//twitpic.com/show/iphone/" + this.slug;
                }
            }
            E(G)
        }
        else {
            E(null)
        }
    },
    content : function ()
    {
        var E = '<div class="twitpic">
                 <a class="inline-media-image" data-inline-type="{{name}}" href="{{href}}" target="_blank"> 
                 <img src="//twitpic.com/show/large/{{src}}"/>
                 </a>
              </div>';
        return Mustache.to_html(E, this.data);
    }
});


見る限りではmachersという正規表現でツイート中のurlがヒットしたら、上記のAPIリクエストURL・パラメタを組み立ててAPI叩いてレスポンス帰ってきたら必要部分をcontentのhtmlの中にぶちこむって感じでしょうか。

twttr.mediaType

というのがどうも対応APIセクションの頭っぽかったので、この文字列をクソ長いソースにgrepしてみたところ、これだけのメディアに対応してることが判明。

twttr.mediaType("Youtube",
twttr.mediaType("Twitter",
twttr.mediaType("CopiedTwimg",
twttr.mediaType("Twimg",
twttr.mediaType("Ustream",
twttr.mediaType("Vevo",
twttr.mediaType("Flickr",
twttr.mediaType("DeviantArt",
twttr.mediaType("Gist",
twttr.mediaType("Vimeo",
twttr.mediaType("Etsy",
twttr.mediaType("Photozou",
twttr.mediaType("TwitPic",
twttr.mediaType("Twitgoo",
twttr.mediaType("DailyBooth",
twttr.mediaType("YFrog",
twttr.mediaType("Lockerz",
twttr.mediaType("Kiva",
twttr.mediaType("TwitVid",
twttr.mediaType("GoogleVideo",
twttr.mediaType("JustinTV",
twttr.mediaType("Twaudio",
twttr.mediaType("Kickstarter",
twttr.mediaType("MTV",
twttr.mediaType("WashingtonPost",
twttr.mediaType("MSNBC",
twttr.mediaType("CNN",
twttr.mediaType("Apple",
twttr.mediaType("Instagram",
twttr.mediaType("Rdio",
twttr.mediaType("Dipdive",
twttr.mediaType("SlideShare",
twttr.mediaType("BlipTV",
twttr.mediaType("Livestream",
twttr.mediaType("WallStreetJournal",
twttr.mediaType("Hulu",
twttr.mediaType("NHL",
twttr.mediaType("Meetup",
twttr.mediaType("Plancast",
twttr.mediaType("Gowalla",
twttr.mediaType("Foursquare",
twttr.mediaType("Amazon",
twttr.mediaType("AolVideo",
twttr.mediaType("Photobucket",
twttr.mediaType("With",
twttr.mediaType("Facebook",

現時点で46ものAPIに対応してる模様。UstreamとかHuluとかDeviantArtまで対応してんのか…
このAPI対応部のソースだけでも3000行近くありました。

結論

こんなたくさんのテキスト加工できるvimすごい。



追記 2011/10/25
twitpicはXHRで画像URLを取得してる!とか書いちゃったけど、そんなことせずに実はJSでURLを置き換えてるだけでした。置き換え後のURLにアクセスすると画像URLにリダイレクトしてくれます。twitpicだけじゃなくinstagram,lockerzなども同様