jQueryで作るTwitter Tickerのチュートリアル（A jQuery Twitter Ticker – Tutorialzine）を試してみた。

↓試したサンプル

jQueryで作るTwitter Tickerチュートリアルのサンプル

iPhoneとかのTwitterクライアントを使ってるといろんなことができるから、このチュートリアルには過剰な期待でのぞんだのだが、ショボイ。ページ開いて一度だけ指定したユーザーのTweetsを表示しているだけ。

なんでだろうと、API（Twitter API 仕様書 日本語訳 第四十五版 (2010年2月24日版)）をみていると、

・いろいろやるには、認証が必要。

認証
public_timeline の取得等一部の API を除くほとんどの API で、認証を使用する。応答に protected なユーザに関する情報が含まれる可能性のある API は認証が必須となっている。
現在、OAuth認証とBASIC認証が使用可能。

・APIの実行数制限がある。（認証してない場合IPアドレスでカウントされる）

API の実行回数制限
Twitter の API は、60分間に150回まで実行できる。この実行回数制限を超えた状態でさらにリクエストを送った場合、HTTPステータスコード 400 が返る。
認証の必要なもの、不要なものの両方が実行回数制限の対象となる(以前は実行回数制限の対象外であった public_timeline の取得も、現在は対象となっている)。
認証の必要なものはユーザID(アカウント)単位で、認証の不要なものはIPアドレス単位で、実行回数のカウントを行なう。
[訳者による注記] Twitter の運用状況によっては API 制限がより厳しく設定されることがある(60分間に20回まで、など)。

ってのがあって、Javascriptだと、これくらいでやめておくほうがいいんだなと納得。

この実行回数制限を適用されると都合が悪い場合は、理由を明示の上、Twitter 開発者にコンタクトを取ること。納得できる理由が示されれば、当該ユーザを、実行回数制限適用外のスクリーン名のリストに入れる。

Twitter本家のブログパーツからガンガンAPIを呼んでいるのは、これで制限解除か。

rate_limit_status という「アカウント関連のAPI」を使うことで、実際の API 制限の実施状況を調べることができる。

これを使えば、あと何回使えるか取得できるらしい。ん？何回実行してもカウントが減らない？おかしい。

jQueryで作るTwitter Tickerチュートリアルのサンプル

Twitter　APIは認証いれて、キャッシュとかしてサーバーで使うのがいいんだな。たぶん

こんどためしてみよう。

Flashみたいに、何枚かの写真をランダムにフェードインフェードアウトしながら表示するバナーを作ってみた。
一応、jQueryのプラグイン形式で（プラグインの作り方はてきとう！）。

画像パスと、リンク先URLをリストでプラグインに渡せば、リストをシャッフルして（最初の1回だけ）順に表示する。５秒置き（初期値）にフェードインフェードアウトしながらパラパラと画像が変わる。

これでiPhoneでもバナーがクリックできる！

サンプル

一応プラグイン形式のソース

/**
 * jQuery Shuffle Bannar plugin
 * Copyright (C) cubdesign | http://www.cubdesign.com/
 * Dual licensed under the MIT <http://www.opensource.org/licenses/mit-license.php>
 * and GPL <http://www.opensource.org/licenses/gpl-license.php> licenses.
 * Date: 2010-02-26
 * @author Takeo Tamura
 * @version 0.5.0
 */

(function($) {
    var name_space = 'shuffleBannar';
    $.fn[name_space] = function(options) {
        var elements = this;

        var settings = $.extend({
            'bannarList' : [],
			'interval':5000,
			'fadeOutTime' : 1000,
			'fadeInTime' : 1000
        }, options);

		var addData = function (v) {
            $.data(v, name_space, {});
            return $(v);
        };

		/*
		* シャッフルする
		*/
		var shuffle = function (targetArray)  {
			var i  = targetArray.length;
			 while (i) {
				var j  = Math.floor(Math.random() * i);
				var x  = targetArray[--i];
				targetArray[i] = targetArray[j];
				targetArray[j] = x;
			 }
			return targetArray;
		};

		//キャッシュ防止用
		var nocache = new Date().getTime();

		var bannarList = settings.bannarList;
		//シャッフル
		bannarList = shuffle(settings.bannarList);

		//今表示しているバナーの番号
		var currentBannarNumber = -1;

		//インターバルID
		var iId = -1;

		/*
		* バナーを変更する
		*/
		var changeBannarImage = function ()  {
			clearInterval(iId);
			 $("#shuffleBannar img:first").fadeOut(settings.fadeOutTime,function(){
				$(this).remove();
				loadBannarImage();
			 });

		};
		/*
		* バナーを読み込む
		*/
		var loadBannarImage = function ()  {
			currentBannarNumber++;

			if( currentBannarNumber == bannarList.length ){
				currentBannarNumber = 0;
			}

			var targetBannar = bannarList[ currentBannarNumber ];

			var imageURL = "" + targetBannar.image + "?nocache="+nocache;
			var linkURL = "" + targetBannar.link;

			var img = new Image();

			 $(img).load(function(){
							$(this).hide();
							$("#shuffleBannar").append(this);
							$(this).fadeIn(settings.fadeInTime);
							$(this).click(function(){location.href=linkURL;});
							iId = setInterval(changeBannarImage,settings.interval)
						}).attr('src', imageURL)

		};

        elements.each(function() {
			addData( this );
			loadBannarImage();
        });

        //method chain
        return this;
    };
})(jQuery);

BACKBASE

英語のサイトだけどBackbase ExplorerやTechnology Overview: IntroなどでAjaxの可能性を学ぶことができる。Flex サンプルエクスプローラーとBackbase Explorerを比べても面白い。

XML+JavaScript、Ajaxは、Webの世界で大暴れしそう。XML+スクリプトって言う組み合わせは最近の流行。Flex、MicrosoftのSparkleも似たようなもの。
JavaのJSF(JavaServerFaces)でこんなAjaxGUIを作ればかなり高性能なWebが実現しそう。どれを選ぶか迷ってしまう。