ExtJSで楽しくRIA業務アプリ開発

今回は弊社で作成したExtJSを活用したサイトの紹介です。

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

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

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

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

Read the rest of this entry »

今回は備忘録も兼ねてFireFoxのコンテクストメニュー（右クリックメニュー）とExtJSで設定したコンテクストメニューが重なる場合の対処方法の紹介です。

グリッドなどで独自のコンテクストメニューを作成したときに、ブラウザのメニューを出さないようにキャンセルさせるには、以下のようにコンテクストメニューのイベントで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というExtJSで作ったFlashのようなアニメーション作成アプリを見つけました。
http://antimatter15.com/

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のアプリの例でした。