2014 年 12 月 18 日の schoo(スクー) さんに出演した際に使用したスライドです。 http://schoo.jp/class/1687/room 「iOS & Android アプリ」と書いてますが、HTML5 でシンプルな 2D ゲームを作る内容です。 ただし、デモとおしゃべりがメインの内容なので、スライドはあんまり意味がないよう。。

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 とは?

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

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

11. マルチデバイス ハイブリット アプリ
～ 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

12. マルチデバイス ハイブリット アプリが
提供する機能
～ シームレスな開発環境構築とデバッグ機能 ～
> 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 が必要

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

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

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

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

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

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

20. 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…

21. まとめ
iOS
2013