アンドロイダー的にHTML5でどこまでできそうか

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

アンドロイダー的にHTML5でどこまでできそうか

住友孝郎@cattaka_net


自己紹介● 住友孝郎(すみともたかお)

● 株式会社ブリリアントサービス所属

● 業務系Webアプリ開発(前職)

● Androidアプリケーション開発

● ソフトウェアディベロッパー住友孝郎

@cattaka_net


アプリ作ったり


Android+GAEでアプリ作ったり


ゲーム作ったり


電子工作したり


ロボット作ったり


ロボット作ったり

http://goo.gl/NAjBW


ラジコン作ったり

←に出展します

　8月10日〜11日


電脳眼鏡かけさせられたり

Mobile World Congress 2013 ＠スペイン


帽子かぶったり


3Dプリンター買ってみたり


人形作ったり

↓モデル

↑作った


ソフトウェア

デベロッパーです


HTML5でアプリが作れそうか？

どのくらい実装されてるのか？


html5test.com を見ながら調べました


スコア

● 標準的なブラウザだとChromeが高い● Firefoxも健闘● Android標準とWebViewはもういいよね、、、● Firefox Mobileが意外にがんばる

PC Android

Chrome 28 Firefox 22 IE 11 Chrome 25 Android 4.0 WebView

Scores 463 410 355 417 422 297 288 387Bonus 13 14 6 11 14 3 3 14

Firefox OS1.0.1.0-preFirefox

Mobile 22


ブラウザ別、中項目ごとスコア http://html5test.com/ より

PC Android

Chrome 28 Firefox 22 IE 11 Chrome 25 Android 4.0

Scores 463 410 355 417 422 297 288 387Bonus 13 14 6 11 14 3 3 14

Parsing rules 10 10 10 10 10 10 10 10Canvas 20 20 20 20 20 20 20 20Video 30 21 30 30 21 21 21 21Audio 20 20 20 20 20 20 20 20

Elements 30 28 23 30 28 28 28 26Forms 110 61 57 104 73 66 66 66

User interaction 20 20 20 20 20 20 20 20History and navigation 10 10 10 10 10 0 10 10

0 15 0 0 15 0 0 15Web applications 18 20 16 18 20 15 15 20

Security 15 10 10 15 10 10 10 10Various 5 10 5 5 10 5 5 5

Location and Orientation 20 20 20 20 20 20 20 2025 25 25 10 25 9 10 25

Communication 35 35 27 35 35 13 13 35Files 10 10 10 10 10 10 10 10

Storage 25 25 25 25 25 25 5 25Workers 15 10 10 15 10 0 0 10

Local multimedia 10 10 0 0 10 0 0 0Notifications 10 10 0 0 10 0 0 10

Other 10 10 10 10 10 5 5 10Audio 5 0 0 0 0 0 0 0


Mobile 22 WebView

Microdata

WebGL


Androidの構成


Androidで使われているもの

Wikipedia:Androidより


アプリ作りに必要な機能必要な機能● View System● Resource Manager● Notification Manager● Location Manager● Media Framework● SQLite● SGL● OpenGL ES● FreeType● Web Kit● SSL


アプリ作りに必要な環境環境に求められるもの● Window Manager● Content Provider● Package Manager● ADB● DDMS● Emulator

これらはOS側の管轄なので割愛（実は調べてない）（Chrome OSとかFirefox OSとかTizenとか・・・）


アプリ作りに必要なもの

Android → HTML5の対応


View System● AndroidのView

● HTML5ではタグやフォームに置き換えられる– 例：TextView → <input type=”text”>– 例：FrameLayout → <div style=”hogehoge”>

● Androidのスタイル● HTML5ではCSSに置き換えられる

ViewResource

NotificationLocation

MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL


例)レイアウトとコードレイアウトエディタ(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に置き換わる

ViewResource


MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL


PC Android


Elements 30 28 23 30 28 28 28 26

New or modified elementsSection elements

Grouping content elementsText-level semantic elements

Interactive elementsGlobal attributes or methods

Dynamic markup insertion


Mobile 22

Embedding custom non-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のスコア

ViewResource


MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL

2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_netFormsのスコアPC Android


Forms 110 61 57 104 73 66 66 66Field types

input type=textinput type=search

input type=telinput type=url

input type=emailinput type=datetime

input type=dateinput type=monthinput type=weekinput type=time

input type=datetime-localinput type=numberinput type=rangeinput type=color

input type=checkboxinput type=image

input type=filetextareaselect

fieldsetdatalistkeygenoutput

progressmeterFields

Field validationAssociation of controls and forms

Other attributesCSS selectors

EventsForms

Form validation


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 ✔


Resource Manager● assert、res

● URIでどうとでも指定できる● マニフェストで指定すればキャッシュも可能● キャッシュすればオフラインでも動ける

<html manifest="myapp.manifest"><head> :

CACHE MANIFESTCACHE:# キャッシュさせるファイル NETWORK:# キャッシュさせないファイル

hogehoge.html myapp.manifest

ViewResource


MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL


Notification Manager● Notifications API

● Webページ外への通知の方法を定義● 表示の場所や形態は定義していない

– 例）表示場所● ディスプレイの隅っこ● ブラウザの一部● モバイルフォンのホーム画面

ViewResource


MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL


Notificationsのスコア

PC Android


Notifications 10 10 0 0 10 0 0 10


Mobile 22 WebView

Web Notifications » Yes ✔ Yes ✔ No ✘ No ✘ Yes ✔ No ✘ No ✘ Yes ✔

ViewResource


MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL


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});

●

ViewResource


MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL


Location and Orientationのスコア

PC Android


Location and Orientation 20 20 20 20 20 20 20 20


Mobile 22 WebView

Geolocation » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔Device Orientation » Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔

ViewResource


MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL


Media Framework● コーデックの対応はちょっと気になるところ

タイプエンコーダデコーダファイルタイプ

ビデオ

H.263 ○ ○ .3gp .mp4H.264 AVC ○(3.0+) ○ .3gp .mp4 .tsMPEG-4 SP ○ .3gpVP8 ○(2.3.3+) .webm

オーディオ

AAC LC/LTP ○ ○.3gp .mp4, .m4a .aacHE-AACv1 ( AAC+ ) ○

○AMR-NB ○ ○ .3gpAMR-WB ○ ○ .3gpFLAC ○(3.1+) .flacMP3 ○ .mp3MIDI ○ .mid, .xmf, .mxmf .rtttl, .rtx .ota .imyOgg Vorbis ○ .oggPCM/WAVE ○ .wav

イメージ

JPEG ○ ○ .jpgGIF ○ .gifPNG ○ ○ .pngBMP ○ .bmp

フォーマット / コーデック

HE-AACv2 ( エンハンスト AAC+)

Android Developers | Supported Media Formats より

ViewResource


MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL


VideoとAudioのスコア

PC Android


Video 30 21 30 30 21 21 21 21

Audio 20 20 20 20 20 20 20 20


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 ✔

ViewResource


MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL


SQLite● Web SQL Database、、、があった

● 廃止された● ３つのベンダーはまだ実装してる

● IndexedDB● SQLiteのようなRDBMSとは勝手が違う● インデックス● トランザクション

ViewResource


MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL


FileとStorageのスコア

PC Android


Files 10 10 10 10 10 10 10 10

Storage 25 25 25 25 25 25 5 25


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 SQL Database » Yes ✔ No ✘ No ✘ Yes ✔ No ✘ No ✘ No ✘ No ✘

ViewResource


MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL


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

ViewResource


MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL


Canvasのスコア

PC Android


Canvas 20 20 20 20 20 20 20 20


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 ✔

ViewResource


MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL


OpenGL ES● WebGL

● Fragment/Vertex Shaderが使える– ただ、敷居は高いかな・・・– もうちょっと抽象化できないのかな・・・？

● ライブラリがある：Three.js、SceneJS、J3D、PhiloGL、GLGE

● モデルデータの壁– JSONで3Dモデルは容量が大きすぎる

● 例えば頂点データ– float32bit→4byte– テキスト有効数字６桁+小数点+区切り文字→8byte

● 実際2倍じゃ済まない・・・

ViewResource


MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL


WebGLのスコア

PC Android


25 25 25 10 25 9 10 25

Native binary data


Mobile 22 WebView

WebGL3D context » Yes ✔ Yes ✔ Yes ✔ No ✘ Yes ✔ No ✘ No ✘ Yes ✔

Yes ✔ Yes ✔ Yes ✔ Yes ✔ Yes ✔ Partial ○ Yes ✔ Yes ✔

ViewResource


MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL


その他● FreeType

● OSなら何か入ってる

● Web Kit● Web OSなら何か入ってる

● SSL● Web OSなら何か入ってる

ViewResource


MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL


その他の気になるスコア

ViewResource


MediaSQLite

SGLOpenGL ES

FreeTypeWeb Kit

SSL

PC Android


User interaction 20 20 20 20 20 20 20 20Drag and drop

AttributesEvents

HTML editingEditing elements

Editing documents

Web applications 18 20 16 18 20 15 15 20

Workers 15 10 10 15 10 0 0 10


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 ✔Custom scheme handlers » Yes ✔ Yes ✔ No ✘ Yes ✔ Yes ✔ No ✘ No ✘ Yes ✔Custom content handlers » No ✘ Yes ✔ No ✘ No ✘ Yes ✔ No ✘ No ✘ Yes ✔Custom search 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 ✘


まとめ


アプリ開発に必要な機能● 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

→ 何かあるはず


残る課題● サービス(バックグラウンドプロセス)● 外部デバイスの制御

● USB、Bluetooth、シリアルポート

● 開発環境は何を使うべきか？


ご清聴ありがとうございました

住友孝郎@cattaka_net

Technology

アンドロイダー的にHTML5でどこまでできそうか