ゲームだけじゃない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アプリケーション開発プラットフォームを開発してます

アジェンダ


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

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


<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」に対する認識


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)

今日のスコープはこちら

×企業システム


企業システムのトレンド


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

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

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

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

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


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

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

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

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


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

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

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

実現のためのテクノロジ

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

（IndexedDB, WebSQLDB）

• XHR2（Ajax）

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

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

• AppCache • Web Components • WebRTC etc.

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

あるけど…)

例


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


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

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

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

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



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

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

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

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

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

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


A.js

B.js

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

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


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仕様ちょっと変えた」

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

デバッグコードの混入


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

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


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’);

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


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

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

何が違うんですか？」

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


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

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

×開発一回り


HTML5×開発一回り


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

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

実現可能性互換性

開発環境

生産性向上

アジャイル

自動化アーキテクチャ

見積り

人材確保

分業/体制実機動作検証


開発環境

生産性向上

アジャイル


見積り

人材確保


要素技術の状況


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

CI

HTML5対応 IDE＆ツール

BaaS

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


情報収集

やってみる

テストサービス

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

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


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

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


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

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

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

カバレッジ計測 JSCover、…

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

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

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

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


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

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

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

PhoneGap、Trigger.io、…


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

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

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

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


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


www.htmlhifive.com


開発環境

生産性向上

アジャイル


見積り

人材確保


【再掲】要素技術の状況


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

CI

HTML5対応 IDE＆ツール

BaaS

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


情報収集

やってみる

テストサービス

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


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

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

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

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

開発者

hifiveの場合


開発支援ツール

開発コミュニティ

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

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

言語仕様実行環境

単体テスト（QUnit）

静的検査（JSLint/Hint）

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

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

開発環境（Eclipse）

カバレッジ（JSCoverage）

ツール・テスト

規約・ガイド

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

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

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

なぜこうしたか？


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

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

300パターン

300パターン

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

CI環境構築例


Jenkins

VCS(github)

各ブラウザ＠VM Jenkins Agent

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

共有フォルダ

テストホストサーバ

kill agent

① ② ③

④

⑤

⑥

⑦ ⑧ ⑨

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

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

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

テストクライアント

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


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

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

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

おわりに


おわりに


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

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

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


HTML “Living Standard”

商標について


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

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

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

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

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

HTML5 Logo by W3C.

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


www.htmlhifive.com

ゲームだけじゃないhtml5

Technology