«前の日記(2006-11-17 (金)) 最新 次の日記(2006-11-19 (日))»  

まちゅダイアリー


2006-11-18 (土)

Flickr で名刺を作った

moo MiniCards

Flickr に載せた写真でミニカードを作ってくれる moo というサービスがある。 カードの裏には好きな文字を入れられるので、ちょっとした名刺代わりになる。 10日くらい前に申し込んでいたんだけど、今日無事に届いた。 料金は、送料込みで25ドルくらい。

moo MiniCards

ちょっと厚めの紙で、質感もそれなりにあっていい感じ。 自分で撮った写真だから、思い入れも数倍になる。 名刺としてはちょっと小さめだけど、周りの人に配って回ろうっと(迷惑?)。

Tags: flickr

prototype.js で定期リロード

唐突に prototype.js の話。 使うのは1年ぶりかな。 チャットのように、定期的にリロードする仕組みを実現するために prototype.js の Ajax.PeriodicalUpdater を使ってみた。

Ajax.PeriodicalUpdater の基本

prototype.js では、定期的なリロードのために Ajax.PeriodicalUpdater というクラスが用意されている。 IT戦記のサンプルを参考にして、まずはフツーに使ってみる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
  <head>
    <title>Test</title>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="chat1.js"></script>
  </head>
  <body>
    <div id="message">default</div>
    <div id="freq">0</div>
    <input type="button" id="action" value="start" onclick="main()">
    <textarea id="debug" style="width: 100%; height: 50%"></textarea>
  </body>
</html>

chat1.js

function main() {
  var updater = false;
  if(!updater){
    updater = new Ajax.PeriodicalUpdater
      {
        success: 'message'
      },
      'chat1.text',
      {
        frequency: 2,
        decay: 1.5,
        onException     : function(req, e){
          $('debug').value = e.name + ': '+ e.message + '\n';
        }
      }
    );
  }
}

success で指定している message の要素が、定期的に chat1.txt の内容 (HTML) に置き換えられる。 frequency は更新周期(2秒)。 decay は減衰率といって、 chat1.txt が更新されていなかった場合に、次の更新周期がだんだん遅くなっていくというもの。 2秒、2秒×1.5=3秒、3秒×1.5=4.5秒…といった具合に、「次の更新周期 = 更新周期 × 減衰率」で計算されている。 chat1.txt が更新されると、更新周期は元の値(2秒)に戻るようになってて便利。

JSON データを使って更新する

さっきの例だと、サーバ側で HTML を整形して、それをそのまま読み込む使い方になる。 昔作った Ajax のチャットも同じようなアプローチで考えていた。 サーバ側で HTML を作っておけば、 Ajax が使えないブラウザにも対応しやすいと思っていたから。

でも、最近だと JSON でデータをやり取りして、クライアント側で HTML に変換するやり方が多い。 そういう場合にも、 Ajax.PeriodicalUpdater が使えると便利。 定期リロードを自分で作ると、結構面倒なんだよね。

ってことで、 JSON データを使う例。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
  <head>
    <title>Test</title>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="chat2.js"></script>
  </head>
  <body>
    <div id="message">default</div>
    <div id="freq">0</div>
    <input type="button" id="action" value="start" onclick="main()">
    <textarea id="debug" style="width: 100%; height: 50%"></textarea>
  </body>
</html>

chat2.js

function main() {
  var updater = false;
  if(!updater){
    updater = new Ajax.PeriodicalUpdater(
      '',
      'chat2.json',
      {
        frequency: 2,
        decay: 1.5,
        onSuccess: function(req, json){
          response = eval('(' + req.responseText + ')');
          $('message').innerHTML = response.name;
        },
        onException     : function(req, e){
          $('debug').value = e.name + ': '+ e.message + '\n';
        }
      }
    );
  }
}

chat2.json

{"name": "<b>Mr. Smith</b>"}

Ajax.PeriodicalUpdater の第一引数を空文字列 '' とし、 onSuccess を使って手動で更新するのがポイント。 eval を使った json データの変換は、昔の日記を参考にした。 ちなみに、第一引数に空のオブジェクト {} を指定すると、 prototype.js の 1.4 では動いたけど、最新の 1.5_pre1 ではエラーになった。

json データの Content-Type を以下のようにすると Safari や Opera でも日本語が使えるらしい。手元に環境が無いから実験できないけど。

Content-Type: application/x-javascript; charset=utf-8

innerHTML を使わずに要素を増やしていく

もう Ajax.PeriodicalUpdater とは関係なくなっちゃうけど、チャットのように差分を増やしていく場合は innerHTML を使わずに要素を足していった方がいい場合もある。 ここでは、 Insertion を使って要素を足してみた。 ついでに、 script.aculo.us を使って

onSuccess: function(req, json){
  json = eval('(' + req.responseText + ')');
  new Insertion.Top('message', '<li>' + json.name + '</li>');
  new Effect.Highlight(mes.firstChild);
}

Ajax を使ったチャット (prototype.js 編)

prototype.js + JSON の勉強ってことで、勢いで作ってみた。

まだ骨格だけ(永遠にそうかも?)で、見栄えも何も作ってない。 prototype.js の Ajax.PeriodicalUpdater を使って、サーバ側の JSON ファイルを定期的に取りに行ってる。 一人で実験しても寂しいので、 sixamo 君を入れてみた。