「RIAの最新技術動向」 参加報告＠ソフトウェア開発環境展 専門セミナー

更新日：

http://www.sodec.jp/jp/conference/

参加対象

  1. 2009/05/13（水）13:20-16:10 [SD-4] RIAの最新技術動向

● 今なぜRIAなのか？ UIから変わる業務システム ～事例を交えた実践的UI改善の紹介～

ソシオメディア（株） 取締役 コンサルティング事業部長
上野 学

  • RIAは、Rich Internet Aprication の略。
  • UI（ユーザインタフェース）デザインについて
    1. 「われわれの周りに存在されるものは、すべてデザインされている」 Clement Mok
      • 社会的・個人的・経済的な流れが交差している場合、どこにあるのか見当もつかない合流点は、たいていはデザインによってもたらされる。
    2. 「テストはデザインの代わりにはならない」Alan Cooper
      • テストによって観察者は、複雑さや混乱の可能性を減らすことができる。
      • しかし、適切なソリューションをゼロから創り上げるには、デザイナーの手が必要である。
      • ユーザインタフェースデザインは、芸術ではない。
      • しかし同じように、創造性が鼓動している。
    3. 人が道具を利用する際に、接する部分。
    4. コンピュータなどのシステムを操作する際に、情報の入出力を仲介するもの。
    5. ハード（物理的）なものと、ソフト（認知的）なものがある。
      • ソフトウェアのデザインを決めるときは、認知的な特性（心理学の分野）を考慮する必要がある。
    6. ユーザは、UIを通してのみ、システムとインタラクトできる。
    7. ユーザにとっては、UIこそが製品そのもの。
    8. UIによって、ユーザが知覚するシステム像を創り上げる。
  • UIデザインの原則
    1. 「作業に対するニーズというものが、ユーザごとに異なっているとしても、ユーザ集団は多くの一般的な心理属性を共有している」Jef Raskin
      • つまりインタフェースデザイナーは、アプリケーションの調査や個人差を埋める作業をする前に、全人類が共通して持っているインタフェースデザインに対する要求を活用して、自らの作業量を低減させることができる。
    2. ユーザに主導権を与える。
      • 自分のやりたいことが、自分のやり方で、思い通りにできることが重要。
    3. 直接操作の感覚を与える。
      • ダイレクト・マニピュレーション
      • 操作の対象に直接働きかけているような挙動。
    4. 一貫性を高める。
      • 見た目の一貫性。
      • 同じ機能を持っているボタンの配置場所。
    5. 目に見えるようにする。
    6. 操作を可逆性にする。
      • 操作ミスをユーザが自分で取り消せるようにする。
        • それは試行錯誤であって、ミスとは呼ばなくなる。
    7. モードを減らす。
      • 特定の操作が状況によって異なること（＝モード）。
    8. エラーを回避する。
      • 何か入力した値が、バリデーションに引っかかった場合の表示。
      • エラーを出す前に、エラーにならないようなUIを考える。
    9. マジョリティに最適化する。
      • 利用頻度の高い操作は、操作しやすくすることで、効率化が促進される。
    10. ユーザの作業を加速化する。
        • ユーザにとって、どのようなデザインならば効率よくなるかを、考える。
  • なぜRIA?
    1. Rich
      1. リッチなUIコンポーネント。
      2. リッチなデーアビジュアライゼーション
    2. 技術的観点からの特徴
      1. ページ全体をリロードせずに、ページの一部のUIおよび表示データを変更する。
      2. UIのコードを先にロードし、後はデータのみを通信する。
    3. ユーザの作業効率を向上
      1. モードレスで、段階的な作業を可能に
      2. 直接操作によるオブジェクト指向の操作性
      3. 大量の情報を効率的に表示／非表示する。
    4. モードレス
      1. 操作の主導権をユーザに持たせる。
      2. 現在のモードを意識することなく、自由な手順で作業を進められるようにする。
    5. 直接操作
      1. 操作対象及び動作の連続的な表示。
      2. 複雑な構文ではなく、物理的動作やボタンによる動作。
      3. 操作対象への影響が即座に見られる高速で逐次的かつ可逆的な操作
    6. フレキシブルペイン
      1. シングルウィンドウ内に複数のオブジェクトビューをタイルする。
      2. 操作に応じてペインの開閉やペイン内の表示更新を行う。
      3. ペイン同士はモードレスに自律するが、同じ作業内容を共有する。
  • [事例] Adobe Flex + AIR による大規模業務システム開発
    1. ユーザインタフェースの改善が重要ということを真剣に考えた事例。
    2. ユーザビリティ向上への取り組み：工程全体を通して「UCD（ユーザ中心設計）」アプローチを実践
      1. 事前検討段階～要件定義段階
        • 旧システムのユーザビリティ評価およびユーザビリティガイドラインの策定
        • UIプロトタイプによる初期ユーザ検証
        • UIガイドラインの策定
      2. 設計～実装～テスト段階
        • UI管理の専任者がガイドラインを随時ブラッシュアップ
        • システム全体で一貫して用いるフレームワーク／カスタムコンポーネントの開発と改善をスパイラルに実行
      3. リリース段階
        • ユーザ研修環境の整備と対応
    3. RIA採用の目的
      1. 脱ブラウザ
        • ローカルリソースへのアクセス、クライアント環境の統一など。
      2. 操作性向上
        • 様々なデータを一覧させながら、各種検索や入力作業に柔軟に対応できる新しいUIを実現する。
    4. UI開発上のハードル
      1. Flexのノウハウがあまり蓄積されていなかったため、UIに関する部分で大きな労力がかかった。
        • 開発を通して徐々にノウハウを蓄積。
      2. 厳しいクライアント環境要件を満たさなければならなかった。
        • 結合テスト段階でレスポンスの問題が浮上。
        • 改善プロジェクトを急遽立ち上げ。
        • 表示速度を最大200％向上させることに成功。
    5. 結果
      1. 初期段階からユーザを巻き込む「UCD」アプローチは、関係者への啓蒙活動の成果もあり、成功。
        • 「業務要件 Ｘ UIルール」の問題は、適宜解決。
        • コアチームにユーザサイドのメンバーを含めていたため、ユーザ要件の拡散を抑えることが出来た。
        • 十分なユーザ研修によって、スムーズな移行を実現出来た。
      2. UIガイドラインおよび基盤部品の整備により、画面デザインや操作性の一貫性向上。
        • RIAならではの柔軟な表現力と、高い利便性を実現出来た。
  • RIAによる業務システム開発成功のポイント
    1. 最上流工程からUIに取り組む
      • RIAを採用する意味のある業務かどうかを検討する。
      • 製品価値を左右する重要事項として、早期に、操作性についてのコンセプト作り、UIプロトタイピング、UIガイドライン策定、実現可能性検証を行う。
    2. UIに関する工数を適切に見積もる
      • UI重視のシステムでは、バックエンドと同等もしくはそれ以上の労力がフロントエンド実装に必要となる。
    3. 下流工程でもデザインの変更を可能にしておく
      • UIに関するコードを適切にフレームワーク化／コンポーネント化し、要求の変化に対応できるようにする。
      • 特にRIAは、クライアント環境への負荷が高く、下流工程でのチューニングが欠かせない。
  • [Q] たたでさえITへの投入コストが高いのに、さらにUIに対して投資を迫るのは大変なのでは。
    • [A] UIをきちんとやろうとすると大変。どの画面が重要か、あらかじめ定義することが必要。
    • [A] 予算を決める意志決定者に対してのアプローチは、いくつかある。
      • 意志決定者ときちんとコミュニケーションをとり、意志決定者が持つUIに対する価値観を把握することが必要。
      • エンドユーザが操作している景色を録画して、意志決定者にその録画を見せ、現状を気付かせることが大事。

● RIAを実現する最新テクノロジー

マイクロソフト（株） デベロッパー＆プラットフォーム統括本部 デザイナー製品部 UXエバンジェリスト
神原 典子

  • RIAとは
    1. 一般的に、Rich Internet Applicationの頭文字として知られ、「アール・アイ・エー」や「リア」と呼ばれる。
    2. 「豊かな表現力を持ち、より機能的で、操作性の良いWebの仕組みを表す概念」（引用：RIAコンソーシアム）
  • RIAの適用シナリオ
    1. リアルタイムに情報把握
    2. 迅速にビジネス戦略を立てる
    3. 日々の業務を円滑に行う
    4. 短期間で人を育てる
    5. デジタル文書と紙を活用する
  • RIAの実例
    1. ガジェットの活用
      • 株価や天気を瞬時に把握
      • より直感的で、パッと見てすぐわかることが大事
    2. 経営指標の可視化
      • 経営状況をグラフや図で可視化することで、直感的に状況把握
      • 素早い意志決定を可能に
        • 例）SHARPのSAP用意志決定支援ツール（AIRを採用）
    3. ポータルの活用
      • 自分の業務に関する情報を一箇所に集約
      • すばやい情報の検索と活用を可能に
    4. オンライントレーニング化
      • 必要なときに必要なトレーニングのみ選択受講で効率的なスキルアップ
      • 確認テストで理解度チェック
  • 代表的なRIAの技術

  • AIR（オンライン・オフライン）
    1. リッチなデスクトップアプリケーションを作成できる
      • Adobe Integrated Runtime （現在Ver 1.5）
      • Windows、Macintosh、Linux上で動作
    2. 魅力的なインタフェースが実現できる
      • 魅力的な外観を持つアプリケーションを作成
      • Flash Palyerを内包しているので、.swfも実行可能
      • ローカルのAdobe Readerと連動してPDFファイルを表示できる
      • AIR単体でWebページを表示できる
    3. 気軽に開発できる
      • JavaScript、ActionScript、HTML、CSSといったWeb技術を利用して開発可能
      • 既存のWeb開発リソースが利用可能
  • FLASH（オンラインのみ）
    1. リッチなデスクトップアプリケーションを作成できる
      • Webブラウザ向けの軽量なプラグイン（現在Ver10）
      • 高い普及率
    2. 表現力豊かなコンテンツが作成できる
      • 高い自由度で豊かなクリエイティブ表現が可能
      • アニメーションを駆使した魅力的なキャンペーンやバナーを直感的に作成可能
      • 高度なテキスト、サウンドもサポート
    3. 気軽に作れる
      • Adobe Flashツールを使ってGUIベースで作成可能
      • 複雑な動作はActionScriptを使って開発可能
      • 充実したカスタムフィルタやエフェクト
    4. クロスプラットフォーム、クロスブラウザ対応
      • Windows、Macintosh、Linux、Solaris、携帯（Flash Lite）
  • FLEX（オンラインのみ）
    1. リッチなWebアプリケーションを作成できる
      • 開発者向けのFLASH
      • ブラウザ上でFLASHプラグインを使って再生
    2. より開発者向け
      • FLASHより業務的な画面を作成するのに向いている
    3. 開発がしやすい
      • FLASHと同じActionScriptを使用
      • UIはMXML（Macromedia Flex Markup Language）で開発
    4. クロスプラットフォーム、クロスブラウザ対応
      • Windows、Macintosh、Linux、Solaris、携帯（Flash Line）
  • WPF（Windows Presentation Foundation）
    1. リッチなデスクトップアプリケーションを作成できる
      • .NET Framework 3.0以上の一部（現在Ver 3.5）
      • Windows Vistaは標準でサポート、WindowsXPは追加インストールで可能
    2. 優れたユーザエクスペリエンスが実現できる
      • 多種多様のデータ（データ、テキスト、画像、映像）、大量の情報を直感的に扱える魅力的なアプリケーションを実現
      • 特に複雑多岐に渡るデータを活用する分野で効果大
    3. 開発、メンテナンスがしやすい
      • デザインとコードロジックの分離により開発、メンテナンスが容易
      • 従来のテクノロジーとは比較にならない開発工数で構築可能
      • VB、C#を使って開発可能
  • さらにWPF4.0では
    1. 現状の最新バージョンはWPF3.5
    2. Windows 7 リリース時に、WPF4.0をリリース予定
    3. マルチタッチをサポート
    4. 充実したエフェクトにより、表現豊かに
    5. 充実したコントロールを使って開発が容易に
      • データグリット、リボン、グラフ
    6. グラフィックの質とスピードを向上
      • GPUをさらに活用して、素早い処理を実現
      • レンタリングクオリティの向上
      • 高画質なメディアサポート
  • Silverlight
    1. リッチなWebアプリケーションを作成できる
      • Webブラウザ向けの軽量なプラグイン（現在Ver.2）
      • 優れたユーザエクスペリエンスが実現できる
      • 多種多様のデータ（データ、テキスト、画像、映像）、大量の情報を直感的に扱える魅力的なアプリケーションを実現
      • 特に複雑多岐に渡るデータを活用する分野で効果大
      • Deep Zoom により、情報の俯瞰から詳細把握までを一瞬で実現
    2. 優れたメディアコントロール
      • ハイパフォーマンスなHD画質（高精細）ビデオ配信
      • DRM（Digital Rights management）を利用した著作権保護
    3. 開発、メンテナンスがしやすい
      • デザインとコードロジックの分離により開発、メンテナンスが容易
      • JavaScript、VB、C#、Ruby、Pythonを使って開発可能
    4. クロスプラットフォーム、クロスブラウザ対応
      • Windows VISTA/XP/2000およびMac OS X 10.4.8以降
      • Internet Explorer 6/7/8、FireFox 1.5/2/3、 Safari
  • さらにSilverlight 3では
    1. マルチタッチをサポート
    2. より表現力豊かに
      • 疑似3D、アニメーションエフェクトが利用可能
      • キャッシング技術の向上による描画パフォーマンスの向上
      • 充実した高度なエフェクト、アプリケーションテーマ
    3. 60個以上のコントロール追加により開発が容易に
    4. 検索エンジン最適化（SEO）への対応強化
    5. ブラウザ外での動作サポート
    6. デザインツール、Expression 3による開発生産性の向上
    • [質問] Silverlight3の下位互換性は？
      • [回答] 完全下位互換性です。
  • Ajax
    1. ダイナミックなWebアプリケーションが作成できる
      • XMLHttpRequestによる非同期データ通信により、Webページをリロードせずにダイナミックなページ書き換えが可能
    2. 標準的な技術で開発可能
      • JavaScript + XMLで開発可能
      • メンテナンスが困難
      • Ajax開発フレームワークを含んだASP.NETなどを使うことで、ソースコードを書く量を減らし、開発の簡素化が可能
    3. クロスプラットフォーム、クロスブラウザ対応
      • JavaScript実行可能な標準的ブラウザであれば、実行可能
  • RIAの開発における頻出項目
    1. データを見やすく表現する
      • 色や図形、グラフ、表形式、ツリービュー
      • オープンソース（Visifire http://visifire.com/）を活用したWPF、Silverlightのグラフ
      • jQueryのjQchartを活用したAjaxのグラフ
    2. さまざまなメディアを組み込む
      • 動画、地図など
      • Silverlight Streaming（Windows Liveの無償ホスティングサービス）を活用して、高精細動画配信
        • 10GBのスペース
        • 動画の最長時間：10分
        • 最大ビットレート：1.4Mbps
        • 1ファイル：22MB
      • Windows Live APIを活用し、Virtual EarthをSilverlightに組み込む
    3. 配布・管理する
      • 配布とアップデート
      • オフラインでの利用
      • 自動更新機能を利用する
        1. WPFの場合
          • .Net Frameworkに搭載されたClickOnce機能を使ってアプリケーションを配布・更新
            • サーバに配置、Web経由で配布
            • 配布後自動更新が可能
            • ロールバックも可能
        2. AIRの場合
          • Update Framework for Adobe AIR Applications（AIR 1.5 SDKに内包）を使って、自動更新を実現
        3. Silverlightの場合
          • バージョン3のオフライン実行時にも、自動更新をサポート
    4. システムを拡張する
      • クラウドへの拡張
      • .NET RIA Serviceを用いて開発しておくことで、スムーズな移行が可能


  • [Q] WPF <=> Silverlight間の互換性は？
    • [A] ない
    • [A] どちらを採用するか、あらかじめ決めておく必要がある
  • [Q] AIRとWPFを比べると？
    • [A] WPFはGPUをフル活用するので、AIRよりは処理が早い
    • [A] ただし、速度に関しては、GPUのフル活用はDirextXのバージョンに左右されることが理由で、Windows 7 > VISTA > XPの順で遅くなっていく。
  • [Q] SilverlightとJavaを組み合わせるには？
    • [A] 間にWebサービスを経由する。ただし、相互互換性は努力中で、現在SOAPでは失敗することが報告されている。
  • [Q] Windows 7 で配布する .NET Frameworkのバージョンは？
    • [A] 3.5の予定
  • [Q] WPF4.0に必要な.NET Frameworkのバージョンは？
    • [A] 4.0。ただし、Windows XP版の.NET Frameworkについては、配布を検討中。

-Blog

Copyright© fullvirtue.com プロダクトオーナー支援スペシャリストのBlog , 2024 All Rights Reserved.