0
Apps for Web~Developing Open Web Apps~Slides @ DevCon in Osaka on 2012/06/30        by Tomoya Asai (dynamis)              ...
about:
about:dynamis                   Mozilla Japan               http://dynamis.jp                @dynamitter            facebo...
about:slides           下線なしリンクも使います           コードは要点だけの簡略版               特に注意が必要なとき以外は               -moz- 以外の接頭辞など割愛   画像...
Marketplace
Mozilla Marketplace          Device, OS 横断マーケット           Web Platform のためのストア           Firefox 限定とかじゃない          今年中に正式リ...
オープンなアプリストア    全てを Web 技術で実装     安定・平等な環境を提供    ベンダー非依存     アプリストア、認証、課金 ...    ブラウザ非依存     後方互換ダッシュボード                htt...
http://marketplace.mozilla.org/
http://marketplace.mozilla.org/
http://marketplace.mozilla.org/
http://marketplace.mozilla.org/
http://marketplace.mozilla.org/
Create Apps
Marketplace のアプリ                   Web アプリ、そのまま。                      レスポンシブデザイン                      オフラインキャッシュ          ...
Marketplace アプリの違い         ドメインに 1 つのアプリ         一部の API の使用権限           レビューでセキュリティ確保         BrowserID の自動ログイン          ...
既存の Web サイトやWeb アプリそのまま 変更なしで OK!
Install Apps
3ステップインストール    1. アプリマニフェストを用意   https://developer.mozilla.org/en/Apps/Getting_Started
3ステップインストール    1. アプリマニフェストを用意    2. navigator.mozApps.install()   https://developer.mozilla.org/en/Apps/Getting_Started
3ステップインストール    1. アプリマニフェストを用意    2. navigator.mozApps.install()    3. 以上。2 ステップだけ。   https://developer.mozilla.org/en/App...
manifest.webapp#	 最低限	 name,	 description	 があればいい{	 	 "name":	 "SampleApp",	 	 "description":	 "サンプルアプリ",	 	 "icons":	 {	 ...
navigator.mozApps.installvar	 request	 =	 navigator.mozApps	 	 .install("http://dynamis.jp/manifest.webapp");request.onsuc...
インストールすると...                通常のアプリ同様                  デスクトップにショートカット                  スタートメニューに追加                  アンインストー...
デスクトップアプリもWeb 技術で作れる!
Submit Apps
アプリの登録          マニフェストを登録            Content-Type: application/x-web-            app-manifest+json          スクリーンショットを用意  ...
manifest.webapp#	 最低限	 name,	 description	 があればいい{	 	 "version":	 "1.0",	 	 "name":	 "SampleApp",	 	 "description":	 "サンプル...
manifest.webapp{	 	 "version":	 "1.0",	 	 "name":	 "SampleApp",	 	 "description":	 "サンプルアプリ",	 	 "icons":	 {	 "48":	 "/img...
https://marketplace.mozilla.org/en-US/developers/
https://marketplace.mozilla.org/en-US/developers/
https://marketplace.mozilla.org/en-US/developers/
https://marketplace.mozilla.org/en-US/developers/
レビューシステム          公開前のレビューあり            Mozilla スタッフによるレビュー          将来は AMO のように?            コミュニティボランティアによる            レ...
テストアプリっぽいから却下ね (笑)ユーザに役立つなら説明して (・・).
テストアプリは自分のサイトで配布してね。
Android
Android 向けには現在開発中      まもなく Nightly 実装予定       現在はコンセプトプロトタイプ
Java アプリ同様インストール         ホームスクリーンに追加         ブラウザと独立して起動プロトタイプ
Payment
課金システム    販売 (プレミアムアプリ)     80, 160, 240円, ... 3860円    アプリ内課金 API     Google In-Apps と似た感じ    キャリア課金     キャリアと個別調整・対応
Summary
Marketplace for WebApps         Web = Native         デスクトップも Web で         スマホアプリも Web で
Marketplace によりWeb が Native に。
Thank you.
Apps for Web Platform
Apps for Web Platform
Apps for Web Platform
Apps for Web Platform
Upcoming SlideShare
Loading in...5
×

Apps for Web Platform

2,587

Published on

Firefox Developer Conference in Osaka 2012 で使用したスライド

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,587
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
26
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "Apps for Web Platform"

  1. 1. Apps for Web~Developing Open Web Apps~Slides @ DevCon in Osaka on 2012/06/30 by Tomoya Asai (dynamis) Last Update: 2012/06/30
  2. 2. about:
  3. 3. about:dynamis Mozilla Japan http://dynamis.jp @dynamitter facebook.com/ dynamis レッサーパンダが好き。 mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
  4. 4. about:slides 下線なしリンクも使います コードは要点だけの簡略版 特に注意が必要なとき以外は -moz- 以外の接頭辞など割愛 画像からも時々 右下には補足や リンクしてます 一次情報源 URL mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
  5. 5. Marketplace
  6. 6. Mozilla Marketplace Device, OS 横断マーケット Web Platform のためのストア Firefox 限定とかじゃない 今年中に正式リリース予定 現在コミュニティメンバー限定、 Firefox 開発版ユーザ向け http://marketplace.mozilla.org/
  7. 7. オープンなアプリストア 全てを Web 技術で実装 安定・平等な環境を提供 ベンダー非依存 アプリストア、認証、課金 ... ブラウザ非依存 後方互換ダッシュボード https://persona.org/
  8. 8. http://marketplace.mozilla.org/
  9. 9. http://marketplace.mozilla.org/
  10. 10. http://marketplace.mozilla.org/
  11. 11. http://marketplace.mozilla.org/
  12. 12. http://marketplace.mozilla.org/
  13. 13. Create Apps
  14. 14. Marketplace のアプリ Web アプリ、そのまま。 レスポンシブデザイン オフラインキャッシュ localStorage & IndexedDB Canvas, WebGL Same Origin Policyチュートリアル: https://developer.mozilla.org/en/Apps/Tutorials/General
  15. 15. Marketplace アプリの違い ドメインに 1 つのアプリ 一部の API の使用権限 レビューでセキュリティ確保 BrowserID の自動ログイン ブラウザや他のアプリでログイン 済みならパスワード入力不要 https://developer.mozilla.org/en/Apps/Getting_Started
  16. 16. 既存の Web サイトやWeb アプリそのまま 変更なしで OK!
  17. 17. Install Apps
  18. 18. 3ステップインストール 1. アプリマニフェストを用意 https://developer.mozilla.org/en/Apps/Getting_Started
  19. 19. 3ステップインストール 1. アプリマニフェストを用意 2. navigator.mozApps.install() https://developer.mozilla.org/en/Apps/Getting_Started
  20. 20. 3ステップインストール 1. アプリマニフェストを用意 2. navigator.mozApps.install() 3. 以上。2 ステップだけ。 https://developer.mozilla.org/en/Apps/Getting_Started
  21. 21. manifest.webapp# 最低限 name, description があればいい{ "name": "SampleApp", "description": "サンプルアプリ", "icons": { "48": "/img/icon-48.png" }, "developer": { "name": "dynamis", "url": "http://dynamis.jp/" }} https://developer.mozilla.org/en/Apps/Getting_Started
  22. 22. navigator.mozApps.installvar request = navigator.mozApps .install("http://dynamis.jp/manifest.webapp");request.onsuccess = function() { // ユーザがインストールを許可した場合 // インストール完了時の処理を実行}request.onerror = function() { // ユーザがキャンセルした場合 // 詳細は this.error.name で得られます} https://developer.mozilla.org/en/Apps/Getting_Started
  23. 23. インストールすると... 通常のアプリ同様 デスクトップにショートカット スタートメニューに追加 アンインストールはコンパネで 独立ウィンドウで起動 ブラウザとはプロセスも独立インストール先: C:UsersdynamisAppDataRoaminghttps;dynamis.jp
  24. 24. デスクトップアプリもWeb 技術で作れる!
  25. 25. Submit Apps
  26. 26. アプリの登録 マニフェストを登録 Content-Type: application/x-web- app-manifest+json スクリーンショットを用意 説明など書いて登録 https://developer.mozilla.org/en/Apps/Submitting_an_app
  27. 27. manifest.webapp# 最低限 name, description があればいい{ "version": "1.0", "name": "SampleApp", "description": "サンプルアプリ", "icons": { "48": "/img/icon-48.png" }, "developer": { "name": "dynamis", "url": "http://dynamis.jp/" }, "installs_allowed_from": [ "https://appstore.mozillalabs.com" ]} Content-Type は application/x-web-app-manifest+json で送信
  28. 28. manifest.webapp{ "version": "1.0", "name": "SampleApp", "description": "サンプルアプリ", "icons": { "48": "/img/icon-48.png" }, "widget": { "path": "/widget.html", "width": 100, "height": 200 }, "developer": { "name": "dynamis", "url": "http://dynamis.jp/" }, "installs_allowed_from": ["https://appstore.mozillalabs.com"]} https://developer.mozilla.org/en/Apps/Manifest
  29. 29. https://marketplace.mozilla.org/en-US/developers/
  30. 30. https://marketplace.mozilla.org/en-US/developers/
  31. 31. https://marketplace.mozilla.org/en-US/developers/
  32. 32. https://marketplace.mozilla.org/en-US/developers/
  33. 33. レビューシステム 公開前のレビューあり Mozilla スタッフによるレビュー 将来は AMO のように? コミュニティボランティアによる レビューへの移行なども検討中 https://developer.mozilla.org/en/Apps/Marketplace_Review
  34. 34. テストアプリっぽいから却下ね (笑)ユーザに役立つなら説明して (・・).
  35. 35. テストアプリは自分のサイトで配布してね。
  36. 36. Android
  37. 37. Android 向けには現在開発中 まもなく Nightly 実装予定 現在はコンセプトプロトタイプ
  38. 38. Java アプリ同様インストール ホームスクリーンに追加 ブラウザと独立して起動プロトタイプ
  39. 39. Payment
  40. 40. 課金システム 販売 (プレミアムアプリ) 80, 160, 240円, ... 3860円 アプリ内課金 API Google In-Apps と似た感じ キャリア課金 キャリアと個別調整・対応
  41. 41. Summary
  42. 42. Marketplace for WebApps Web = Native デスクトップも Web で スマホアプリも Web で
  43. 43. Marketplace によりWeb が Native に。
  44. 44. Thank you.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×