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

Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
hifiveで実現する
エンタープライズHTML5システム開発
技術本部システム研究開発センター
イノベーティブアプリケーション研究部
hifive アーキテクト三淵喬
2017/12/06
HTML5 Enterprise Application Conference 2017
～ HTML5で実現する業務アプリケーションのモダン化&マルチデバイス化～

自己紹介
2
 三淵喬（みつぶちたかし）
 新日鉄住金ソリューションズ株式会社
技術本部システム研究開発センター所属
 技術領域
 クライアントサイド：HTML5, CSS3, ES6
 サーバーサイド：JAVA, C++14
 CI：Jenkins, Karma, Gradle, Gulp
 hifive チームアーキテクト
 hifive開発（データグリッド）、案件支援、教育対応

本日のゴール
3
 モダンなWeb技術を利用した業務システム開発
クライアントサイドの 3つの課題
それらに対する解決策

モダンな業務Webシステム
4
業務システムへの期待
 見やすいUIで計画を確認
 UI上で直接編集
 システムが自動的に実行
作業効率
・迷わない、間違えない
学習コスト
・学習が簡単に
モダンな業務Webシステムでは
実際に期待に応えられるようになってきた

モダンな業務Webシステムの例（1）
5
 ネットワーク設定自動化システム HANAITA

6
 ネットワーク設定自動化システム HANAITA

7
 現場作業者の安全見守り支援

本日のゴール
8

表現力/パフォーマンスの向上～複雑性への対応
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
互換性向上、表現力・通信機能向上
モジュール化技術
アプリケーション
プラットフォームとしての
足回りの強化
個別機能の追加・強化

最新の 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

Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 11
継続的・漸進的進化
Webの世界は
「継続的に、少しずつ変わる」
が常識に
「継続的な変化に対応し続けられる」
仕組みが必要
「ブラウザはIE8限定、画面サイズは1024x768固定」
「HTML5対応ブラウザに対応、
PC・タブレットを含むマルチデバイスに対応」
という時代から…
という時代へ
仕様も、実装も

業務システム開発の一般的特徴
12
 IT戦略全体の課題
 IT投資における「維持費用」の抑制⇒攻めの投資への転換
 “SMAC”や”IoT”など新興発展技術群への対応
 多数のシステムに対する開発～運用全般にわたる統制
– 情報漏えい他セキュリティリスクへの対応も
 開発
 多人数での役割分担（PM、SE、プログラマ、デザイナ）
 分散チーム開発（個々人のスキルも様々）
 外部システムとの接続
 スモールスタート、スパイラル・アジャイル的開発スタイル
も増えている
 運用・保守
 業務の変更に伴って改造されてゆく
 数年～10年以上使われる
– 開発(保守)に携わるメンバーが途中で変わっていくことも多い

クライアントのリッチ化に伴う課題
13
要件定義設計実装テスト運用・保守
実現可能性互換性
開発環境
生産性向上
アジャイル
自動化アーキテクチャ
見積り
人材教育/調達
体制実機動作検証
セキュリティ

14
① 多人数開発での役割分担
② 機能性とパフォーマンス
③ 長期にわたる運用保守

本日のゴール
15

「ハイファイブ」
16
企業Webシステムのための
開発プラットフォーム

hifiveとは
17
 次世代Web標準(HTML5/JavaScript/CSS)を活用した
企業Webシステム開発のためのプラットフォーム
 2012年4月にver.1.0を公開
 弊社初の自社開発オープンソース
 ライセンス：Apache License, Version 2.0
– 商用システムに適用可
 ターゲット：企業情報システム
 コンセプト
– 使い始めるための敷居を低く
– Webの標準的な仕組みから逸脱しない
– 開発のサイクルをトータルにサポート

hifiveのスコープ
18
DBサーバ
ブラウザ
(クライアント)
http://www.htmlhifive.com/quiz/
にアクセス
データ取得
データ返却表示するページを返却
アプリケーションの中心を司り、
必要な情報の処理、DBからデータ
の取得、ブラウザへ画面の返却など
を行う
言語：Java, C#, C++, Perl etc.
データを格納する
画面の表示、レイアウト、
ユーザからの処理の受付などを行う
言語：HTML, CSS, JavaScript
ブラウザ上で動作するクライアントプログラムの開発をサポート

開発プラットフォームとしての整備
19
コアフレームワーク
支援ツール
ガイド/ドキュメント業務向け
ライブラリ
（ブラウザ） HTML(DOM) JavaScript CSS

サ
ー
バ
ー
(
デ
ー
タ
と
業
務
ロ
ジ
ッ
ク
)
「3つの軸」で問題を分割
クライアント
データ層
コンポーネント軸
画面スタック軸
データ軸

コンポーネント分割の例
※ 背景を公開用に差し替えております
ドラッグ
拡縮
分割
スクロール
土台となる
機能を準備
1F 2F

グラフ構造
データグリッド
業務システムでよく使われる
大量データの可視化部品など
実装難度の高いUI部品を提供
※一部コンポーネントは開発中
ドローイング
チャート

高パフォーマンスの秘密
23
実際に見えている範囲
(ここだけを描画)
本来描画すべき
領域全体
描画すべきオブジェクトの
位置計算等をJavaScript
エンジンの中に閉じて行う
画面に実際に表示される
範囲のみを描画する
(スクロールして
可視範囲外に外れた
オブジェクトは外す)
データ数
描
画
時
間
現実的に一度に”表示”
すべき量は上限がある
ので論理データ数が
多くなっても扱える
(高速化イメージ)

マルチデバイス/ブラウザ対応
Webアプリテスト自動化支援ツール
24
• Seleniumベース
• スクリーンショット比較で
“見た目”のテストを自動化
• オープンソースとして提供

UIテストが必要
25
目視確認だと
細かい表示内容の変化を見落とし
がち
だけど…

全ての対応ブラウザで必要
26
Internet Explorer 11 mobile SafariGoogle Chrome
同じ内容のテストを
ブラウザ・デバイスの数繰り返す
のは大変
スマデバの
テストは特に
負担大
しかし…

テスト自動化を阻む課題
27
 自動化環境やスクリプトの作成・保守コスト大
 「ブラウザ間の差異」に対応するために、同じテストに対して
ブラウザ毎に個別のスクリプトを書く場合も
 UIテストは自動化しづらい
 「画面が正しく表示されること」をどう定義・記述するか？
 レイアウトの確認は目視で行う？→ボトルネック化
スクリプト作成・
保守コスト大
ブラウザ個別の
スクリプトが必要
レイアウトの
確認は目視
driver.get(baseUrl +
"/myVideoRental/FrontController");
driver.findElement(By.name("shop_id
")).clear();
")).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

記述を簡略化
Pitaliumによる解決策
実施結果確認
スクリプト作成・
保守コスト大
ブラウザ個別の
スクリプトが必要
レイアウトの
確認は目視
準備
driver.get(baseUrl +
"/myVideoRental/FrontController");
")).clear();
")).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

Pitalium のデモ
29
 Pitalium 動作デモ動画
 https://youtu.be/02c8kLBP-Vs

まとめ
30
多人数開発での
役割分担
長期にわたる
運用保守
機能性と
パフォーマンス
３つの軸で分割
業務向け
ライブラリ
UI自動テスト
サ
ー
バ
ー
(
デ
ー
タ
と
業
務
ロ
ジ
ッ
ク
)
クライアント
データ層
コンポーネント軸
画面スタック軸
データ軸

www.htmlhifive.com
Twitter: https://twitter.com/htmlhifive
Facebook: https://www.facebook.com/htmlhifive

商標について
32
 NS Solutions、NS（ロゴ）、NSSOLは、
新日鉄住金ソリューションズ株式会社の登録商標です。
 hifive、hifive(ロゴ)、Pitalium、Pitalium(ロゴ)は、
 HANAITA、HANAITA（ロゴ）は
 Windows、Internet Explorerは､米国 Microsoft Corporation の
米国およびその他の国における登録商標です。
 JAVAは､米国ORACLE Corp.の登録商標です｡
 HTML5 Logo by W3C.
 その他本文記載の会社名及び製品名は、
それぞれ各社の商標又は登録商標です。

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

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

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

Último

Último (11)

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