HOME > 開発者向けBLOG > Ext JS >  Sencha Ext JS Spotlight: KiteDesk

Technology Note 開発者向けBLOG

Ext JS

Sencha Ext JS Spotlight: KiteDesk

こんにちは、ゼノフィkotsutsumiです。

この記事は、US Sencha社ブログ Sencha Ext JS Spotlight: KiteDesk を翻訳したものです。
KiteDesk hero

KiteDeskはExt JSを利用してネイティブアプリケーションのルックアンドフィールを持つHTML5ベースのWebアプリケーションを提供しています。

KiteDesk hero KiteDeskはあなたの最も重要なクラウド情報を一本のデータストリームにまとめます。 そのアイデアは単純です:コンシューマーはDropbox・Facebook・Gmail・Twitter・LinkedInなどを使っていますが、アプリケーション間を移動するのは面倒です。 KiteDeskはそれを全てまとめるため、ユーザーはメール・ソーシャルメディアの投稿・カレンダーのアイテム・コンタクト情報・ドキュメント・写真や動画を一カ所で見られるようになりますので、アプリケーション間の移動はなくなります。 ユーザーも例えば仕事・クラブ・ソフトボールのリーグ戦などのカスタムストリームを作成できます。

KiteDeskのStream Viewerはソーシャルメディアやメールのアカウントの内容を一つのビューにまとめます。

なぜSencha Ext JSを選んだか

我々がExt JSを選択したのは、美しいビルトインコントロールとシンプルだがパワフルなプログラミングツールがある、完全で堅牢なクライアントサイドフレームワークを提供しているからです。 我々は、とても経験豊かなJava開発者が、最小のスタートアップ時間で、 洗練されたHTML5ベースのアプリケーションを開発できるようになることを求めていました。 Ext JSは様々な経歴をもつ開発者になじみのあるモデル、ビュー、コントローラー(MVC)アーキテクチャを推奨するという素晴らしい仕事をなしとげています。 我々はKiteDeskのユーザーエクスペリエンスをアプリのような感じにデザインしたので、オフラインストレージなどの最新のWeb標準の機能が必要となりました。 Ext JSを使うと既存のRESTサービスから情報をロードしてストアに保管し、それをユーザーインターフェースコントロールにリンクするといったことが、規則構成アプローチを使って簡単にできます。

KiteDesk

KiteDeskはPanels・GridPanels・Windows・Buttons・Storesなどのビルトインコンポーネントを沢山使っています。

上のスクリーンショットではKiteDeskのメッセージを表示しています。 左の列ではメールアカウントとフォルダを一覧するためにExt JS Grid Panelのサブクラスを使っています。 Grid Panelはインタラクティブなビューを背後のデータストア(この場合はメールアカウントとフォルダ)と結びつけています。 アカウントが追加されたり新しいメッセージでアップデートされたりするとリストも一致するように同時にアップデートされます。 ここではアカウントはアイコンとして表示していて、それぞれの詳細を表示するためにツールチップがあります。

真ん中の列はアカウントのメールメッセージをリストしていますが、Grid Panelを利用してナビゲーションで選択されたラベルとアカウントでメッセージをフィルタリングしています。

KiteDeskはPanels・GridPanels・Windows・Buttons・Storesなどのビルトインコンポーネントを沢山使っています。 アプリに独特なルックアンドフィールを与えるためにいくつかのアプリケーション専用のコンポーネントも作成しました。 例えばMessagesのメールクライアントで独特でインタラクティブなカード形のフォーマットでメッセージを表示しようとしました。 受信箱をチェックするユーザーはメッセージのスレッドを一つひとつ見るので、そのカードを出来るだけ軽量にして、速くレスポンシブルなユーザーエクスペリエンスにしたいと思いました。

我々がExt JSを選択したのは、美しいビルトインコントロールとシンプルだがパワフルなプログラミングツールがある、完全で堅牢なクライアントサイドフレームワークを提供しているからです。

我々のカスタムMessageCardコンポーネントはExt JS Containerコンポーネントをベースにしていて、 ヘッダー、ボディー、フッターがあり、 それぞれはピュアに生成されたHTMLで他とは独立して更新できます。 HTMLを利用すると我々のコンポーネントを軽量に保つことができるため、描画や更新や消去が速くなります。 一つのクリックハンドラーがカードのどの部分がクリックされたか判断して、返信、転送、未読にする、などの適切なイベントを発火します。 MVC規則に従って、これらのイベントは適切なコントローラーによって処理されます。

MessageCardの以前のバージョンではExt JSの標準のボタンや他のコンポーネントで作られていましたので、迅速にプロトタイプを作ったり異なったアプローチやレイアウトを試すのが簡単でした。 一番良いのに決めたら、手作りのHTMLを生成するためにコンポーネントをカスタマイズして、パフォーマンスをさらに改善するために各カードで必要なJavaScriptのオブジェクトを最小化しました。

Ext JSのドキュメンテーションは本当に素晴らしいので、我々のチームでは素早く簡単に学べ、フレームワークを最大限に利用できました。 ドキュメントのオンラインバージョンにはとても役立つユーザーのコメントもついている点が素晴らしいですね。 そしてもちろんSenchaフォーラムもとても有益で役に立ちました。

全体的にExt JSはしっかりとして成熟したフレームワークですから、安心して我々のプロダクトを作成できます。 Senchaコミュニティも優しくて博識な方ばかりでそれもとても役立ちました。

我々のアプリケーションをシームレスに繋ぐためにExt JSが提供するパワフルなイベントサポートを多方面で使いました。 例えばメッセージで星のアイコンをクリックするとそのメッセージがお気に入りに入ります。 裏側では、そのクリックはstarMessageイベントを発火し、それはMailControllerがハンドリングして、そのアクションの割り当てられたロジックを処理します。 そのイベントは“Star Message”のメニューアイテムを選択してもトリガーされますし、他の好きな方法でもできます。しかしソースに関わらずそのイベントはMailControllerで受け取られて処理されます。 これはまた、ビュー(ユーザーが見て操作するもの)と背後のコントローラーロジックを奇麗に分けるようにするという、Ext JSでMVCアーキテクチャを生かす方法の例となります。

KiteDesk

KiteDeskのユーザーは別々のカレンダー上でイベントを生成したり管理したりできます。 標準のExt JSコントロールを使うと、簡単に洗練されたコントロールでデータ連携フォームを生成することができます。

Sencha Ext JSを使うビジネス上の価値

Ext JSは完全に拡張可能な環境を提供し、開発者をコーナーに追い込むことがありません。 これは我々の製品戦略のコアとなる部分です。 なぜなら我々のJava開発者のチームを効率的に素早くHTML5ベースのプロジェクトに移動させることができたからです。 膨大で高品質なドキュメンテーションのおかげで素早く我々のチームを準備できました。 サードパーティーの異なるコントロールや競合するコアプログラミングモデルを利用するという挑戦はしていません。 最初のプロトタイプは他のJavaScriptフレームワークを利用するよりずっと早く完成しましたし、美しくモダンなUIを生成できました。 Ext JSを使うことで、初期のベータ版を素早く作成することができたので、早い段階でユーザーのフィードバックを得ることができ、フレームワークが提供する生産性の高さと相まって時間とコストを節約することができました。

新人の開発者へのアドバイス

Ext JSでアプリケーションをより簡単に作成できるようになります。 フレームワークは本当に取っつきやすいので、すぐにでもアプリケーションの開発を始めたくなります。 まず始めにサンプルやドキュメンテーションを調べる事をお勧めします。 Ext JSに組み込まれているMVC規則を上手く利用すれば書くコードを最小化できます。 もし自分が沢山のコードを書いていることに気づいたとしたら、それは多分フレームワークのコアな機能やベストプラクティスを見逃しています。 イベントハンドリング・CSSの編集やフレームワークのその他の機能はプロジェクトの始めに理解したほうが良いでしょう。 なぜなら、それら機能を使うことで長い目で見れば時間を大きく節約できます。

おわりに

Ext JSは素晴らしいフレームワークでExt JSとSencha Touchで共通に使われているExt CoreはHTML5ベースのアプリケーションにとってパワフルなプログラミングモデルです。 これで我々の開発者がもっと効率的になってKiteDeskを素早く進化させられるようになりました。

PAGETOP