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%;
- quoted_statusで止まった
コメント付きリツイートを API で取得すると、quoted_status オブジェクトとして元ツイートが返されるようになったらしい。つまり普通のtwitter投稿と同じプロパティでは通らないということ。
if (data.results[i].tweet.quoted_status) { continue; }
リツイート画像は要らないと思うので、こんな感じではじく。