日本Androidの会会津支部主催の「「HTML5とANDROIDの未来」がテーマのセミナー。 その中でデザイニウム浅井が発表したスライド資料になります。

1. The Designium
HTML5とAndroid以外のOS
株式会社デザイニウム
浅井渉@watalucky

2. The Designium
自己紹介
浅井 渉（あさい わたる）
千葉県千葉市出身
インターンを経て、デザイニウム入社
担当業務
フロント～サーバーサイドのコーディング
ディレクション

3. The Designium
事例紹介「福島県立医科大学」
研修医向けWeb学習教材。

4. The Designium
事例紹介「会津日本酒検定」
地元酒販店や酒造組合とのコラボレーション企画。
http://lovefood.jp/sake/

5. The Designium
Webは自由でオープンだ。

6. The Designium
本日の話
・Firefox OSの話
・Open Web Appsの話
・Open Web Appsの始め方

7. The Designium
Firefox OSの話

8. The Designium
Firefox OSの話 流れ
・Firefox OSとは
・Firefox OSのアプリインストール方法
・Firefox OSアプリの目指すところ

9. The Designium
Firefox OSとは
・HTML5アプリが動作するOS
・カーネル部分などはAndroidがベース
・Open webのためのOS

10. The Designium
Firefox OSとは – PEAK -
CPU Qualcomm Snapdragon S4 8225 1.2Ghz x2.
画面 4.3" qHD IPS Multitouch.
カメラ 8 MP (back) + 2 MP (front).
メモリ 512 MB (RAM).
MicroSD, Wifi N, Bluetooth 2.1 EDR, Radio FM,
Light & Prox. Sensor, G-Sensor, GPS, MicroUSB,
Flash (camera), Battery 1800 mAh.

11. The Designium
Firefox OSとは – ZTE OPEN -

12. The Designium
Firefox OSとは – ZTE OPEN -
スペインで７月２日に発売
価格は６９ユーロ(約9000円)

13. The Designium
Firefox OSのアプリ
・Firefox OS向けアプリはイコールWebアプリ
・HTML5でWebアプリを作れればFirefox OS向けの
アプリは作れる
この辺りは後半でもうちょっと詳細に話します

14. The Designium
Firefox OSのアプリ 配布方法
・Firefox OS向けアプリの配布方法
→自前サーバーで配布
→Firefox Marketplaceで配布

15. The Designium
Firefox OSの話

16. The Designium
Firefox OSのアプリ
・実はFirefox OS向けのアプリはFirefoxがインストールされ
ている環境なら、どこでもインストール可能です。

17. The Designium
Firefox OSのアプリ
・実はFirefox OS向けのアプリはFirefoxがインストールされ
ている環境なら、どこでもインストール可能です。
→「これって何で？」という疑問に答えるのが、
次のOpen web
appsの話になります

18. The Designium
Open Web Appsの話

19. The Designium
Open web appsとは
・あらゆるプラットフォームで動作するWebアプリを開発
できるようにする(mozillaが主導している)取り組みの総称
→ブラウザ上だけでなく、インストールも出来るWebアプリ
・現状ではFirefox ベースのエンジンが必要
・全てのブラウザで標準機能として搭載されることが目標

20. The Designium
インストール可能なOpen web appsのタイプ
・Open web appsでインストールできるアプリには、
以下の２種類がある。
・ホスト型アプリ
・パッケージ型アプリ

21. The Designium
ホスト型アプリ（Hosted Apps）
・サーバー上に置いたアプリにアクセスしてして実行する
・ブラウザを介さないWebアプリと捉えるとわかりやすい
・基本的にはオンラインで動作

22. The Designium
パッケージ型アプリ（Packaged Apps）
・アプリに必要なリソースを端末内に保存し、実行する
・ホスト型より多くのAPIにアクセスできる
ただし、アクセスレベルには以下の３段階がある
・Privileged Apps（特権付きアプリ）
・Certified Apps （認定アプリ）
・Plain Packaged App（単純なパッケージ型アプリ）

23. The Designium
パッケージ型アプリ（Packaged Apps）

24. The Designium
パッケージ型アプリ（Packaged Apps）
・アプリに必要なリソースを端末内に保存し、実行する
・ホスト型より多くのAPIにアクセスできる
ただし、アクセスレベルには以下の３段階がある
・Privileged Apps（特権付きアプリ）
・Certified Apps （認定アプリ）
・Plain Packaged App（単純なパッケージ型アプリ）

25. The Designium
パッケージ型アプリ（Packaged Apps）
・アプリに必要なリソースを端末内に保存し、実行する
・ホスト型より多くのAPIにアクセスできる
ただし、アクセスレベルには以下の３段階がある
・Privileged Apps（特権付きアプリ）
・Certified Apps （認定アプリ）
・Plain Packaged App（単純なパッケージ型アプリ）

26. The Designium
パッケージ型アプリ（Packaged Apps）
・アプリに必要なリソースを端末内に保存し、実行する
・ホスト型より多くのAPIにアクセスできる
ただし、アクセスレベルには以下の３段階がある
・Privileged Apps（特権付きアプリ）
・Certified Apps （認定アプリ）
・Plain Packaged App（単純なパッケージ型アプリ）

27. The Designium
Open Web Appsのお金とかの話

28. The Designium
マネタイズ
・マネタイズ方法は
・従来通りのWebのマネタイズ方法
・Marketplaceでの販売(含む アプリ内課金)

29. The Designium
Firefox Marketplace
・一度購入すればどこでも動く
“When it comes to Open Web Apps, you can use or install them from
anywhere. Completely up to you.However, if you are interested in being
listed, hosted and much more, I recommend taking a look at the Firefox
Marketplace.”
「Open Web Appsプロジェクトが成功すればどこでもアプリをインス
トールしたり、使ったりする事が出来るんだ。完全に自分自身の意思で
ね。
だけど、もしアプリがリスト化されホストされたりすることに興味があ
るならFirefox marketplaceを見てみる事をおすすめするよ(浅井意
訳)。」
- developer.mozilla.org

30. The Designium
Marketplace
異なるデバイス間でも
アプリの購入履歴を共有

31. The Designium
Marketplace
デバイスはもちろんPCも含む
(OpenWebAppsに対応していれば)

32. The Designium
現状
・Firefox Marketplaceでは課金アプリに対応していません
・理想と現実のギャップ

33. The Designium
Open Web Appsの始め方

34. The Designium
ツール
・専用のIDEなどは無い
・普段Webアプリを使っている環境でOK

35. The Designium
シミュレータ：Firefox プラグイン

36. The Designium
シミュレータ：Firefox Nightly
・シュミレーター

37. The Designium
材料
・HTML, CSS, JavaScriptで作られたWebアプリ
・マニフェストファイル
{
"version": "1",
"name": "Firefox OS Boilerplate App",
"launch_path": "/Firefox-OS-Boilerplate-App/index.html",
"description": "Boilerplate Firefox OS app with example use cases to get started",
"icons": {
"16": "/Firefox-OS-Boilerplate-App/images/logo16.png",
"32": "/Firefox-OS-Boilerplate-App/images/logo32.png",
"48": "/Firefox-OS-Boilerplate-App/images/logo48.png",
"64": "/Firefox-OS-Boilerplate-App/images/logo64.png",
"128": "/Firefox-OS-Boilerplate-App/images/logo128.png"
},
"developer": {
"name": "Robert Nyman",
"url": "http://robertnyman.com"
},
"installs_allowed_from": ["*"],
"default_locale": "en"
}

38. The Designium
材料
・HTML, CSS, JavaScriptで作られたWebアプリ
・マニフェストファイル
・インストールボタン(Marketplaceでは不要)
navigator.mozApps.install(manifestUrl);

39. The Designium
材料
・HTML, CSS, JavaScriptで作られたWebアプリ
・マニフェストファイル
・インストールボタン(Marketplaceでは不要)
navigator.mozApps.install(manifestUrl);
余談：ブラウザごとの独自実装部分を統一した書き方で扱えるような
JSライブラリを作るとめっちゃ需要あると思いますよ。

40. The Designium
Hosted appは簡単
・ホスト型は基本的に以上で終了
・オフライン対応をしたいならapplication chacheを使う等
その辺りはアプリ側で処理が必要

41. The Designium
まとめ
・Open Web Appsという取り組み
・mozillaが進めるWebの未来に共感した開発者は
Open Web Appの開発を始めてみよう

42. The Designium
まとめ
Firefox OS コミュニティ！
http://fxos.org/
Firefox Marketplace
https://marketplace.firefox.com/
Open Web Apps と Web 標準 | MDN
https://developer.mozilla.org/ja/docs/Open_Web_apps_and_Web_standards#Buy_Once.2C_Run_Everywhere
Open Web Apps を始めよう – なぜ、そしてどのように | Mozilla Developer Street
https://dev.mozilla.jp/2013/03/getting-started-with-open-web-apps-why-and-how/
Firefox OS Boilerplate App
http://robnyman.github.io/Firefox-OS-Boilerplate-App/
パッケージ型アプリ - Apps | MDN
https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps
大津谷亮祐ブログ - Firefox OS の Packaged Apps を作ってみた
http://r.otsuya.co/post/43398644424/firefox-os-packaged-apps