PowerPoint プレゼンテーション

Size: px

Start display at page:

Download "PowerPoint プレゼンテーション"

なおみのしま
7 years ago
Views:

1 中間表現とフレームワークを用いた Web アプリケーションのメンテナンス法の提案と評価明治大学理工学研究科早川智一長谷川慎哉吉賀祥太疋田輝雄

2 はじめに本研究は,IT の現場で実際に起きている問題を扱ったものです. ご自身が担当 SE になったつもりで ( 皆様ならばどうするか考えながら ) お聞き頂ければ幸いです. 今日のキーワード : 工数 2011/11/25 明治大学理工学研究科 2

3 いきなりクイズ ~ これで今日からあなたも SE~ 工数とはなんでしょう? 以下の? はいくつでしょう? 1 人日 =? 時間 1 人月 =? 人日 1 人月 =? 万円以下のようなアプリの開発はどれくらい工数がかかるでしょう? 四則演算のできる電卓 ( ただし,CUI で ) システム開発は思いの外高い! 2011/11/25 明治大学理工学研究科 3

4 お伝えしたいこと RIA(Rich Internet Application) は便利だが, 互換性に難がある. これは業務での利用時に特に問題となる. この問題の解決を試みた多くの研究やサービスがあるが, 決定的な解決策は未だ存在しない. 我々は中間表現とフレームワークを用いる方法を提案し,3 種の実証例を作成して評価を行った. 各実証例は, まったく異なる3 組のRIA 技術に対して開発を行い, それぞれに対して評価を行った. Ajax から OpenLaszlo,Flex から HTML5, 中間表現から JavaFX 評価の結果は, 我々の方法が前述の問題において工数削減に有用であることを示した. 2011/11/25 明治大学理工学研究科 4

5 アジェンダ 1. 背景 2. 目的 3. 関連研究 4. デモ 5. 提案モデル 6. Web-IR 7. 中間表現 8. フレームワーク 9. 評価 10. おわりに 2011/11/25 明治大学理工学研究科 5

6 背景 (1) インターネットの普及に伴い,Web アプリケーションも普及. 近年では, RIA(Rich Internet Application) と呼ばれる技術を用いた Web アプリケーションが台頭. 例 )Google Maps,Gmail,Youtube, ニコニコ動画,Twitter, Facebook,Mixi,etc 各社が RIA の実装技術をリリース. 非常に多くの種類が存在. 有名な Web サイトは, およそすべてが何らかの RIA 技術を用いて実装されていると言っても過言ではない. 2011/11/25 明治大学理工学研究科 6

7 ちょっと脱線 ~ 我々のまわりの RIA 技術 ~ Ajax HTML5 ブラウザのみで動作 Flex (Adobe 社 ) JavaFX (Oracle 社 ) Silverlight (Microsoft 社 ) OpenLaszlo (Laszlo System 社 ) 実行時にプラグインが必要他にも多数ひとくちに Web アプリケーションと言っても, それを実装する技術はこんなにある. 2011/11/25 明治大学理工学研究科 7

8 背景 (2) しかし,RIA 技術間には互換性が無い. これは,RIA を業務で使用する場合に問題に. 理由 ) 選択した RIA 技術が廃れると, 他の RIA 技術へ移植が必要. 業務アプリケーションはシステム規模が大きく移植コストが大. そして,RIA の互換性の問題はしばしば起こる. 実例 1)JavaFX は 1.x 系と 2.x 系で仕様が大きく変更され, 後方互換性が失われた. 実例 2) モバイル版の Flash Player は新規開発が中止 (2011 年 11 月 9 日発表 ). 2011/11/25 明治大学理工学研究科 8

9 背景 (3) 一方で,RIA 技術を 1 種類に集約することは難しい. 理由 1) 集約はハイリスクハイリターン. 理由 2) 業務要件によって最適な RIA 技術は異なる ( 一般的には Ajax が好まれるが ). 例 1) コールセンターでは応答性が重要. よって, 高レスポンスな ( Ajax 以外の )RIA 技術が好まれる. 例 2) 勘定系業務では, 画面部品の充実度が重要. よって,Flex や Silverlight などの RIA 技術が好まれる. 複数の RIA 技術を使い分けなければならない現状を踏まえつつ, それらの移植性を高める対策が必要. 2011/11/25 明治大学理工学研究科 9

10 目的 ( 特に業務アプリケーションにおいて ) 前述の RIA 技術の移植性の問題を解決する方法を提示する. 必要要件 RIA 技術の趨勢の変化に迅速に対応できること. 業務要件ごとに柔軟な対応ができること. あまり高級になりすぎないこと ( 利用者の使い勝手を考慮 ). 80:20 の法則に従うこと. ( ここでの )80:20 の法則とは (1) 全システムのうち 80% に対応する (20% は特殊で無理 ) (2)1 システムにつき 80% の情報を移植できる ( 残りは手作業 ) (3)20% の工数で 80% の仕様を満たす ( 残りはロングテール ) 2011/11/25 明治大学理工学研究科 10

11 目的 ( 補足 ) 我々の目指すもの RIA 技術の移植を容易にする方法論の提供我々の目指さないもの RIA 技術間の全自動変換 ( トランスレータ ) 2011/11/25 明治大学理工学研究科 11

12 関連研究 (1)~ 論文 ~ 松塚貴英 : 業務アプリケーションに適用する Ajax フレームワーク, 情報処理学会論文誌,2008. 業務アプリケーション用の Ajax フレームワークの提案. 業務アプリケーションは大規模化しやすく, 柔軟に構築するための方法論が必要であると述べている. 類似点 : 効率的な業務アプリケーション用フレームワーク. 相違点 :(1) 対象となる RIA 技術 (Ajax のみか RIA 技術全般か ).(2) 中間表現を用いないか用いるか.(3) 他 2011/11/25 明治大学理工学研究科 12

13 関連研究 (2)~ 商用サービス ~ Wallaby Adobe Systems が提供する,Flash(FLA ファイル ) を HTML5 に変換するサービス. Swiffy Google が提供する,Flash(SWF ファイル ) を HTML5 に変換するサービス. これらのサービスの存在は,RIA 技術間の変換に一定以上の需要があることを示唆するものと考える. 2011/11/25 明治大学理工学研究科 13

14 提案モデル中間表現とフレームワークを使用して Web アプリケーションを汎用化する. 中間表現とフレームワークは特定の RIA 技術に依存しない. 実証例が対応するRIA 1. Ajax 2. Flex 3. HTML5 4. OpenLaszlo 5. JavaFX RIA の他にも Visual Basic やレガシー Web アプリなどにも適用可能. 2011/11/25 明治大学理工学研究科 14

15 変換例 3 種の実証例の変換例をご覧下さい. 1. JavaFXを用いた複雑な変換 2. Flexを用いたUI 変換 3. OpenLaszloを用いた振舞い変換 2011/11/25 明治大学理工学研究科 15

16 変換例 (1)~JavaFX による複雑な変換 ~ 対応 RIA 技術入力 : 中間表現 (Ajax から変換 ) 出力 :JavaFX 注目すべき点複雑な CSS や JavaScript を含むページを, 外観をほぼ崩さないで再現. 力を入れた点中間表現 (XML) から JavaFX(Java 言語 ) への変換. 2011/11/25 明治大学理工学研究科 16

17 IE9 による Web ページの表示 ( 変換前 ) Yahoo! Japan 2011/11/25 明治大学理工学研究科 17

18 JavaFX による Web ページの表示 ( 変換後 ) ブラウザではなく JavaFX になっている. レイアウトはほとんど崩れない ( 僅かに崩れるのはスタイルポリシーの違いによるもの ). Yahoo! Japan 2011/11/25 明治大学理工学研究科 18

19 デモ (2)~Flex の HTML5 変換 ~ 対応 RIA 技術入力 :Flex 出力 :HTML5( 中間表現を経由 ) 注目すべき点 Flex で構成された画面を, 表現力で劣る HTML5 で再現 ( エミュレーションライブラリを併用 ). 力を入れた点 Flex には存在するが HTML5 には存在しない画面部品を, HTML5 と CSS3 のみを用いて再現. 2011/11/25 明治大学理工学研究科 19

20 Flex( 変換前相対座標 ) 2011/11/25 明治大学理工学研究科 20

21 HTML5( 変換後相対座標 ) テキストエリアの大きさが大きく異なっている ( 標準のスタイルポリシーの違い ). 2011/11/25 明治大学理工学研究科 21

22 Flex( 変換前絶対座標 ) 2011/11/25 明治大学理工学研究科 22

23 HTML5( 変換後絶対座標 ) 絶対座標の場合は外観はほぼ同一. ( 実際のアプリケーションは, 絶対値で指定することが多い.) 2011/11/25 明治大学理工学研究科 23

24 デモ (3)~Ajax の Flash 変換 ~ 対応 RIA 技術入力 :Ajax 出力 :Flash( 中間表現と OpenLaszlo を経由 ) 注目すべき点 Ajax の動的書き換えと非同期通信の機能を, 大幅に仕様が異なる Flash で再現 ( エミュレーションライブラリの併用 ). 力を入れた点 Ajax の DOM や CSS の動的書き換え, 非同期通信が Flash でも動作するように再現. 2011/11/25 明治大学理工学研究科 24

25 左 :Ajax( 変換前 ), 右 :Flash( 変換後 ) 2011/11/25 明治大学理工学研究科 25

26 左 :Ajax( 変換前 ), 右 :Flash( 変換後 ) クリックする ( 非同期通信と動的書き換えが発生 ) 2011/11/25 明治大学理工学研究科 26

27 左 :Ajax( 変換前 ), 右 :Flash( 変換後 ) 非同期通信による画像の取得 DHTML による動的書き換え 2011/11/25 明治大学理工学研究科 27

28 左 :Ajax( 変換前 ), 右 :Flash( 変換後 ) クリックする ( ボタンイベントが発生 ) 2011/11/25 明治大学理工学研究科 28

29 左 :Ajax( 変換前 ), 右 :Flash( 変換後 ) ボタンイベントが発生 2011/11/25 明治大学理工学研究科 29

30 左 :Ajax( 変換前 ), 右 :Flash( 変換後 ) 2011/11/25 明治大学理工学研究科 30

31 左 :Ajax( 変換前 ), 右 :Flash( 変換後 ) 2011/11/25 明治大学理工学研究科 31

32 Web-IR(1)~ 概要 ~ Web-IR とは中間表現とフレームワークからなるコアシステムと, それを用いた実証例とを総称したもの. 対応 RIA 技術入力 :Ajax Flex 出力 :HTML5 JavaFX OpenLaszlo 入力の RIA 技術は市場シェアなどを考慮して選定し, 出力の RIA 技術はベンダロックインを避けて選定した. 2011/11/25 明治大学理工学研究科 32

33 特徴 Web-IR(2)~ コアシステムの特徴 ~ 小さな基本部品を多く提供するパーサ類 (HTML,CSS,JavaScript など ) 基本部品を組み合わせて使用する諸元計 135 個のクラスとインタフェース 19,144 行の Java のコードで構成多くの RIA 技術の記述言語は似通っている. 従って, 汎用的で小さな部品を用意しておき, 必要に応じて疎結合して使うのが効率的 ( 例 : パーサ ). 2011/11/25 明治大学理工学研究科 33

34 中間表現 (1)~ 概要 ~ 既存の RIA 技術の共通機能のみをもつ. メリット : 多くのRIAに変換可能デメリット : 表現能力が低下必要に応じて任意の要素を追加可能. 例 ) カレンダーなど追加時の追加工数は僅か (1 人日以下 ). 多くの業務アプリケーションにとって RIA 技術は手段に過ぎない. よって, 中間表現に必要なのは, 機能性ではなく柔軟な拡張性. イメージ図 2011/11/25 明治大学理工学研究科 34

35 中間表現 (2)~ 概要 ~ 内部は 4 部分に分割される. メタ情報ウィジェット情報スタイル情報振舞い情報情報をカテゴリごとに保存することで, 部分的な再利用が可能 ( 例 : 振舞いは無視して画面情報だけ変換するなど ). RIA のクライアント側ロジックは基本的に入力チェックと画面遷移のみ. ビジネスロジックはサーバ側. クライアント側のロジックは十分小さく, 手作業でもテストフェーズで吸収できる. 2011/11/25 明治大学理工学研究科 35

36 中間表現 (3)~ 概観 ~ ファイル形式は XML <?xml version="1.0" encoding="utf-8"?> <application> <meta>  </meta> <widget>  </widget> <style>  </style> <behavior>  </behavior> </application> 2011/11/25 明治大学理工学研究科 36

37 中間表現 (4)~ メタ情報 ~ RIA のタイトルや文字コードなどの情報を格納. 2011/11/25 明治大学理工学研究科 37

38 中間表現 (5)~ ウィジェット情報 ~ RIA のボタンやテキストボックスなどの画面部品に関する情報を格納. 多くの RIA 技術が画面情報の記述に XML を採用している. 入力から中間表現へは情報無損失. 2011/11/25 明治大学理工学研究科 38

39 中間表現 (6)~ スタイル情報 ~ RIA のフォントや文字サイズなどの, 外見に関する情報を格納. 記述形式は CSS を XML 化したもの. 多くの RIA 技術がスタイルの記述に CSS を用いる. 入力から中間表現へは情報無損失. text { font-size: 10pt; } CSS の記述例 <rule> <selector>text</selector> <property> <name>font-size</name> <value>10pt</value> </property> </rule> 左の CSS を XML 化したもの 2011/11/25 明治大学理工学研究科 39

40 中間表現 (7)~ 振舞い情報 ~ RIA のボタンのクリックなどのイベント情報を格納. 記述形式は ECMAScript. 多くの RIA 技術が振舞いの記述に ECMAScript を用いる. XML だと記述量が増えて可読性が低下する. 入力の振舞い情報は, 木と文字列データの形で中間表現中に保存される ( 情報無損失 ). 出力において, 必要ならば変換する. 変換が難しい場合もある. エミュレーションライブラリの併用を推奨. エミュレーションライブラリを推奨する理由 : (1) 記述言語がECMAScriptであるRIA 技術が大多数 ( 文法は一緒 ). 大きな差異は, 組み込みオブジェクト等が異なるなど. (2) 業務によって使う機能は偏っている. 2011/11/25 明治大学理工学研究科 40

41 中間表現 (8)~ まとめ ~ 中間表現は RIA 技術の最大公約数的機能をもつ. 容易に拡張が可能である. 内部で4 分割される. XMLで表現される. 本質的には情報無損失である. 注意点情報無損失とは, 入力側の情報が損失なく中間表現になることを意味するのであり, 見た目や動作がまったく等価であることを意味するわけではない ( それは, 出力時の処理に依存 ). 2011/11/25 明治大学理工学研究科 41

42 フレームワーク (1)~ 概要 ~ フレームワークは, 入力 RIA 中間表現間と中間表現出力 RIA 間の変換を支援. 内部では全情報を DOM(Document Object Model) に似た木構造で表現. SPI パターン (Service Provider Interface) に沿って設計. クラス名ではなく文字列を用いてインスタンスを生成. 新しい RIA 技術への対応や, 既存の機能の拡張が容易. 学習が容易 OOP パターンの多用 (Visitor,SPI など ) 2011/11/25 明治大学理工学研究科 42

43 フレームワーク (2) ~ 重要なクラスインタフェース ~ クラス名インタフェース名説明 Application アプリケーションを表す ApplicationReader アプリケーションを読み取る汎用リーダを表す ApplicationWriter Translator Visitor VisitorTranslator アプリケーションを書き込む汎用ライタを表すアプリケーションを変換するための汎用トランスレータを表すアプリケーションを変換する際のビジターを表す Visitor パターンを用いて実装したトランスレータ 2011/11/25 明治大学理工学研究科 43

44 フレームワーク (3)~ 概要クラス図 ~ クラスとインタフェースは SPI に基づいて設計. 柔軟なインスタンス生成, 部品の組み合わせをサポート. 2011/11/25 明治大学理工学研究科 44

45 フレームワーク (4) ~ 変換アルゴリズム ~ 特徴 Visitor パターンを用いる. メタ情報ウィジェット情報スタイル情報に関しては,XML の木構造を再帰的に変換する形で処理を行う. 振舞い情報は, 抽象構文木 (AST:Abstract Syntax Tree) を対象に再帰的に処理を行う. Visitor パターンは XML と相性がいい. 継承または委譲による再利用で, 既存のコードの上に追加処理のみを書ける. 2011/11/25 明治大学理工学研究科 45

46 フレームワーク (5) ~ 疑似コードによる説明 ~ /** * Web-IR の変換を説明するための擬似コード. * この例では, 入力と出力をそれぞれ Ajax と * 中間表現と仮定している. e0 変換される HTML の要素 e0 と等価な中間表現の要素 */ Element visit(element e0){ switch(e0){ case "<input type='checkbox'>": Element e1 = new Element("<checkbox>"); while(e0.hasmorechild()){ e1.appendchild(visit(e0.nextchild())); } return e1; case "<input type='text'>": Element e1 = new Element("<textbox>"); return e1;... } } 2011/11/25 明治大学理工学研究科 46

47 評価軸評価テスト 1~ 前提 ~ 各 RIA 技術と中間表現間で画面情報が相互にどの程度変換できるか出現頻度による重みを考慮 Web 上のトラフィック上位 10 サイトからクローラを用いて算出. 入力 RIA 技術 Ajax Flex(RIA のシェア双璧 ) 出力 RIA 技術 OpenLaszlo HTML5 JavaFX Ajax を処理できるということは, それ以外の既存の Web アプリケーション ( いわゆるレガシー Web アプリ ) も処理できるということ. 2011/11/25 明治大学理工学研究科 47

48 評価テスト 1 ~ トラフィック TOP10 サイト ~ ランクサイト名 URL 1 Google 2 Facebook 3 YouTube 4 Yahoo! 5 Blogger.com 6 Baidu.com 7 Wikipedia 8 Windows Live 9 Twitter 10 QQ.COM データ提供 :Alexa, Internet. 2011/11/25 明治大学理工学研究科 48

49 評価テスト 1 ~ 集計結果 (HTML 抜粋 )~ ランクタグ出現回数出現率 (%) ( 出現数 / 全出現数 ) 1 a 1, div 1, span img li br button script p option /11/25 明治大学理工学研究科 49

50 評価テスト 1 ~ 集計結果 (CSS 抜粋 )~ ランクプロパティ出現回数出現率 (%) ( 出現数 / 全出現数 ) 1 width 1, padding height display color background margin font-size background-position position /11/25 明治大学理工学研究科 50

51 評価テスト 1 ~ ウィジェット情報の変換率 ~ 入力出力変換率 (%) 重みを考慮した変換率 (%) Ajax 中間表現 Flex 中間表現 44.0 N/A 中間表現 OpenLaszlo 中間表現 HTML N/A 中間表現 JavaFX Ajax に対しては,90% 以上の変換が実現できる. Flex の変換率は低いのは,Flex のコンポーネント数が多いためである ( 中間表現の拡張機能を使えば, 変換率は 100% になる ). 2011/11/25 明治大学理工学研究科 51

52 評価テスト 1 ~ スタイル情報の変換率 ~ 入力出力変換率 (%) 重みを考慮した変換率 (%) Ajax 中間表現 Flex 中間表現 33.3 N/A 中間表現 OpenLaszlo 中間表現 HTML 中間表現 JavaFX Ajax HTML5 以外のスタイルの変換率が低いのは,CSS が実際にはあまり用いられない多くのプロパティをもつためであり, 実用上は問題がない ( ことが多い ). 2011/11/25 明治大学理工学研究科 52

53 評価テスト 2~ 前提 ~ 評価軸 RIA の画面開発による工数を比較. 前提条件被験者はRIAの初学者. 外観が同じになるように作成. 2011/11/25 明治大学理工学研究科 53

54 評価テスト 2~ 作る画面 ~ イメージ図 2011/11/25 明治大学理工学研究科 54

55 評価テスト 2~ 結果 ~ RIA 技術学習コスト ( 人時 ) 開発コスト ( 人時 ) JavaFX OpenLaszlo 単純な画面であっても, 開発には多くの工数がかかる ( スタイルポリシーや流儀の違い, 不慣れが原因か ). 2011/11/25 明治大学理工学研究科 55

56 評価軸評価テスト 3~ 前提 ~ Web-IR の使用の有無による RIA 変換システムの実装にかかる工数を比較. 前提条件 3 種類の RIA の変換システムの試作から評価を行った. 変換対象は画面情報のみ ( 振舞いを含まない ). 2011/11/25 明治大学理工学研究科 56

57 評価テスト 3~ 結果 ~ 入力出力 Web-IRの使用の有無工数 ( 人時 ) 行数 Ajax OpenLaszlo ,450 Ajax OpenLaszlo Flex HTML ,818 Flex HTML ,231 Ajax JavaFX ,156 Ajax JavaFX ,627 Web-IR を用いると,RIA の変換システムを構築する際の工数と行数が 2/3 から半分程度になる ( 設計方法論の強制によるものと推測 ). 数値のマジックに要注意 : 削減率がたったの 1 割でも, 案件規模が 1 億ならば 1000 万円の節約になる. 2011/11/25 明治大学理工学研究科 57

58 おわりに RIA の移植性の問題を解決するために,XML ベースの中間表現と Java ベースのフレームワークを使用するモデルを提案した. 上述のモデルを実装した Web-IR を開発した. 3 つの実証例を用いた評価は, 我々のモデルが前述の問題の工数削減に有用であることを示した. 振舞い情報の変換に関しては, 機能を重要度ごとに分別し, 重要度の高いものから逐次対応を強化したい. ( もっとさきの課題 ) システム全体の工数を削減するためには文字コードや SQL の標準化なども重要. 2011/11/25 明治大学理工学研究科 58

59 FAQ(1) Q1. 単なるトランスレータではダメなのか. A1. ダメな場合が多い. 特に Ajax から他の RIA に変換する場合には, コンテキストに応じた変換が必要となるため難しい. Q2. 計算量はどれくらいか. A2. ( 実装依存だがVisitorパターンを用いるので ) 空間計算量時間計算量ともにO(n) である. 2011/11/25 明治大学理工学研究科 59

60 FAQ(2) Q3. レイアウトが崩れる問題はどう考えるか. A3. レイアウトを完全に一致させることは難しいため, 利用者側で微調整してもらうのが望ましい ( ブラウザによっても異なるため完全な変換は困難 ). Q4. スクリプトの自動変換はしないのか. A4. 自動変換に関して研究はしているが, 可読性の問題もあるため現在の手法が無難であると考える. 2011/11/25 明治大学理工学研究科 60

61 FAQ(3) Q5. 中間表現やフレームワークが廃れたらどうするのか. A5. 中間表現はXMLなので他形式に容易に変換可能である. フレームワークはJava 固有の機能を使用していないので他言語に差し替えることは容易である. 2011/11/25 明治大学理工学研究科 61

62 参考文献 ( 抜粋 ) Adobe Labs: Wallaby, Adobe Systems Inc., < Google: Swiffy, Google, < 松塚貴英 : 業務アプリケーションに適用する Ajax フレームワーク, 情報処理学会論文誌, Vol.49, No.7, pp (2008). 三菱総合研究所 :OSS デスクトップの普及に資する Web コンテンツ互換性向上に関する調査, 情報処理推進機構オープンソフトウェアセンター, < 2011/11/25 明治大学理工学研究科 62

63 質疑応答 2011/11/25 明治大学理工学研究科 63

64 ご清聴ありがとうございました 2011/11/25 明治大学理工学研究科 64

IPSJ-DPS

IPSJ-DPS Web 1 1 1 1 RIA Rich Internet Application RIA RIA RIA XML Java Web-IR Web-IR Ajax Flex HTML5 JavaFX OpenLaszlo Web-IR RIA RIA Design and Evaluation of Intermediate Representation and Framework for Maintaining