http://kakutani.com/20051222.html#p01
http://rails2u.com/misc/imadoki/ (資料、キーボードのs, wでプレゼン操作可能)
でゲスト講師してきました。参加者の皆さん、セッティングマネージャ兼幹事1.0の角谷さん、お疲れ様でした。
というわけでJavaScript, Ajax, prototype.js そしてGiza(オレオレJavaScript Framework inspired by しょこたん)について放談ということで緩い感じにだらだらとお話しをしてきました。その中でとりわけGiza.Eventsについて関心を持たれた方が多かったようなので、Giza.Eventsについての説明をちょっと。
Giza.Eventsは主に三つの機能があります。

giza:a, giza:c などのgiza: 接頭辞つきの拡張属性を利用したコントローラ、アクションの呼び出し

具体的には

<a giza:c='page' giza:a='index'>ページ一覧</a>
# クリックしたらpageコントローラ、アクションindexを実行
<a giza:a='move' giza:p='TopPage'>トップページ</a>
# クリックしたらデフォルトコントローラ、アクションmove、パラメータTopPageを実行

みたいな風に簡単にgiza: 拡張属性を記述した要素からclickでアクションの実行が可能です。

behaviour.jsを利用したEvent登録

behaviour.jsの一部機能を利用し、CSSのセレクタ形式のパターンマッチを記述することで簡単にEventの登録を行えます。

Giza.Events.clickRegister({
  '#submit': function(){
    $Giza('submit');
    return false;
  },
  '#preview_button': function(){
    $Giza('preview');
    return false;
  }
});

Giza.Events.register({
  '#view': function(element){
    Event.observe(element,'dblclick', function(){
      $Giza('edit');
    });
  }
});

よく使うクリックのイベントはGiza.Events.clickRegisterに登録、その他のイベントはGiza.Events.registerに登録します。上記例の一番上での設定だとidがsubmitの要素をクリックしたときにデフォルトコントローラ、アクションsubmitが実行されます。

hotkey.jsを利用したホットキーの登録

hotkey.jsを利用してるため簡単にホットキーの登録が行えます。

Giza.Events.HotKeyRegister({
  s: function(){$Giza('next');},
  w: function(){$Giza('prev');}
});

この例ではキーボードの「s」が押されたとき、デフォルトコントローラ、アクションnextが、「w」が押されたときデフォルトコントローラ、アクションprevが実行されます。

これらをgiza/events.jsに記述することにより、初回ロード(onload)時にイベントが登録されます。なにげにかなり便利です。

現在のGiza自体はコントローラ中心のフレームワーク、MVCでいうところのCのみのフレームワークです。しかしGizaの実装とGizaをつかったアプリケーションの実装をするを際、JavaScriptで一番重視することはコントローラ・アクションを記述できる事よりも、イベントハンドラの登録だなぁとひしひしと感じました。JavaScriptのフレームワークはよくあるコントローラ・アクションを定義して云々のフレームワークよりも、どうやってイベントを登録しやすく、かつ再利用が可能な形でコードを書けるか、に焦点を合わせたイベント重視のフレームワークがベストなんじゃないかなー、と。これからGizaを拡張する際はコントローラ・アクション的な概念にとらわれることなくそっちの方向に向かいたいと思ってます。

あ、この記事一番上の資料がGizaを使って実装してますので、たいした物じゃありませんがGizaのソースを見たい方はどうぞ。もしくはrestwiki*1 もGizaを使って実装してるのであわせてどうぞ。

*1:サーバサイドで動作版。restwiki_0.2.tar.gzはGizaのバージョンが古いです