Webアプリを公開しよう! Chrome Web Store/Apps入門

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

この記事を読むのに必要な時間:およそ 5 分

前回は,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の領域で表示されるようにし,外側の領域を透過にすることが推奨されています。アイコンファイル作成の細かなガイドラインについては,以下のドキュメントを参照してください。

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

図1 アクセス許可の表示(Google Mail Checker)

図1 アクセス許可の表示(Google Mail Checker)

この例では,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⁠を指定可能です。

著者プロフィール

吉川徹(よしかわとおる)

普段は,普通のSIer。Webからローカルアプリケーション,データベースからインフラ周りに至るまで,何でも担当する雑食系。主にHTML5開発者コミュニティ「HTML5-developers-jp」で活動中。同コミュニティ主催の「HTML5とか勉強会」のスタッフを務め,HTML5の最新動向を追っている。

コメント

コメントの記入