twitterの対応APIすごい
数カ月前にtwitterに「最近の画像」というギャラリー機能が追加されました。これにくわえて各種メディアのurlの入ったツイートを選択すると、そのツイートの下に画像を出してくれる機能もつきました。
僕はPCでツイッターやるときはクライアントを入れずにhttp://twitter.com/からそのまま使ってるので、この機能が地味に便利で気に入っていたわけです。上の画像のようにtwitpicやflickr、フォト蔵などの画像共有系有名サイトの画像はもちろん、youtubeやslideshareなんかまで引っ張ってきてくれるので、これはすごいと関心していたわけです。
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.jsにAPI叩くときの情報が書かれていました。ここの一番下のクソ長い一行の中にお目当ての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行近くありました。
