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

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

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

ギャラリーページでは写真をクリックするとLigthboxで写真を開きます。
LightboxはPrototype + Scriptaculousが有名ですが、今回はExt Coreのlightboxプラグインを使っています。
見た目は本家のLightboxそっくりですが、中身はExtで動いています。

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