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を使ったアニメーションの動作もなかなかよさそうなので、これからも積極的に使っていこうと思います。

JSON
ジェーソンといいます。設計段階でプログラマが登場するような会議や打ち合わせになってくると、サーバ側とクライアントUIの橋渡し（交換言語みたいな感じ）をやってくれるのが、JSONやXMLです。
JSONは、JavaScript Object Notationが正式名称で、JavaScriptにおけるオブジェクトの表記法({}を使うやつですね)をベースとした軽量なデータ記述言語というのが正しい解釈のようです。

要するに、サーバ側からテキストでこの記法にのっとったものを出力してやれば、ブラウザが受け取ったそのテキストをJavaScript側でパースするとそのままオブジェクトとして使えちゃうんですよというのが肝です。

ExtJSですと、JsonStore, JsonReaderとかでJSONを受け取るとごにょごにょしてくれて、いつの間にかExtで使えるオブジェクトに変換してくれる感じになります。

Json自体のサンプルは以下の通りです。

オブジェクトの例：

{name: "John Smith", age: 33}

配列の例：

["milk", "bread", "eggs"]

もちろん、入れ子にもできます。

営業的には、打ち合わせでこの言葉が出てきたら、なんのことはないただのテキストで、サーバ側とExtを繋ぐ橋渡し的データ記法のルールだと思っていただければ十分かと思います。

今回は、まとめて紹介していきます。
どちらかというと、営業向けの言葉説明なので、技術者には物足りない内容かもしれないです。

1.RIA

リッチインターネットアプリケーション。3年か4年前から盛んに言われるようになって来た言葉です。それまでのHTMLベースのウェブアプリケーションに対して、よりネイティブアプリケーションっぽい動きをするWebアプリケーションの総称でよいと思います。
このRIAを実現する技術としては、Flash、FlexなどのFlashプラグインを利用するアプリケーション、Sliverlightプラグインを利用するアプリケーションと、Ajaxを利用するJavaScriptベースのアプリケーションが代表的なものとなります。
ウェブ上で、リッチな体験を提供するというのが言葉の中に含まれる定義ですね。

僕が業務系RIAを説明するときは、今まで当たり前にできていた業務をウェブアプリに置き換えても、当たり前に同じことができることですと伝えます。

2.Ajax

先ほどの説明に出てきましたが、Ajaxというのは、JavaScriptに関しての言葉です。
Wikiの説明ですと

Ajax（エイジャックス、アジャックス）は、ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。

という感じになります。
今までのHTMLベースのウェブアプリケーションは、情報を送信するのに、ページ全体を書き換える必要がありましたが、このAjax技術を使うと、ページ内でいつでもサーバへの通信が可能で、ページ内の一部を動的に変更することができます。
これが、ネイティブアプリケーションっぽくウェブアプリケーションを振舞わせることができる核の技術です。

3.ライブラリとフレームワーク

前にお話をしているときに、フレームワークとライブラリの違いってなんですかと聞かれたことがあるので、、、

Wikiによるフレームワークの説明：

Web アプリケーションフレームワーク（英: Web Application Framework）は、動的な ウェブサイト、Webアプリケーション、Webサービスの開発をサポートするために設計されたアプリケーションフレームワークである。 フレームワークの目的は、Web 開発で用いられる共通した作業に伴う労力を軽減することである。たとえば、多数のフレームワークがデータベースへのアクセスのためのライブラリや、テンプレーティング フレームワーク、セッション管理を提供し、コードの再利用を促進させるものもある。

Wikiによるライブラリの説明：

ライブラリは、汎用性の高い複数のプログラムを、再利用可能な形でひとまとまりにしたものである。一般にライブラリは、それ単体ではプログラムとして動作させることはできないので実行ファイルではない。ライブラリは他のプログラムに何らかの機能を提供するコードの集まりと言うことができる。ソースコードの場合と、オブジェクトコード、あるいは専用の形式を用いる場合とがある。たとえば、UNIXのライブラリはオブジェクトコードをarと呼ばれるアーカイバでひとまとめにして利用する。

んー、これだとなかなかわかりにくいですね。

近年登場してきているJavaScriptを快適に書くためのライブラリ・フレームワークを上げてみると、

• Prototypeは、昔JavaScriptライブラリといわれていたような気がしたのですが、いつの間にかフレームワークになっています。
• jQueryは、WikiではJavaScriptライブラリといわれていますね。
• ちょっと毛色が違いますが、YUIはUIライブラリといっていますね。
• Dojoは最近、Core, digit, DojoXに分かれてるみたいですね。3つあわせると、フレームワークとよばれるっぽいですね。

どちらかというと、スクリプトを書くときにサポートしてくれる機能が寄り集まったものをライブラリといい、アプリケーション自体をそれで完結できるもの（JavaScriptの場合は、クライアントサイドのコード全体をまかなえると考えれば適当かもしれません）をフレームワークといっているようです。

ちょうど、ExtJSでいうと、ExtCoreに関しては、ライブラリといったほうがよさそうで、ExtJSはフレームワークといえそうですね。

なんだかまとまりのない感じになってしまいましたが、とりあえず簡単に3つ紹介してみました。次回は、JavaScriptに関する言葉をもう少し解説していきます。