~Developing Open Web Apps~Slides @ DevCon in Osaka on 2012/06/30

by Tomoya Asai (dynamis)

Apps for Web

Last Update: 2012/06/30

about:

about:dynamisMozilla Japan

http://dynamis.jp@dynamitter

facebook.com/dynamisレッサーパンダが好き。

mailto: Tomoya ASAI <dynamis mozilla-japan.org>@

about:slides

下線なしリンクも使いますコードは要点だけの簡略版特に注意が必要なとき以外は-moz- 以外の接頭辞など割愛

右下には補足や一次情報源 URL

画像からも時々リンクしてます

mailto: Tomoya ASAI <dynamis mozilla-japan.org>@

Marketplace

Mozilla Marketplace

Device, OS 横断マーケットWeb Platform のためのストアFirefox 限定とかじゃない

今年中に正式リリース予定現在コミュニティメンバー限定、Firefox 開発版ユーザ向け

http://marketplace.mozilla.org/

オープンなアプリストア

全てを Web 技術で実装安定・平等な環境を提供

ベンダー非依存アプリストア、認証、課金 ...

ブラウザ非依存後方互換ダッシュボード

https://persona.org/

http://marketplace.mozilla.org/

http://marketplace.mozilla.org/

http://marketplace.mozilla.org/

http://marketplace.mozilla.org/

http://marketplace.mozilla.org/

Create Apps

Marketplace のアプリ

Web アプリ、そのまま。レスポンシブデザインオフラインキャッシュlocalStorage & IndexedDBCanvas, WebGLSame Origin Policy

チュートリアル: https://developer.mozilla.org/en/Apps/Tutorials/General

Marketplace アプリの違い

ドメインに 1 つのアプリ一部の API の使用権限レビューでセキュリティ確保

BrowserID の自動ログインブラウザや他のアプリでログイン済みならパスワード入力不要

https://developer.mozilla.org/en/Apps/Getting_Started

既存の Web サイトやWeb アプリそのまま変更なしで OK！

Install Apps

３ステップインストール

1. アプリマニフェストを用意

https://developer.mozilla.org/en/Apps/Getting_Started

３ステップインストール

1. アプリマニフェストを用意2. navigator.mozApps.install()

https://developer.mozilla.org/en/Apps/Getting_Started

３ステップインストール

1. アプリマニフェストを用意2. navigator.mozApps.install()3. 以上。2 ステップだけ。

https://developer.mozilla.org/en/Apps/Getting_Started

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

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

インストールすると...

通常のアプリ同様デスクトップにショートカットスタートメニューに追加アンインストールはコンパネで

独立ウィンドウで起動ブラウザとはプロセスも独立

インストール先: C:\Users\dynamis\AppData\Roaming\https;dynamis.jp

デスクトップアプリもWeb 技術で作れる！

Submit Apps

アプリの登録

マニフェストを登録Content-Type: application/x-web-app-manifest+json

スクリーンショットを用意説明など書いて登録

https://developer.mozilla.org/en/Apps/Submitting_an_app

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 で送信

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

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 のように？コミュニティボランティアによるレビューへの移行なども検討中

https://developer.mozilla.org/en/Apps/Marketplace_Review

テストアプリっぽいから却下ね (笑)

ユーザに役立つなら説明して (・・).

テストアプリは自分のサイトで配布してね。

Android

Android 向けには現在開発中

まもなく Nightly 実装予定現在はコンセプトプロトタイプ

Java アプリ同様インストール

ホームスクリーンに追加ブラウザと独立して起動

プロトタイプ

Payment

課金システム

販売 (プレミアムアプリ)80, 160, 240円, ... 3860円

アプリ内課金 APIGoogle In-Apps と似た感じ

キャリア課金キャリアと個別調整・対応

Summary

Marketplace for WebApps

Web = Nativeデスクトップも Web でスマホアプリも Web で

Marketplace によりWeb が Native に。

Thank you.