HOME > 開発者向けBLOG > Sencha Blog >  Sencha GXTで巨大データを管理するインタラクティブなWebアプリケーションを作る

Technology Note 開発者向けBLOG

Sencha Blog

Sencha GXTで巨大データを管理するインタラクティブなWebアプリケーションを作る

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

この記事は、US Sencha社ブログ Using Sencha GXT To Build Interactive Web Apps That Manage Big Data を翻訳したものです。

この記事では弊社DatenwerkeがSencha GXTを使って、どのように ReportServer というオープンソースBusiness Intelligenceプラットフォーム製品を作成したかを説明します。まず、我々の製品の開発と設計のチョイスに大きく影響しているビジネスインテリジェンスとレポートのビジョンを紹介したいと思います。

ReportServer dashboard

ReportServerダッシュボードはSenchaGXTポータルレイアウトを使って簡単にアクセスできるレポートとブックマークを表示しています。

我々のビジネスインテリジェンスプラットホームの開発を始めたときに、多くの既存ソリューションは、ユーザーが自分のデータに関して深い知識をもって自分の分野の専門家になるより、このツールとレポートの専門家になっている必要がありました。この要件のために、通常はレポート処理を三つのフェーズに分けていくようになりました:

  1. 要件指定のフェーズ、「データ専門家」が「ツール専門家」に何が必要か教えようとするとき。
  2. 開発フェーズ、ツールとレポート専門家が理解したことを開発する。
  3. 全てがうまく行ったら、最終結果がデータ専門家に提供されて、やっとデータ専門家が日常の作業にリポートを利用することができます。

この過程は明らかにいくつか弱点があります。失敗しそうな点が多くあり、お金と時間がかかりますし、ユーザーが素早く始めることが出来ないし、レポートを変更するのが難しくなります。

我々のビジョンはこの過程を横切って、「ツール専門家」の追加のヘルプが必要ではない状況にして、データ専門家にレポート要求の最も大きい部分を管理するパワフル、単純、感覚的なツールを提供することでした。 その他に、百や千ものレポートとユーザーを管理するソリューションを探す必要があって、ユーザーグループがレポートをするために協力できるプラットホームを提供し、全ての操作のモニタリングと管理をするためにシステム管理者が必要なツールを提供できるソリューションを探す必要がありました。

オープンソースのレポートプラットホームとして、特定のレポートタスクには、よく知られているオープンソースライブラリが既存しているため(例えば、Eclipse BirtやJasperReportsを使ったpixel-perfect reporting)、Javaは明らかなオプションとなります。しかし、我々のビジョンのためには、大きいレポートプラットホームが必要な機能性を全て駆動する「感覚的だがパワフル」なユーザーインターフェイスを生成することが可能となるフレームワークを見つけるのが必要でした。

まずは、いくつかのJava EEフレームワークを評価しましたが、ほとんどは残念なものでした。二つの原因のどっちかにひっかかっていました:ユーザーインターフェイスの構成がとても静的である、例えばXMLでは静的であまりインタラクティブではないGUIになります)、またはJavaScriptでクライアントサイドを全て開発してある。そうなると一つではなく、二つのアプリケーションを管理することになり、その上に複数のブラウザ用にJavaScriptコードを管理する問題も発生します。以前のプロジェクトで良い経験があったため、Sencha GXTを試すことを決めました。

GWTには開発を始めるために、よくテストされ、カスタマイズ可能で、魅力的かつ、ハイパフォーマンスなUIコンポーネントが無かったので、Sencha GXTを選択しました。

Java開発者にとって、GWTを利用するとサーバーサイドとクライアントサイドのコードをJavaで書けるため、GWTはとても自然に感じます。その上、GWTコンパイラから出てくるJavaScriptのコードはとても最適化されて、ほとんどの場合は非常によく動作します。その上、インターフェイスを(例えばXMLで)静的に定義するより、動的にコーディングすると、開発者がハイパフォーマンス、インタラクティブ、(できたら)感覚的なインターフェイスを実現できるようにさせます。 GWTには開発を始めるために、よくテストされ、カスタマイズ可能で、魅力的かつ、ハイパフォーマンスなUIコンポーネントが無かったので、Sencha GXTを選択しました。

Sencha GXTには開発を非常に簡単にさせる、ドキュメントが整備された、多くのコンポーネントがあります。ソースコードも含まれているので、GXTを拡張するときの利点になります。Sencha GXTは新しいGWT機能と技術を利用して、GWTのベストプラクティスとシンクロしているようにしていて、そのためGWTに詳しい開発者はGXTに馴染むのも速くなります。GXTで提供されている多くのUIコンポーネント以外に、イベントハンドリング、データストアの扱い、カスタムCSSの反影、ドラッグアンドドロップの実装などにひょり、クライアント側のロジックをコーディングすることを簡単にします。

TeamSpace

TeamSpaceはSencha GXTのツリー、グリッド、listviewを利用します。右側のオブジェクトプレビューはカスタマイズできるタブで簡単に拡張できます。

Sencha GXT high-performance grid component

Sencha GXTのハイパフォーマンスなグリッドコンポーネントで大きいデータセットを表示できることが可能となります。ユーザーがプレビューから直接レポートを再構成できるようにコンテキストメニューを使っています。

Sencha GXT form components

管理者レポート部分にはSencha GXTフォームコンポーネントを使いました。またアプリケーションの中央にツリーを利用しました:左にレポートツリーが見えます。

Sencha GXTを利用して作成した機能の概要です。

ReportServerにログインするとダッシュボードモジュールが表示されます。 ここでは、ユーザーは複数のダッシュボードタブを保管できて、一つのクリックで大事な情報を取得することができます。 スクリーンショットをご覧ください。 基本のSencha GXTテーマを使って、我々のバージョンを生成しました。 Sencha GXT 3からはコアコンポーネントは 表面パターン Appearance Pattern を利用していますので、テーマを適用する処理が簡単になりました。ダッシュボードのレイアウトには、GXTと納品される既存のレイアウトコンテナに作成しましたので、この場合はほとんどポータルレイアウトコンテナでした。

上に説明したように、感覚的で簡単に使用できるインターフェイスを欲しかったのです。ツリー、データビュー、ツールバー、のような様々なGXTコンポーネントのお陰で、ユーザーがデスクトップパソコンの日常作業で馴染んでいるワークフローやコンポーネントを複製することができました。その上、GXTのお陰でドラッグアンドドロップ、またはコンテキスト特定の操作でオブジェクトを操作する自然に感じる方法を取り込めるようになりました。様々のReportServerモジュールは上端のナビゲーションバー経由でアクセスされます。ユーザーに対して最も重要なモジュールはTeamSpaceモジュールで、ユーザーのグループにワークスペースを提供します。ここでユーザーが一緒にレポートについて作業をできて、レポートの定義を共有できます。このモジュールは基本的なエクスプローラー風のコンポーネントのインターフェイスに基づいて、左側にはオブジェクトの階層的なビューを提供し、右側には現時点で選択されているオブジェクトに対する情報を提供しています。TeamSpaceについて大事なポイントは、ここではユーザーのグループで作成されたオブジェクトのビューはそれぞれ独立しているし、特に管理グループがあるレポートオブジェクトのビューからは独立しています。

レポートを二つの種類に分けています:グラフィカルレポートと動的リストです。グラフィカルレポートはレポートデザイナーが手作業で作ったもので、通常は管理者が利用し、ピクセルパーフェクトなPDFにエクスポートされます。その一方では、動的リストがあります。これはReportServerが臨時にレポートをする方法です。動的リストは普段とても大きいテーブル(いわゆる何百カラムと何百万行が含まれているテーブル)に基づいて、。動的リストのプレビューコンポーネントは選択されたデータのプレビューをすぐに提供できて、そのデータをアプリケーション内から直接みることができます。

「ツリー、データビュー、ツールバー、のような様々なGXTコンポーネントのお陰で、ユーザーがデスクトップパソコンの日常作業で馴染んでいるワークフローやコンポーネントを複製することができました」

もし管理モジュールをご覧になると、様々なオブジェクトの管理モジュールが見つかります(レポート、ユーザー、リソース、その他)。この時点で特にSencha GXTが提供する多様な管理モジュールからの恩恵がありました。このお陰で再利用できるコンポーネントを生成できて、開発がより簡単になるだけではなく、ユーザーインターフェイスも統一でき、その結果、ユーザーが楽しい体験ができるようになります。

Sencha GXTはたくさんものを提供しています。まずはデモのエクスプローラーを参照して、サンプルで遊ぶべきです。それからGXTコードをご覧になればいいです。こうするとGXTはどう利用するべきか理解できるだけではなく、それとともにGXTについて教育されます。もし複雑なレイアウトを目指しているなら、GXTで納品される異なるレイアウトコンテナ、どう連動するか、どう拡張できるか理解するために少し時間をかけたほうがいいです。最後に、アプリケーションの作成を始める前に、GXTコンポーネントはどのようにデータをアクセスするか時間をかけて慣れるようにして下さい。これは様々なストアを見たり、GXTと利用するためにデータモデルがどう実装されるべきか学ぶことです。もしデータモデルが正確であれば、他のものは全て自然に揃います。

GWTは小・大のインタラクティブなウェブアプリケーションを開発するためのフレームワークです。Sencha GXTは素晴らしい付き加えられたもので、開発者が素敵な外観と使用しやすいユーザーインターフェイスを作成できるツールを全て提供します。もしあなたが今ウェブアプリケーションフレームワークを評価する処理に入っているなら、GWTとSencha GXTの組み合わせは上位を占めているはずです。

詳しくは、弊社のオンライン デモシステム をご覧ください。 “demoadmin” (パスワード:demoadmin)でログインして、ReportServerを少し触ってみて下さい。

PAGETOP