Apps for Web
~Developing Open Web Apps~
Slides @ DevCon in Osaka on 2012/06/30
        by Tomoya Asai (dynamis)

                                Last Update: 2012/06/30
about:
about:dynamis

                   Mozilla 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 & IndexedDB
                      Canvas, WebGL
                      Same 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
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/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.install
var	 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:UsersdynamisAppDataRoaminghttps;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円
    アプリ内課金 API
     Google In-Apps と似た感じ
    キャリア課金
     キャリアと個別調整・対応
Summary
Marketplace for WebApps

         Web = Native
         デスクトップも Web で
         スマホアプリも Web で
Marketplace により
Web が Native に。
Thank you.

Apps for Web Platform