HOME > 開発者向けBLOG > Sencha Blog >  Ext JS およびSencha Architect の顧客ご紹介 – Ornua

Technology Note 開発者向けBLOG

Sencha Blog

Ext JS およびSencha Architect の顧客ご紹介 – Ornua

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

この記事は、US Sencha社ブログExt JS and Sencha Architect Customer Spotlight – Ornua (2016年2月3日| Kevin Woods) を翻訳したものです。

Ornuaは農業食品の商業協同組合であり、アイルランドの酪農家や乳製品加工業者等の組合員に代わり彼らの乳製品を販売しています。本社をダブリンに置き、100カ国以上を輸出先とするアイルランドの酪農輸出の約60%を担っており、年商は20億€を超えています。会社の目的はアイルランドの酪農製品の安定したルートを築き、アイルランドの酪農家の未来を守ることです。Ornuaは世界中で目にするKerrygoldというブランドのオーナーでもあります。Pilgrims ChoiceやDublinerチーズ、MU、そしてアフリカで人気の高い粉ミルクのBEOなどの製品を持っています。

Ornuaはまた、包装施設やブレンド施設をドイツ、イギリス、アメリカ、そして中東に置いています。たくさんの研究開発経験があり、世界の有名な食品製造会社に食品材料ソリューションを提供しています。

Ornuaアプリケーションの目標

QUBE はクラウドプラットホームのアプリケーションであり、Ornuaグループのバイヤーとサプライヤーが規格書や証明書を開発、発行、維持管理するためのシステムです。こういったニーズに応えられる製品はマーケットに存在しませんでした。

規格書や証明書はこれまで、静的ドキュメントツール(ワードやPDF)を利用して手作業で管理しており、ファイルシステムで、または場合によっては紙の文書として保管していました。バイヤーとサプライヤー間のコミュニケーションは基本的には電子メールでとられます(場合によっては紙やファックスでも)。文書や修正条項がメールでやり取りされ、様々な紙文書や電子文書に分散し、規格書や証明書の最新の状態を一目で把握することが難しい結果となっています。

QUBE は現在、アイルランドの酪農産業で60のサプライヤーを抱え、180のユーザーと1000以上のマスター規格書を扱っています。

なぜSencha Architect とExt JS を選んだか

我々はこれまで、アプリケーションの機能はほぼサーバーサイドに実装し、フロントエンドにはわずかでした。QUBE アプリケーションはよりプロフェッショナルな見た目と直観的な機能性を必要としており、Sencha Architect のテンプレートやツールボックスにより、シンプルかつ強力なインターフェースを設計することができました。またExt JS のおかげでこれまでないほどの非常に豊富なユーザーインターフェースを実装することができました。

開発チームは見た目よりも機能性に注力しがちです。我々はグラフィックデザイナーでないため、素晴らしいアプリであっても見た目に関してはプロとは言えないものを開発してしまいます。Architect はドラッグアンドドロップでグリッドやチャートなどのコンポーネントをキャンバスに配置できるため、コーディングしかできない開発者でも見た目の素晴らしいものを作ることができます。

特に便利だと感じた機能は:

ドリルダウンチャート – あるデータの詳細を掲載することで強力なオーバービューのページを作成することができました

Ornua App - Drill-down Charts

カスタムビルドクラス(Sencha社 Daniel Gallo作成) -CORSの仕組みを利用してExt JS から Amazon S3ストレージに直接アップロードすることができるようになりました。非常に強力な機能です

Ornua App - A Custom-Built Class

ドラッグアンドドロップ機能 – 重宝したExt JS の非常に豊富な機能はドラッグアンドドロップゾーンです。この機能を使って、グリッドでのオーダリングをユーザーが再編集できるようにしました。我々はこの情報をバックエンドのデータベースと同期しました。こういった機能性はお客様の期待を超えるものとなりました。

列クリックイベント – ユーザーがグリッド内のデータを変更し、それをデータベースに同期させるようにしました。これによりデータ管理は非常に簡単で直感的なものとなりました

Ornua App - Row Click Events

グリッドフィルタリング – グリッド上のリモート/ローカルフィルタリングオプションにより、グリッドは非常に扱いやすく、検索もしやすくなりました。

Ornua App - Grid Filtering

選択可能なグリッド – 複雑な要件に対して簡単なソリューションを提供することができるようになりました: JavaScriptの配列をサーバーサイドに戻して処理させることで、X個の規格書をY個のサプライヤーに1つの動きで発行します

Ornua App - Selectable Grids

アクションカラム – 規格書の処理要件が複雑であるため、ユーザをガイドする直感的なアイコンやツールチップを備えたアクションカラムを使用しました。そして、getClass関数を使用することでいくつかのアクションカラム機能を再利用し、必要なカラムの数を削減しました。

Ornua App - Action Columns

必要な時だけデータをロードすることによるパフォーマンス向上 – QUBE のAdmin機能は非常に複雑で細かいため、開設時にデータをロードするパネルを使いました。この設計のおかげて素早くロードするシンプルなインターフェースが実現し、複雑さを隠すことができました。

Ornua App - Load Data When Needed

運命的な相性の良さ – アプリはAmazon AWS で動いています。フロントエンドとしてのExt JS とAWS の相性がよいことはすぐに証明されました。最上級のフロントエンドプラットホームと最上級のクラウドプラットホームを合わせて作り上げたサービスです。アプリはElastic Beanstalk にホストされており、AWSメールサービスやファイルストレージ、ドメイン管理、ログ採取、データベース、スケジュール管理サービスを利用しています。

コラボレーション – Architect プロジェクトから生成した単一XDAファイルにより、プロジェクトを容易に交換することができました。Architect はある決まった構造をプロジェクトに作るため、チーム全体で同じ基準のアプローチをとることができました。

プロフェッショナルサービス – Daniel Gallo にオンサイトのコンサル業務をお願いできたことはこのプロジェクトが大きな成功に導かれた要素の1つです。彼の経験と専門性はこのアプリの成功には不可欠であり、我々は最適なプラットホームを使用していると確信が持てました。

Sencha Architect およびExt JS を利用したビジネス価値

開発者やビジネスアナリストからなる多忙なチームとして、新しい言語やフレームワークを学習してマスターする時間を作ることは非常に大変です。Architect のおかげで、我々はフレームワークの細部までを学ぶことなく Ext JS アプリを開発することができました。テンプレートやツールボックス、デザインビューは非常に簡単に扱うことができ、素早くアプリケーションを届けることができました。

プロジェクトの単一のXDAファイルを作成できることは、チーム内で仕事が共有しやすくなるということです。また、Architect はプロジェクトにスタンダードな構造を作るため、他の開発者の仕事を理解することが非常に簡単になります。

これから開発される方への助言

これから開発される方には詰まってしまう前にプロフェッショナルサービスとコンタクトを取られることをお薦めします。そして、要望をリストアップしておいてください。Daniel Gallo にコンタクトした際、我々も彼にたくさんの要望や質問がありました。しかし彼のサービスは非常に素晴らしく、どれも素早くこなしてくれました。このようなプロのサービスと関係を維持しておくことは、ペースの早い開発の状況に遅れをとらないためにも重要です。

最後に

また、Ext JS を他のアプリケーションにも利用しました。ERPシステム(Infor M3で構築)とやり取りするポータルや、株の動きをストアに記録し、そのレポートをExt JS のグリッドやチャートを使って閲覧することができるようなポータルを作りました。

Sencha Architect とExt JS を利用したことで、見た目やフロントエンドの機能性において、今まで我々が提供していたアプリケーションの水準を遥かに超えるものを開発することができました。我々の開発したQUBEアプリは、これまでのどんなクライアントソフトよりも機能が豊富であり、かつどの端末でもどのウェブブラウザでも実行することができます。我々はこの先のウェブアプリやモバイルアプリの開発においてもSencha Architect とExt JS を利用するつもりです。

PAGETOP