Weitere ähnliche Inhalte
Ähnlich wie 第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」 (20)
Kürzlich hochgeladen (10)
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
- 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
- 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. クライアントの構成要素と記述言語の関係
Copyright © 2015 NS Solutions Corporation, All rights reserved. 7
ビジュアル
デザイン
インタラク
ション
デザイン
画面ロジック 業務ロジック
HTMLCSS JavaScript
クライアントサイドでの処理が増え、HTML5の表現力を活かそうとすると、
単にJavaScriptの“量”が増えるだけでなく、“役割”が増える。
⇒ 問題の整理・分割が重要
多人数開発を効率化する仕組み、影響範囲の最小化
※矢印の太さは関係の強さを表す
記述言語
クライアント
の構成要素
- 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操作/サーバー通信
計算ロジック
画面更新
- 12. 業務システムの一般的特徴
• 企業のIT戦略と課題
– IT投資における「維持費用」の抑制⇒攻めの投資への転換
– 「SMAC」や「IoT」などの新興発展技術群への対応
– 多数のシステムに対する開発~運用全般にわたる統制
• 情報漏えい他セキュリティリスクへの対応も
• 開発
– 多人数での分担・分散チーム開発
– 外部システムとの接続
– スモールスタート、スパイラル・アジャイル的開発スタイルも
増えている
• 運用・保守
– 業務の変更に伴って改造されてゆく
– 数年~10年以上使われる
• 開発(保守)に携わるメンバーが途中で変わっていくことも多い
Copyright © 2015 NS Solutions Corporation, All rights reserved. 12
※本資料で主にターゲットとする
「業務システム」についての説明です
※
- 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. まとめると
Copyright © 2015 NS Solutions Corporation, All rights reserved. 14
「Webアプリ」が元々持つメリット
(インストールレス、マルチデバイス性 etc.)
・リッチクライアント/ネイティブアプリ的な
機能/操作性/パフォーマンス
・開発技術基盤の統一
- 16. HTML5に対する懸念
Copyright © 2015 NS Solutions Corporation, All rights reserved. 16
要件定義 設計 実装 テスト 運用・保守
サーバーサイドで通ってきた道を
今度はクライアントサイドで
実現可能性 互換性
開発環境
生産性向上
アジャイル
自動化アーキテクチャ
見積り
人材確保
分業/体制
実機動作検証
開発プロセスをトータルにサポート
フレームワークに加え+ライブラリ・ツール・ドキュメント・教育
- 18. 棚割り
Copyright © 2015 NS Solutions Corporation, All rights reserved. 18
【要件】
・タブレット、タッチ操作への対応
(その場でレイアウトを変更できる)
【テクノロジ】
・タッチイベント
・canvas
http://www.htmlhifive.com/ja/gallery/planogram/
htmlhifive.com
“デモ”ギャラリーで
ご覧いただけます
- 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. データ視覚化(チャート)
Copyright © 2015 NS Solutions Corporation, All rights reserved. 20
【要件】
・クライアントで
リアルタイムに図形描画
(データ転送量削減, 自動スケール)
・Internet Explorer8でも軽快に動作
【テクノロジ】
・SVG
・VML
(shape/pathによる効率的な描画)
https://www.youtube.com/watch?v=z6GcasA6MD8
- 21. データ視覚化(グラフ表現)
Copyright © 2015 NS Solutions Corporation, All rights reserved. 21
【要件】
・数千以上のノード/エッジの描画
・インタラクティブ性
(ノードの移動/編集/部分展開など)
【テクノロジ】
・SVG
・可視範囲のみ描画
(・DOMのPooling)
(・データバインド)
https://www.youtube.com/watch?v=ijYX4ul4B98
- 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. 技術の採否
サイト 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.
- 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. 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. Copyright © 2015 NS Solutions Corporation, All rights reserved. 27
Android 5.0が正式発表、
WebViewアプリ化で個別更新可能に
http://itpro.nikkeibp.co.jp/atcl/column/14/277462/112800012/
- 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. Copyright © 2015 NS Solutions Corporation, All rights reserved. 29
Webの世界は
「継続的に、少しずつ変わっていく」
「継続的な変化に対応し続けられる」
仕組みが必要
「ブラウザはIE8限定、画面サイズは1024x768固定」
「HTML5対応ブラウザに対応、
PC・タブレットを含むマルチデバイスに対応」
という時代から…
という時代へ
- 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. 大規模化への対応
• 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フレームワーク、依存性の動的解決機能の提供
- 33. パフォーマンス
• 計測可能な仕組みを整える
• コンテンツの整理・厳選
– 特にモバイルでは初期表示の高速化
Copyright © 2015 NS Solutions Corporation, All rights reserved. 33
例:www.htmlhifive.comのページのダウンロード時間
(Google Webmaster Toolより)
初期表示は通信の数・量に気を配る
JSの実行速度は開発者ツールを活用
運用面の対策
Google PageSpeed Insightsによる検査と
改善提案の例
- 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による
パフォーマンス計測の例
オンデマンド読み込み、ファイルマージ機能の提供
メソッドの実行時間計測機能の提供
- 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化の流れ
“オリジン”を理解しよう
- 38. まとめ
Copyright © 2015 NS Solutions Corporation, All rights reserved. 38
機能性
継続的進化への
対応
パフォーマンス セキュリティ
- 39. まとめ
Copyright © 2015 NS Solutions Corporation, All rights reserved. 39
機能の対応状況は要注意
データ視覚化の
ベース技術は整ってきた
初期表示は
通信の数・量に気を配る
JSの実行速度は
開発者ツールを活用
通信は常時SSL化の流れ
“オリジン”を
理解しよう
テスト自動化・CIで
「変化に気づける」
仕組み作り
モジュール化・スコープ
分離技術に注目
- 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. 商標について
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. Copyright © 2015 NS Solutions Corporation, All rights reserved. 42
www.htmlhifive.com