Twitpic APIで、Twitterにアップされた日蝕写真をだらだら見る

投稿者:Kazuma89

[flickr id=”flickrImage_1″ align=”aligncenter” width=”500″ image_author=”motjetom” image_title=”Eclipse”][/flickr]
前回作った、Twitpicの写真をだらだら見るツール、
Twitpic APIをちゃんと使って改良しました。

∞Twitpic 2
↑丁度日蝕がありましたので、その時間周辺に投稿された画像を見られるようにしています。

前回との違い

よいところ

  • 使い方がよくわからないという声を多数いただいたので、もうランダムで勝手に写真を出すボタンもつけました。
    何も考えずに、よりだらだら見れます。
  • スマホで見てもいい感じに見えるようにしました。

わるいところ

  • 一個の画像ごとにAPI呼び出してるんで、すぐにAPIの時間上限に達して見れなくなります。
    その場合でもサムネイルを読み込むAPIだけであれば動かせるようです。「API mode」のチェックを外していただければ画像が引き続き見られます。
  • Chromeと手持ちのGalaxyでしか動作確認してないです。

ここでハマったTwitpic API

クロスドメイン

別のドメインからJSONを読み込めないので、
JSONPという形式で読み込む必要があります。

jQueryの場合は

$.getJSON('http://api.twitpic.com/2/media/show.jsonp?id='
	+ id
	+ '&callback=?', function(data){
		// JSONデータを使った命令を書く
	});

のようにします。
API読み込みのときの最後に&callback=?をつけるのがポイントです。
これをつけるとクロスドメイン問題をうまいこと解決してくれます。

ちなみにcallbackはAPIによっては違う名前だったりするので、
別のAPIを使うときは仕様書等を確認してください。

ただ今回はエラー時にエラー的な画像を表示させたかったのですが
$.getJSONはエラー時のコールバック関数がとれないので
$.ajaxを使いました。

その場合は下記のように。

$.ajax({
	url: apiBaseUrl,
	data: {
		id:	id
	},
	dataType: 'jsonp',
	success: function(data){
		return successFn(data);
	},
	error: function(){
		return errorFn(this);
	}
});

先述のようにAPIによってcallbackのパラメータが異なれば、

jsonp: 'コールバックパラメータを指定',

の行を追加します。