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.

hifiveで実現するエンタープライズHTML5システム開発

654 views

Published on

2017/12/6に行われた「HTML5 Enterprise Application Conference 2017 ~HTML5で実現する業務アプリケーションのモダン化&マルチデバイス化~」の講演資料です。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

hifiveで実現するエンタープライズHTML5システム開発

  1. 1. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. hifiveで実現する エンタープライズHTML5システム開発 技術本部 システム研究開発センター イノベーティブアプリケーション研究部 hifive アーキテクト 三淵 喬 2017/12/06 HTML5 Enterprise Application Conference 2017 ~ HTML5で実現する業務アプリケーションのモダン化&マルチデバイス化 ~
  2. 2. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 自己紹介 2  三淵 喬(みつぶち たかし)  新日鉄住金ソリューションズ株式会社 技術本部 システム研究開発センター 所属  技術領域  クライアントサイド:HTML5, CSS3, ES6  サーバーサイド:JAVA, C++14  CI:Jenkins, Karma, Gradle, Gulp  hifive チーム アーキテクト  hifive開発(データグリッド)、案件支援、教育対応
  3. 3. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 本日のゴール 3  モダンなWeb技術を利用した業務システム開発 クライアントサイドの 3つ の課題 それらに対する解決策
  4. 4. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. モダンな業務Webシステム 4 業務システムへの期待  見やすいUIで計画を確認  UI上で直接編集  システムが自動的に実行 作業効率 ・迷わない、間違えない 学習コスト ・学習が簡単に モダンな業務Webシステムでは 実際に期待に応えられるようになってきた
  5. 5. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. モダンな業務Webシステムの例(1) 5  ネットワーク設定自動化システム HANAITA
  6. 6. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. モダンな業務Webシステムの例(1) 6  ネットワーク設定自動化システム HANAITA
  7. 7. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. モダンな業務Webシステムの例(2) 7  現場作業者の安全見守り支援
  8. 8. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 本日のゴール 8  モダンなWeb技術を利用した業務システム開発 クライアントサイドの 3つ の課題 それらに対する解決策
  9. 9. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 表現力/パフォーマンスの向上~複雑性への対応 9 2008 2014 W3CからHTML5の初期草案発表(iPhone3G 日本発売の年) HTML5が正式勧告 ・グラデーション、角丸、影表現(CSS3) ・動画再生、図形描画(<video>, <canvas>, SVG) ・3D(WebGL) ・双方向通信(WebSocket, Server-Sent Events, WebRTC) ・位置情報(Geolocation) ・「Web Components」仕様群 ・ES20xx、altJS ・Sass, Less 互換性向上、表現力・通信機能向上 モジュール化技術 アプリケーション プラットフォームとしての 足回りの強化 個別機能の追加・強化
  10. 10. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 最新の Web 技術 10 Payment Request API Service Worker Progressive Web Apps Web Bluetooth WebUSB WebVR API WebGL File API Web Workers Web MIDI API WebRTC Speech Recognition API Speech Synthesis API
  11. 11. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 11 継続的・漸進的進化 Webの世界は 「継続的に、少しずつ変わる」 が常識に 「継続的な変化に対応し続けられる」 仕組みが必要 「ブラウザはIE8限定、画面サイズは1024x768固定」 「HTML5対応ブラウザに対応、 PC・タブレットを含むマルチデバイスに対応」 という時代から… という時代へ 仕様も、実装も
  12. 12. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 業務システム開発の一般的特徴 12  IT戦略全体の課題  IT投資における「維持費用」の抑制⇒攻めの投資への転換  “SMAC”や”IoT”など新興発展技術群への対応  多数のシステムに対する開発~運用全般にわたる統制 – 情報漏えい他セキュリティリスクへの対応も  開発  多人数での役割分担(PM、SE、プログラマ、デザイナ)  分散チーム開発(個々人のスキルも様々)  外部システムとの接続  スモールスタート、スパイラル・アジャイル的開発スタイル も増えている  運用・保守  業務の変更に伴って改造されてゆく  数年~10年以上使われる – 開発(保守)に携わるメンバーが途中で変わっていくことも多い
  13. 13. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. クライアントのリッチ化に伴う課題 13 要件定義 設計 実装 テスト 運用・保守 実現可能性 互換性 開発環境 生産性向上 アジャイル 自動化アーキテクチャ 見積り 人材教育/調達 体制 実機動作検証 セキュリティ
  14. 14. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. クライアントサイドの 3つ の課題 14 ① 多人数開発での役割分担 ② 機能性とパフォーマンス ③ 長期にわたる運用保守
  15. 15. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 本日のゴール 15  モダンなWeb技術を利用した業務システム開発 クライアントサイドの 3つ の課題 それらに対する解決策
  16. 16. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 「ハイファイブ」 16 企業Webシステムのための 開発プラットフォーム
  17. 17. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. hifiveとは 17  次世代Web標準(HTML5/JavaScript/CSS)を活用した 企業Webシステム開発のためのプラットフォーム  2012年4月にver.1.0を公開  弊社初の自社開発オープンソース  ライセンス:Apache License, Version 2.0 – 商用システムに適用可  ターゲット:企業情報システム  コンセプト – 使い始めるための敷居を低く – Webの標準的な仕組みから逸脱しない – 開発のサイクルをトータルにサポート
  18. 18. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. hifiveのスコープ 18 DBサーバ ブラウザ (クライアント) http://www.htmlhifive.com/quiz/ にアクセス データ取得 データ返却表示するページを返却 アプリケーションの中心を司り、 必要な情報の処理、DBからデータ の取得、ブラウザへ画面の返却など を行う 言語:Java, C#, C++, Perl etc. データを格納する 画面の表示、レイアウト、 ユーザからの処理の受付などを行う 言語:HTML, CSS, JavaScript ブラウザ上で動作するクライアントプログラムの開発をサポート
  19. 19. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 開発プラットフォームとしての整備 19 コアフレームワーク 支援ツール ガイド/ドキュメント業務向け ライブラリ (ブラウザ) HTML(DOM) JavaScript CSS
  20. 20. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 20 サ ー バ ー ( デ ー タ と 業 務 ロ ジ ッ ク ) 「3つの軸」で問題を分割 クライアント データ層 ① 多人数開発での役割分担 コンポーネント軸 画面スタック軸 データ軸
  21. 21. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 21 コンポーネント分割の例 ※ 背景を公開用に差し替えております ドラッグ 拡縮 分割 スクロール 土台となる 機能を準備 ① 多人数開発での役割分担 1F 2F
  22. 22. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 22 グラフ構造 データグリッド 業務システムでよく使われる 大量データの可視化部品など 実装難度の高いUI部品を提供 ※一部コンポーネントは開発中 ドローイング チャート ② 機能性とパフォーマンス
  23. 23. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 高パフォーマンスの秘密 23 実際に見えている範囲 (ここだけを描画) 本来描画すべき 領域全体 描画すべきオブジェクトの 位置計算等をJavaScript エンジンの中に閉じて行う 画面に実際に表示される 範囲のみを描画する (スクロールして 可視範囲外に外れた オブジェクトは外す) データ数 描 画 時 間 現実的に一度に”表示” すべき量は上限がある ので論理データ数が 多くなっても扱える (高速化イメージ) ② 機能性とパフォーマンス
  24. 24. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. マルチデバイス/ブラウザ対応 Webアプリテスト自動化支援ツール 24 • Seleniumベース • スクリーンショット比較で “見た目”のテストを自動化 • オープンソースとして提供 ③ 長期にわたる運用保守
  25. 25. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. UIテストが必要 25 目視確認だと 細かい表示内容の変化を見落とし がち だけど… ③ 長期にわたる運用保守
  26. 26. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 全ての対応ブラウザで必要 26 Internet Explorer 11 mobile SafariGoogle Chrome 同じ内容のテストを ブラウザ・デバイスの数繰り返す のは大変 スマデバの テストは特に 負担大 しかし… ③ 長期にわたる運用保守
  27. 27. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. テスト自動化を阻む課題 27  自動化環境やスクリプトの作成・保守コスト大  「ブラウザ間の差異」に対応するために、同じテストに対して ブラウザ毎に個別のスクリプトを書く場合も  UIテストは自動化しづらい  「画面が正しく表示されること」をどう定義・記述するか?  レイアウトの確認は目視で行う?→ボトルネック化 スクリプト作成・ 保守コスト大 ブラウザ個別の スクリプトが必要 レイアウトの 確認は目視 driver.get(baseUrl + "/myVideoRental/FrontController"); driver.findElement(By.name("shop_id ")).clear(); driver.findElement(By.name("shop_id ")).sendKeys("01"); driver.findElement(By.id("DisplayMen uLogic")).click(); assertEquals("貸出・返却メ ニュー画面", driver.getTitle()); 実施 結果確認準備 driver.get(bas eUrl + "/myVideoRen tal/FrontContr driver.get(bas eUrl + "/myVideoRen tal/FrontContr ③ 長期にわたる運用保守
  28. 28. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 記述を簡略化 Pitaliumによる解決策 実施 結果確認 スクリプト作成・ 保守コスト大 ブラウザ個別の スクリプトが必要 レイアウトの 確認は目視 準備 driver.get(baseUrl + "/myVideoRental/FrontController"); driver.findElement(By.name("shop_id ")).clear(); driver.findElement(By.name("shop_id ")).sendKeys("01"); driver.findElement(By.id("DisplayMen uLogic")).click(); assertEquals("貸出・返却メ ニュー画面", driver.getTitle()); ワンソース 自動判定 28 driver.get(bas eUrl + "/myVideoRen tal/FrontContr driver.get(bas eUrl + "/myVideoRen tal/FrontContr ③ 長期にわたる運用保守
  29. 29. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. Pitalium のデモ 29 ③ 長期にわたる運用保守  Pitalium 動作デモ動画  https://youtu.be/02c8kLBP-Vs
  30. 30. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. まとめ 30 多人数開発での 役割分担 長期にわたる 運用保守 機能性と パフォーマンス 3つの軸で分割 業務向け ライブラリ UI自動テスト サ ー バ ー ( デ ー タ と 業 務 ロ ジ ッ ク ) クライアント データ層 コンポーネント軸 画面スタック軸 データ軸
  31. 31. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 31 www.htmlhifive.com Twitter: https://twitter.com/htmlhifive Facebook: https://www.facebook.com/htmlhifive
  32. 32. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 商標について 32  NS Solutions、NS(ロゴ)、NSSOLは、 新日鉄住金ソリューションズ株式会社の登録商標です。  hifive、hifive(ロゴ)、Pitalium、Pitalium(ロゴ)は、 新日鉄住金ソリューションズ株式会社の登録商標です。  HANAITA、HANAITA(ロゴ)は 新日鉄住金ソリューションズ株式会社の登録商標です。  Windows、Internet Explorerは、米国 Microsoft Corporation の 米国およびその他の国における登録商標です。  JAVAは、米国ORACLE Corp.の登録商標です。  HTML5 Logo by W3C.  その他本文記載の会社名及び製品名は、 それぞれ各社の商標又は登録商標です。

×