Wedding Stage GRACEL（ウエディングステージ グレイセル）は、愛知県の北東部に位置する総合結婚式場です。
今回サイトをリニューアルするにあたり管理画面をExtJSのViewportアプリで構築し、トップページやギャラリーなどではExt Coreを活用しています。

サイトはこちらになります。

Wedding Stage Gracel – 瀬戸、尾張旭、長久手エリアの結婚式場ならウェディングステージ　グレイセル

株式会社sus4ニュースリリース グレイセル様Webサイトをリニューアルしました

管理画面
管理画面では、ニュースの投稿、ギャラリーへの写真の追加、お問い合わせの管理などを1画面にViewportアプリで構築しています。

管理画面のサンプル

各項目の管理パネルではグリッドを使用して一覧表示を行い、ソーティングやフィルタリングしてローカルアプリのような操作感でコンテンツの管理が行えるようになっています。
お客様にも基本的な操作は別途マニュアルを確認しなくても、直感的にわかって頂けたようです。
またサーバーとはJSONをやり取りするだけですので、レスポンスも早く動作も軽快です。UIをExt JSに置き換えたことで業務の効率が良くなったのを実感していただけることと思います。

Ext Coreの活用
今回のサイトリニューアルでは管理画面だけでなく、トップページなど公開されているページにも積極的にExtを使用しました。
ExtJSをフルで丸々読み込むとライブラリのJSファイルだけでかなりの容量になってしまいますが、Ext Coreの場合はライブラリだけなら25kb程度です。Ext CoreではDOM操作やアニメーションなどのための便利な機能が詰まっています。今回はトップページのアニメーション、ギャラリーのLightboxなどに使用しています。

トップページ　アニメーション

トップページ

トップページ上部に展開されるアニメーションにExt Coreのアニメーションを使用しています。アニメーション時のDOMの操作もExt行っています。
フェードイン・フェードアウトアニメーションもスムーズでなかなかです。

ギャラリー　lightbox

Ext Lightbox

今回は管理画面だけでなく、公開ページにもExtを使ってリニューアルを図りました。管理画面の直感的な操作に対する反応はなかなかよいので、実際の業務のなかでUIの置き換えによる業務効率の実感していただければありがたいです。またExt Coreを使ったアニメーションの動作もなかなかよさそうなので、これからも積極的に使っていこうと思います。

グリッドなどで独自のコンテクストメニューを作成したときに、ブラウザのメニューを出さないようにキャンセルさせるには、以下のようにコンテクストメニューのイベントでe.stopEvent();を実行します。

/**
 * コンテクストメニューを生成
 */
onContextClick: function(grid, index, e)
{
	・・・

	e.stopEvent();
	grid.contextMenu.showAt(e.getXY());

	・・・
}

通常はこれでブラウザのコンテクストメニューはキャンセルされて表示されません。

コンテクストメニュー（正常な動作）

しかしFirefoxでは、まれに以下のようにブラウザのメニューが表示されてしまい、Extのメニューを覆ってしまいます。

コンテクストメニュー（ブラウザメニューとかぶっている）

この動作はJavaScriptのコードバグではなく、ブラウザのJavaScriptの実行設定が原因のようです。

ブラウザのJavaScriptの実行設定を変更します。
Firefox　>　ツール　>　オプション　>　コンテンツ　>　JavaScriptを有効にする　＞　詳細設定　>　コンテキストメニューを無効化または変更する　にチェックを入れる

Firefoxの設定

これでExtのコンテキストメニューだけが表示されるようになります。
JavaScriptのセキュリティを強化しているFirefoxでよく見かけるので、特定のFirefoxだけおかしい場合に疑ってみてください。

Ajax Animator

Ajax Animatorのデモは以下のリンクから
Ajax Animator　-　http://antimatter15.com/ajaxanimator/build/

Flashのようにパラパラ漫画風のアニメーションを作成できます。
まだまだベータ版ということで色々挙動がおかしい部分が多々ありますが、とても面白いアプリになりそうです。

基本的な使い方はFlashとよく似ていて、左のツールからペンや四角ツールを選んでキャンバスに配置してアニメーションのコマを一枚ずつ書いていきます。キャンバス下のpreviewタブを開くことでアニメーションの再生ができます。モーショントゥイーンのようなものはありません。下のタブのもう一つのAnimationタブでは、サンプルアニメーションを見ることができます。

またJSでマクロを書くこともできるようなので、ExtJSでprocessing.jsのように使えるようになるかも知れません。

書き出しはうまくいきませんが、SWFやアニメーションGIFに加えProcessing(p5),Silver Light,Java FXでできるようになるみたいです。また独自ファイルはファイルをテキストで保存できます(拡張子無し)。独自の保存ファイルの中身を見てみるとJavascriptのオブジェクトをテキストに書き出して保存していました。試しに
Processing形式(.pde)で書き出して、Processingで実行してみました。(winのp5では開くこともできませんが、Macのp5なら多少動きます)

Ajax Animator からProcessingに書き出し

Google Waveのガジェットとしても開発しているそうで、夢が広がります。
さらに驚くべきことは、開発者は14歳（自称）だそうです。本当に14歳なら恐ろしいことです。
vXJSというJSライブラリやwikiなんかも開発しているそうです。天才少年ドゥギー・ハウザーのようです。
http://code.google.com/p/vxjs/

14歳ということは1995年で、Windows95と同期ですね。時間のあるときにもう少し詳しく中を見てみようと思います。モチベーションをあげてもうえるのと同時に、分けのわかない焦りを感じさせてくれるExtJSのアプリの例でした。