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

業務システムにHTML5を
上手に取り入れるためには？
第３回 HTML5 企業Webシステム開発セミナー
「プロに求められる最新Webスキルとは？」
Copyright © 2015 NS Solutions Corporation, All rights reserved.
技術本部システム研究開発センター
2015/2/18
1

自己紹介
• 下田修（しもだおさむ）
• 新日鉄住金ソリューションズ株式会社
技術本部システム研究開発センター所属
• 技術領域：
– サーバーサイド：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

業務システムにHTML5を上手に取り入れるためには？
・どんな観点に気を付けるとよいのだろう？
・どんなツール・技術があるのだろう？

本日の内容
• HTML5に対する「期待」と「懸念」
• 機能性
• 継続的進化への対応
• パフォーマンス
• セキュリティ

hifive誕生の背景
5Copyright © 2015 NS Solutions Corporation, All rights reserved.

• クライアント、サーバー、DBの3層モデル
• ブラウザの性能・機能の向上で表現力が豊かに
• クライアントで動くコード(JavaScript) が増加
Webアプリケーションの基本おさらい
DBサーバ
ブラウザ
(クライアント)
http://www.htmlhifive.com/quiz/
にアクセス
データ取得
データ返却表示するページを返却
本日のターゲット
アプリケーションの中心を司り、
必要な情報の処理、DBからデータ
の取得、ブラウザへ画面の返却など
を行う
言語：Java, C#, C++, Perl etc.
データを格納する
画面の表示、レイアウト、
ユーザからの処理の受付などを行う
言語：HTML, CSS, JavaScript

クライアントの構成要素と記述言語の関係
ビジュアル
デザイン
インタラク
ション
デザイン
画面ロジック業務ロジック
HTMLCSS JavaScript
クライアントサイドでの処理が増え、HTML5の表現力を活かそうとすると、
単にJavaScriptの“量”が増えるだけでなく、“役割”が増える。
⇒ 問題の整理・分割が重要
多人数開発を効率化する仕組み、影響範囲の最小化
※矢印の太さは関係の強さを表す
記述言語
クライアント
の構成要素

再利用性や保守性の低下
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操作/サーバー通信
計算ロジック
画面更新

hifiveとは？
• 次世代Web標準(HTML5/JavaScript/CSS)を活用した
企業Webシステム開発のためのプラットフォーム
• ライセンス：Apache License, Version 2.0
– 商用システムに適用しやすい
10
 コンセプト
– 使い始めるための敷居を低く
– Webの標準的な仕組みから逸脱しない
– 開発のサイクルをトータルにサポート
Copyright © 2015 NS Solutions Corporation, All rights reserved.

HTML5に対する期待と懸念

業務システムの一般的特徴
• 企業のIT戦略と課題
– IT投資における「維持費用」の抑制⇒攻めの投資への転換
– 「SMAC」や「IoT」などの新興発展技術群への対応
– 多数のシステムに対する開発～運用全般にわたる統制
• 情報漏えい他セキュリティリスクへの対応も
• 開発
– 多人数での分担・分散チーム開発
– 外部システムとの接続
– スモールスタート、スパイラル・アジャイル的開発スタイルも
増えている
• 運用・保守
– 業務の変更に伴って改造されてゆく
– 数年～10年以上使われる
• 開発(保守)に携わるメンバーが途中で変わっていくことも多い
※本資料で主にターゲットとする
「業務システム」についての説明です
※

業務システムにおけるHTML5への期待（例）
• データ可視化、BI
– 高い表現力
– より良い操作性
– リアルタイム（差分更新）
– ハイパフォーマンス
• スマートデバイス対応
営業・販売業務の高度化
– B2Cサイトのスマホ対応
– BYOD
– オフライン動作とデータ同期
• 互換性向上
– ベースラインの確実な動作
実現のためのテクノロジ
• Canvas
• SVG
• CSS3
• File API
• データベース
（IndexedDB, WebSQLDB）
• XHR2（Ajax）
• WebSocket
• CSS Media Queries
• デバイス連携
（センサー、カメラ、…）
• AppCache
• Web Components
• WebRTC etc.
技術はある！
(いろいろ大変なこと
もあるけど…)

まとめると
「Webアプリ」が元々持つメリット
(インストールレス、マルチデバイス性 etc.)
・リッチクライアント/ネイティブアプリ的な
機能/操作性/パフォーマンス
・開発技術基盤の統一

HTML5に対する懸念
• 将来の見通し・方向性を予測しづらい
（スケジュール化された技術ロードマップがない）
• 大規模システムの開発ノウハウが(まだ)少ない
– 開発プロセス・体制
– アーキテクチャ（サーバーサイドを含むシステム全体としての）
– フレームワーク・ライブラリ・ツール
• 技術的な未成熟さや互換性の低さ
– JavaScriptやHTMLの言語仕様＆機能的な問題
（クラス、モジュール化、スコープ、…）
– ブラウザ間の互換性や実装度合い
• 他の技術が支配的になる可能性

HTML5に対する懸念
要件定義設計実装テスト運用・保守
サーバーサイドで通ってきた道を
今度はクライアントサイドで
実現可能性互換性
開発環境
生産性向上
アジャイル
自動化アーキテクチャ
見積り
人材確保
分業/体制
実機動作検証
開発プロセスをトータルにサポート
フレームワークに加え＋ライブラリ・ツール・ドキュメント・教育

機能性

棚割り
【要件】
・タブレット、タッチ操作への対応
(その場でレイアウトを変更できる)
【テクノロジ】
・タッチイベント
・canvas
http://www.htmlhifive.com/ja/gallery/planogram/
htmlhifive.com
“デモ”ギャラリーで
ご覧いただけます

現場作業報告
【要件】
・数千以上のノード/エッジの描画
・インタラクティブ性
(ノードの移動/編集/部分展開など)
・オフライン対応
・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/

データ視覚化（チャート）
【要件】
・クライアントで
リアルタイムに図形描画
(データ転送量削減, 自動スケール)
・Internet Explorer8でも軽快に動作
・SVG
・VML
(shape/pathによる効率的な描画)
https://www.youtube.com/watch?v=z6GcasA6MD8

データ視覚化（グラフ表現）
【要件】
・数千以上のノード/エッジの描画
・インタラクティブ性
(ノードの移動/編集/部分展開など)
・SVG
・可視範囲のみ描画
(・DOMのPooling)
(・データバインド)
https://www.youtube.com/watch?v=ijYX4ul4B98

データグリッド
【要件】
・高パフォーマンス：
100列×数万行～オーダーの
データの表示/ハンドリング
・高機能：
行/列固定、セル結合、
コピーペースト、…
・可視範囲のみの描画
・UIをブロックしないように
非同期処理を多用
http://hifive.github.io/hifive-ui-library/hifive-ui-library/
WebContent/components/datagrid/sample/
チャート・グラフ・グリッドなど高機能部品を中心に提供

技術の採否
サイト 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/
システムの性格や利用シーンによりさまざま
機能の対応状況は要注意
Polyfillは便利だが互換性に注意
HTML5の各種APIの対応状況を調べられるサイト
業務システムでニーズ大の「データ視覚化」「大量データの取り扱い」は
ベース技術が整ってきた
・データ視覚化：Canvas、SVG、WebGL、D3.js(ライブラリ)
・データグリッド：jqGrid, handsontable, IgniteUI(商用), Wijmo(商用), etc.

継続的進化への対応

Microsoft、Internet Explorerのサポートを
最新版のみに - 2016年1月から
http://news.mynavi.jp/news/2014/08/08/038/

「Windows 10」は2つのブラウザを搭載、
SpartanとInternet Explorer
http://news.mynavi.jp/news/2015/01/23/042/

Android 5.0が正式発表、
WebViewアプリ化で個別更新可能に
http://itpro.nikkeibp.co.jp/atcl/column/14/277462/112800012/

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”も継続的
アップデートに？

Webの世界は
「継続的に、少しずつ変わっていく」
「継続的な変化に対応し続けられる」
仕組みが必要
「ブラウザはIE8限定、画面サイズは1024x768固定」
「HTML5対応ブラウザに対応、
PC・タブレットを含むマルチデバイスに対応」
という時代から…
という時代へ

変化への対応
• テストのコード化・自動化（リグレッションテスト）
– クライアントコード（JavaScript）のユニットテスト
• QUnit、Jasmine、…
– ユースケースや画面レベルのテスト
• Selenium、Appium、…
• WebDriver
– CI環境への統合
• Jenkins+Karma、…
• 構成管理として
システムが利用している機能を把握
テスト自動化・CIで
「変化に気づける」仕組み作り
テストツールの使い方を情報提供(@htmlhifive.com)
画像による変更差分の検出・比較ツールを開発中
JenkinsによるCIと
QUnitによるJS単体テストの画面例
Jenkins: http://jenkins-ci.org/
QUnit: http://qunitjs.com/

大規模化への対応
• 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）
モジュール化・スコープ分離技術に注目
ただし現場への導入にはもう少し時間がかかるか
参考：ECMAScript compatibility table
http://kangax.github.io/compat-table/es5/
MVCフレームワーク、依存性の動的解決機能の提供

パフォーマンス

パフォーマンス
• 計測可能な仕組みを整える
• コンテンツの整理・厳選
– 特にモバイルでは初期表示の高速化
例：www.htmlhifive.comのページのダウンロード時間
（Google Webmaster Toolより）
初期表示は通信の数・量に気を配る
JSの実行速度は開発者ツールを活用
運用面の対策
Google PageSpeed Insightsによる検査と
改善提案の例

技術面の対策
• HTTPリクエスト数の削減
– JSファイルやCSSファイルの圧縮・マージ
– HTML内に必要なリソースを埋め込んでしまう
– サーバーのHTTP/2の有効化
• Chromeでは2016年にSPDYのサポートを終了する方針
• 処理の遅延(非同期)化
– 初期表示で必要なもの以外は後回しにする
• リソースのオンデマンド読み込み
– Requirejs
– WebPack
• CDNの活用
• 開発者ツールによる計測
・マージしすぎると
逆に遅くなることも
・開発中の効率も意識する
(ビルドツールの利用)
Chrome Developer Toolsによる
パフォーマンス計測の例
オンデマンド読み込み、ファイルマージ機能の提供
メソッドの実行時間計測機能の提供

セキュリティ

セキュリティ
• HTML5で追加された機能を利用した攻撃
– 例：<video>のonerrorハンドラ
• クライアント側での動的画面書換を利用した攻撃
– 例：DOM-Based XSS
• 参考：
– HTML5 を利用したWeb アプリケーションの
セキュリティ問題に関する調査報告書（JPCERT/CC）
• https://www.jpcert.or.jp/research/html5.html
その他のキーワード
・HSTS
・Canvas Fingerprint などなど
通信は常時SSL化の流れ
“オリジン”を理解しよう

まとめ

まとめ
機能性
継続的進化への
対応
パフォーマンスセキュリティ

まとめ
機能の対応状況は要注意
データ視覚化の
ベース技術は整ってきた
初期表示は
通信の数・量に気を配る
JSの実行速度は
開発者ツールを活用
通信は常時SSL化の流れ
“オリジン”を
理解しよう
テスト自動化・CIで
「変化に気づける」
仕組み作り
モジュール化・スコープ
分離技術に注目

最後にお知らせ
#htmlhifivewww.facebook.com/htmlhifive
Web
www.htmlhifive.com
「HTML5？それともネイティブ？
スマホ業務アプリの作り方4種を徹底比較」
http://techtarget.itmedia.co.jp/tt/news/1412/17/news02.html
TechTarget様で
記事を書かせていただきました。
アプリ例なども載せているので
ぜひご覧ください！

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

www.htmlhifive.com

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

Recommended

More Related Content

What's hot (20)

Viewers also liked (11)

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

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