Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

3 712 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

第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

×