Apps for Web Platform

3,272 views

Published on

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

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

No Downloads
Views
Total views
3,272
On SlideShare
0
From Embeds
0
Number of Embeds
257
Actions
Shares
0
Downloads
28
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

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.

×