アンドロイダー的にHTML5でどこまでできそうか
- 2. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net 自己紹介 ● 住友 孝郎(すみとも たかお) ● 株式会社ブリリアントサービス所属 ● 業務系Webアプリ開発(前職) ● Androidアプリケーション開発 ● ソフトウェアディベロッパー 住友 孝郎 @cattaka_net
- 10. 2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net 電脳眼鏡かけさせられたり Mobile World Congress 2013 ＠スペイン
- 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
- 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とか・・・）
- 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
- 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 ✘
- 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