広告

posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「Big Bang」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。

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」で続きを読む