クリスマス直前!html5 で作る♥はじめての ios & android アプリ開発
TRANSCRIPT
クリスマス直前!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
＋
CORDOVA とは?
アプリの構造
Web ビュー
オペレーティングシステム
コンテンツ
API
API
プラグインプラグイン
ネイティブ呼び出し
JavaScript
マルチ デバイスハイブリット アプリ
マルチデバイスハイブリットアプリ～ iOS、Android 向けのアプリを開発～
CSS | HTMLJavaScript | 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
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…
まとめ
iOS2013
