Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」

3,286 views

Published on

http://www.htmlhifive.com/
第3回企業Webシステム開発セミナー 資料
「業務システムにHTML5を上手に取り入れるためには?」

Published in: Technology
  • Be the first to comment

第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」

  1. 1. 業務システムにHTML5を 上手に取り入れるためには? 第3回 HTML5 企業Webシステム開発セミナー 「プロに求められる最新Webスキルとは?」 Copyright © 2015 NS Solutions Corporation, All rights reserved. 技術本部 システム研究開発センター 2015/2/18 1
  2. 2. 自己紹介 • 下田 修(しもだ おさむ) • 新日鉄住金ソリューションズ株式会社 技術本部 システム研究開発センター 所属 • 技術領域: – サーバーサイド:Java(JavaEE, Seasar2等) • 書籍監訳:Beginning Java EE 6~GlassFish3で始めるエンタープライズJava~ (2,4章) – クライアントサイド:HTML/CSS/JavaScript, Flex(Flash)、WPF/.Net – おうちではガジェットを嗜む程度に • hifiveの何でも屋さんアーキテクチャ設計・実装・ ソースレビューア・メンテナ・問い合わせ対応・案件支援・ 顧客対応・セミナー企画/講師・… Copyright © 2015 NS Solutions Corporation, All rights reserved. 2
  3. 3. 業務システムにHTML5を上手に取り入れるためには? Copyright © 2015 NS Solutions Corporation, All rights reserved. 3 ・どんな観点に気を付けるとよいのだろう? ・どんなツール・技術があるのだろう?
  4. 4. 本日の内容 • HTML5に対する「期待」と「懸念」 • 機能性 • 継続的進化への対応 • パフォーマンス • セキュリティ Copyright © 2015 NS Solutions Corporation, All rights reserved. 4
  5. 5. hifive誕生の背景 5Copyright © 2015 NS Solutions Corporation, All rights reserved.
  6. 6. • クライアント、サーバー、DBの3層モデル • ブラウザの性能・機能の向上で表現力が豊かに • クライアントで動くコード(JavaScript) が増加 Webアプリケーションの基本おさらい Copyright © 2015 NS Solutions Corporation, All rights reserved. 6 DBサーバ ブラウザ (クライアント) http://www.htmlhifive.com/quiz/ にアクセス データ取得 データ返却表示するページを返却 本日のターゲット アプリケーションの中心を司り、 必要な情報の処理、DBからデータ の取得、ブラウザへ画面の返却など を行う 言語:Java, C#, C++, Perl etc. データを格納する 画面の表示、レイアウト、 ユーザからの処理の受付などを行う 言語:HTML, CSS, JavaScript
  7. 7. クライアントの構成要素と記述言語の関係 Copyright © 2015 NS Solutions Corporation, All rights reserved. 7 ビジュアル デザイン インタラク ション デザイン 画面ロジック 業務ロジック HTMLCSS JavaScript クライアントサイドでの処理が増え、HTML5の表現力を活かそうとすると、 単にJavaScriptの“量”が増えるだけでなく、“役割”が増える。 ⇒ 問題の整理・分割が重要 多人数開発を効率化する仕組み、影響範囲の最小化 ※矢印の太さは関係の強さを表す 記述言語 クライアント の構成要素
  8. 8. 再利用性や保守性の低下 JavaScriptの言語仕様&使われ方に起因する問題 ① スコープを意識しない記述 ⇒ 関数/変数のコンフリクトや上書き ② 画面生成コードの複雑化 ⇒ 最終的に出力されるHTMLの 把握が困難 ③ 業務処理と画面操作の混在 ⇒ 保守時の改修箇所や 影響がわかりづらい、 ロジックの共通化が困難 ④ デバッグコードの混入 ⇒ 処理時間計測コード等を 都度差し込み/削除 8Copyright © 2015 NS Solutions Corporation, All rights reserved. A.js B.js var foodCountDiv = document.createElement("div"); foodCountDiv.setAttribute("class", "food_count_div"); var downCountButton = document.createElement("input"); downCountButton.value = "-"; downCountButton.setAttribute("onclick", "downFoodCount(" + foodId + ")"); db.transaction(function(tr) { var query = "INSERT INTO Food(FoodId, Name, …); tr.executeSql(query, [++lastFoodId + "", name, foodCategory, getFoodScore(calorie, foodCategory), calorie], function(tr, rs) { makeFoodListItem(lastFoodId, name, calorie, foodCategory, getFoodScore(calorie, foodCategory)); $("#regist_food_name").val(""); } ); }); DB操作/サーバー通信 計算ロジック 画面更新
  9. 9. Copyright © 2015 NS Solutions Corporation, All rights reserved. 9
  10. 10. hifiveとは? • 次世代Web標準(HTML5/JavaScript/CSS)を活用した 企業Webシステム開発のためのプラットフォーム • ライセンス:Apache License, Version 2.0 – 商用システムに適用しやすい 10  コンセプト – 使い始めるための敷居を低く – Webの標準的な仕組みから逸脱しない – 開発のサイクルをトータルにサポート Copyright © 2015 NS Solutions Corporation, All rights reserved.
  11. 11. HTML5に対する期待と懸念 Copyright © 2015 NS Solutions Corporation, All rights reserved. 11
  12. 12. 業務システムの一般的特徴 • 企業のIT戦略と課題 – IT投資における「維持費用」の抑制⇒攻めの投資への転換 – 「SMAC」や「IoT」などの新興発展技術群への対応 – 多数のシステムに対する開発~運用全般にわたる統制 • 情報漏えい他セキュリティリスクへの対応も • 開発 – 多人数での分担・分散チーム開発 – 外部システムとの接続 – スモールスタート、スパイラル・アジャイル的開発スタイルも 増えている • 運用・保守 – 業務の変更に伴って改造されてゆく – 数年~10年以上使われる • 開発(保守)に携わるメンバーが途中で変わっていくことも多い Copyright © 2015 NS Solutions Corporation, All rights reserved. 12 ※本資料で主にターゲットとする 「業務システム」についての説明です ※
  13. 13. 業務システムにおけるHTML5への期待(例) Copyright © 2015 NS Solutions Corporation, All rights reserved. 13 • データ可視化、BI – 高い表現力 – より良い操作性 – リアルタイム(差分更新) – ハイパフォーマンス • スマートデバイス対応 営業・販売業務の高度化 – B2Cサイトのスマホ対応 – BYOD – オフライン動作とデータ同期 • 互換性向上 – ベースラインの確実な動作 実現のためのテクノロジ • Canvas • SVG • CSS3 • File API • データベース (IndexedDB, WebSQLDB) • XHR2(Ajax) • WebSocket • CSS Media Queries • デバイス連携 (センサー、カメラ、…) • AppCache • Web Components • WebRTC etc. 技術はある! (いろいろ大変なこと もあるけど…)
  14. 14. まとめると Copyright © 2015 NS Solutions Corporation, All rights reserved. 14 「Webアプリ」が元々持つメリット (インストールレス、マルチデバイス性 etc.) ・リッチクライアント/ネイティブアプリ的な 機能/操作性/パフォーマンス ・開発技術基盤の統一
  15. 15. HTML5に対する懸念 • 将来の見通し・方向性を予測しづらい (スケジュール化された技術ロードマップがない) • 大規模システムの開発ノウハウが(まだ)少ない – 開発プロセス・体制 – アーキテクチャ(サーバーサイドを含むシステム全体としての) – フレームワーク・ライブラリ・ツール • 技術的な未成熟さや互換性の低さ – JavaScriptやHTMLの言語仕様&機能的な問題 (クラス、モジュール化、スコープ、…) – ブラウザ間の互換性や実装度合い • 他の技術が支配的になる可能性 Copyright © 2015 NS Solutions Corporation, All rights reserved. 15
  16. 16. HTML5に対する懸念 Copyright © 2015 NS Solutions Corporation, All rights reserved. 16 要件定義 設計 実装 テスト 運用・保守 サーバーサイドで通ってきた道を 今度はクライアントサイドで 実現可能性 互換性 開発環境 生産性向上 アジャイル 自動化アーキテクチャ 見積り 人材確保 分業/体制 実機動作検証 開発プロセスをトータルにサポート フレームワークに加え+ライブラリ・ツール・ドキュメント・教育
  17. 17. 機能性 Copyright © 2015 NS Solutions Corporation, All rights reserved. 17
  18. 18. 棚割り Copyright © 2015 NS Solutions Corporation, All rights reserved. 18 【要件】 ・タブレット、タッチ操作への対応 (その場でレイアウトを変更できる) 【テクノロジ】 ・タッチイベント ・canvas http://www.htmlhifive.com/ja/gallery/planogram/ htmlhifive.com “デモ”ギャラリーで ご覧いただけます
  19. 19. 現場作業報告 Copyright © 2015 NS Solutions Corporation, All rights reserved. 19 【要件】 ・数千以上のノード/エッジの描画 ・インタラクティブ性 (ノードの移動/編集/部分展開など) ・オフライン対応 【テクノロジ】 ・canvas ・HTML Media Capture ・File API ・Application cache ・Web Storage (・PhoneGapによるハイブリッド化) http://hifive.github.io/hifive-ui-library/hifive-ui-library/ WebContent/components/drawing/sample/
  20. 20. データ視覚化(チャート) Copyright © 2015 NS Solutions Corporation, All rights reserved. 20 【要件】 ・クライアントで リアルタイムに図形描画 (データ転送量削減, 自動スケール) ・Internet Explorer8でも軽快に動作 【テクノロジ】 ・SVG ・VML (shape/pathによる効率的な描画) https://www.youtube.com/watch?v=z6GcasA6MD8
  21. 21. データ視覚化(グラフ表現) Copyright © 2015 NS Solutions Corporation, All rights reserved. 21 【要件】 ・数千以上のノード/エッジの描画 ・インタラクティブ性 (ノードの移動/編集/部分展開など) 【テクノロジ】 ・SVG ・可視範囲のみ描画 (・DOMのPooling) (・データバインド) https://www.youtube.com/watch?v=ijYX4ul4B98
  22. 22. データグリッド Copyright © 2015 NS Solutions Corporation, All rights reserved. 22 【要件】 ・高パフォーマンス: 100列×数万行~オーダーの データの表示/ハンドリング ・高機能: 行/列固定、セル結合、 コピーペースト、… 【テクノロジ】 ・可視範囲のみの描画 ・UIをブロックしないように 非同期処理を多用 http://hifive.github.io/hifive-ui-library/hifive-ui-library/ WebContent/components/datagrid/sample/ チャート・グラフ・グリッドなど高機能部品を中心に提供
  23. 23. 技術の採否 サイト URL IE Platform Status http://status.modern.ie/ Chromium Dashboard https://www.chromestatus.com/features MDN (Mozilla Developer Network) https://developer.mozilla.org/ja/ Can I use http://caniuse.com/ Copyright © 2015 NS Solutions Corporation, All rights reserved. 23 システムの性格や利用シーンによりさまざま 機能の対応状況は要注意 Polyfillは便利だが互換性に注意 HTML5の各種APIの対応状況を調べられるサイト 業務システムでニーズ大の「データ視覚化」「大量データの取り扱い」は ベース技術が整ってきた ・データ視覚化 :Canvas、SVG、WebGL、D3.js(ライブラリ) ・データグリッド:jqGrid, handsontable, IgniteUI(商用), Wijmo(商用), etc.
  24. 24. 継続的進化への対応 Copyright © 2015 NS Solutions Corporation, All rights reserved. 24
  25. 25. Copyright © 2015 NS Solutions Corporation, All rights reserved. 25 Microsoft、Internet Explorerのサポートを 最新版のみに - 2016年1月から http://news.mynavi.jp/news/2014/08/08/038/
  26. 26. Copyright © 2015 NS Solutions Corporation, All rights reserved. 26 「Windows 10」は2つのブラウザを搭載、 SpartanとInternet Explorer http://news.mynavi.jp/news/2015/01/23/042/
  27. 27. Copyright © 2015 NS Solutions Corporation, All rights reserved. 27 Android 5.0が正式発表、 WebViewアプリ化で個別更新可能に http://itpro.nikkeibp.co.jp/atcl/column/14/277462/112800012/
  28. 28. 4.1 iOS Internet Explorer 6 7 9 1.5 2 3 Google Chrome Opera ’97 ’14’00 ’05 ’10 8 10 11 Firefox 1 3.5 3.6 4 10 20 32 1 10 20 30 38 6 7 854321 1 1.5 2 3 4 4.2 4.34.4Android 2.12.2 2.3 3 4 5 11 129 156 7 8 10 24 1 2 3 4 5 6 7Safari (Mac OS X) 注:ブラウザの赤い矢印は 「高速リリース」を謳っているもの。 6週間程度の間隔でバージョンアップする 5 “Spartan”も継続的 アップデートに? Copyright © 2015 NS Solutions Corporation, All rights reserved. 28
  29. 29. Copyright © 2015 NS Solutions Corporation, All rights reserved. 29 Webの世界は 「継続的に、少しずつ変わっていく」 「継続的な変化に対応し続けられる」 仕組みが必要 「ブラウザはIE8限定、画面サイズは1024x768固定」 「HTML5対応ブラウザに対応、 PC・タブレットを含むマルチデバイスに対応」 という時代から… という時代へ
  30. 30. 変化への対応 • テストのコード化・自動化(リグレッションテスト) – クライアントコード(JavaScript)のユニットテスト • QUnit、Jasmine、… – ユースケースや画面レベルのテスト • Selenium、Appium、… • WebDriver – CI環境への統合 • Jenkins+Karma、… • 構成管理として システムが利用している機能を把握 Copyright © 2015 NS Solutions Corporation, All rights reserved. 30 テスト自動化・CIで 「変化に気づける」仕組み作り テストツールの使い方を情報提供(@htmlhifive.com) 画像による変更差分の検出・比較ツールを開発中 JenkinsによるCIと QUnitによるJS単体テストの画面例 Jenkins: http://jenkins-ci.org/ QUnit: http://qunitjs.com/
  31. 31. 大規模化への対応 • HTML:Web Components – <template>要素、HTML Imports、Shadow DOM、Custom Elements • CSS:”initial”キーワード、Shadow DOM、ツール(Sass, Less) – スタイルの初期化 – 適用範囲の限定 – ネストしたスタイル記述のサポート • JavaScript:ECMAScript6,7、altJS、MV*フレームワーク – アクセサプロパティ ※ECMAScript5で導入 – クラス – オブジェクトの型付け – モジュール(import, export) – 非同期処理(Promise) Copyright © 2015 NS Solutions Corporation, All rights reserved. 31 モジュール化・スコープ分離技術に注目 ただし現場への導入にはもう少し時間がかかるか 参考:ECMAScript compatibility table http://kangax.github.io/compat-table/es5/ MVCフレームワーク、依存性の動的解決機能の提供
  32. 32. パフォーマンス Copyright © 2015 NS Solutions Corporation, All rights reserved. 32
  33. 33. パフォーマンス • 計測可能な仕組みを整える • コンテンツの整理・厳選 – 特にモバイルでは初期表示の高速化 Copyright © 2015 NS Solutions Corporation, All rights reserved. 33 例:www.htmlhifive.comのページのダウンロード時間 (Google Webmaster Toolより) 初期表示は通信の数・量に気を配る JSの実行速度は開発者ツールを活用 運用面の対策 Google PageSpeed Insightsによる検査と 改善提案の例
  34. 34. 技術面の対策 • HTTPリクエスト数の削減 – JSファイルやCSSファイルの圧縮・マージ – HTML内に必要なリソースを埋め込んでしまう – サーバーのHTTP/2の有効化 • Chromeでは2016年にSPDYのサポートを終了する方針 • 処理の遅延(非同期)化 – 初期表示で必要なもの以外は後回しにする • リソースのオンデマンド読み込み – Requirejs – WebPack • CDNの活用 • 開発者ツールによる計測 Copyright © 2015 NS Solutions Corporation, All rights reserved. 34 ・マージしすぎると 逆に遅くなることも ・開発中の効率も意識する (ビルドツールの利用) Chrome Developer Toolsによる パフォーマンス計測の例 オンデマンド読み込み、ファイルマージ機能の提供 メソッドの実行時間計測機能の提供
  35. 35. セキュリティ Copyright © 2015 NS Solutions Corporation, All rights reserved. 35
  36. 36. セキュリティ • HTML5で追加された機能を利用した攻撃 – 例:<video>のonerrorハンドラ • クライアント側での動的画面書換を利用した攻撃 – 例:DOM-Based XSS • 参考: – HTML5 を利用したWeb アプリケーションの セキュリティ問題に関する調査報告書(JPCERT/CC) • https://www.jpcert.or.jp/research/html5.html Copyright © 2015 NS Solutions Corporation, All rights reserved. 36 その他のキーワード ・HSTS ・Canvas Fingerprint などなど 通信は常時SSL化の流れ “オリジン”を理解しよう
  37. 37. まとめ Copyright © 2015 NS Solutions Corporation, All rights reserved. 37
  38. 38. まとめ Copyright © 2015 NS Solutions Corporation, All rights reserved. 38 機能性 継続的進化への 対応 パフォーマンス セキュリティ
  39. 39. まとめ Copyright © 2015 NS Solutions Corporation, All rights reserved. 39 機能の対応状況は要注意 データ視覚化の ベース技術は整ってきた 初期表示は 通信の数・量に気を配る JSの実行速度は 開発者ツールを活用 通信は常時SSL化の流れ “オリジン”を 理解しよう テスト自動化・CIで 「変化に気づける」 仕組み作り モジュール化・スコープ 分離技術に注目
  40. 40. 最後にお知らせ Copyright © 2015 NS Solutions Corporation, All rights reserved. 40 #htmlhifivewww.facebook.com/htmlhifive Web www.htmlhifive.com 「HTML5? それともネイティブ? スマホ業務アプリの作り方4種を徹底比較」 http://techtarget.itmedia.co.jp/tt/news/1412/17/news02.html TechTarget様で 記事を書かせていただきました。 アプリ例なども載せているので ぜひご覧ください!
  41. 41. 商標について Copyright © 2015 NS Solutions Corporation, All rights reserved. 41 • NS Solutions、NS(ロゴ)、NSSOLは、新日鉄住金ソリューションズ株式会 社の登録商標です。 • hifive、hifive(ロゴ)は、新日鉄住金ソリューションズ株式会社の登録商 標です。 • Windows、Internet Explorerは、米国 Microsoft Corporation の米国およ びその他の国における登録商標です。 • JAVAは、米国ORACLE Corp.の登録商標です。 • HTML5 Logo by W3C. • その他本文記載の会社名及び製品名は、それぞれ各社の商標又は登録商標 です。
  42. 42. Copyright © 2015 NS Solutions Corporation, All rights reserved. 42 www.htmlhifive.com

×