FC2ブログ

blogaomu2.1はこの度、http://blogaomu.comに引っ越しました。最新の更新はblogaomu.comにて行なっておりますので、ブックマーク・RSS等の設定をお願い致します。

[JavaScript]twitpic APIで投稿写真のサムネイルを取得する

何気なくツイッターのタイムラインを見てたらtwitpic APIのversion 2 がうんたらかんたら、という話が出てきていたので、急にAPIを使って自分が投稿した画像を表示できないかなと思い試してみました。

twitpicはtwitterと連携した画像投稿サービスです。twitterのアカウントでログインし、twitpicに投稿すると画像入りのツイートとしてtwitterにも流れてきます。
http://twitpic.com

twitpicのAPIドキュメントです。
http://dev.twitpic.com/docs/

今回は自分の投稿した画像を取得したいので、users/showというAPIを使用します。特定のユーザー情報を取得したい時に使うAPIです。

ゆくゆくはブログパーツとかウィジェットのような感じにしたいなと思ったので、JavaScriptで実装しようと思います。


APIによって取得できるフォーマットはXML, json, jsonpの三種類。今回はjsonpを使います。
jsonpとか全然知らなかったのですが、取得するとfunctionで呼び出せる形になってて、JavaScriptでは扱いやすいデータ形式とのこと。私があまりにも初心者だったのでこちらの記事を参考にさせていただきました。
throw Life - 超シンプルなJSONP入門

こちらのエントリーのサンプルコードをほんのちょっと改造しただけの(おいっ!)シンプルな画像表示コードを書いてみました。
<script type="text/javascript">
<!--
function TwitpicLoad(json) {
var images = json["images"];
var html = "";
//最大10個のshort_idを取得する
for(var i = 0;(i < images.length && i < 10); i++) {
var elem = images[i];
var short_id = elem["short_id"];
var text = '<li><a href="http://twitpic.com/' + short_id + '"><img src="http://twitpic.com/show/thumb/' + short_id + '"></a></li>';

html += text;
}

document.getElementById("pics").innerHTML = html;
}
//-->
</script>

bodyタグ内
<div id="pics-wrapper">
<h2>photos</h2>
<ul id="pics" />
</div>
<script type="text/javascript" src="http://api.twitpic.com/2/users/show.jsonp?username=TAKAyuki_atkwsk"></script>

ページを開くとこんな感じで表示されます。(※画像です)
twitpicapi_20110247.png
1回のリクエストで取得できる画像のデータは20件となっています。20件全部を表示するのは多いなと思ったので最新10件だけ出すようにループの条件を変えています。

サムネイルは、以下のURLから取得できます。
http://twitpic.com/show/[size]/[short_id]
sizeにはthumb か mini
short_idはjsonの中に項目があるのでそれを入れます。

ユーザー情報を取得するだけであればauthenticationは必要ありません。
ユーザー名をパラメータとして渡してあげればOKです。

とりあえずシンプルに画像を取ってくることができたので、
あとは見た目をかえるなりしていけばウィジェットっぽくなりそうですね。
スポンサーサイト



シェアはこちらからどうぞ

このエントリーをはてなブックマークに追加
プロフィール

TAKAyuki_atkwsk

お知らせ
最新記事
最新記事のRSSフィード

最新コメント
最新トラックバック
カテゴリ
タグクラウド
月別アーカイブ
ブクログ
携帯百景