第2回　Hosted Appsの作成方法と公開

前回は、Chrome Web Storeの概要からAppsの簡単な説明、Chrome Web Storeの使い方までを説明しました。今回は、2種類あるWeb Appsのうち、Hosted Appsについて作成方法から公開までを具体的にご紹介したいと思います。

Hosted Appsとは

Hosted Appsの基本的な考え方は、一般的なWebサイトと変わりありません。自身で管理するWebサーバーからWebアプリやWebサービスを提供します。Chrome Web Storeでは、それらをインストール可能なWebアプリとして公開することができます。

サーバー側では任意の言語やWeb技術を利用し、クライアント側ではHTML、CSS、JavaScriptなどを使用します。HTML5やその関連技術、Chromeがサポートする新しいAPIなども利用可能です。是非、これらを活用して好きなWebアプリを作ってみてください。

Hosted Appsの作成方法

Hosted Appsは、前述の通り一般的なWebサイトと変わりありませんので、ここではWebアプリの中身については言及しません。既にWebアプリ（Webサイト）があることを前提として、Chromeブラウザにインストール可能とするための方法を説明します。

WebアプリをHosted Appsとして公開する場合、ソースを書き換える必要も、使用しているAPIを変える必要もありません。マニフェストファイルとアイコンを用意し、以下のフォルダ構成で配置します。マニフェストファイルとアイコンの内容については、後述します。

exampleApp/
- manifest.json
- icon_128.png

任意の名前のフォルダを作成し、その中にマニフェストファイルとアイコンファイルを配置します。フォルダの名前には、Webアプリの名称などを指定するとよいでしょう。アイコンファイルの名前は、マニフェストファイル内で指定します。

マニフェストファイルとアイコンの作成

マニフェストファイルは、公開するWebアプリのメタデータとしてmanifest.jsonというテキストファイルを作成します。この中で、WebアプリのURLや利用するリソース、アクセス許可などを設定します。文字コードは、UTF-8である必要があります。以下に典型的なマニフェストファイルの内容を示します。

{
  "name": "exampleApp",
  "description": "Hosted Apps Example",
  "version": "1",
  "app": {
    "urls": [
      "*://example.com/apps/",
      "*://example.com/mail/"
    ],
    "launch": {
      "web_url": "http://example.com/apps/"
    }
  },
  "icons": {
    "128": "icon_128.png"
  },
  "permissions": [
    "unlimitedStorage",
    "notifications",
    "geolocation",
    "background"
  ]
}

マニフェストファイル中の“⁠name⁠”と“⁠icons⁠”は、Webアプリがインストールされた際に、新しいタブページに表示される内容です。新しいタブページでWebアプリのアイコンをクリックすると、“⁠web_url⁠”で記載されたURLのページを表示します。

アイコンファイルには、サイズが128pxのものを指定します。アイコン画像の外側は枠で隠れることがあるため、中央の98×98pxの領域で表示されるようにし、外側の領域を透過にすることが推奨されています。アイコンファイル作成の細かなガイドラインについては、以下のドキュメントを参照してください。

Chrome Web Store image guidelines

ほかにも、“⁠urls⁠”でWebアプリが利用するリソースをURLで明記し、“⁠permissions⁠”で、アクセス許可が必要なAPIなどを記載します。マニフェストファイルに記載された内容は、Chrome Web StoreのWebアプリの詳細画面に表示されますので、ユーザーがこのWebアプリがどんなことをするのか、正しく理解し、安全であるかどうか判断できるようにする必要があります。

この例では、google.com上のデータへのアクセスとブラウザ履歴へのアクセスがあることがわかります。このように、不必要なアクセスをしていないとこと明示するためにも“⁠urls⁠”や“⁠permissions⁠”の内容については、必要最小限のものにしておくとよいでしょう。

その他のHosted Appsで設定するマニフェストファイルの内容については、下記表を参考にしてください。

表1　Hosted Appsのマニフェストファイル詳細

フィールド名	必須	説明
name	○	Webアプリの名前
description		Webアプリの説明
version	○	バージョン番号ドット区切りの数字（最大4つ）
app
urls		Webアプリで利用するURL ワイルドカードを利用できます。また、指定したURLの下位のURLを含みます。画像などのURLは指定する必要はありません。
launch
web_url	○	Webアプリの最初のページ
container		Webアプリが起動するコンテナの形態 “⁠tab⁠”もしくは“⁠panel⁠”を指定します。デフォルトは“⁠tab⁠”です。
height		containerに“⁠panel⁠”を指定した場合、パネルの高さをピクセル単位で指定します
width		containerに“⁠panel⁠”を指定した場合、パネルの横幅をピクセル単位で指定します
icons
128	○	Chrome Web Storeおよび、新しいタブページで表示されるWebアプリのアイコン
minimum_chrome_version		Webアプリがインストール可能なChromeブラウザの最低バージョン
permissions		Webアプリに対するアクセス許可 “⁠geolocation⁠”, “⁠notifications⁠”, “⁠unlimitedStorage⁠”, “⁠background⁠”を指定可能です。

アクセス許可が必要なAPIの概要

マニフェストファイルでアクセス許可が必要なAPIについて概要を説明します。“⁠permissions⁠”で指定できる4つのアクセス許可は、“⁠geolocation⁠”が「Geolocation API⁠」⁠、“⁠notifications⁠”が「Notification API⁠」⁠、“⁠unlimitedStorage⁠”が「Web SQL Database API⁠」⁠、“⁠background⁠”が「Background」にそれぞれ該当します。ChromeでサポートするHTML5の機能のうち、ここで記載されたもの以外についてはそのまま使用できます。各APIの詳細については、連載の中で個別に解説していきたいと思います。

Geolocation API: Geolocation APIは、位置情報を取得するAPIです。現在の経度、緯度を取得して地図上にプロットすることなどが可能です。例えば地図と連携したい場合や、近くにいる人と何かしたいといった場合に利用できます。
Notification API: Notification APIは、デスクトップ上に通知用のポップアップを表示します。例えば、メールアプリでメールが届いた場合に通知するなどといった場合に利用できます。

Web SQL Database API: Web SQL Database APIは、ローカルにデータを保存するクライアントサイドストレージです。ブラウザにデータベースを持つことができます。保存できるデータ量には5MBまでという制限がありますが、“⁠permissions⁠”に“⁠unlimitedStorage⁠”を指定することによって、その制限を解除することができます。同じクライアントサイドストレージとしては、ほかにもWeb Storageがありますが、残念ながらこちらは“⁠unlimitedStorage⁠”に対応していません。
Background: Chrome 10からHosted AppsでWebアプリのバックグラウンド動作が可能になりました。“⁠permissions⁠”には“⁠background⁠”を指定します。JavaScriptのwindow.openメソッドの第3引数に“⁠background⁠”を指定することによって、不可視のウィンドウを生成し、その中で常駐型の機能を動作させます。ブラウザを閉じてもChromeを明示的に終了させなければ、動作し続けることができます。Windowsでは、常駐しているWebアプリが次のようにタスクバーに表示されます（画像はChromiumのものです⁠）⁠。

詳細は、以下のドキュメントを参照してください。

Background: Extending Your App's Life

Extensions／Packaged Appsでは、Background Pagesによってバックグラウンド動作が可能です。ここで紹介したBackgroundも利用可能ですが、特に理由がない限りはBackground Pagesを使用してください。

Webアプリの動作確認

作成したWebアプリは、Chromeブラウザで開発版としてインストールすることが可能です。

ツールバーのスパナアイコンをクリックし、ツール＞拡張機能をクリックします。
デベロッパーモードのタブが表示されていなければプラスアイコンをクリックします。

図4　デベロッパー画面
「パッケージ化されていない拡張機能を読み込みます」ボタンをクリックし、作成したWebアプリのフォルダを指定してインストールします。

図5　デベロッパー画面（読み込み後）
新しいタブページを開くと、インストールされたWebアプリが表示されますので、クリックして動作を確認します。

図6　新しいタブページ

Hosted Appsの公開

作成したWebアプリをChrome Web Storeで公開します。公開にはGoogleアカウントが必要です。Web AppsまたはExtensionsを今までに公開したことがなければ、開発者登録料として初回の公開時のみ$5の支払いが必要になります。また、Hosted Appsの場合、Webアプリをホスティングしているドメインの所有権の確認を行います。以下に各手順の詳細を説明します。

Webアプリのアップロード

作成したWebアプリをChrome Web StoreのDeveloper Dashboardからアップロードします。

Webアプリのフォルダをzipで圧縮します。
Windowsであれば、フォルダを右クリック→「⁠送る⁠」⁠→「⁠圧縮（zip形式）フォルダー」で作成可能です。
Chrome Web Storeを表示し、左側のメニュー下の「Developer Dashboard」をクリックします。

図7　Chrome Web Store
Developer Dashboardの画面から「Add new item」ボタンをクリックします。

図8　Developer Dashboard
利用規約の内容を確認し、「⁠Accept」ボタンをクリックします（既に利用規約に同意したことがある場合は表示されません⁠）⁠。

図9　利用規約
Add new itemの画面から「Choose file」ボタンをクリックします。「⁠手順1.」で作成したWebアプリのzipファイルを指定し、「⁠Upload」ボタンをクリックします。

図10　アイテム追加画面
アップロードが完了すると、アイテム編集の画面となり、各種設定を行うことができます

図11　アイテム編集画面
ページ下段の「Save draft and return to dashboard」ボタンをクリックして設定内容を一時保存することができます。

ドメインの所有権の確認と開発者登録料の支払いが不要な方は、「⁠Webアプリの公開」へ進んでください。

ドメインの所有権の確認

Webアプリで利用しているドメインについて、あなたがそのドメインを所有していることをGoogle Webmaster Toolsを使って確認する必要があります。

アイテム編集の画面よりGoogle Webmaster Toolsのリンクをクリックします。

図12　アイテム編集画面

Unmatched apps urls

マニフェストファイルの“⁠urls⁠”フィールドで指定したURLのうち、ドメインの所有権の確認が必要なURLが表示されます。
Google Webmaster Toolsの画面より「サイトを追加」ボタンをクリックし、URLを入力します。
図13　所有権の確認

所有権の確認方法は、次のものがあります。
- メタタグで確認する
- HTMLで確認する
- DNSで確認する
- Google Analyticsで検証する
ここでは、「⁠HTMLで確認する」について解説します。その他の方法については、ヘルプを参照してください。
「HTMLファイルをサーバーにアップロード」を選択し、手順に表示されたHTMLファイルをダウンロードします。
図14　HTMLで確認する
ダウンロードしたファイルを指定のドメインにアップロードし、「⁠確認」ボタンをクリックします。所有権の確認が終わると、そのドメインのダッシュボードが表示されます。

これで、ドメインの所有権の確認は完了です。今後、Webアプリを同じドメインで提供する場合は、所有権の確認は不要です（別のGoogleアカウント上で公開する場合は、再度必要になります⁠）⁠。

開発者登録料の支払い

Web AppsやExtensionsを初めて公開する場合は、開発者登録料を支払う必要があります。2回目以降の公開には必要ありません。支払いが必要な場合は、Developer Dashboardかアイテム編集画面にリンクが表示されます。「⁠Pay this fee now」のリンクをクリックして支払いを行ってください。現在は、クレジットカードによる支払いのみとなります。

Webアプリの公開

アイテム編集画面でWebアプリの各種設定を行います。ここで設定した内容は、Webアプリの詳細画面に反映されます。「⁠Preview changes」ボタンをクリックして内容を確認しながら設定することができます。

Payments: 課金方法を選択します。現在は、無料か独自課金のみ選択可能です。
Locales: 提供する地域を選択します（必須⁠）⁠。最低1つを選択する必要があります。
Categories: Chrome Web Storeで分類されるカテゴリを選択します（必須⁠）⁠。
カテゴリは、2つまで指定可能です。Additional categoriesを含めて最低1つを指定する必要があります。
Additional categories (comma-separated): 任意のカテゴリを設定します。
Language: Webアプリの言語を指定します（必須⁠）⁠。
Detailed description: Webアプリの詳細説明を設定します。16,000文字の文章を指定できます。
Icon: サイズが128×128pxのアイコンです。Webアプリに設定したアイコンと同じものをアップロードします（必須⁠）⁠。
Appearance of header: 背景画像をアップロードします。サイズが570×275pxの画像を指定します。
Upload screenshots: スライドショーとして表示されるスクリーンショットをアップロードします。サイズが400×275pxの画像か、YouTubeにアップロードした動画を指定することができます（必須⁠）⁠。
Promotional images: バナー（大／小）を設定します。サイズが585×220pxの画像と210×140pxの画像を指定することができます。

各種設定が完了したら、まずは「Publish to test accounts」ボタンをクリックして、テスターアカウントのみへの公開を行い、Webアプリのインストールと動作を確認してください。この時点では、自身のアカウントかテスターアカウントのみから参照することができます。Chrome Web Storeの検索には反映されませんので、WebアプリのURLを直接指定して確認します。

テスターアカウントは、Developer Dashboardの「Edit your tester accounts」のリンクをクリックして設定できます。

テスターアカウントによる確認後、いよいよWebアプリをChrome Web Storeへ公開します。いったんDeveloper Dashboardから「Unpublish」リンクをクリックしてテスターアカウントへの公開を停止してから、そのまま同画面から「Publish」リンクをクリックするか、アイテム編集画面から「Publish changes」ボタンをクリックすることで公開することができます。

これで、あなたのWebアプリがChrome Web Storeに公開されました！　ユーザーは、あたなのWebアプリを評価することができます。是非、多くのユーザーのフィードバックを受けて、よりよいWebアプリを作ってください。

まとめ

今回は、Hosted Appsの作成方法から公開までを説明しました。次回は、もうひとつのWeb Appsである、Packaged Appsの作成方法と公開までを取り上げていきたいと思います。

本連載で取り上げているChrome Web Store／Appsについては、「⁠Chrome API Developers JP」という開発者コミュニティで活発な情報交換が行われています。もし、本連載で興味を持たれた方は、こちらも覗いてみてはいかがでしょうか。

Chrome API Developers JP