クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発

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

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

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

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

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

クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発

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

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

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

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

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

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

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

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

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

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…

クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発

More Related Content

What's hot (20)

Similar to クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発 (20)

More from Osamu Monoe (20)