Ext JS アプリから Google Chrome アプリや拡張機能を作る方法

こんにちは、ゼノフィnakamuraです。

この記事は、US Sencha社ブログを翻訳したものです。

はじめに

Google Chrome は Web コンテンツにおいて、非常に重要なデリバリーメカニズムです。2014年9月の時点では、 Chrome はマーケットシェアの59.6% も獲得しています。

ブラウザだけではありません。Chromebook で走る OS、Chrome OS もです。ガートナーによると、今年は520万台売れるという見通しが立っています。特に米国での教育マーケットでは、Chromebook の需要が増えているのです。

Source: w3schools.com, 2014

Google Chromer ウェブストアは貴方のアプリケーションを広めるためには素晴らしい場所です。なぜなら、Google Chrome ブラウザーを使用できる人なら誰でもインストールできるからです。

Ext JS は強力な Web アプリケーションを作ることを手助けします。 Web アプリ同様、Chrome アプリは JavaScript、CSS、HTML で書かれており、見栄えもパフォーマンスも優れた Chrome アプリを作るなら Ext JS が正しいフレームワークです。

インストールできる Chrome アプリにはいくつか種類があります：エクステンション、パッケージされたアプリ、ホストされたアプリ。

ホストされた Web アプリは、 Web サーバーから提供される普通の Web アプリケーションです。
パッケージされた Web アプリはバンドルされたものであり、完全に Chrome ブラウザにインストールされ、特別な Chrome API にアクセスすることができます
エクステンションは Chrome ブラウザの機能性を変更したり拡張することが可能になる小さいアプリです。

今日はホストされたアプリの作り方をじっくりと見ていきます。パッケージされたアプリやエクステンションを作るプロセスは全く違うので、今後の記事で触れるかもしれません。もしパッケージアプリや Chrome エクステンションを作ることに興味があるならば、Sencha チームによって作られた以下のリソースをご覧ください。

Google Chrome 用に Ext JS アプリをパッケージする手順を見ていきましょう。

必要条件：

Ext JS 5 と Sencha Cmd
Sencha Cmd を使って生成された Ext JS アプリケーション
Google アカウント (開発者アカウントとしてアプリにアクセスする時に必要)
Google Chrome ウェブストア用のアイコン (128×128 ピクセル PNG)
アートワーク (Web Store で使用されます)
- 440×228 PNG 検索結果内に表示されるタイトルとして使う
- 1280×800 PNG アプリのスクリーンショットを最低でも1つ
Web サーバーへのアクセス (ホストされたアプリはネット接続が必要です。ホワイトリスト url からアプリをロードしてください)

デモのために、Ext JS 5 で簡単な TODO アプリケーションを作りました。アプリのネームスペースは ExtTodo です。これは、元々 Sencha Cmd 5 で生成されたものです。

このサンプルを GitHub リポジトリで公開しています。

以下が手順になります。

1. イメージスライサーを無効にします

ビルドプロセスは、デフォルトでイメージスライサーがレガシーブラウザ用のフォールバックイメージを作ることが有効になっています。Google Chrome はモダンなブラウザなので、フォールバックイメージは必要ありません。つまり、スライサーを無効にすることでビルドの時間を短縮でき、プロダクションアウトプットを最小限に留めることができます。

~/exttodo/.sencha/app/sencha.cfg を開き、以下をネームスペースの下に加えましょう。

# Skip the image slice process
skip.slice=1

2. Sencha Cmd でビルドする

イメージスライサーを無効化させた後、プロダクションビルドを作成しましょう。アプリケーションフォルダーから以下を実行しましょう。

sencha app build production

ビルドプロセスは単一の圧縮された .js ファイルを作ります。このファイルはアプリケーションを実行するのに必要なものが全て含まれています。すべての使用される Sencha Ext JS クラスを含んでいるだけでなく、全ての独自のカスタムアプリケーションコードも含まれています。また、ビルドプロセスはプロダクション用に最小化されたスタイルシートを作成します。そこにはフレームワークのテーマやカスタムスタイリングが含まれています。

3. ビルドを認証する

ファイルエクスプローラを使用し、build/production/MyApp フォルダに行き、exttodo アプリケーション (例： ~/exttodo/build/production/ExtTodo)を探しましょう。

以下のファイル構造であることを確認します。

app.js – 単一の最小化した JS ファイル
app.json – アプリ特有の設定が含まれています
index.html – アプリケーションが着地するページ
resources/ – アプリケーションのためにコンフィグされた画像、フォント、その他のリソースが含まれたフォルダ
ExtTodo-all.css – CSS テーマ

4. ビルドを Web サーバー上にアップロード

ビルドを Web サーバーにアップロードしましょう。

注：もし Web サーバーがなく、試しに Ext JS と Sencha Cmd で Google Chrome アプリを作っているのであればこの手順は飛ばしてもかまいません。後に、マニフェストファイルでローカルホスト上の build/production/MyApp にリンクさせましょう。

5. 空のフォルダーを作成する

googlechromeapp フォルダーを作成します。

~/exttodo/googlechromeapp/ExtTodo

このフォルダーには Chrome Webstore のアセットとマニフェストファイルを配置します。

6. アイコンとアートワークを googlechromeapp/MyApp フォルダーのルートにコピーします。

7. マニフェストファイルを作成する

ホストされている Google Chrome アプリを作成するのは実は非常に簡単です。必要なのは manifest.json ファイルです。これを ~/exttodo/googlechromeapp/MyApp フォルダーのルート内に置きます。以下のようになります。

{
    "name": "ExtTodo",
    "description": "A simple Ext JS 5 Todo app",
    "version": "0.1",
    "manifest_version": 2,
    "app": {
        "urls": [
            "http://localhost/exttodo/build/production/ExtTodo"
        ],
        "launch": {
            "web_url":  "http://localhost/exttodo/build/production/ExtTodo"
        }
    },
    "icons": {
        "128": "icon_128.png"
    }
}

記：この例では、テストするためだけなのでアプリの url をローカルホストに設定してあります。オンラインで Web アプリケーションがホストされれば、http://mydomain.com/mychromeapp/ に設定できます。

この JSON コンフィグオブジェクトの重要なプロパティをレビューしていきましょう。

name – 必須。アプリケーションの名前、これはストアと Chrome のランチャーに表示されます。
description – Recommended. A brief description of the app. 推奨。アプリの簡単な説明
必須。このメタデータのバージョン。メタデータをアップデートする度にこの数字は増加しなければいけません。
必須。現在サポートされているマニフェストバージョンは 2 です。
app – 必須。アプリが使用するリモート URL。

urls – 推奨。ホストされているアプリ内のページの URL の配列。
launch – 必須。ユーザーがアプリを起動すると何が起きるかを指定する。
- web_url – 必須。起動ページを完全 URL として指定。

icons – 推奨。ランチャーで表示されるアイコンを指定。

Installable Web Apps

8. zip ファイルの生成

ここで、~/exttodo/googlechromeapp/MyApp のコンテンツを利用して zip ファイルを生成します。manifest.json とアイコンは zip ファイルのルートに置きます。

9. Google Dashboard にファイルをアップロード

Google dashboard を開きます (Google にログインしている必要があります) 。

次に、 Choose file ボタンを押し、~/exttodo/googlechromeapp/MyApp/myapp.zip を選択します。これでパッケージがアップロードされます。

アップロード後、パブリッシュのセットアップという画面に進み、そこで app store でのアプリの詳細や、アプリのスクリーンショットなどを設定することができます。チュートリアルではこの手順は飛ばします。 ドラフトを保存するを選択し、ダッシュボードボタンに戻りましょう。

注：Web アプリをパブリッシュ、もしくは app store を通してアプリケーションを販売したければ必要になる手順がもういくつかあります。このガイドの後半の、アプリのパブリッシュをご覧下さい。

基本的にはパブリッシュ設定の欄を記入しなければいけません。アプリをパブリッシュするにはレジストレーション代 5 ドル (1度切りの支払い) が必要になります。これは開発者が真面目な Web アプリケーションをアップロードすることを助長するためです。

ホストされたアプリが Chrom ウェブストアにリストされていれば、このフィールドで特定されているドメインを全てコントロールしていることを証明しなければなりません。

10. テストする

Chrome アプリとしてアプリケーションが実行するかをテストするには、Chrome の設定に行きます。以下のスクリーンショットをご覧ください。

Extensions タブを開きます。

デベロッパーモード Developer Mode チェックボックスをチェック、そして Pack extension ボタンをクリックします。

以下のポップアップが表示されます。エクステンションルートディレクトリ Extension root directory には、~/exttodo/googlechromeapp/MyApp フォルダを選択します。そして、 Pack extension ボタンをクリックします。

これは2つのファイルをダウンロードします。MyApp.pem と MyApp.crx。MyApp.pem はセキュアキーのついたファイルです。このファイルは、googlechromeapp/MyApp/ フォルダの外側に保存しなければいけません。

アプリの起動ファイルでもある MyApp.crx は ~/exttodo/googlechromeApp/MyApp/ フォルダーに移動させました。
そのあと、 Load unpacked extension ボタンを押します。次のポップアップでは、~/exttodo/googlechromeapp/MyApp フォルダーを選択します。すると、アプリのアイコンがエクステンションリストに表示されます。

ホストされたアプリケーションをテストするには、Google Chrome で新しいタブを開き、apps ボタンを選択しましょう (もしくは以下のurlを入力しましょう: chrome://apps) 。128×128 のアプリアイコンが現れ、これが extodo アプリを起動します。

結論

Google Chrome はアプリプラットフォームとして見る価値は十分にあります。なぜなら、多くの人が Google Chrome をお気に入りのブラウザとして使用しているからです。Ext JS 5 は強力なアプリケーションを作るのを手助けしてくれます。そしてChrome アプリが Web アプリケーションであるため、このプラットフォームを使うことで露出させることもできます。作ることができる Chrome アプリはいくつか種類があります。パッケージされた(オフライン) Chrome アプリ、Chrome ブラウザエクステンション (ブラウザの機能性を拡張するもの) 、そしてホストされた Web アプリケーションです。このチュートリアルでは、開発者がホストされた Chrome アプリケーションを幾つかの簡単なステップで作る方法をお見せしました。

あなたはどんな Chrome アプリを作るのでしょうか？コメントセクションでお知らせください。

Sencha Blog