Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

これからのビジネスにおけるAJAXアプリケーションの形

NetAdvantageで今後のビジネスデマンドを解決する

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/01/15 16:40

多くの新技術が乱立するリッチクライアント分野において、パイオニア的な存在であるAJAXの今なお廃れることのない機能を活用し、これからのビジネスに必要なデマンドを解説します。

はじめに

 現在のリッチクライアント業界は発展の真っただ中にいます。それを象徴するかのように、Windows Presentation Foundation (WPF)、Silverlight/Moonlight、Adobe AIR、Flash/Flex、JavaFXなど多くのリッチクライアントテクノロジーが生み出されています。それらの代表的な特徴は、Webアプリケーションに“まるでデスクトップアプリケーションのような”インタラクティブ性を付加することです。

 その中で、AJAXはリッチクライアントテクノロジーのパイオニア的な存在といっても過言ではないでしょう。後発のリッチクライアントテクノロジーと比べると幾分見劣りのするユーザーインタラクションですが、同じく標準テクノロジーで開発されたSilverlightにも採用されていることでも分かる通り、非同期通信というベーステクノロジーはリッチクライアントを語る上で、なくてはならないテクノロジーとなっています。

 本稿では、その純粋な標準テクノロジーであるAJAXを使って、これからのビジネスに必要なデマンドを解説していきます。

対象読者

 本稿は、次のような方を対象としています。

  • HTTP、ASP.NET、JSPなどのWeb技術を使用して開発したことがある方
  • VB.NET、C#などの.NET技術を使用して開発したことがある方

必要な環境・コンポーネントのインストール

 必要な環境・コンポーネントのインストールについては、『高度なUIのグリッドを使ってAJAXの非同期データ更新を行う』を参考にしてください。

Web 2.0以降のビジネスデマンドは?

 ビジネスのデマンドを語る上で、ある1面だけを語ることはまずないと思います。普通は多くの側面から多角的に検討して、その中で最適な解(ソリューション)を導き出し、その解を実現するために行動するということがビジネスの流れとなります。

 一般的な商業企業の場合、企業の究極のゴールは“金を儲けて”事業を長期的に発展させ、安定することですが、その方法はまさに千差万別。その時々によって多くの方法があります。

 本稿で紹介するのは、今まさに本格化し、一般化してきた「Web2.0」以降のビジネスデマンドです。具体的には、まず多角的な視点として「経営幹部(エグゼクティブ)」「ビジネスユーザー」「ビジネス」という3つの視点から考えていきたいと思います。そして、その結論として「経営ダッシュボード」という考え方を取り上げました。それでは、一つ一つ紐解いていきましょう。

補足:本稿におけるWeb2.0
 Web2.0という定義は「オブジェクト指向」のようにどれが正しいということはなく、あくまで考え方ですし、十人十色という言葉もあるように、考え方には人それぞれ多くの解釈がありますので、漠然とそういうものなのだと考えて良いかと思います。しかし、その中心となる特徴については理解しておく必要があると私は考えています。
私の考えるWeb2.0とは、以下のことがベースとして重要であると思っています。これらを踏まえた上で、読み進めてください。
  • Webアプリケーションでデスクトップアプリケーション並のインタラクティブ性: リッチなユーザー体験、ユーザー参加型など
  • さまざまなネットワーク資源の相互活用: Webサービス、P2P
  • OLAP(Online Analytical Processing): ロングテール

経営幹部のデマンド

 ここからは、先に挙げた各々の視点からデマンドを考えていきます。まず最初は、会社経営において最も重要な位置にいる経営幹部の視点です。

 経営幹部は、技術的なことやシステムの構成などは経営判断にまったく無縁のものですので考慮しません。何が一番重要かと言うと、経営判断をすばやく的確に行うための情報が揃っていて、一目で確認できるかどうかという点になります。

 そこで、経営幹部のデマンドとしては、「BI(ビジネスインテリジェンス)」になるでしょう。そこから少し詳細に突きつめていくと、以下のデマンドに思い至ります。

サムネイルビュー

 情報システムにおいても、一つの画面で少しでも多くの情報を確認する場合にはサムネイルビューが有効になります。ある程度小さな画面で表示しておき、必要に応じて拡大できる仕組みというのは、今後あらゆる場面で活用されることになるであろうことは容易に想像できます。

ダッシュボード・コンセプト

 ダッシュボード・コンセプトに関しては「経営ダッシュボード」の項で詳しく説明しますが、経営幹部が扱う情報は単一システムのみならず、複数システムの情報を一度に確認したり、そのデータを加工して分析結果として表示することが必要となります。そのため、一つの画面で複数のデータソースを扱い、表示するダッシュボードという考え方が深く浸透してくると考えられます。

ビジネスユーザーのデマンド

 次に業務でシステムを使うビジネスユーザーのデマンドを見ていきましょう。

 ビジネスユーザーに共通するデマンドは常に一定です。それは以下のことです。

使いやすさ

 ビジネスユーザーは使っているシステムがどんなシステム構成でできているか、どんな新しい技術が使われているかはまったく分かりません。分かることは、通常業務でどれだけ使いやすいか、ということのみです。そのため、一般的に次のように考えます。

  • 必ずしも新しい技術でなくても良い
  • 新しいシステムに対しては多くのトレーニング時間が必要
  • 使い慣れたユーザーインターフェイスが良い

 おそらく、システム提案やシステム開発におけるユーザートレーニングを行ったことがある方なら、同じようなことを言われてきたのではないでしょうか? (筆者も幾度となく言われてきました)

 一時期「使われないシステム」ということで雑誌や書籍などを騒がせたことがありますが、新しいソフトウェア開発は実際に“使われない”ことが多々あります。使われないということは、そのプロジェクトは失敗ということになってしまいます。

 そのビジネスユーザーの使いやすさをよりよくするために必要なこととして「ユーザー体験(ユーザーエクスペリエンス)」という考え方があります。これは使いやすさの向上を目的とし、分厚いマニュアルがなくとも直感的にシステムの操作が可能なシステムを構築することなどが代表的な例です(参考:ユーザー・エクスペリエンスって何だ?)。

ビジネスのデマンド

 最後はビジネス全体のITシステムにおけるデマンドです。

 昨今のビジネスは進歩がとても早く、瞬時に的確にビジネスチャンスを掴む必要があります。そのため、ITシステムもそれに応える必要があるので、デマンドとしては「ハイパフォーマンス」で「ハイスピード」であることが、より必要とされます。

ハイパフォーマンス

 ここでのハイパフォーマンスは、システム自体の反応速度のことを指します。従来の同期通信のように、一つのことをやるとそれ以外のことはできなくなる単方向の処理ではなく、非同期通信のように、必要なデータのみを瞬時に処理させる双方向の処理が重要となってきます。そのため、システム構築においても「AJAX」の重要性が高まることとなるでしょう。

 本稿で紹介する「ASP.NET AJAX」は、このAJAXをよりビジネスに活用するために作られた洗練されたAJAXフレームワークで、以下のメリットがあります。

  • 既存アプリケーションとの親和性
  • 高度な機能の実現
  • 開発時間の短縮

ハイスピード

 ここでのハイスピードは、システムの開発スピードを指します。前述の通り、昨今のビジネススピードはとても早く、ビジネスチャンスを逃さないためには必要なときに必要なシステムがなくてはなりません。そのため、今までであればすべてのシステムを一度に数か月~数年のサイクルで構築を行っていましたが、今後は1か月以内のサイクルで必要な機能を追加する開発スタイルが主流となってくると考えられます。

 例えば、最小限のベースシステムをインストールし、必要なときに必要な機能を拡張することができるERPパッケージ製品として「Dynamics AX」が、CRMパッケージ製品として「Dynamics CRM」があります。

 また、このハイスピードな開発スタイルに適応するためには、コンポーネント製品の活用も必要となってきます。今回のサンプルに使用する「NetAdvantage for .NET」は、世界トップシェアの.NETコンポーネントスイート製品です。コンポーネント製品を活用することで、次のようなメリットがあります。

  • 最適な開発モデル
  • 高品質の保証

経営ダッシュボード

 「経営ダッシュボード」と言うと、聞き慣れない方もいるかもしれませんが、単に「ダッシュボード」と言えばご存じの方も多いと思います。さて、どんなものなのでしょうか?

 車に乗る方ならピンと来るかもしれませんね。そう、車のダッシュボードのことです。車の運転中は、ダッシュボードを熟視するわけにもいかず、瞬時に運転に関するすべての情報を得て、判断しなければなりません。と聞くと、前述した経営幹部の方の経営判断と同じであることに気がつくと思います。

 そのため、そのダッシュボードのコンセプトをITシステム上に取り入れたものを「経営ダッシュボード」と呼びます(図1)。

図1 インフラジスティックス Dashboard アプリケーション
図1 インフラジスティックス Dashboard アプリケーション

 ダッシュボードの定義は「経営上の意思決定や判断を行う上で必要な情報を数値やグラフなどを使用して単一画面で表示する情報システム」です。一般的には、BIやEAI、BPMなどのフロントエンドシステムや企業ポータルとして活用されます。

 ダッシュボードは“経営上の”という言葉が付いている通り、次のような経営データの分析機能を含む場合も多々あります。

  • KPI(Key Performance Indicator)/ KGI(Key Goal Indicator)
  • メジャー
  • メトリクス

ダッシュボードアプリケーションを作ってみよう!

 ここでは、実際に簡単なダッシュボードアプリケーションを作ってみましょう。使用するのは、ASP.NETとNetAdvantage for ASP.NETです。

 NetAdvantageはコンポーネント製品としては珍しく、BI機能を含んでおり、BIにおける画面作成にとても便利なコンポーネントが揃っています。ダッシュボードアプリケーションのようなBIやERP、BPMなどのパッケージにおけるUIは通常、パッケージ製品と一つになっていることが多いですが、そういったUIは柔軟性も操作性も低いケースが多く、それぞれの開発案件に応じてカスタマイズが必要になることも少なくありません。NetAdvantageでは、専門であるUIのフル機能と、高い親和性のあるSQL ServerのBI機能を備えているほか、カスタマイズの言語に.NETを採用しているパッケージ製品Dynamics CRMとも相互利用を行うことができ、ユーザーエクスペリエンスを高めることにとても優れた製品となっています。

 前置きが長くなってしまいましたが、それでは実際に作ってみましょう。使用する環境はVisual Studio 2005ですが、Visual Studio 2002/2003でも同様の手順ですので、適宜文言を置き換えて読み進めてください。

  1. Visual Studio 2005を起動し、新しいプロジェクトの作成で[ASP.NET Web アプリケーション]を作成(プロジェクト名は任意で結構です)。
  2.  
    図2 [新しいプロジェクト]ダイアログ
    図2 [新しいプロジェクト]ダイアログ
     
  3. [ツールボックス]の[NetAdvantage 7.1 Web]から、「UltraWebGrid」「UltraChart」「UltraGauge」を図3のように配置(ここではコントロールの整理のためにテーブルを使用しています)。
  4.  
    図3 NetAdvantageコントロールの配置
    図3 NetAdvantageコントロールの配置
     
    • 左上: UltraWebGrid1
    • 左下: UltraWebGrid2
    • 右上: UltraGauge1(ここでは、放射型ゲージ「GlacierRadialWithRange」を使用)
    • 右下: UltraChart1(ここでは、立体積層型縦棒グラフを使用)
     
  5. 各コントロールにNorthWindテーブルへ接続するデータソース(SqlDataSource)を定義(ゲージコントロールはBeta版でバインドする設定がないので、後述するイベントで直接バインドします)。
  6.  
    • 左上: SqlDataSource1(SELECTステートメント:SELECT * FROM [Customers]
    • 左下: SqlDataSource2(SELECTステートメント:SELECT * FROM [Orders] WHERE ([CustomerID] = @CustomerID)
    • 右上: SqlDataSource3(SELECTステートメント:SELECT [Subtotal] FROM [Order Subtotals] WHERE ([OrderID] = @OrderID)
    • 右下: SqlDataSource4(SELECTステートメント:SELECT * FROM [Order Details] WHERE ([OrderID] = @OrderID)
     
  7. UltraWebGrid1コントロールに行を選択されたときに発生するイベント「SelectedRowsChange」を以下のよう定義し、選択された顧客の注文データが左下のグリッドデータに表示されるように設定(あらかじめ、UltraWebGrid1コントロールの「行セレクタ」を表示しておく必要があります)。
  8.  
    protected void UltraWebGrid1_SelectedRowsChange(object sender,
        Infragistics.WebUI.UltraWebGrid.SelectedRowsEventArgs e)
    {
        // UltraWebGrid2のデータソースへ条件を設定
        this.SqlDataSource2.SelectParameters[0].DefaultValue =
            e.SelectedRows[0].Cells.FromKey("CustomerID").Value.ToString();
    }
    
     
  9. 同様に、UltraWebGrid2コントロールに行を選択されたときに発生するイベント「SelectedRowsChange」を以下のよう定義し、選択された注文データの詳細が右のゲージやチャートに表示されるように設定(あらかじめ、UltraWebGrid2コントロールの「行セレクタ”を表示しておく必要があります)。
  10.  
    データソースのデータバインドの際に
    protected void UltraWebGrid2_SelectedRowsChange(object sender,
        Infragistics.WebUI.UltraWebGrid.SelectedRowsEventArgs e)
    {
        // UltraChart1のデータソースへ条件を設定
        this.SqlDataSource4.SelectParameters[0].DefaultValue =
            e.SelectedRows[0].Cells.FromKey("OrderID").Value.ToString();
    
        // UltraGauge1のデータソースへ条件を設定
        this.SqlDataSource3.SelectParameters[0].DefaultValue =
            e.SelectedRows[0].Cells.FromKey("OrderID").Value.ToString();
    
        // UltraGauge1のデータバインド処理実行
        DataView dv = this.SqlDataSource3.Select(
            DataSourceSelectArguments.Empty) as DataView;
    
        if (dv != null)
        {
            ((Infragistics.UltraGauge.Resources.RadialGaugeNeedle)
                ((Infragistics.UltraGauge.Resources.RadialGauge)
                this.UltraGauge1.Gauges[0]).Scales[0].Markers[0]).Value =
                dv.Table.Rows[0][0];
        }
    }
    
     
  11. この状態では、AJAX処理が含まれていないため、AJAX処理を行わせるコントロール「WebAsyncRegreshPanel(WARP)」(ASP.NET AJAXのUpdatePanelの拡張版)をそれぞれに配置し、各コントロールをパネル上に配置。(図4)
  12.  
    図4 WebAsyncRefreshPanelの配置
    図4 WebAsyncRefreshPanelの配置
     
    • 左上: WebAsyncRefreshPanel1
    • 左下: WebAsyncRefreshPanel2
    • 右上: WebAsyncRefreshPanel3
    • 右下: WebAsyncRefreshPanel4
     
  13. WARPの非同期通信をそれぞれのイベント発生とリンクさせるために、LinkedRefreshControlIDプロパティを次のように設定。
  14.  
    • WebAsyncRefreshPanel1: 設定なし
    • WebAsyncRefreshPanel2: WebAsyncRefreshPanel1
    • WebAsyncRefreshPanel3: WebAsyncRefreshPanel2
    • WebAsyncRefreshPanel3: WebAsyncRefreshPanel2
     

 これで準備完了です。[F5]を押して実行してみてください。

図5 Dashboardサンプルアプリケーション
図5 Dashboardサンプルアプリケーション

 複数のデータソースやAJAXを使ったダッシュボードアプリケーションが簡単に完成したことが分かると思います。文章では少しややこしく見えたかもしれませんが、実際に書いたコードはたったの6行です(ゲージコントロールは次のバージョンでは正式版となり、バインド設定が含まれるので、実質3行になります)。

 なお、NetAdvantageはもっと多くのコントロールが含まれているスイート製品で、ここではそのうちの一部しか紹介してませんが、使い方やプロパティの名前はPresentation Layer Framework(PLF)と呼ばれるベースフレームワークの下で統一されています。

まとめ

 本稿では現在から未来にかけてのビジネスデマンドを中心に3つの視点からデマンドを考えていき、それらをすべて解決するための製品として「NetAdvantage」を紹介しました。私が考えるデマンド以外にも個々の案件にはユーザーごとに違うデマンドがあると思います。それらに対して柔軟に対応するためには、また乱立する競合他社との競争に勝つためにはNetAdvantageのような完成されたコンポーネントスイート製品が必要不可欠となってくるでしょう。

 もし、NetAdvantageに興味を持っていただいた場合は、インフラジスティックス・ジャパン社のWebサイトに詳しい説明が載っていますので、ぜひご覧ください。これからのビジネスに柔軟に対応していただきたいと心より願っています。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 松原 晋啓(マツバラ ノブアキ)

    アーティサン株式会社 取締役副社長 兼 CRM事業部長(CRMエバンジェリスト) リベルダージ合同会社 社長 兼 最高経営責任者(ドローンインストラクター) SE、アーキテクト、コンサルタント、エバンジェリスト(Microsoft MVP for Dynamics CRM)、マイクロソフトの...

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5