1.
クリスマス直前!
HTML5 で作る♥
はじめての iOS & Android
アプリ開発
デベロッパー&エクスペリエンス統括本部
テクノロジー エバンジェリスト

2.
アジェンダ
•開発プラットフォームとしての
HTML5 アプリ
•Apache Cordova について
•HTML5 を使ったカジュアルゲーム開発

3.
アプリ開発基盤としての HTML5
～ベンダーの垣根を越えた共通の仕様～

4.
HTML5 を取り巻く状況
iOS
Chrome AppsFirefox OS
Titanium
Mobile

5.
開発ツールについて

6.
Visual Studio 2013 HTML5
～ Update 2 による大幅な機能強化 ～
2013
ユニバーサルアプリ
ネイティブ アプリ
Web ストア アプリ Windows Phone XBOX
iOS
Multi-Device
Hybrid Apps
＋

7.
CORDOVA とは?

8.
アプリの構造
Web ビュー
オペレーティングシステム
コンテンツ
API
API
プラグインプラグイン
ネイティブ
呼び出し
JavaScript

9.
マルチ デバイス
ハイブリット アプリ

10.
マルチデバイス ハイブリット アプリ
～ iOS、Android 向けのアプリを開発 ～
CSS | HTML
JavaScript | TypeScript
iOS
Multi-Device
Hybrid Apps
Update 2 •Windows 8.1
• Update 3 からは Windows 7も
•Visual Studio 2013
•Professional
•Ultimate
•Premium

11.
マルチデバイス ハイブリット アプリが
提供する機能
～ シームレスな開発環境構築とデバッグ機能 ～
> 4.4 : 〇
< 4.4 : ×
iOS : ×
• Android 2.33 & 4+
• iOS 6 ,7 & 8
iOS : ×
: 〇
“ ”
: 〇
iOS : 〇
(※) Apache Ripple
(※1) Windows, Phone 8.1 も
開発可能
(※2) iOS アプリのビルド
には Mac が必要

12.
HTML5 を使った
カジュアルゲーム開発

13.
HTML5 の機能を使ったゲームの種別
～おおまかに 2 つに大別 ～
2D カジュアルゲーム
3D CG ゲーム
Canvas
WebGL
SVG

14.
HTML5 の機能を使ったゲームの種別
～おおまかに 2 つに大別 ～
2D カジュアルゲーム
3D CG ゲーム
Canvas
WebGL
SVG

15.
Canvas とSVG どっちでつくる?
～技術的特性がちがう ～
<canvas> <svg>
複雑なシーン、リアルタイムの
数学的アニメーション 静的な画像
高パフォーマンス
(フィルター、レイトレース)
表示と印刷のための
高品質ドキュメント

16.
Canvasを使った
はぢめての HTML5
カジュアルゲーム開発

17.
Canvas を使ったゲームプログラミングの流れ
Canvas に画像を表示
タイムフレーム処理
を実装
操作系を実装
当たり判定など
• Etc..
• リスタート機能
• スタート画面
• 終了画面
アクションへの効果

18.
HTML5 のゲームエンジン
～たくさんのゲームエンジンが用意されている～
• ゲーム開発に必要な機能があらかじめ
用意されている
• enchant.js
• CreateJS
• gameQuery
• Crafty
• Gamvas
• Arctic.js
• ティラノスクリプト
• jGen
• Almight
• StageXL for Dart
• jgame.js
• Pulse
• Phaser
• Quintus
• Panda.js
• GogoMakePlay
• melon.js
• Jaws
• Collie
• FlashJS
• Isogenic Game Engine
• Akihabara
• Panda.js
• Canvas Engine
• Etc…

19.
まとめ
iOS
2013