ゲームだけじゃないhtml5

ゲームだけじゃないHTML5

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

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

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

自己紹介

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 2

下田 修（しもだ おさむ）

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

最近はフロントに近いところをメインに見ています 会社ではJava（JavaEE, Seasar2）, HTML/CSS/JavaScript,

Flex（Flash）やWPF（.Net）など “hifive”というHTML5ベースの

Webアプリケーション開発プラットフォームを開発してます

アジェンダ

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

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

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

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 4

<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」アプリ開発技術の中心

「HTML5」に対する認識

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 5

Flash(特に広告・ビデオ)の代替技術 ゲームプラットフォーム スマートフォン向けWebサイト構築技術 マルチプラットフォーム対応 アプリケーション開発技術

5

「ドキュメント記述言語」（静的）から

「アプリケーションプラットフォーム」（動的）へ

CSS3

JavaScript with APIs

Web Storage

Web Workers

Geolocation

Indexed DB (Web SQL

DB)

Offline App Caching

Canvas iSVG Video/Audio

HTML5 Forms

狭義

広義

File API

WebSocket

XHR Level2 (Ajax)

今日のスコープはこちら

×企業システム

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 6

企業システムのトレンド

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 7

クラウド ・場所を選ばない可搬性 - 肌身離さず持っている ・直観的な指先での操作性

・資料作成（図形・テキスト） ・大きな画面での参照 ・パワフルな計算能力 ・緻密な操作性 ・豊富なアプリケーション

・大きな画面での参照 - 対面での情報共有 ・十分なバッテリー ・直観的な指先での操作性

クラウド、モバイル、ビッグデータ、ソーシャル BYOD、BI/DSS、コンシューマライゼーション、・・・

HTML5って今までと何が違うんだろう…？

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 8

HTML5を活用したWebシステム よくある社内Webシステム

• 視覚的表現 • ユーザー操作にリアルタイムに反応 • 動的な部分画面更新

• データを単純表示 • 画面遷移ベースの一括更新

業務アプリ分野におけるHTML5への期待

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 9

データ可視化、BI 高い表現力 より良い操作性 リアルタイム（差分更新） ハイパフォーマンス

スマートデバイス対応 営業・販売業務の高度化 B2Cサイトのスマホ対応 BYOD オフライン動作とデータ同期

互換性向上 ベースラインの確実な動作

実現のためのテクノロジ

• Canvas • SVG • CSS3 • File API • データベース

（IndexedDB, WebSQLDB）

• XHR2（Ajax）

• WebSocket • CSS Media Queries • デバイス連携

（センサー、カメラ、…）

• AppCache • Web Components • WebRTC etc.

技術はある！ (いろいろ大変なことも

あるけど…)

例

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 10

例：QosmoNavire(コスモナヴィール)の場合

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 11

目的 DCにおける障害監視・原因追究 システム構成・状態の可視化

利用技術 SVG CSS3（CSS Transform等） その他Ajax、ES5 API、DOM Level3

API 等 特長：高速描画 ノード・エッジ等のレイヤリング 可視範囲外の描画の省略 データ層⇒ビュー層への更新伝搬

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

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 12

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 13

5人集めてスマホ向けアプリを作ってみた 新人～ふつうのWeb/Javaアプリ開発の経験ありの人 JavaScriptは「バリデータや簡単なスクリプトくらいは…」という程度

jQueryは「勉強会で聞いたことはある…」

アプリの仕様 スマートフォン向けアプリ 基本的なCRUD、Ajax、グラフ描画 jQuery / jQuery Mobile使用 HTML5っぽいものを詰め込む

<video>、WebSQLDB、CSS Animation、Media Queries、 Server-Sent Event、…

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

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

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 14

A.js

B.js

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

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

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 15

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操作/サーバー通信

計算ロジック呼出

画面更新

「ごめんサーバAPI仕様 ちょっと変えた」

「…どこ変えればいいんだ…」

デバッグコードの混入

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 16

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

ビュー生成方法もいろいろ

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 17

var foodCountDiv = document.createElement("div"); foodCountDiv.setAttribute("class", "food_count_div"); var downCountButton = document.createElement("input"); downCountButton.value = "-"; downCountButton.setAttribute("onclick", "downFoodCount(" + foodId + ")");

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

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

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

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 18

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

「onclickはさすがにNGだよねー」 「ところでbind()とclick()って

何が違うんですか？」

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

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 19

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

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

×開発一回り

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 20

HTML5×開発一回り

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

要件定義 設計 実装 テスト 運用・保守

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

実現可能性 互換性

開発環境

生産性向上

アジャイル

自動化 アーキテクチャ

見積り

人材確保

分業/体制 実機動作検証

実現可能性 互換性

開発環境

生産性向上

アジャイル

自動化 アーキテクチャ

見積り

人材確保

分業/体制 実機動作検証

要素技術の状況

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 22

MV*フレームワーク テストフレームワーク

CI

HTML5対応 IDE＆ツール

BaaS

JS変換型言語 デバッグツール UIフレームワーク

要件定義 設計 実装 テスト 運用・保守

情報収集

やってみる

テストサービス

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

個別要素技術の紹介（設計・実装）

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 23

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、…

個別要素技術の紹介（テスト）

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 24

テストフレームワーク QUnit、Jasmine、JsTestDriver、Selenium、…

テストモック作成ライブラリ Sinon.JS、…

CI （テストフレームワークとも連携） Jenkins、Testacular、…

カバレッジ計測 JSCover、…

ソースコード静的検査 JSLint、JSHint、…

JSソースコード最適化 Closure Compiler、UglifyJS、…

実機動作検証サービス AppKitBox/Remote TestKit for Android（NTTレゾナントさん）

個別要素技術の紹介（その他）

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 25

言語（JavaScriptの問題点を解決） 静的型付け：TypeScript、Haxe、JSX、… Dart、CoffeeScript、…

開発環境 Sencha、appMobi、… VisualStudio、WebStorm、… Adobe Edge、Dreamweaver、…

ハイブリッドアプリケーション開発（スマートデバイス向け）

PhoneGap、Trigger.io、…

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 26

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

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

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

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

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 27

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

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 28

www.htmlhifive.com

実現可能性 互換性

開発環境

生産性向上

アジャイル

自動化 アーキテクチャ

見積り

人材確保

分業/体制 実機動作検証

【再掲】要素技術の状況

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 29

MV*フレームワーク テストフレームワーク

CI

HTML5対応 IDE＆ツール

BaaS

JS変換型言語 デバッグツール UIフレームワーク

要件定義 設計 実装 テスト 運用・保守

情報収集

やってみる

テストサービス

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

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 30

ユーザー • フレームワーク • 高速・高機能部品 • 開発ガイド • 支援ツール • 開発者教育

• サンプルアプリ • すぐに使える

クラウドサービス • HTML5技術の啓蒙

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

開発者

hifiveの場合

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 31

開発支援ツール

開発コミュニティ

サンプル・ チュートリアル

コアフレームワーク ランタイム(自製)

言語仕様 実行環境

単体テスト（QUnit）

静的検査（JSLint/Hint）

チーム開発で 困らない JSの書き方 ・JSDoc ・コード補完/アウトライン ・スコープの考慮

その他ノウハウ ・パフォーマンスを考慮した記述、etc.

開発環境 （Eclipse）

カバレッジ （JSCoverage）

ツール・テスト

規約・ガイド

サーバーサイド ・REST/JSON ・データ同期機構

MVC、 疑似的なデータ型定義

UI（ビュー層）は 他ライブラリを利用

なぜこうしたか？

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 32

コアアーキテクチャ 画面機能の柔軟な分割/構造化とライフサイクル制御は必須 敷居を低く

JavaScriptのプロ、でなくてもミスしにくいような書き方に誘導

保守・仕様変更時の致命的なデータ不整合を防ぎたい

UI ブラウザごとのサポート度合い・挙動の違いが激しい

基本的なUI部品は他ライブラリに任せる（良いものが既にある）

高速動作/高機能が求められるものは順次開発

まずは使い始めて見る、実行しながらノウハウを蓄える！

得られたメリット例（技術系）

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 33

コードの見通しが良くなった 機能ごとに分担して設計・実装

非同期プログラミングのスタイル統一 HTML5な世界では「非同期」の扱いは重要 FWのサポートにより非同期処理のエラー処理を統一

テストしやすくなった 単体テスト/カバレッジ計測が容易

今に始まったことではない、 でも、必要なことを

確実にやってはじめて 規模の増加に対応できる

例：テストが大変。どうする？

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 34

hifiveのフレームワークランタイムの テスト環境の組み合わせ： ブラウザ：5 jQueryのバージョン：10 ビルド：2 IEのDocumentMode：2～4

さらに、手持ちのスマホ15機種でテスト

300パターン

300パターン

これらの組み合わせなので…

CI環境構築例

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 35

Jenkins

VCS(github)

各ブラウザ＠VM Jenkins Agent

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

共有フォルダ

テストホストサーバ

kill agent

① ② ③

④

⑤

⑥

⑦ ⑧ ⑨

• 環境組み合わせごとにジョブを作成 • VM上の各ブラウザでQUnitテスト

⇒1ランナーごと結果をサーバーに送信 ⇒JUnitXML形式に変換して保存 ⇒Jenkinsに吸い上げ

• スマホの場合はランナーを順次自動実行 ⇒最後にまとめて吸い上げる

テストクライアント

得られたメリット例（人間系）

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 36

見積りの精度向上 アーキテクチャを整備することで計数が可能に 画面数、コントローラ数、イベントハンドラ数、サーバAPI数、… スクラッチ or Not、1画面内のハンドラ数、…などに応じて 係数をかける

要件の早期収束・“アジャイル”への対応 動きの多い画面はプロトタイプを作る プロトタイプ自体をより迅速に作る仕組みも整備中

ノウハウの蓄積 古いIE、Android（特に2.x系）はやっぱりつらい ライブラリにフィードバックし、同じ過ちを繰り返さない

おわりに

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 37

おわりに

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 38

全てのアプリ、全ての画面、全ての機能を 今すぐ「HTML5化」しなくてもよい HTML5は今までのWebの延長線上にある。 これは大きなメリット

本当に必要な所から、必要十分性を確かめて取り組む

ツール・フレームワーク・開発環境等 必要なパーツは出てきている “定番化”にはもう少し時間はかかるか ノウハウ蓄積をそろそろ始めてみませんか？

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 39

HTML “Living Standard”

商標について

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 40

NS Solutions、NS（ロゴ）、NSSOLは、新日鉄住金ソリューションズ株式会社の登録商標です。

hifive、hifive(ロゴ)は、新日鉄住金ソリューションズ株式会社の登録商標です。

QosmoNavire＼コスモナヴィールは、新日鉄住金ソリューションズ株式会社の登録商標です。

JAVAは､米国ORACLE Corp.の登録商標です｡

Windowsは､米国Microsoft Corp.の米国及びその他の国における商標又は登録商標です。

HTML5 Logo by W3C.

その他本文記載の会社名及び製品名は、それぞれ各社の商標又は登録商標です。

Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 41

www.htmlhifive.com