ゲームだけじゃないHTML5

豆ナイトPresents
「HTML5ナイト～その導入から活用まで～」

ゲームだけじゃないHTML5

技術本部システム研究開発センター
下田修

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved.
1 2013/3/21

自己紹介
 下田修（しもだおさむ）

 所属はバリバリのSIer…ですがその中の研究所で
技術開発したり案件支援したりしてます

 最近はフロントに近いところをメインに見ています
 会社ではJava（JavaEE, Seasar2）, HTML/CSS/JavaScript,
Flex（Flash）やWPF（.Net）など
 “hifive”というHTML5ベースの
Webアプリケーション開発プラットフォームを開発してます

2

アジェンダ
 HTML5に至る流れをさらっとおさらい
 HTML5×企業システム
 「はじめてのHTML5」をやってみたら
 HTML5×開発一回り
 とあるSIerの開発基盤、の場合

3

思えば遠くへ来たものです

<video>
• (前史) ： IE6長期政権
• 2008 ： iPhone3G発売、Chrome1.0リリース
• 2009 ： HT-03A（Android1.6）発売、Packager for iPhone発表
• 2010 ： Flash vs HTML5
“Thoughts on Flash”、Flash Player 10.1 for Android リリース
• 2011 ： IE9リリース、Firefoxが高速リリースサイクルを採用
• 2012 ：ブラウザプラグイン排除の流れ
Flash Player for Android提供終了、IE10におけるActiveX P-in廃止
• 2013 ： HTML5が「第3のモバイルOS」アプリ開発技術の中心
4

「HTML5」に対する認識
 Flash(特に広告・ビデオ)の代替技術
 ゲームプラットフォーム
今日のスコープは
 スマートフォン向けWebサイト構築技術こちら
 マルチプラットフォーム対応
アプリケーション開発技術
「ドキュメント記述言語」（静的）から
「アプリケーションプラットフォーム」（動的）へ
Canvas iSVG Video/Audio Forms
CSS3
HTML5 XHR Level2
狭義 (Ajax)
File API
JavaScript
with APIs Geolocation Web
Workers WebSocket
Indexed DB
Web Offline
(Web SQL
Storage
DB)
App Caching
広義
5 5

×企業システム

6

企業システムのトレンド
クラウド、モバイル、ビッグデータ、ソーシャル
BYOD、BI/DSS、コンシューマライゼーション、・・・

・場所を選ばない可搬性
- 肌身離さず持っている
・直観的な指先での操作性
クラウド
・資料作成（図形・テキスト）
・大きな画面での参照
・パワフルな計算能力
・大きな画面での参照・緻密な操作性
- 対面での情報共有・豊富なアプリケーション
・十分なバッテリー
・直観的な指先での操作性
7

HTML5って今までと何が違うんだろう…？
HTML5を活用したWebシステムよくある社内Webシステム

• 視覚的表現 • データを単純表示
• ユーザー操作にリアルタイムに反応 • 画面遷移ベースの一括更新
• 動的な部分画面更新
8

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

例

10

例：QosmoNavire(コスモナヴィール)の場合
 目的
 DCにおける障害監視・原因追究
 システム構成・状態の可視化
 利用技術
 SVG
 CSS3（CSS Transform等）
 その他Ajax、ES5 API、DOM Level3
API 等
 特長：高速描画
 ノード・エッジ等のレイヤリング
 可視範囲外の描画の省略
 データ層⇒ビュー層への更新伝搬

11

「はじめてのHTML5」をやってみたら

12

 5人集めてスマホ向けアプリを作ってみた
 新人～ふつうのWeb/Javaアプリ開発の経験ありの人
 JavaScriptは「バリデータや簡単なスクリプトくらいは…」という程度
 jQueryは「勉強会で聞いたことはある…」
 アプリの仕様
 スマートフォン向けアプリ
 基本的なCRUD、Ajax、グラフ描画
 jQuery / jQuery Mobile使用
 HTML5っぽいものを詰め込む
 <video>、WebSQLDB、CSS Animation、Media Queries、
Server-Sent Event、…

とりあえず各自調べながら作ってみよう！
13

スコープを意識しない記述でコンフリクト

A.js

B.js

同時にJS読み込んだら
動かないんですけど
14

業務処理と画面操作の混在

db.transaction(function(tr) {
var query = "INSERT INTO Food(FoodId, Name, …);
DB操作/サーバー通信
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("");
画面更新
}
);
});

「ごめんサーバAPI仕様
ちょっと変えた」
「…どこ変えればいいんだ…」

15

デバッグコードの混入

「ここボタン押してから重いなぁ」
「調べ、…ますか…」

16

ビュー生成方法もいろいろ
var foodCountDiv = document.createElement("div");
foodCountDiv.setAttribute("class", "food_count_div");
var downCountButton = document.createElement("input");
downCountButton.value = "-";
downCountButton.setAttribute("onclick", "downFoodCount(" + foodId + ")");

$(‘<div class=“food_count_div”><input value=“’ + DEFAULT_VALUE
+ ’” onclick=“downFoodCount(‘ + foodId + ’)”>’).appendTo(‘.list’);

「リストにあてるCSSクラス変えて」
「GREP→全置換→動かない…」

17

イベントハンドラの書き方もバラバラ

• <li onclick=“func()”>
• $(‘.item’).bind(‘click’, function(){});
• $(‘.item’).click(function(){});
• $(‘ul’).on(‘.item’, ‘click’, function(){});

「onclickはさすがにNGだよねー」
「ところでbind()とclick()って
何が違うんですか？」

18

もちろん画面ロード時の初期化処理だって

• (function(){})();
• $(function(){});
• $(window).bind(‘load’, function(){});
• init();

「なぜかちょっとずつ
動くタイミングが違う…」

19

×開発一回り

20

HTML5×開発一回り
要件定義設計実装テスト運用・保守

アーキテクチャ自動化
実現可能性互換性
見積り生産性向上
実機動作検証
分業/体制
開発環境
アジャイル
人材確保

サーバーサイドで通ってきた道を
今度はクライアントサイドで
21

要素技術の状況

アーキテクチャ自動化 CI
実現可能性 MV*フレームワークテストフレームワーク
情報収集互換性
やってみる
JS変換型言語デバッグツール
UIフレームワーク
BaaS 実機動作検証
分業/体制テストサービス
開発環境
HTML5対応
アジャイル IDE＆ツール
人材確保

技術面をカバーするツール・ライブラリ・フレームワークは
揃いつつある

22

個別要素技術の紹介（設計・実装）
 DOM操作（＆基本的なブラウザ差異吸収）
 jQuery、Underscore、…
 MV*フレームワーク
 Backbone.js、Knockout、AngularJS、hifive、…
 CSSフレームワーク
 SCSS、LESS、…
 ビューテンプレートエンジン
 Hogan、EJS、Handlebars、…
 UIフレームワーク
 Bootstrap、jQueryUI、YUI、jQuery Mobile、…
 旧ブラウザ対応
 IE9.js、html5shiv、…
 ドキュメント生成
 JSDoc3、…
 デバッグツール
 ブラウザ内蔵開発者ツール、Adobe Shadow、…

23

個別要素技術の紹介（テスト）
 テストフレームワーク
 QUnit、Jasmine、JsTestDriver、Selenium、…
 テストモック作成ライブラリ
 Sinon.JS、…
 CI （テストフレームワークとも連携）
 Jenkins、Testacular、…
 カバレッジ計測
 JSCover、…
 ソースコード静的検査
 JSLint、JSHint、…
 JSソースコード最適化
 Closure Compiler、UglifyJS、…
 実機動作検証サービス
 AppKitBox/Remote TestKit for Android（NTTレゾナントさん）
24

個別要素技術の紹介（その他）
 言語（JavaScriptの問題点を解決）
 静的型付け：TypeScript、Haxe、JSX、…
 Dart、CoffeeScript、…
 開発環境
 Sencha、appMobi、…
 VisualStudio、WebStorm、…
 Adobe Edge、Dreamweaver、…
 ハイブリッドアプリケーション開発（スマートデバイス向け）
 PhoneGap、Trigger.io、…

25

技術面をカバーするツール・ライブラリ・
フレームワークは揃いつつある

自分たちのニーズ、HTML5を採用して
得たいメリットを考慮して適切なものを選択

勿論、これがなかなか大変なわけですが・・・

26

とあるSIerの開発基盤、の場合

27

www.htmlhifive.com

こんなものを作ってます。
オープンソースです。

28

【再掲】要素技術の状況

アーキテクチャ自動化 CI
実現可能性 MV*フレームワークテストフレームワーク
情報収集互換性
やってみる
JS変換型言語デバッグツール
UIフレームワーク
BaaS 実機動作検証
分業/体制テストサービス
開発環境
HTML5対応
アジャイル IDE＆ツール
人材確保

ある程度以上の規模の案件を成功させるには
整合性のある技術選択と人間系の整備が必須
29

協働
• アジャイル・高速プロトタイピング
• 分散/分担開発の枠組み

開発者ユーザー
• フレームワーク • サンプルアプリ
• 高速・高機能部品 • すぐに使える
• 開発ガイドクラウドサービス
• 支援ツール • HTML5技術の啓蒙
• 開発者教育

30

hifiveの場合
規約・ガイド
ツール・テスト開発コミュニティ
チーム開発で
開発環境困らない
（Eclipse）開発支援ツールサンプル・ JSの書き方
MVC、チュートリ・JSDoc
静的検査疑似的なデータ型定義アル・コード補完/アウト
（JSLint/Hint）ライン
コアフレームワーク・スコープの考慮
単体テストランタイム(自製)
（QUnit）
サーバーサイド
カバレッジ・REST/JSON
（JSCoverage）言語仕様・データ同期機構
実行環境
その他ノウハウ
UI（ビュー層）は
・パフォーマンスを
他ライブラリを利用
考慮した記述、etc.

31

なぜこうしたか？
 コアアーキテクチャ
 画面機能の柔軟な分割/構造化とライフサイクル制御は必須
 敷居を低く
 JavaScriptのプロ、でなくてもミスしにくいような書き方に誘導
 保守・仕様変更時の致命的なデータ不整合を防ぎたい
 UI
 ブラウザごとのサポート度合い・挙動の違いが激しい
 基本的なUI部品は他ライブラリに任せる（良いものが既にある）
 高速動作/高機能が求められるものは順次開発
 まずは使い始めて見る、実行しながらノウハウを蓄える！

32

得られたメリット例（技術系）
 コードの見通しが良くなった
 機能ごとに分担して設計・実装
 非同期プログラミングのスタイル統一
 HTML5な世界では「非同期」の扱いは重要
 FWのサポートにより非同期処理のエラー処理を統一
 テストしやすくなった
 単体テスト/カバレッジ計測が容易

今に始まったことではない、
でも、必要なことを
確実にやってはじめて
規模の増加に対応できる
33

例：テストが大変。どうする？
 hifiveのフレームワークランタイムの
テスト環境の組み合わせ：
 ブラウザ：5
 jQueryのバージョン：10 これらの組み合わせなので…
 ビルド：2
 IEのDocumentMode：2～4

300パターン
 さらに、手持ちのスマホ15機種でテスト

300パターン
34

CI環境構築例
テストホストサーバ

テストコード
Jenkins ホストサーバ

③ ⑥ ②
① VCS(github)
⑤ 共有フォルダ

⑨ ⑦
⑧
kill agent • 環境組み合わせごとにジョブを作成
各ブラウザ＠VM • VM上の各ブラウザでQUnitテスト
Jenkins ⇒1ランナーごと結果をサーバーに送信
Agent ④ テストクライアント
⇒JUnitXML形式に変換して保存
⇒Jenkinsに吸い上げ
• スマホの場合はランナーを順次自動実行
⇒最後にまとめて吸い上げる
35

得られたメリット例（人間系）
 見積りの精度向上
 アーキテクチャを整備することで計数が可能に
 画面数、コントローラ数、イベントハンドラ数、サーバAPI数、…
 スクラッチ or Not、1画面内のハンドラ数、…などに応じて
係数をかける
 要件の早期収束・“アジャイル”への対応
 動きの多い画面はプロトタイプを作る
 プロトタイプ自体をより迅速に作る仕組みも整備中
 ノウハウの蓄積
 古いIE、Android（特に2.x系）はやっぱりつらい
 ライブラリにフィードバックし、同じ過ちを繰り返さない

36

おわりに

37

おわりに
 全てのアプリ、全ての画面、全ての機能を
今すぐ「HTML5化」しなくてもよい
 HTML5は今までのWebの延長線上にある。
これは大きなメリット
 本当に必要な所から、必要十分性を確かめて取り組む
 ツール・フレームワーク・開発環境等
必要なパーツは出てきている
 “定番化”にはもう少し時間はかかるか
 ノウハウ蓄積をそろそろ始めてみませんか？

38

HTML “Living Standard”

39

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

40

www.htmlhifive.com

41

ゲームだけじゃないHTML5

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (9)

Semelhante a ゲームだけじゃないHTML5

Semelhante a ゲームだけじゃないHTML5 (20)

ゲームだけじゃないHTML5