Apps for Web Platform

  • 2,420 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,420
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
25
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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