HOME > 開発者向けBLOG > Sencha Blog >  Ext JS カスタマースポットライト: Greentree International

Technology Note 開発者向けBLOG

Sencha Blog

Ext JS カスタマースポットライト: Greentree International

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

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

Stephen Sims

Greentree International は、1つの大きなこだわりを持った、テクノロジーとビジネスの専門家の集まりです。そのこだわりというのが、「最高のビジネスソフトウェアを作る」ということです。我々の ERP ソフトウェア製品の最新版、 Greentree4 は、中規模企業のための新世代ビジネスマネージメントソフトウェアの先駆けです。タッチが使えるようになった Ext JS 5 のリッチなフレームワークを使うことで、ERP ソフトウェアを囲んでいた古い環境や壁を壊しています。Greentree は幅広く認知されていて、世界で1万社以上、20 以上の産業で使用されています。お客様からは、彼らのビジネスがソフトウェアのおかげでいかに変化していったかとの声をよく聞きます。

Ext JS、Sencha Touch、Cmd を選んだわけ

我々は以下の点をカバーできる、包括的で、リッチなユーザーインターフェースフレームワークを求めていました。

  • クロスプラットフォーム:  特定の OS やブラウザベンダーに依存せず、できる限り幅広い種類のデバイスで動く必要がある。
  • パフォーマンス:  レスポンシブなユーザー体験をユーザーに提供できるくらいパフォーマンスが良いこと。これは遅延や低帯域での接続を含む。
  • 柔軟性:  柔軟な製品にも対応できる豊富なユーザーインターフェースを提供しなければいけない。例えばドラッグアンドドロップ、テーマ、ページンググリッド、ツリー、アドバンスドドロップダウンやサーチ、アニメーションやエフェクト、など。
  • カスタマイズ可:  Greentree のユニークな要求に応えられるようにフレームワークを強化、そして拡張できなければならない。
  • サポート:  アクティブな開発者コミュニティーがあり、強力なサポートフォーラムがあること。
  • リッチなライブラリ:  沢山のウィジェット、サンプル、開発者ドキュメンテーションのセットがあること。

Sencha Ext JS は、我々の必要としていた上記の要件を圧倒的に満たしていたのでフレームワークとして選択しました。代替案として考えていたのは DOJO、jQuery、YUI、QooXDoo、そして DHTMLX です。Sencha フレームワークを選んでから Ext JS と Sencha Touch の知識や使い方を覚え、Greentree4 を世に送り出すことに成功しました。


Ext JS を使うことで、我々のユニークなデスクトップアプリケーションを、複数のデバイスに渡って扱えるブラウザベースの製品に変身させることができました。その見た目や雰囲気をカスタマイズするのは、Sencha テーマガイドや Sencha Cmd、SASS、Compass を使うことで非常に簡単でした。

Ext JS 5 のおかげで、デスクトップ、タブレット、タッチデスクトップの世界に強力で豊富なシングルページ インターネットアプリケーションを出荷することができました。

我々のお客様はデスクトップでの体験をタブレットに求めていました。つまり、Ext JS 5 以前では、我々の RIA を Sencha Touch を使ってタブレットで届けるということは一つの挑戦となっていました。しかし、Sencha Touch と Ext JS のコアフレームワークのマージング、そして Ext JS 5へのタッチイベントシステムの実装により、我々の開発労力は大きく削減されました。また、二つのフレームワーク間でのコンポーネント拡張やコード共有はものすごく簡単になりました。

我々はパフォーマンスに注力しているため、Ext JS のバッファード データストアや、実装されているサーバーサイドソーティングやフィルタリングを使いました。我々のグリッドは全て、バッファード データストアを利用していて、DOM フットプリントを最小化し、ユーザーがデータを必要とする時のみロードします。これらの進化したグリッドレンダーやデータストアロード時間により、我々は裏に存在するデータコレクションのサイズがパフォーマンスに影響を与えないことがわかりました。そのため、どんなデータのグリッドビューでも追加できることを確信しました。


Sencha Touch バッファード レンダラーが Ext JS に追加されたことで、グリッドの DOM フットプリントは削減され、タブレットのグリッドスクロール体験もかなり向上しました。

Ext JS フレームワークはコンポーネントと Ext.dom.Element 抽象化のおかげで、複雑なウェブアプリケーションの製作が簡単になりました。DOM を直接扱う必要がなくなったため、我々はユーザーが自分たちのフォームを WYSIWYG デザイナーを使ってカスタマイズできるスクリーンデザイナーを作ることができました。


スクリーンデザイナーはタブレット、デスクトップ、もしくは両方の様々な属性をカスタマイズすることができます。

進化したパフォーマンス

Sencha Cmd と GRUNT タスクランナーが合わさったことにより、ビルドプロセスがより強化、そして簡素化されました。そして、バージョンアップグレードやアップグレードテストがシームレスになりました。

また、プロダクションビルドの開発、テスト、最適化を手助けするマルチ環境ビルドプロファイルの定義付けも簡単になりました。

  • Production –完全に最適化、圧縮されたシングルファイルリソース
  • Testing –最適化なし、非圧縮シングルファイルリソース
  • Development –最適化はなし、マイクロローダーを使用

パフォーマンスがキーとなる要件の一つでありましたが、Sencha Cmd プロダクションビルドと最適化設定 (app.json ファイルで設定可能 )のおかげで、デスクトップと特にタブレットでのアプリケーションのパフォーマンスは劇的に向上しました。

Sencha Ext JS、Touch、Cmd を利用した場合のビジネス的価値

3年前、混乱が起きるほど進化を遂げている新しい技術の波が押し寄せてくる中、我々は ERP エンジンを新しい方法でレバレージできることを見込めました。我々は可能な限り才能豊かなグローバルチームを結成しました。R&D への投資を更に増やし、強力であった既存のシステムやお客様の投資をレバレージするというゴールを決め、経済的な利点をより幅広いオーディエンスに向けて発信できるよう、最新の技術を使用して新しいプラットフォームでの機能性を高めることに力を注ぎました。

ビジネスソフトウェアでは、実際に見えない部分がおそらく一番大事だったりします。そのため、アーキテクチャやエンジニアリングについて話さなければなりません。Greentree4 の新しい機能性は正しく適切な基礎の上に作られています。Sencha Ext JS 5 は、豊富なコンポーネントを持った強力な HTML5 フレームワークを提供してくれます。これは、自分たちでそういったコンポーネント作らなくてすむため、大きなアドバンテージとなりました。Ext JS 内の幅広いコンポーネントライブラリを使用することで、我々独自のユニークなユーザーデザインに素早く適応させることができました。これをゼロから作っていた場合は、計り知れない時間がかかっていたでしょう。

Greentree4 は、ユニークなシングルユーザーインターフェースデザインで、タブレットとデスクトップで同等のユーザー体験が得られるようにデザインされています。タッチが有効化された Ext JS 5 のリリースにより、開発者二人の1年間分の労力を削減することができました。これは同じアプリケーションをタブレットなどのタッチデバイスにそのまま出荷できるからです。

我々のサーバーベースのアーキテクチャは、今ではデバイスによって求められているユーザー体験を届けることができます。タブレットやデスクトップには Ext JS 5 を使い、画面のより小さいスマートフォンには Sencha Touch を使っています。これにより、どんなデバイスでも説得力あるユーザー体験を提供できています。また、Sencha Cmd を使ってビルドを最適化することでパフォーマンスを最大限まで高めています。

お客様が「ドラッグアンドドロップで使える Ext JSベースのスクリーンデザイナー」などの機能を使うことで、彼らのユニークな要望に沿って拡張とカスタマイズができるようにすることで、我々の戦略的アドバンテージを維持しています。

それに加え、我々の競合相手のほとんどは未だに1年周期でしかアップグレードを届けられていません。我々は継続的なデプロイを提供し、Sencha Cmd と GRUNT タスクランナーを結合したことにより、ビルドプロセスがより強化、簡素化されたことにより、バージョンのアップグレードやアップグレードテストがシームレスになりました。我々はお客様の利益となるものをより早く届けることができます。

新しい開発者へのアドバイス

  • Sencha プロフェッショナルサービスと接触し、あなたのアーキテクチャやコーディング構造をレビューしてもらい、ベストプラクティスを使った最高のパフォーマンスを得ましょう。
  • Sencha プレミアムサポートに登録し、質問に対する素早い回答を得ましょう。
  • ベータ版に参加し、Sencha に建設的なフィードバックを提供しましょう。
  • Sencha Community に参加し、他の開発者から学びましょう。

最後に

我々は Sencha と近い関係を築き上げてきました。そして、そのことによって両方の組織が得たものは大きかったと思います。Ext JS 6 を使うことで、Greentree4 に更なるビジネス機能性を追加できることを楽しみにしています。

PAGETOP