APIを叩いて画像を取得するサンプル

twitterとinstagramから取得してきた6種類のハッシュタグを元に、
画像にキーワードを振り分けるサンプル

javascript

var COUNT_TWITTER = 0;
var COUNT_INSTAGRAM = 0;
var PICKUP_NUM = 3;           // ピックアップ枚数
var LOADED_COUNT = 0;         // 読み込まれた枚数
var HASHTAG = "コーヒー"; // 最初に絞り込む場合に使用

var hashtagAry = ["スターバックス", "ドトール", "タリーズ", "ルノアール", "コメダ珈琲", "ブルーボトル"];
var keywordAry = ["starbucks", "doutor", "tullys", "renoir", "komeda", "bluebottle", "all"];

var request = $.ajax({
    type: 'GET', 
    url: "https://sample-coffee.com", // apiを設定
    async:true,
    cache:false,
    dataType: 'json'
});

request.done(function(data, textStatus) {

    var len = data.results.length; // 投稿枚数
    var hash_id;                   // 1つの投稿に複数ハッシュタグがついている場合のタグ番号
    console.log('投稿数 : ' + len);

    // twitter
    var post_media_link; // 投稿する画像
    var hashtag_len;     // 一枚の画像がもつハッシュタグの数
    var expanded_url;    // クリックした際のリンク先

    for(var i=0; i<len; i++){

        var source = data.results[i].source;                 // 投稿元
        var post_media_url = data.results[i].post_media_url; // img.srcに入る

        // 指定枚数を表示
        if (LOADED_COUNT < PICKUP_NUM) {

            // twitter or instagram
            if (source == 'twitter') {
                post_media_link = data.results[i].post_media_link[0].sizes.medium.url;
                hashtag_len = data.results[i].tweet.entities.hashtags.length;

                // instagramからの転載かどうか
                if ( post_media_url.match(/twimg/) ) {
                    // source: twitter, post: twitter
                    expanded_url = data.results[i].tweet.extended_entities.media[0].expanded_url;
                } else if(post_media_url.match(/instagram/)) {
                    // source: twitter, post: instagram
                    expanded_url = data.results[i].tweet.entities.urls[0].expanded_url;
                } else {
                    // 例外
                    continue;
                }

                // ハッシュタグの判定
                tw_loop: for (var j = 0; j < hashtag_len; j++) {
                    var hashtag = data.results[i].tweet.entities.hashtags[j].text;
                    console.log('ユーザー' + i + ' hashtag' + j + ' : ' + hashtag);

                    // 該当タグが複数ある場合は最初に書いたもののみ適用
                    for (var k = 0; k < hashtagAry.length; k++) {
                        hash_id = Number(k+1);
                        if (hashtag == hashtagAry[k]) {
                            imgGen(post_media_link, expanded_url, hashtag, keywordAry[k], hash_id);
                            break tw_loop; // １つ合致したら脱出
                        }
                    }
                }

                COUNT_TWITTER++;
                console.log('twitterの投稿枚数' + COUNT_TWITTER);

            } else if (source == 'instagram') {

                // twitterと同様apiのプロパティを見ながら調整する
                // instagram以外の画像は受け付けない
                if ( !post_media_url.match(/instagram/) ) {
                    continue;
                }

                var link = data.results[i].instagram.link;
                var tag_len = data.results[i].instagram.tags.length;

                insta_loop: for (var j = 0; j < tag_len; j++) {
                    var tag = data.results[i].instagram.tags[j];
                    console.log('ユーザー' + i + ' hashtag' + j + ' : ' + tag);

                    for (var k = 0; k < hashtagAry.length; k++) {
                        hash_id = Number(k+1);
                        if (tag == hashtagAry[k]) {
                            imgGen(post_media_url, link, tag, keywordAry[k], hash_id);
                            break insta_loop;
                        }
                    }
                }

                COUNT_INSTAGRAM++;
                console.log('instagramの投稿枚数' + COUNT_INSTAGRAM);
            }
        }
    }

    console.log("通信完了");
});

request.fail(function(jqXHR, textStatus, errorThrown) {
    console.dir("----fail.----");
    console.dir("fail-jqXHR"+jqXHR);             //オブジェクト
    console.dir("fail-textStatus:"+textStatus);  //通信ステータス
    console.dir("fail-errorThrown"+errorThrown); //エラーメッセージ
});

request.always(function(data, textStatus) {
    console.dir("----always.----");  
    console.dir("always-data:"+data);              //データ
    console.dir("always-textStatus:"+textStatus);  //通信ステータス
});

// 画像生成
function imgGen(imgURL, linkURL, hashtag, keyword, hashID){

    // リストの中に画像を挿入
    // クリックすると情報源に飛べるようにリンクも貼る
    $(".list-pickup").append('<li class="pickup-box keyword-' + keyword + ' hash-id' + hashID + '"><p class="is-loading item item' + LOADED_COUNT + '"><a href="' + linkURL + '" target="_blank"></a></p></li>');
    LOADED_COUNT++;

    var img = new Image();
    img.src = imgURL;
    $('.item:last-child').find('a').append(img);
    $('.pickup-box:last-child').append('<div class="hashtag"></div>');

    console.time('処理時間：');
    img.onload = function(){
        loaded();
        console.timeEnd('処理時間：');
    };
}

// ロード完了
function loaded(){
    $('.is-loading').addClass('is-loaded');
    $('.is-loading').removeClass('is-loading');
}

出力結果の一例

out

<li class="pickup-box keyword-starbucks hash-id5">
    <p class="item item1 is-loaded">
        <a href="http://pic.twitter.com/samplexxx" target="_blank"><img src="http://pbs.twimg.com/media/samplexxx.jpg"></a>
    </p>
    <div class="hashtag"></div>
</li>

バグ

- IEでimg.onloadが走らない。

そのときは止むを得ずloaded()関数を外に出してあげれば、とりあえず画像は表示される。

onload自体を動かしたい場合は、キャッシュバスターという手法もあり。

javascript

for (var i = 0; i < 10; i++) {
    var now = new Date().getTime() * Math.random();
    var img = new Image();
    $('body').append(img);
    img.src = "http://lorempixel.com/320/170/sports/" + "?" + now;
}

参考
[Javascript] IE8で、キャッシュから画像を読み込んだ時にimgタグのonloadイベントが動作しない場合の回避策
IE9でimageのonloadが走らない問題を無理やり解消する

- widthを固定、heightをautoにしているとIEでうまく表示されない場合。

css

height: inherit;
max-height: 100%;

参考
IE8で画像のheightがautoで表示されない時の対処方法

- quoted_statusで止まった

コメント付きリツイートを API で取得すると、quoted_status オブジェクトとして元ツイートが返されるようになったらしい。つまり普通のtwitter投稿と同じプロパティでは通らないということ。

if (data.results[i].tweet.quoted_status) { continue; }

リツイート画像は要らないと思うので、こんな感じではじく。

参考
Twitter API でコメント付きリツイート