HTML5とモバイル

株式会社GClue佐々木 陽

HTML5 Caravan

簡単な市場動向

スマフォ市場3ヶ月 1年

iOS 5220万 2.17億台Android 1億2500万 5億万台

iOS, Android 出荷数 7億1700万台/年の勢い

CPUの進化

CPUはAndroidから15倍程度向上2倍/年程度

CPUは、2年で倍の速度になる

GPUの進化

2年で5倍程度高速化

GPU(Graphics処理)は2年で5倍になる

iPhone4S

26.64 GFlops 12.8 GFlops

iPhone4Sと、廉価ノートパソコンは同じスペック。

Galaxy S4

51.2 GFlops

Galaxy S4と、中レベルのノートパソコンは同じスペック。

51.2 GFLOPS

Googleの2軸

7.5億の登録ユーザ 累計出荷 9億台

Android最新OS 4.2.2

Mobile Camera TV Glass

累計出荷数: 9億台(この1年で5億台)累計アプリDL数: 480億(2013/5/15)

iOS最新OS 7.0累計出荷数: 6億台累計アプリDL数: 500億DL(2013/5/16)アプリ数: 90万本(97%が毎月DL)アプリ数(iPad): 37万5000本ストアアカウント: 5億7500万累計アプリ売上げ: 1兆円昨年度アプリ売上げ: 5000億円

AppStoreユーザアカウント 開発者 アプリ数 累計ダウンロード 1日のダウンロー

ド数

iTunes AppStore 5億7500万600万人

(1年で150万人増)900,000

375,000(iPad)500億

(2013年5月16日)����

Google Play 非公開 850,000 480億(2013年5月15日)

����

BlackBerry World 非公開 250,000120,000(BB10)

60億(2013年7月8日) 600万

WindowsPhone Store 非公開 145,000 非公開 非公開

ダウンロード売上げ比率: iOS 74%, Android 20%, etc 6% (WWDC2013より）ちなみに、一昨年のiTunes AppStoreアプリ売上げは$50billion (5000億円)

出荷数累計出荷台数 1年前の累計出荷数 1日の増加数

iOS 6億 3億6,500万台(2012年3月30日) ��

Android 9億 4億台(2012年5月15日) ���

iOS/Androidだけで、194万台/日iOS/Androidだけで、7億台/年

アプリケーション経済の誕生

アプリを消費する時間がどんどん増加

Tizen Developer Conference2013

今年で2回目

TDCとは？今年で2回目を迎えるTizen関連の技術者向けConference。

TDCハイライトTizen 2.1の情報Tizen DevPhoneが配布Tizen StoreTizen AppChallange(賞金総額 4億円)Tizen 24時間ハッカーソン

HTML5の話

HTML5アプリとは

広義のHTML5の定義

項目 策定項目 策定Seman+cs HTML5.new.Tag、RDFa、Micro.data、Micro.

format

W3C.HTML5.Working.Group

Online.and.Storage App.Cache、Web.Storage、Indexed.

Database.API、File.API

W3C.Web.Applica+ons.Working.Group

Device.Access Geoloca+on.API、Mic/Camera、AddressBook/Calender、Rota+on

W3C.Geoloca+on.Working.Group、W3C.Device.

APIs.Working.Group

Network WebSocket、ServerMSent.Events W3C.Web.Applica+ons.Working.Group

Mul+media audio,.video W3C.HTML5.Working.Group

3D,.Graphics,.Effect SVG、canvas、WebGL、CSS3.3D Khronos.WebGL,.W3C.SVG.Working.Group,.

W3C.HTML5.Working.Group,.W3C.CSS.Working.

Group

Performance.and.integra+on Web.Workers、XMLHTpRequest.Level.2

CSS3. Include.WOFF W3C.CSS.Working.Group

Firefox OSも、Chrome OSも、広義のHTML5をいかにカバーするかが重要になってきている。また、ここで未定義な事項は、独自拡張でAPIが整備されつつある。

HTML5Web

5億人 7000デバイスをサポート

HTML5アプリ

新規市場

Download型 接続型

成熟市場2009年から試行錯誤

2009年6月6日(終了,LGが買収) 2013年10月2013年2Q2013年1月

BB10 Tizen UbuntuPalm Pre Firefox OS

2013年終わり

2009年7月7日

Chrome OS

2012年6月

Windows Phone8 SailfishOS

2013年??月

HTML5ScoreFirefox BB10 WindowsPhone 8

Tizen Android iOS

OctaneFirefox BB10 WindowsPhone 8

Tizen Android iOS

開発環境Android iOS WP8 BB10 Tizen Firefox Ubuntu Jolla Chrome

HTML5for App × × ○ ○ ○ ○ ○ × ○

Native ○ ○ ○ ○ ○ × ○ ○ ○

C/C++ ○ ○ × ○ ○ × ○ ○ ○

HTML5Score 468 386 320 485 492 393 448

Octane 2016 1698 621 997 1448 - 11624

HTML5アプリとは？

config.xml

manifest.json

XML

JSON

manifest.jsonJSON

zip

HTML5アプリとは？

zipローカルにダウンロード

HTML5アプリをサポートするプラットフォーム

Android iOS WP8 BB10 Tizen Firefox Ubuntu Jolla Chrome

HTML5for App × × ○ ○ ○ ○ ○ × ○

Native ○ ○ ○ ○ ○ × ○ ○ ○

C/C++ ○ ○ × ○ ○ × ○ ○ ○

HTML5Score 468 386 320 485 492 393 448

Octane 2016 1698 621 997 1448 - 11624

HTML5アプリのメリット

config.xml

manifest.json

XML

JSON

manifest.jsonJSON

zip

configやmanifestフ拡張APIへのアクセス情報を記載する事で、拡張APIへアクセス可能になる。

TizenHTML5&APIs Tizen&Device&APIs

Alarm

Applica+on

DataControl

Package

Bluetooth

Messaging

NetworkBearerSelec+on

NFC

Push

SecureElement

Content

Download

FileSystem

MessagePort

Bookmark

Calendar

Contact

DataSync

Power

SystemInfo

SystemSeXng

Time

No+fica+on

Tizenでは、Device APIでセンサーへのアクセスやI/Oへのアクセスが可能になる。

Chrome.OS

Chrome.*&APIsalarms

bookmarks

browserAc+on

browsingData

contentSeXngs

contextMenus

cookies

debugger

declara+veWebRequest

downloads

events

extension

fileBrowserHandler

fontSeXngs

history

I18n

idle

input.ime

management

omnibox

pageAc+on

pageCapture

Chrome&external&APIsexperimental.app

experimental.bluetooth

experimental.devtools.audits

experimental.devtools.console

experimental.discovery

experimental.iden+ty

experimental.infobars

experimental.keybinding

experimental.mediaGalleries

experimental.offscreenTabs

experimental.processes

experimental.serial

experimental.socket

experimental.speechInput

experimental.usb

permissions

privacy

proxy

run+me

scriptBadge

storage

tabs

topSites

Ts

TsEngine

types

webNaviga+on

webRequest

webstore

windows

HTML5&APIs

Chrome OSは、Googleの独自のAPI拡張が頻繁におこなわれ、50を超えるジャンルでの拡張がおこなわれている。

Firefox.OS

41

HTML5&APIs Firefox&OS&WebAPIsAlarm

AudioPolicy

Browser

Contacts

DesktopNo+fica+on

DeviceStorage

FM.Radio

GeoLoca+on

Storage

SystemXHR

TCP.Socket

mozCameras

mozMobileConnec+on

mozMobileNetworkInfo

Firefox&Marketplace&APIsSubmission

Payment

Marketplace

Firefox OSも、Chrome OSと同様に、WebAPIsという形で、独自の拡張が始まっている。

Tizen開発環境

42

Tizen.SDK

(Eclipse.Base)

Tizen.Emulator

(Qemu.base)

Tizen.Simulator

(Chrome.Base)

Ripple.

実機転送(USB)

SDB

Tizenサンプルデモ

43

HTML5 for AppiOS/Android向けにアプリ配信するには？

PhoneGap

HTML5 for Web

Webサーバ

Webページに接続

HTML5 for WebAndroid iOS WP8 BB10 Tizen Firefox Ubuntu Jolla Chrome

HTML5for App × × ○ ○ ○ ○ ○ × ○

Native ○ ○ ○ ○ ○ × ○ ○ ○

C/C++ ○ ○ × ○ ○ × ○ ○ ○

HTML5Score 468 386 320 485 492 393 448

Octane 2016 1698 621 997 1448 - 11624

HTML5アプリ デモ

HTML5+CSS+JavaScriptWebGL

C/C++OpenGL

WebGLWebAudio

HTML5 WebデモRacers

http://g.co/racer

CanvasWebAudioWebSocket

HTML5 Webデモ

https://www.cubeslam.com/

WebGLWebAudioWebRTCWebSocket

World Wide MazeWebGLWebAudioWebSocket

Hardware連携WebSocketを使った連携Tizen 24時間ハッカーソンで審査員特別賞

WebSocket