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

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

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

これはNARUさんのライブドアブログ「キーワードチョイス2」に貼ってあるもののコピーです。
自分の別ブログを紹介しています。

たとえばですが、上のものと下のもの、どちらがより興味を惹かれるでしょうか。どちらも興味がない？それは残念です。

先ほど「お友達の最新記事を表示しよう！」に書いたスクリプトに自分で関数を加えると、このような表示も出来ます。

こんなカンジで、お友達の最新記事をサイドバーに表示できるようにしました。
デザインはスタイルシートで調整できます。

A8.netのファンブログ用情報です。

以前「プロフィールの写真は拡大できる」という記事で、プロフィール画像をクリックすると、大きくなると書きました。これは女性の写真が小さい時には非常に有用な情報でした。

しかし、この私のブログのプロフィール画像をクリックして大きくしても意味がありません。

そこで、プロフィール画像をクリックしたら私のTwitterに飛ぶようにしました。

A8.netのファンブログで、サイドバーのプロフィール画像の大きさを変えるには、スタイルシートにこう書きます。

td.profile_name_text img.photo{
	width:150px; /* 横幅を150ピクセルにする場合 */
}

完全に非表示にする場合

td.profile_name_text img.photo{
	display:none; /* 非表示 */
}

実際にどう表示されるかを事前に見たければ「スタイルシートコンバータ」スクリプトを使ってみてください。SOURCE or URL欄にあなたのブログのURL、CSS欄に上に書いたスタイルシートを貼り付けて送信すれば、適用された結果が表示されます。

スタイルシートの書き方は「で、スタイルシートはどこに書くのか？」を見てください。

Twitter愛のリレー小説
「セルヴーズの雨傘」

新しいスタイルシートのCSS3を使うと画像を使わないでも簡単に文字に影がつけられます。

ただし、このCSS3は全てのブラウザで対応しているわけではありません。
Internet Explorer 9では上の文字に影がついて見えますが、Internet Explorer 8では
影がついていません。

これはバージョンの問題です。ただし、Windows XPではInternet Explorerは8までしか
インストールできません。

Window7を買わせたいマイクロソフトの意地悪ではなく、ハードウェアに関わる技術的な問題が
原因のようです。

もし、あなたがWindows7をお使いなら、Internet Explorer9が入っています。
でもあなたが自分のブログをお持ちの場合「私はInternet Explorer9だから大丈夫」という考えは間違いです。

あなたには影がついて見えていても、あなたのブログの読者には影がついて見えないかもしれない。いや、影がついて見えない読者も確実にいる。

このことを念頭においてデザインしないと失敗します。

今回の記事はそういう制約があることを承知した上でお読みください。

先日の記事「Twitter API 愛の劇場のソース」では、Twitterのuser_timelineメソッドをPHPで呼び出し、simplexmlを使って処理しました。

しかし、記事中に書いてあるようにソースに不備があります。

書き直すに当たり、次の変更を行ないました。

1. searchメソッドを使って検索する
2. PHPを使わず、JavaScriptとJSONPだけで構成する。

前回のソースは、とりあえずTwitter APIがどんなものか動かしてみるレベルの内容です。
いいコードとはとてもいえないものでした。今回は使う開発言語を減らすことで、コードがスッキリしました。

アクセス制限の問題もあります。1時間に150アクセスまでなので、PHPを置いたサーバーからTwitterのサーバーにアクセスするより、JavaScriptを読み込んだ各ブラウザからTwitteのサーバーにアクセスさせる方がIPを分散できます。

さらに、前回はリレー小説の書き手分user_timelineメソッドを呼び出していました。今回はsearchメソッドで、Twitterのサーバーに問い合わせる回数を減らします。

search API

赤字のjsonをatomにすると、Atomが返ってきます。

http://search.twitter.com/search.json?q=検索クエリー&callback=コールバック関数名&result_type=recent&rpp=100&since_id=200851367760363520&page=1

必須パラメーターはqです。
q=には検索クエリーをURLエンコードして送信します。検索クエリーの書き方は後述します。

callback=にはJSONPのコールバック関数を指定します。このオプションはatomの時には適用されません。

result_type=には、欲しい検索結果の種類を指定します。指定できるのは以下の3つ。指定しないとrecentが指定されたものとみなされます。

rpp=には、一度に取得する検索結果の数を指定します。指定できる最大値は100、未指定だと15になります。

since_id=は指定したIDより大きなIDのステータスのみ取得するオプションです。検索に指定IDそのものは含まれません。

page=１ページを rpp 件とみなして取得するページを指定します。最初のページは１です。また、rppとpageで遡れるのは、最大1500件までです。

他にもたくさんのオプションがあり、WebService/Twitter/API - わすWikiにまとめられています。

ところが、今回も問題がありました。ある日から1話目が表示されなくなったのです。
どうも、約10日（１．５週）以上前のつぶやきは検索されないようです。

ということで、またスクリプトを修正することになるのですが、それは別の記事にして、この話を続けます。

検索クエリーの書き方

今回の検索クエリはこうなりました。

from:Tom3suteki で、投稿者がTom3sutekiのつぶやきを検索します。

リレー小説なので、投稿者が2人います。from:Tom3suteki または from:welcome2ourshop という場合は、ORで結びます。

ORは大文字で、前後に半角スペースを入れます。

検索から除外したい文字列の前には - （ハイフン）をつけます。ハイフンと文字列の間にはスペースを入れずにくっつけます。

-RT とすることでRTを含む文字を除外します。つまり、リツィートの除外を指定したことになります。

つづくなどと、何もつけない文字列を指定すると、その文字列を含んだツィートを探します。

つまり「from:Tom3suteki OR from:welcome2ourshop -RT つづく」は、「投稿者がTom3sutekiかwelcome2ourshopでRTを含まず（リツィートを含まず）、つづく という文字列があるツィートを探せ」という意味です。

これを、URLエンコードした上で、q=に続けて書きます。

インターネットでページを見るときに必要なのがURLです。

このブログのURLはhttps://fanblogs.jp/ayzfqir5/archive/465/0ですが、それに情報を含めて送る事が出来ます。

たとえば、https://fanblogs.jp/ayzfqir5/archive/465/0にユーザーIDの「Tom」とパスワード「sexy」を含めて送る場合このようにします。（このユーザーIDとパスワードは架空のものです）

https://fanblogs.jp/ayzfqir5/archive/465/0?user_id=Tom&password=sexy

上のリンクをクリックしてみてください。URLに架空のユーザーIDとパスワードという、余計なものが混ざっているのに、問題なくこのページが表示されたと思います。

これがGET送信です。GET送信でTwitterなどのAPIにパラメーターを送ることが出来ます。

これは大きい順や小さい順に並び替えるのではなく単純に順番を逆にする方法です。

JavaScriptで、大きい順や小さい順に並び替えたいとき（ソート）には
sort関数を使いますが、今回は触れません。

テーブル（表）の順序を逆にする関数

var swap=function(id){
	var elem=document.getElementById(id);
	if(!elem){return;}

	var tr_elems=elem.getElementsByTagName('tr');
	var min=0,max=tr_elems.length-1;

	while(min<max){
		var td_min=tr_elems[min].getElementsByTagName('td');
		var td_max=tr_elems[max].getElementsByTagName('td');
		var tmp1=td_min[0].innerHTML;
		var tmp2=td_min[1].innerHTML;
		td_min[0].innerHTML=td_max[0].innerHTML;
		td_min[1].innerHTML=td_max[1].innerHTML;
		td_max[0].innerHTML=tmp1;
		td_max[1].innerHTML=tmp2;
		min++;
		max--;
	}
}