Twitterでつぶやいた商品名をブログに列挙

新ブログ「amazon探検隊！」ではTwitterでつぶやいた商品名を列挙するようにしました。
こんな感じです。もちろん全部アフィリエイトです。

Amazon でチェック！

たとえばこれなんか画像もカスタマーレビューも表示されて、もし見てもらえれば
ブログで下手な宣伝するよりも圧倒的に効果的だと思う訳です。

追記：このブログの記事下にも導入してみました。

以前はPHPを使った処理例を書きましたが、JavaScriptだけでも出来ます。

やり方はTwitter APIを使って、データを取得。
返ってきたJSONの配列をJavaScriptのコールバック関数で処理するだけです。

ソースコード全文

<h3 style="font-size:90%">Amazon でチェック！</h3>
<ul id="twitter_print"></ul>

<script type="text/javascript">
var tweet_print=function(json){
	var tweet_print_ul=document.getElementById('twitter_print');
	var href='https://twitter.com/jungle_shop/statuses/';

	for(var i=0;i<json.length;i++){
		var text=decodeURIComponent(json[i].text)
			.replace(/^.+?(\sの\s)|^.*Just saw this on Amazon:\s*|\s*を Amazon でチェック！.+$|https?:\/\/.+$/g,'');

		var li=document.createElement('li');

		li.innerHTML='<a href="'+href+json[i].id_str
			+'" target="_blank">'+text+'</a>';

		tweet_print_ul.appendChild(li);
	}
}

var src='http://api.twitter.com/1/statuses/user_timeline.json'
	+'?screen_name=jungle_shop&count=10&callback=tweet_print';

var script=document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('src',src);

var head=document.getElementsByTagName('head');
head[0].appendChild(script);
</script>

ソースコードの説明

下は表示領域です。

<h3 style="font-size:90%">Amazon でチェック！</h3>
<ul id="twitter_print"><!-- ここに挿入される --></ul>

この後の <script type="text/javascript"> から </script> までがJavaScriptの記述部分です。
まず、JSONを受け取るコールバック関数を定義します。名前はtweet_printにしました。

var tweet_print=function(json){
	/* 表示領域のエレメントを取得 */
	var tweet_print_ul=document.getElementById('twitter_print');

	/* 下のURLにid_strを足したのが個別ツイートのURL */
	var href='https://twitter.com/jungle_shop/statuses/';

	/* JSONの配列を繰り返し処理 */
	for(var i=0;i<json.length;i++){
		/* URLエンコードして送られてきたツイートをデコード */
		/* さらに正規表現で商品名だけを抜き出す           */
		var text=decodeURIComponent(json[i].text)
			.replace(/^.+?(\sの\s)|^.*Just saw this on Amazon:\s*|\s*を Amazon でチェック！.+$|https?:\/\/.+$/g,'');

		/* liのエレメントを生成 */
		var li=document.createElement('li');

		/* liのinnerHTMLにリンクを挿入     */
		/* リンク先は href+json[i].id_str */
		li.innerHTML='<a href="'+href+json[i].id_str
			+'" target="_blank">'+text+'</a>';

		/* エレメントliをulに追加 */
		tweet_print_ul.appendChild(li);
	}
}

次はユーザーのタイムラインを取得するREST式URLの生成部分です。
ここで示した条件にマッチした結果がJSONの配列となってコールバック関数に渡されます

ベースURL
http://api.twitter.com/1/statuses/user_timeline.json

json を xml, rss, atomのどれかに変えれば、それぞれのフォーマットで取得できます。

今回指定するプロパティ

screen_name : ユーザー名（@ユーザー名の@を除いたもの）

count       : 取得したいつぶやきの数（最大200、未設定なら20となる）

callback    : コールバック関数名を指定

var src='http://api.twitter.com/1/statuses/user_timeline.json'
	+'?screen_name=jungle_shop&count=10&callback=tweet_print';

そして、scriptタグのエレメントを生成します。srcが、上のブロックで作ったURLです。

var script=document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('src',src);

最後はヘッダにscriptタグを追加します。
注意しないといけないのはブラウザが表示領域（今回の場合だとtwitter_print）を
認識した後で追加しないと表示できないということです。

HTMLでヘッダに直接書き込まず、ここで追加しているのはそういう理由です。

var head=document.getElementsByTagName('head');
head[0].appendChild(script);

Twitter APIの詳細に関しては「WebService/Twitter/API - わすWiki」がとても参考になります。

ちなみに今回返ってきたのは、下のフォーマットです。

[
	{
		"created_at":"Wed May 30 19:20:14 +0000 2012",
		"id":207914334309982208,
		"id_str":"207914334309982208",
		"text":"\u30a2\u30be\u30f3\u30a4\u30f3\u30bf\u30fc\u30ca\u30b7\u30e7\u30ca\u30eb \u306e \u30d4\u30e5\u30a2\u30cb\u30fc\u30e2\u30ad\u30e3\u30e9\u30af\u30bf\u30fc\u30ba\u30b7\u30ea\u30fc\u30ba \u50d5\u306f\u53cb\u9054\u304c\u5c11\u306a\u3044 \u67cf\u5d0e\u661f\u5948 \u3092 Amazon \u3067\u30c1\u30a7\u30c3\u30af\uff01 http:\/\/t.co\/bD4FqR6u #OTAKU",
		"source":"\u003ca href=\"http:\/\/twitter.com\/tweetbutton\" rel=\"nofollow\"\u003eTweet Button\u003c\/a\u003e",
		"truncated":false,
		"in_reply_to_status_id":null,
		"in_reply_to_status_id_str":null,
		"in_reply_to_user_id":null,
		"in_reply_to_user_id_str":null,
		"in_reply_to_screen_name":null,
		"user":{
			"id":593010829,
			"id_str":"593010829",
			"name":"\u30a2\u30de\u7bb1",
			"screen_name":"jungle_shop",
			"location":"",
			"description":"",
			"url":"http:\/\/jungle.ldblog.jp\/",
			"protected":false,
			"followers_count":1,
			"friends_count":5,
			"listed_count":0,
			"created_at":"Mon May 28 19:45:58 +0000 2012",
			"favourites_count":0,
			"utc_offset":32400,
			"time_zone":"Irkutsk",
			"geo_enabled":false,
			"verified":false,
			"statuses_count":13,
			"lang":"ja",
			"contributors_enabled":false,
			"is_translator":false,
			"profile_background_color":"C0DEED",
			"profile_background_image_url":"http:\/\/a0.twimg.com\/images\/themes\/theme1\/bg.png",
			"profile_background_image_url_https":"https:\/\/si0.twimg.com\/images\/themes\/theme1\/bg.png",
			"profile_background_tile":false,
			"profile_image_url":"http:\/\/a0.twimg.com\/sticky\/default_profile_images\/default_profile_5_normal.png",
			"profile_image_url_https":"https:\/\/si0.twimg.com\/sticky\/default_profile_images\/default_profile_5_normal.png",
			"profile_link_color":"0084B4",
			"profile_sidebar_border_color":"C0DEED",
			"profile_sidebar_fill_color":"DDEEF6",
			"profile_text_color":"333333",
			"profile_use_background_image":true,
			"show_all_inline_media":false,
			"default_profile":true,
			"default_profile_image":true,
			"following":null,
			"follow_request_sent":null,
			"notifications":null
		},
		"geo":null,
		"coordinates":null,
		"place":null,
		"contributors":null,
		"retweet_count":0,
		"favorited":false,
		"retweeted":false,
		"possibly_sensitive":false
	}
]

新ブログ「Big Bang」で続きを読む →

ここにブログの名前を入れます

広告

Twitterでつぶやいた商品名をブログに列挙

Amazon でチェック！

ソースコード全文

ソースコードの説明

HTML、CSS、JavaScript、スパムと悪徳商材の対策