クリスマス直前!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

＋

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