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

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

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

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

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

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

Read the rest of this entry »

Part1はRIAからライブラリとフレームワークの違いまでを簡単に説明しています。

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を繋ぐ橋渡し的データ記法のルールだと思っていただければ十分かと思います。

ExtJSを話題にするうえで、覚えておくべきいくつかの知識があります。
技術者対営業、営業対エンドユーザー、技術者対エンドユーザーなど、ビジネスを進めていく上でいろいろな場面が考えられるとおもいますが、共通の言葉を作っておくと話が早い場合もあります。

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

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に関する言葉をもう少し解説していきます。