2011-06-09
_ HTML5 の Canvas を使ってアニメーション GIF の代わりをさせてみる
picasa プラグインの画像読み込み部分で，読み込み中にローディングイメージでも表示させようかと思ってみたものの，画像ファイルを別途用意するのが面倒な感じがしたので，別のアプローチということで，HTML5 の Canvas と JavaScript を使って実現できるか試してみた．
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Sample</title>
</head>
<body>
<script>
<!--
var CanvasLoadingImage = function( rgb ) {
this.initialize( rgb );
};
CanvasLoadingImage.prototype = {
initialize: function( rgb ) {
var canvas = document.createElement( "canvas" );
canvas.innerHTML = "loading...";
canvas.width = 200;
canvas.height = 32;
var ctx = canvas.getContext( "2d" );
this.canvas = canvas;
this.ctx = ctx;
this.rgb = rgb || "0, 0, 0";
},
draw: function( idx ) {
var ctx = this.ctx;
ctx.clearRect( 0, 0, 200, 32 );
for( i = 0; i < 10; i++ ) {
ctx.fillStyle = i > idx ? "rgba(" + this.rgb + ", 0.25)" : "rgb(" + this.rgb + ")";
ctx.fillRect( i * 20, 0, 16, 32 );
}
return idx < 10 ? idx + 1 : -1;
},
start: function() {
var self = this;
var idx = -1;
this.timer = window.setInterval( function() {
idx = self.draw( idx );
}, 100 );
},
stop: function() {
window.clearInterval( this.timer );
}
}
var loading = new CanvasLoadingImage( "255, 220, 0" );
document.body.appendChild( loading.canvas );
loading.start();
//-->
</script>
</body>
</html>
Chrome や Safari，Firefox で動作してるのが確認しています．
今後，tDiary のプラグインでも Ajax を利用する場面が増えてくるだろうから，処理のかかるような場合は，各プラグインがそれぞれ読み込み画像を用意したりするより，こういう手段もありなんじゃないかな．もしくはそれっぽい JQuery のプラグインを探してくるか．picasa プラグインにはとりあえず上記のコードをベースに組み込んでみる予定．
2011-06-06
_ Yahoo!のウェブ検索 API のプラグインを作ってお試し中
サイト内検索を Google カスタム検索にしたものを置き換えてしばらく使っていて，検索結果そのものには不満はないけど，表示が iframe というのがどうも気に入らない．Autopagerize も効かないので，あまり使い勝手もよくない感じがするので，Yahoo!デベロッパーネットワークのウェブ検索 API を試しています．
Yahoo! のウェブ検索 API は検索結果を XML で返してくれるので，BOSS や Bing の検索プラグインと同じような形で表示できます．いまいちインデックスされるタイミングがよくわかんないので，しばらくこっちを試してみることに．
ウェブ検索 API は通常のウェブ検索とアップグレード版検索が用意されていて，通常のウェブ検索は，同時アクセスが可能なユーザー数の制限や 24 時間中 1000 件までのリクエストを上限とされます．アップグレード版にするとこの制限が 24 時間中，50000 件のリクエストが上限となります．Yahoo!プレミアム会員，Yahoo! BB会員，Yahoo!ウォレットのいずれかを利用している人は，アップグレード版が利用できるということなので，ここではアップグレード版で運用しています．
さて，この日記がどのくらいのタイミングでインデックスされるかな．そんなに悪くなければこのまま利用することにしよう．
2011-06-04
_ Googleカスタム検索プラグインをちょっと更新
検索結果の表示についてもうちょっと調整できるようにし，広告の表示位置，検索結果を表示する iframe の幅と高さを設定できるようにしました．
検索結果を上下にした場合は，検索条件によっては上に 1 つだけ広告とか，まったく広告がでないこともあります．多い場合は上下それぞれに 4，5 件ほど表示されるので，その点を考慮して検索結果の高さは設定してください．指定しない場合はデフォルト値の 1300 が適用されるので，多分問題なく表示されると思います．
_ ただただし [00default.jsに入れておいて共有するべきかも知れません。その場合は(ポータビリティのことを考えて)gifア..]
_ hb [確かに，こうした汎用的なものは共有したほうがいいですね． アニメーションをgifファイルとした場合は，共有のファイ..]
_ ただただし [なるほど色かぁ。でもまぁ、白と黒のアニメにすれば、どんな背景でも見られるんじゃないかな、と。]