Comments
Description
Transcript
Web 2.0 のユーザインタフェース技術 ― Ajaxとリッチ
Web 2.0のユーザインタフェース技術 ― Ajaxとリッチクライアント ― （財）電力中央研究所 システム技術研究所 二方 厚志 [email protected] 第2回JSIA技術調査研究会 報告の構成 Web 2.0 の概要 2 概念 技術 ビジネス Web 2.0 の UI Ajax リッチクライアント （RIA） Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 3 1. Web 2.0の概要 Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Web 2.0とはなにか? 今後のWebの方向性のキャッチフレーズ 4 Webでの協調作業やコミュニティ形成にフォーカス “ユーザ” のネットワークをWeb上に再現 技術や概念、ビジネスモデル等を含む 現状を追認 明確な定義はない Tim O’reilly の“What is Web 2.0” が原典に相当 http://www.oreillynet.com/pub/a/oreilly/tim/news/200 5/09/30/what-is-web-20.html CMP Media が Web 2.0で商標登録中（カンファレン ス名称） Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 What is Web 2.0 5 戦略： プラットフォームとしてのWeb ユーザ： 自分自身のデータのコントロール 核となる要素（Core Competencies） ソフトウェアでなくサービス ユーザ参加のためのアーキテクチャ 費用対効果に優れたスケーラビリティ 整理・統合を前提としたデータ 特定機器に依存しないソフトウェア 集合知の利用（harnessing） Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 What is Web 2.0 6 Web 2.0の特徴 豊かなユーザ体験： Gmail, Googleマップ, Ajax ロングテール： Google AdSense 分散（P2P）： BitTorrent ユーザへの信頼： Wikipedia ユーザ参加： Blog ユーザの寄与： Amazonのレビュー、eBayの評価 Tagging(Folksonomy)： Flickr、ユーザによる自由 なタグ付け Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 What is Web 2.0 7 Web 1.0 → Web 2.0 DoubleClick → Google AdSense （広告モデル） Ofoto → Flickr （写真共有） Akamai → BitTorrent （ダウンロードサービス） mp3.com → Napster （音楽ダウンロード） Britannica Online → Wikipedia （百科事典） personal websites → blogging （個人の情報発信） evite → upcoming.org and EVDB （イベント運営） Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 What is Web 2.0 8 Web 1.0 → Web 2.0 domain name speculation → search engine optimization （訪問数の確保方法） page views → cost per click （訪問カウント方法） screen scraping → web services （情報再加工） publication → participation （情報発信形態） content management systems → wikis directories (taxonomy) → tagging (“folksonomy”) （情報の分類方法） stickiness → syndication （ユーザの囲い込み） Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Web 2.0 の理念 Web 1.0 9 クライアント・サーバモデル 情報／サービスの提供者と利用者が明確に分離 情報／サービスの作成はWeb以外の場で実施 Web 2.0 P2Pモデル? 情報／サービスは参加者で作り上げていく Web上でのコラボレーション（協調作業）を実現 コラボレーションのための“場”を提供 情報の共有を効率的に（意味単位で共有） Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Web 2.0 の技術 10 手段（技術） 双方向コミュニケーション／協調作業が可能な仕組 UI： Ajax、リッチクライアント 場： Wiki、SNS、P2P 加工性を重視した情報／サービス Blog＆RSS、XML Webサービス、サービスAPI公開 マッシュアップ（Mash Up） 情報の整理・共有 Tagging（Folksonomy）、Semantic Web Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 マッシュアップ 11 複数の異なるサイトの情報やサービスを組み合 わせて、新しいサービスを作成 Google Maps と不動産情報を組み合わせて、不動 産の紹介サービスを作成 http://www.housingmaps.com/ Sun×RECRUIT Mash up Award カーセンサーラボ、Smatch、じゃらん、フロム・エー の API を利用したマッシュアップコンテスト http://jp.sun.com/company/Press/release/200 6/0605.html Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Blog & RSS Blog 12 簡単に情報発信 記事単位でコンテンツを管理 トラックバック 記事毎にネットワークを形成 リンク元が明示 RSS（RDF Site Summary） RDF： Resource Description Framework サイトの更新情報／ヘッドラインの配信 Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Folksonomy（Tagging） ユーザが主観的にWeb上の情報を分類・整理 “Folks” と “Taxonomy” を合成した造語 属性情報を記したタグを画像や記事等に付加 ユーザによる簡易評価にも利用（“cool!”） Flickr（http://www.flickr.com/） 13 写真の共有サービス 自分が撮った写真に自由にタグ付け タグによる検索が可能 便利ではあるが、意味に個人差あり Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Web 2.0 のインタフェース UI の要件 14 操作性 操作した結果が直ぐに反映 作業が待たされない Ajax やリッチクライアント／RIA を利用 Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Web 2.0 でのビジネス ロングテール 15 インターネットにより市場が拡大 → ニッチ狙い アフィリエイト： 塵も積もれば山となる Web 2.0 での展開 アフィリエイトが進化 ニッチ市場のユーザをコミュニティ化 ニッチ専用のポータルに相当するサイト／サービス をユーザに作成してもらい、緩く囲い込む 企業は情報やサービス API を提供 レビューや評価、ランキング等の情報を取得 Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 16 今後の展望 Web 2.0 という言葉が残るかどうかは疑問 Web 2.0 には、顧客が参加する動機付けが含まれて いない 個々の技術やコンセプトは残る しかし、現状でも一部のユーザがボランタリで参加 ユーザ参加に関してもロングテールでよいのではないか 魅力的なサービスがコアとしてあった場合に、Web 2.0 としてのビジネスが成立するのではないか ユーザを惹きつけるサービスが基本 ビジネスとして成功するかどうかは Web 2.0 とは無関係 サービスの進化／登場とともに、 Web 3.0、4.0 と呼ばれる かもしれない Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 17 2. Ajax Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Ajax の定義 18 Asynchronous Javascript + XML “Ajax: A New Approach to Web Applications” by Jesse James Garrett において Ajax と命名 http://www.adaptivepath.com/publications/es says/archives/000385.php 構築技術は5年以上前から存在 （DHTML関係） 本質は非同期なWebアプリケーション Javascript、XMLである必要性は本来はない 広義の意味： 新規性＋ JS で OK XML を使ってなくても Ajax と呼ばれたりする Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Ajax の特徴 Asynchronous サーバからの返答待ち時間を減らすために非同期 な通信を導入 静的Webと異なり、更新中でも画面操作可能 Javascript 19 特殊なプログラム無しで動作（ブラウザ依存性あり） インターネット上の不特定ユーザ向け XML（eXtensible Markup Language） ページ単位ではなく、必要なデータのみをXML形式 で通信・更新（XMLHttpRequest 等を利用） Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Ajax で用いられる技術 標準技術 20 プレゼンテーション： XHTML、CSS 表示内容の取得／更新： DOM（Document Object Model） データ通信： XML データ変換： XSLT 非標準技術 非同期通信： XMLHttpRequest ブラウザ依存 W3Cで標準化中 Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Ajax の仕組み 21 Webブラウザ Webブラウザ JS関数コール HTMLリクエスト HTMLリクエスト Webページの データ送信 Webサーバ DOMによる 部分更新 Ajaxエンジン（JS） XMLHttp ビューページ Request の送信 XMLデータ の送信 Webサーバ ページ作成 DBサーバ DBサーバ 従来のWebアプリケーション XMLハンドリング サービスAPI Ajax アプリケーション Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Ajax の仕組み 22 Webブラウザ Webブラウザ アプリ転送 HTMLリクエスト HTMLリクエスト Webページの データ送信 Webサーバ JS関数コール DOMによる 部分更新 Ajaxエンジン（JS） XMLデータ XMLHttp の送信 ビューページ Request の送信 データ送信 Webサーバ ページ作成 DBサーバ DBサーバ 従来のWebアプリケーション XMLハンドリング サービスAPI Ajax アプリケーション Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Ajax のコード 23 function loadTextFile() { IEでは ActiveX の HTTPXML を利用 httpObj = new XMLHttpRequest(); httpObj.onload = displayData; 返答データ受信時のアクション記述 httpObj.open("GET","data.txt",true); （受信イベント発生時に非同期に実行） httpObj.send(null); データをサーバに送信して終了 } 返答は待たない function displayData() { document.ajaxForm.result.value = httpObj.responseText; } DOMによる表現： form ajaxForm 中 の textarea result に返答を書き込む <form name="ajaxForm"> <input type="button" value="読み込み" onClick="loadTextFile()"><br> <textarea name="result" cols="40" rows="5"></textarea> </form> Ajaxを勉強しよう（http://www.openspc2.org/JavaScript/Ajax/Ajax_study/） Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Ajax の適用分野 やろうとすれば、大抵のことはできる Googleマップ、Yahoo地図情報、不動産マップ スケジューラ／Webメール Javascriptによるアプリ作成と同等 高度なデータ処理はサーバが担当 地図を中心としたサービス 24 同一のビューでデータのみ更新 デスクトップ・アプリケーションの代替 ワープロ、表計算ソフト、･･･ Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Googleマップ 25 http://maps.google.com/ Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Smatch（リクルート住宅検索） 26 http://search.smatch.jp/smatch/ Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 27 desknet’s with Ajax （NEOJAPAN） http://www.desknets.com/ajax.html Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Google Spreadsheets 28 Javascriptベースの表計算サービス ベータ版、英語版のみ （Google Labs） http://spreadsheets.google.com/ Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Ajax の利点 Flash 等の RIA プラットフォームと比較 特殊なプラグインが不要 Web の標準技術を利用 不特定ユーザを対象としたインターネットでは有利 ユーザ数が多い大企業でも有利 Webページとして実現 29 通常のWebと親和性が高い Flash はブラウザ内に独自の世界 無料の開発環境がある RIA の開発環境はほとんどが有料 Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Ajax の弱点（1） Web標準に関する多岐にわたる知識が必要 30 XHTML、XML、DOM、Javascript、CSS、･･･ ブラウザ毎の非互換性の知識も必要 従来のWebアプリでも本当は必要 互換性 ブラウザ毎に異なる挙動／書式／関数 XMLHttpRequest／HTTPXML、JS、CSS、DOM、･･･ 同一エンジンのブラウザでも Javascript/DOM のエラー （IEエンジンを使った Sleipnir） Ajax非互換性データベース http://ajax.atmarkit.co.jp/jsicdb/main/ Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Ajax の弱点（2） 開発の難しさ スクラッチからのアプリケーション開発 非同期アプリの適切な設計は難易度が高い 開発環境・ライブラリは整備されつつある XMLHttpRequest の制限 31 同一ドメインとしか通信できない マッシュアップには不向き？ 表現能力の不足 HTML／CSS の表現能力には限界 レイアウト、アニメーション、エフェクト、･･･ Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Ajax の弱点（3） 32 情報セキュリティ 従来のWebアプリより攻撃可能な箇所が多い クライアントにコードの一部が存在 関数、変数、パラメータ、クエリ等の情報が分かる バックエンドシステムにアクセスするAPIが分かる データ入力のみでなく操作を模した攻撃が可能 関数やAPIのパラメータはチェックされない場合も 多い セキュアでないサンプルコードを基に実装する例が 多い Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 33 開発環境（1） 50以上の開発フレームワークが存在 http://www.maxkiesler.com/index.php/weblog/comments/round_up _of_50_ajax_toolkits_and_frameworks/ 当然 Eclipse 上にも存在 Flash、Java 等とのブリッジも存在 Google Web Toolkit β（Google） Ajax Toolkit Framework （IBM） Java で開発したアプリを Javascript+HTML に変換 IE、Firefox、Mozilla、Safari、Opera に対応 Atlas Framework （Microsoft） ASP.NET 2.0 で Ajax の開発を可能に MSN の Start.com で試用中 Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 34 開発環境（2） Bindows （商用） 非常に多様なライブラリ／API を提供 desknet’s with Ajax も Bindows を利用 デスクトップアプリに近いWebアプリを構築可能 http://www.bindows.jp/ Javascript ライブラリ prototype.js： 定番。処理によっては途方もなく遅い jQuery： 独特の記法を採用。クイックハック向け http://sample.ecmascript.jp/20060414.ppt http://jquery.com/ Dojo Toolkit： Javascriptパッケージ集（Ajaxバージョンあり） http://dojotoolkit.org/ Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 ベンダの取り組み 35 OpenAjax Alliance Google、IBM、Yahoo!、Mozilla、Adobe、Intel、 Opera、SAP、Sun 等 開発環境等を整備 比較的 Eclipse に重点 （Sun が入ったので変わるかも） 各社のサービス API 等も対応 Yahoo、Google、リクルート、･･･ リッチクライアントも Ajax が利用可能に Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Ajax 技術の親戚 JSON（JavaScript Object Notation） 36 XMLの代替 Javascriptで書かれたオブジェクトでデータ交換 eval することでプログラムから参照可能 他ドメインとも通信可能 IETF で標準化中 Arax（Asynchronous RPC + XML） Flashベース RPCでサーバと交信 Javascript を Flash に置き換えたようなアプローチ Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 37 今後の展望（1） あえて Ajax化が必要なWebページは多くない 開発環境の整備にともない弱点は克服されつつある 向いている分野では利用が盛んになる 対象をブラウザ上で直接操作するインタフェース 地図、３Dモデル操作等 双方向性コミュニケーション チャット、電子会議等 同一レイアウト画面でデータのみ更新 スケジューラ、メーラ等 頻繁なデータ交信 オンライン株式取引、リアルタイム情報提供サービス等 Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 38 今後の展望（2） 現在のインターネット上での利用方法では Flash の代 替にはならない 企業内のアプリケーションとしての普及は限定的 操作可能な簡易ムービーとしては表現力が足りない あまりデザイナー向きではない 向いている分野に限る パッケージ導入（+カスタマイズ）が主流か？ 大企業では、配布時の負荷集中を考慮して Ajax を選択 広い意味での Ajax はデスクトップアプリの代替になる 可能性も Ajax という言葉は残らない可能性も Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 39 3. リッチクライアント Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 リッチクライアントとは ファットクライアント： 専用クライアント UIは良いが、配布が面倒 プラットフォーム毎に開発 シンクライアント： Webクライアント 40 基本操作の習得や配布が楽 画面遷移が多いと操作性が最悪 通信が頻発しパフォーマンスが低い リッチクライアント： 両者のいいとこどり 良い UI と楽な配布 高生産性と管理のし易さを両立 Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 41 リッチクライアントの分類 得意分野 アプリケーション系 汎用クライアント 帳票系 データ入力のための帳票クライアント プラットフォーム Web型 ブラウザ上で稼動 独立型 独立したクライアント。配布・更新が自動化 Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 リッチクライアントの利点 優れた UI 操作性、即応性に優れる 管理・運用コストが低い 自由度の高いインタフェース 業務フローに対応した画面設計 ユーザの生産性が高い 42 配布・更新コストが低い 環境依存性が低い 開発環境が整備 充実したライブラリやAPI Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 リッチクライアントの弱点 専用のプラグイン等が必要 Javaベースであれば不要 Flash、Acrobat、Curl、･･･ 言語／ライブラリ／クラスの習得が必要 開発環境が有料 43 OpenLaszlo はオープンソース ブラウザと操作体系が異なることも ベンダロックインが気になる Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Flex 2 44 Flash リッチクライアントの開発・実行ツール群 Adobe （Macromedia を買収） Flash Player 8.5 ベース MXML（Macromedia FleX Markup Language） ActionScript 3.0 （ECMAScript（Javascript）準拠） Eclipse で稼動 高度な画面遷移制御が可能 Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Flex 2 の構成 45 Flash Player 8.5 ActionScript 3.0 ECMAScript4（Javascript）準拠 + OO 従来より10倍高速 ECMAScript for XML を実装 MXML（Macromedia FleX Markup Language） コンポーネントの位置、プロパティを XML で記述 1 コンポーネントが 1 タグ： <mx:Button> 状態毎に画面定義が可能 Flex Framework 2： ActionScript用クラスライブラリ Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Flex 2 の構成 Flex Builder 2： ビジュアル開発環境 Eclipse プラグイン版もある コンポーネントのドラッグ＆ドロップ イベントドリブンな画面遷移制御が可能 MXMLの編集も可能 Flex Enterprise Services 2： サーバ環境 46 実行環境と開発環境を分離 多様なメッセージングサービス／データサービス Flex Charting Components 2： グラフ描画 凝ったグラフが簡単に Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Flex 2 と Ajax の比較 47 Yahoo! Maps β:Flex vs Google Maps:Ajax スクロールの操作感や機能は同等 ボタンを離す毎に Flashプラグインを実行 → 面倒 Flex から Yahoo! Maps API を利用可能（MXMLで記述） http://maps.yahoo.com/beta/ Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Flex & LiveCycle Acrobat と連携 48 入力データを電子書類（PDF）に記入し、オフライン で作業可能 作業結果をデータとしてサーバに記録 PDF フォームを使ったワークフロー 動的なアクセス制御 セキュリティ機能 電子署名／暗号化 Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Open Laszlo（ラズロ） 49 RIA を開発・配布するプラットフォーム Laszlo Systems社（http://www.laszlosystems.com/） 開発言語 XML ベースのオブジェクト指向言語 LZX JavaScript ＆ コンポーネント Eclipse： IDE for Laszlo Flash にコンパイルしクライアントに配布 Ajax にも対応予定 通信は XML ベース Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 IDE for Laszlo 50 http://www.eclipse.org/laszlo/ Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Laszlo によるシステム例 51 http://www.laszlosystems.com/lps/sample-apps/amazon/amazon2.lzx?lzt=html Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 Workplace Managed Client 52 IBM の標準クライアント環境 Eclipse RCP（Rich Client Platform）がベース Java コンポーネントの組み合わせ IBM 製品を Java コンポーネント化 ノーツも Java コンポーネント化 （2007年予定） クライアント側でのデータ保持が可能 従来のアプリを管理・動作させるためのプラグインも 用意 Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 53 その他 Curl IdbA クライアント型 SOA を提唱 Sun SOA を強く意識： 他のアプリ／サービスが利用可能 開発フレームワークを作成中 機能テストツール QTP に対応 Ajax with J2EE： Java と Ajax の連携を強化 帳票系 業務パッケージとの連携 Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 現在の傾向 Ajax、Web 2.0 への対応 Ajax、XML 等が利用可能に SOAへの対応 54 Webサービスが利用可能に 既存アプリ等との連携機能 多様なコンポーネントを用意 開発環境の整備 データエントリ専用のクライアントなら部品を配置す るだけでほぼ完成 ライブラリ／クラスも充実 Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 55 今後の展望 企業内での採用は進んでいく 本命は Adobe （Flash、Flex 2、LiveCycle） 一覧表示等でのHTMLベースのUIは操作性が悪い アクセス制御やセキュリティ対策を考えると、HTML は面倒 デファクトスタンダードの融合は強い 問題は開発・実行環境のコスト 対抗は Open Laszlo か？ 日本では帳票系リッチクライアントも生き残る Ajax とは棲み分けるのではないか Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 56 参考文献 @IT： リッチクライアント & 帳票フォーラム キーマンズネット： リッチクライアント http://www.atmarkit.co.jp/fwcr/index.html http://www.keyman.or.jp （要登録） 富士通： RIA化の概要 http://software.fujitsu.com/jp/macromedia/Tech nicalInformation/RIA_intro.pdf 既存のクライアントのFlexを使ったリッチ化 Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日 57 謝辞 本資料は、7/18の第2回JSIA技術調査研究会で 報告した資料を、研究会に参加された会員の方 の御意見を反映して改訂したものです。議論に加 わって頂いた会員の皆様に感謝いたします。 Copyright (C) 2006 CRIEPI, All Rights Reserved. 2006年8月28日