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 APIWeb 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/FrontContrdriver.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/FrontContrdriver.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システム開発

Technology