CSSとCanvasで描写するWeb用のUIフレームワーク（Mocha UI）

メニューやウインドウなどのインターフェースをブラウザ上で実装するのに便利なのが Mocha UI。Web用のUIフレームワークとして複数のJavaScriptライブラリなどから構成されている。Mocha UI フレームワークを利用するにはmootool.jsも必要になる。

デザインもきれいで、使いやすい印象を受ける。Mocha UIの特徴的な部分は、デザインの描写の一部でCanvasを利用している点だろう。InternetExplorer向けの処理はExplorerCanvasを利用している。

Clock Widgetだけでも表示できるか？
Mocha UIの設定を行っているscripts/mocha-init.jsを参考に実験してみたが、Canvas Clockだけでも表示する事ができる、しかし、ウインドの表示位置が画面スクロール量を考慮していないなど、問題がある。

Clock Widgetを表示する

単体のウインドウ表示用のJavaScriptライブラリとは異なり、画面領域全体を構成するナビゲーションUI用のフレームワークと考えた方が良さそうだ。

ダウンロードファイルに添付されているサンプルではmocha.js.phpをHTMLヘッダで呼び出しを行っているが、開発用となっている。本番利用時にはmocha.js.phpのインクルードを削除して、mocha.jsを代わりにインクルードするように修正すれば良い。