HTML5&Androidなど勉強会 in 大阪での発表資料です。

1. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
アンドロイダー的に
HTML5でどこまでできそうか
住友 孝郎
@cattaka_net

2. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
自己紹介
● 住友 孝郎(すみとも たかお)
● 株式会社ブリリアントサービス所属
● 業務系Webアプリ開発(前職)
● Androidアプリケーション開発
● ソフトウェアディベロッパー
住友 孝郎
@cattaka_net

3. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
アプリ作ったり

4. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
Android+GAEでアプリ作ったり

5. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
ゲーム作ったり

6. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
電子工作したり

7. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
ロボット作ったり

8. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
ロボット作ったり
http://goo.gl/NAjBW

9. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
ラジコン作ったり
←に出展します
8月10日〜11日

10. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
電脳眼鏡かけさせられたり
Mobile World Congress 2013 ＠スペイン

11. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
帽子かぶったり

12. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
3Dプリンター買ってみたり

13. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
人形作ったり
↓モデル
↑作った

14. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
ソフトウェア
デベロッパーです

15. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
HTML5でアプリが作れそうか？
どのくらい実装されてるのか？

16. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
html5test.com を見ながら調べました

17. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
スコア
● 標準的なブラウザだとChromeが高い
● Firefoxも健闘
● Android標準とWebViewはもういいよね、、、
● Firefox Mobileが意外にがんばる
PC Android
Chrome 28 Firefox 22 IE11 Chrome 25 Android4.0 WebView
Scores 463 410 355 417 422 297 288 387
Bonus 13 14 6 11 14 3 3 14
Firefox OS
1.0.1.0-pre
Firefox
Mobile 22

18. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
ブラウザ別、中項目ごとスコア http://html5test.com/ より
PC Android
Chrome 28 Firefox 22 IE11 Chrome 25 Android4.0
Scores 463 410 355 417 422 297 288 387
Bonus 13 14 6 11 14 3 3 14
Parsing rules 10 10 10 10 10 10 10 10
Canvas 20 20 20 20 20 20 20 20
Video 30 21 30 30 21 21 21 21
Audio 20 20 20 20 20 20 20 20
Elements 30 28 23 30 28 28 28 26
Forms 110 61 57 104 73 66 66 66
User interaction 20 20 20 20 20 20 20 20
History and navigation 10 10 10 10 10 0 10 10
0 15 0 0 15 0 0 15
Web applications 18 20 16 18 20 15 15 20
Security 15 10 10 15 10 10 10 10
Various 5 10 5 5 10 5 5 5
Location and Orientation 20 20 20 20 20 20 20 20
25 25 25 10 25 9 10 25
Communication 35 35 27 35 35 13 13 35
Files 10 10 10 10 10 10 10 10
Storage 25 25 25 25 25 25 5 25
Workers 15 10 10 15 10 0 0 10
Local multimedia 10 10 0 0 10 0 0 0
Notifications 10 10 0 0 10 0 0 10
Other 10 10 10 10 10 5 5 10
Audio 5 0 0 0 0 0 0 0
Firefox OS
1.0.1.0-pre
Firefox
Mobile 22 WebView
Microdata
WebGL

19. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
Androidの構成

20. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
Androidで使われているもの
Wikipedia:Androidより

21. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
アプリ作りに必要な機能
必要な機能
● View System
● Resource Manager
● Notification Manager
● Location Manager
● Media Framework
● SQLite
● SGL
● OpenGL ES
● FreeType
● Web Kit
● SSL

22. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
アプリ作りに必要な環境
環境に求められるもの
● Window Manager
● Content Provider
● Package Manager
● ADB
● DDMS
● Emulator
これらはOS側の管轄なので割愛（実は調べてない）
（Chrome OSとかFirefox OSとかTizenとか・・・）

23. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
アプリ作りに必要なもの
Android → HTML5の対応

24. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
View System
● AndroidのView
● HTML5ではタグやフォームに置き換えられる
– 例：TextView → <input type=”text”>
– 例：FrameLayout → <div style=”hogehoge”>
● Androidのスタイル
● HTML5ではCSSに置き換えられる
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL

25. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
例)レイアウトとコード
レイアウトエディタ(GUI)
1対1
レイアウトエディタ(XML)
findViewById(R.id.PresentLocationButton).setOnClickListener(this);
findViewById(R.id.ZoomInButton).setOnClickListener(this);
findViewById(R.id.ZoomOutButton).setOnClickListener(this);
findViewById(R.id.DropUki2BallButton).setOnClickListener(this);
findViewById(R.id.MenuOpenCloseButton).setOnClickListener(this);
findViewById(R.id.FixedCameraButton).setOnClickListener(this);
findViewById(R.id.SceoneObjectCloseButton).setOnClickListener(this);
findViewById(R.id.ServiceSearchButton).setOnClickListener(this);
コードはIDで紐付けて使う
ブラウザに置き換わる
HTML5に置き換わる
JavaScriptに置き換わる
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL

26. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
PC Android
Chrome 28 Firefox 22 IE11 Chrome 25 Android4.0 WebView
Elements 30 28 23 30 28 28 28 26
Newor modifiedelements
Section elements
Grouping content elements
Text-level semantic elements
Interactive elements
Global attributes or methods
Dynamic markupinsertion
Firefox OS
1.0.1.0-pre
Firefox
Mobile 22
Embedding customnon-visible data » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Yes ✔ Yes ✔ Partial ○ Yes ✔ Yes ✔ Partial ○ Partial ○ Yes ✔
Partial ○ Partial ○ Partial ○ Partial ○ Partial ○ Partial ○ Partial ○ Partial ○
Partial ○ Partial ○ Partial ○ Partial ○ Partial ○ Partial ○ Partial ○ Partial ○
hidden attribute » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Elementsのスコア
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL

27. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
Formsのスコア
PC Android
Chrome 28 Firefox 22 IE11 Chrome 25 Android4.0 WebView
Forms 110 61 57 104 73 66 66 66
Fieldtypes
input type=text
input type=search
input type=tel
input type=url
input type=email
input type=datetime
input type=date
input type=month
input type=week
input type=time
input type=datetime-local
input type=number
input type=range
input type=color
input type=checkbox
input type=image
input type=file
textarea
select
fieldset
datalist
keygen
output
progress
meter
Fields
Fieldvalidation
Association of controls andforms
Other attributes
CSS selectors
Events
Forms
Formvalidation
Firefox OS
1.0.1.0-pre
Firefox
Mobile 22
Yes ✔ Yes ✔ Partial ○ Yes ✔ Yes ✔ Partial ○ Partial ○ Yes ✔
Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
No ✘ No ✘ No ✘ Yes ✔ No ✘ Partial ○ Partial ○ No ✘
Yes ✔ No ✘ No ✘ Yes ✔ Partial ○ Partial ○ Partial ○ No ✘
Yes ✔ No ✘ No ✘ Yes ✔ No ✘ Partial ○ Partial ○ No ✘
Yes ✔ No ✘ No ✘ No ✘ No ✘ Partial ○ Partial ○ No ✘
Yes ✔ No ✘ No ✘ Yes ✔ Partial ○ Partial ○ Partial ○ No ✘
Yes ✔ No ✘ No ✘ Yes ✔ No ✘ Partial ○ Partial ○ No ✘
Yes ✔ No ✘ Partial ○ Yes ✔ Partial ○ Yes ✔ Yes ✔ Partial ○
Yes ✔ No ✘ Yes ✔ Yes ✔ No ✘ Yes ✔ Yes ✔ No ✘
Yes ✔ No ✘ No ✘ No ✘ No ✘ Partial ○ Partial ○ No ✘
Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Partial ○ Partial ○ Yes ✔
Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ No ✘
Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Partial ○ Partial ○ Yes ✔
Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Yes ✔ Yes ✔ Partial ○ Yes ✔ Yes ✔ Partial ○ Partial ○ Yes ✔
Yes ✔ Yes ✔ Yes ✔ No ✘ Yes ✔ No ✘ No ✘ Yes ✔
Yes ✔ No ✘ No ✘ Yes ✔ No ✘ Yes ✔ Yes ✔ No ✘
Yes ✔ Yes ✔ No ✘ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ No ✘ No ✘ Yes ✔
Yes ✔ Yes ✔ No ✘ Yes ✔ Yes ✔ No ✘ No ✘ Yes ✔
Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Yes ✔ Partial ○ Partial ○ Yes ✔ Partial ○ Yes ✔ Yes ✔ Partial ○
Yes ✔ Partial ○ Partial ○ Yes ✔ Partial ○ Partial ○ Partial ○ Partial ○
Yes ✔ Partial ○ Partial ○ Yes ✔ Partial ○ Yes ✔ Yes ✔ Partial ○
Yes ✔ Yes ✔ Partial ○ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔

28. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
Resource Manager
● assert、res
● URIでどうとでも指定できる
● マニフェストで指定すればキャッシュも可能
● キャッシュすればオフラインでも動ける
<html manifest="myapp.manifest">
<head>
:
CACHE MANIFEST
CACHE:
# キャッシュさせるファイル
NETWORK:
# キャッシュさせないファイル
hogehoge.html myapp.manifest
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL

29. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
Notification Manager
● Notifications API
● Webページ外への通知の方法を定義
● 表示の場所や形態は定義していない
– 例）表示場所
● ディスプレイの隅っこ
● ブラウザの一部
● モバイルフォンのホーム画面
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL

30. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
Notificationsのスコア
PC Android
Chrome 28 Firefox 22 IE11 Chrome 25 Android4.0
Notifications 10 10 0 0 10 0 0 10
Firefox OS
1.0.1.0-pre
Firefox
Mobile 22 WebView
Web Notifications » Yes ✔ Yes ✔ No ✘ No ✘ Yes ✔ No ✘ No ✘ Yes ✔
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL

31. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
Location Manager
● LocationManager
● GeoLocation APIが使える
● W3CのGeolocation API Specificationにいろいろある
● http://dev.w3.org/geo/api/spec-source-v2
● １ショットで取得
navigator.geolocation
.getCurrentPosition(showMap);
● 繰り返し継続的に取得
var watchId = navigator.geolocation
.watchPosition(scrollMap, handleError);
navigator.geolocation.clearWatch(watchId);
● 指定した時間内に過去に取得した座標を取る
navigator.geolocation
.getCurrentPosition(
successCallback, errorCallback, {maximumAge:600000});
●
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL

32. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
Location and Orientationのスコア
PC Android
Chrome 28 Firefox 22 IE11 Chrome 25 Android4.0
Location and Orientation 20 20 20 20 20 20 20 20
Firefox OS
1.0.1.0-pre
Firefox
Mobile 22 WebView
Geolocation » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Device Orientation » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL

33. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
Media Framework
● コーデックの対応はちょっと気になるところ
タイプ エンコーダ デコーダ ファイルタイプ
ビデオ
H.263 ○ ○ .3gp .mp4
H.264 AVC ○(3.0+) ○ .3gp .mp4 .ts
MPEG-4 SP ○ .3gp
VP8 ○(2.3.3+) .webm
オーディオ
AAC LC/LTP ○ ○
.3gp .mp4, .m4a .aacHE-AACv1 ( AAC+ ) ○
○
AMR-NB ○ ○ .3gp
AMR-WB ○ ○ .3gp
FLAC ○(3.1+) .flac
MP3 ○ .mp3
MIDI ○ .mid, .xmf, .mxmf .rtttl, .rtx .ota .imy
Ogg Vorbis ○ .ogg
PCM/WAVE ○ .wav
イメージ
JPEG ○ ○ .jpg
GIF ○ .gif
PNG ○ ○ .png
BMP ○ .bmp
フォーマット / コーデック
HE-AACv2 ( エンハンスト AAC+)
Android Developers | Supported Media Formats より
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL

34. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
VideoとAudioのスコア
PC Android
Chrome 28 Firefox 22 IE11 Chrome 25 Android4.0
Video 30 21 30 30 21 21 21 21
Audio 20 20 20 20 20 20 20 20
Firefox OS
1.0.1.0-pre
Firefox
Mobile 22 WebView
video element » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Subtitle support » Yes ✔ No ✘ Yes ✔ Yes ✔ No ✘ No ✘ No ✘ No ✘
Poster image support » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
MPEG-4 support » No ✘ No ✘ No ✘ No ✘ No ✘ No ✘ No ✘ No ✘
H.264 support » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ No ✘ No ✘ Yes ✔
Ogg Theora support » Yes ✔ Yes ✔ No ✘ No ✘ Yes ✔ No ✘ No ✘ Yes ✔
WebM support » Yes ✔ Yes ✔ No ✘ Yes ✔ Yes ✔ No ✘ No ✘ Yes ✔
audio element » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
PCM audio support » Yes ✔ Yes ✔ No ✘ Yes ✔ Yes ✔ No ✘ No ✘ Yes ✔
AAC support » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ No ✘ No ✘ Yes ✔
MP3 support » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Ogg Vorbis support » Yes ✔ Yes ✔ No ✘ Yes ✔ Yes ✔ No ✘ No ✘ Yes ✔
Ogg Opus support » No ✘ Yes ✔ No ✘ No ✘ Yes ✔ No ✘ No ✘ No ✘
WebM support » Yes ✔ Yes ✔ No ✘ Yes ✔ Yes ✔ No ✘ No ✘ Yes ✔
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL

35. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
SQLite
● Web SQL Database、、、があった
● 廃止された
● ３つのベンダーはまだ実装してる
● IndexedDB
● SQLiteのようなRDBMSとは勝手が違う
● インデックス
● トランザクション
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL

36. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
FileとStorageのスコア
PC Android
Chrome 28 Firefox 22 IE11 Chrome 25 Android4.0
Files 10 10 10 10 10 10 10 10
Storage 25 25 25 25 25 25 5 25
Firefox OS
1.0.1.0-pre
Firefox
Mobile 22 WebView
File API » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
File API: Directories and System» Yes ✔ No ✘ No ✘ Yes ✔ No ✘ No ✘ No ✘ No ✘
Session Storage » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Local Storage » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ No ✘ Yes ✔
IndexedDB » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ No ✘ Yes ✔
Web SQLDatabase » Yes ✔ No ✘ No ✘ Yes ✔ No ✘ No ✘ No ✘ No ✘
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL

37. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
SGL
● Canvas
– 基本的な機能は粗方使える(四角や丸の描画)
– setTransformのような変形も行える
– toDataURL()で画像をURLとして保存できる
● なんかやたら長いURLができる、、、
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(70, 70, 60, 0, Math.PI*2, false);
ctx.stroke();
var url = canvas.toDataURL();
<h2>fillRect()</h2>
<canvas
id="c1"
width="140"
height="140">
</canvas>
HTML JavaScript
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL

38. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
Canvasのスコア
PC Android
Chrome 28 Firefox 22 IE11 Chrome 25 Android4.0
Canvas 20 20 20 20 20 20 20 20
Firefox OS
1.0.1.0-pre
Firefox
Mobile 22 WebView
canvas element » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
2D context » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Text » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL

39. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
OpenGL ES
● WebGL
● Fragment/Vertex Shaderが使える
– ただ、敷居は高いかな・・・
– もうちょっと抽象化できないのかな・・・？
● ライブラリがある：Three.js、SceneJS、J3D、PhiloGL、GLGE
● モデルデータの壁
– JSONで3Dモデルは容量が大きすぎる
● 例えば頂点データ
– float32bit→4byte
– テキスト有効数字６桁+小数点+区切り文字→8byte
● 実際2倍じゃ済まない・・・
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL

40. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
WebGLのスコア
PC Android
Chrome 28 Firefox 22 IE11 Chrome 25 Android4.0
25 25 25 10 25 9 10 25
Native binary data
Firefox OS
1.0.1.0-pre
Firefox
Mobile 22 WebView
WebGL
3D context » Yes ✔ Yes ✔ Yes ✔ No ✘ Yes ✔ No ✘ No ✘ Yes ✔
Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Partial ○ Yes ✔ Yes ✔
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL

41. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
その他
● FreeType
● OSなら何か入ってる
● Web Kit
● Web OSなら何か入ってる
● SSL
● Web OSなら何か入ってる
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL

42. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
その他の気になるスコア
View
Resource
Notification
Location
Media
SQLite
SGL
OpenGL ES
FreeType
Web Kit
SSL
PC Android
Chrome 28 Firefox 22 IE11 Chrome 25 Android4.0
User interaction 20 20 20 20 20 20 20 20
Drag anddrop
Attributes
Events
HTML editing
Editing elements
Editing documents
Web applications 18 20 16 18 20 15 15 20
Workers 15 10 10 15 10 0 0 10
Firefox OS
1.0.1.0-pre
Firefox
Mobile 22 WebView
Yes ✔ Partial ○ Partial ○ No ✘ No ✘ No ✘ No ✘ No ✘
Yes ✔ Yes ✔ Yes ✔ No ✘ No ✘ No ✘ No ✘ No ✘
Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
APIs Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Spellcheck
spellcheck attribute » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Application Cache » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔
Customscheme handlers » Yes ✔ Yes ✔ No ✘ Yes ✔ Yes ✔ No ✘ No ✘ Yes ✔
Customcontent handlers » No ✘ Yes ✔ No ✘ No ✘ Yes ✔ No ✘ No ✘ Yes ✔
Customsearch providers » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ No ✘ No ✘ No ✘
Web Workers » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ No ✘ No ✘ Yes ✔
Shared Workers » Yes ✔ No ✘ No ✘ Yes ✔ No ✘ No ✘ No ✘ No ✘

43. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
まとめ

44. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
アプリ開発に必要な機能
● View System
→ HTMLのタグやフォーム
→ CSS
● Resource Manager
→ URIで指定
● Location Manager
→ GeoLocation API
● Notification Manager
→Notifications
● Media Framework
→ Video API & Audio API
● SQLite
→ Indexed DB
※ Web SQL Databaseは廃止
● SGL
→ Canvas
● OpenGL ES
→ WebGL
● FreeType
→ 何かあるはず
● Web Kit
→ 何かあるはず
● SSL
→ 何かあるはず

45. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
残る課題
● サービス(バックグラウンドプロセス)
● 外部デバイスの制御
● USB、Bluetooth、シリアルポート
● 開発環境は何を使うべきか？

46. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net
ご清聴ありがとうございました
住友 孝郎
@cattaka_net