読者です 読者をやめる 読者になる 読者になる

Intelligent Technology's Technical Blog

株式会社インテリジェントテクノロジーの技術情報ブログです。

Chrome Apps(Chrome Packaged Apps)を作って動かすための4ステップ

Chrome Apps Chrome JavaScript HTML5

こんにちは、中山です。

Chrome AppsChrome Packaged Apps)」盛り上がってきてますね!

HTML5 + JavaScript + CSS で書かれるウェブアプリなのだけれども、ネイティブアプリのようにふるまうことのできる、というこのプラットフォームは、Googleが2013年9月に正式に発表したものです。
この「Chrome Apps」、現状は、PCやMacだけがターゲットのようです。(iOSAndroidなどでは使えないみたい。)
また、日本語での呼び方は「Chromeアプリ」となっているようですね。

Chrome Apps」については、以下のページが参考になります。

Google、デスクトップアプリのように使える「Chromeアプリ」を発表

What Are Packaged Apps?

今回は、この「Chrome Apps」を実際に作って動かしてみるための、最初の4つのステップを、順を追って紹介してみたいと思います。

ステップ1 Chromeのインストール

Chromeの最新版をインストールします。今回はMacにインストールしました。
インストール後、Chromeのバージョンを確認します。当記事の執筆時点では「30.0.1599.66」でした。
f:id:IntelligentTechnology:20131008133004p:plain

(※Chrome Appsの公式の開発ガイドでは、「Chrome Canary(=ChromeのNightly Build版)」を使え、と書いているのですが、バージョン30の通常のChromeでも、今のところ問題なく使えるようでした。)
 

ステップ2 Chromeの設定

Chrome Apps」を作って動かすために、ちょっとだけ「Chrome」の設定を変更します。

試験運用機能を設定する

ChromeのURLまたは検索文字列入力欄に、

chrome://flags

と入力して、「試験運用機能」の設定画面を開きます。
そして、以下の3項目を「有効」に設定します。(※設定を有効にすると、リンクが「無効にする」に切り替わります。)

1)「試験運用版の拡張機能API
f:id:IntelligentTechnology:20131008134004p:plain

2)「パッケージ化されたアプリのデバッグの有効化」
f:id:IntelligentTechnology:20131008134333j:plain

3)「パッケージ化されたアプリのショートカットを有効にする」
f:id:IntelligentTechnology:20131008134418j:plain
(※この設定は、Macのみのようです。)

設定変更後、Chromeを再起動して、変更内容を反映します。
 

デベロッパーモードを有効にする

ChromeのURLまたは検索文字列入力欄に、

chrome://extensions

と入力して、「拡張機能」画面を開きます。
そして、「デベロッパーモード」チェックボックスにチェックをつけます。
f:id:IntelligentTechnology:20131008140325p:plain

設定の変更はこれだけです。
 

ステップ3 ソースコードの作成と読み込み

まずは、Googleが公開しているChrome Appsのサンプルアプリを、そのまま利用してみます。
サンプルアプリのソースはこちらから取得することができます。

先ほど開いた「拡張機能」画面の「パッケージ化されていない拡張機能を読み込む」ボタンをクリックします。
そして、表示されたダイアログボックスの「拡張機能のルートディレクトリ」欄に、読み込むアプリのディレクトリを指定します。(ここでは「Hello World」サンプルアプリのディレクトリを指定しました。)
f:id:IntelligentTechnology:20131008141126p:plain

読み込みが完了すると、「拡張機能」画面に、以下のように、読み込んだアプリの情報が表示されます。
f:id:IntelligentTechnology:20131008141416p:plain

ソースコード自体は、以下の通り、

から構成されています。
f:id:IntelligentTechnology:20131008142625p:plain

このあたりの詳細については、近いうちにまた紹介できればいいなと思っています。
 

ステップ4 アプリの起動

読み込んだアプリを起動するのはとてもシンプルで、先ほどの「拡張機能」画面から、対象アプリの「起動」リンクをクリックするだけです。
f:id:IntelligentTechnology:20131008143107p:plain

もしくは、Chromeの新しいタブを表示して、アプリの一覧から、該当するアプリのアイコンをクリックします。
f:id:IntelligentTechnology:20131008143233p:plain
 
アプリが起動すると、以下の通り、Chromeのブラウザ内ではなく、通常のネイティブアプリと同様に、独立した形で画面上に表示されます。
f:id:IntelligentTechnology:20131008143439p:plain
 

Chrome Apps」作ってみた

アプリ起動まで、なんの問題もなくスムーズにできてしまったので、私のほうでも、サンプルアプリを参考にして、ひとつアプリを作ってみました。
それがこちら。「Udon Advisor(うどんアドバイザー)」です。
f:id:IntelligentTechnology:20131008152951p:plain

うどん県在住の私が、日々のうどん情報収集のためだけに作ったアプリです。(もちろん、今日のお昼もうどん。)
アプリを起動しますと、上記のとおり、最新の「うどん」に関連するニュースが表示されます。(実際は、Googleのニュース検索結果を表示しているだけです。)

また、下側の「SEARCH」メニューをクリックすると、上部に検索欄のある画面に切り替わります。
ここでは、入力した内容に、必ず「うどん」をからめて、その検索結果を表示してくれる、という大変便利な機能が搭載されています。
f:id:IntelligentTechnology:20131008153428p:plain

この「Udon Advisor」アプリは、とてもシンプルなつくりではあるのですが、1点、「Chrome Apps」が独自に用意している、「webview」というタグとそのAPIを利用して、機能を実現しているところがあります。
この「webview」タグとそのAPIについては、また改めて紹介できる機会があればよいな、と考えています。

なお、「Udon Advisor」アプリのソースは、こちらから取得することができます。
 

補足その1 デバッグ

  • Chrome Apps」を実行して表示される、HTMLの要素を確認する
  • JavaScriptコードからのコンソール出力を確認する

といった操作も、以下のような手順で実施することができます。

1)Chromeの「拡張機能」画面から、「起動」リンクをクリックして、アプリを起動します。

2)「拡張機能」画面に、そのアプリのエントリポイントとなるHTMLファイル(今回の場合は「index.html」)のリンクが表示されます。
f:id:IntelligentTechnology:20131008155057p:plain

3)そのリンクをクリックすると、Chromeデベロッパーツールが表示されます。
f:id:IntelligentTechnology:20131008162521p:plain

デバッグに関しては、このほかにも便利な機能があるかもしれません。
 

補足その2 アプリ起動ショートカット作成

Chromeのアプリ一覧画面から、アプリアイコンを右クリックして「ショートカットを作成」を選択することで、そのアプリを起動するショートカットを作成することができます。
f:id:IntelligentTechnology:20131008163849p:plain

Macの場合、「アプリケーション」ディレクトリにファイルが作成されます。
f:id:IntelligentTechnology:20131008164209p:plain

Windowsの場合は、デスクトップ、スタートメニュー、またはタスクバーのいずれか指定した場所に、ショートカットが作成されるようです。
 

Chrome Apps」すごいのか?!

いろいろポテンシャルは持っているのだと思います。
現状は、PCやMacだけをターゲットにしていますが、もしこれが今後、iOSAndroidなどのスマートデバイスでも難なく動作するようになったとしたら・・・、ひょっとしたらアプリ界隈に、大きな変化が出るかもしれないなぁ、とも考えています。

※追記

Chrome Apps」の、モバイルプラットフォーム上での実行にもチャレンジしてみました。
「Mobile Chrome Apps」ツールキットを用いた挑戦について、詳しくはこちらから。