こんにちは、中山です。
「Chrome Apps（Chrome Packaged Apps）」盛り上がってきてますね！
HTML5 + JavaScript + CSS で書かれるウェブアプリなのだけれども、ネイティブアプリのようにふるまうことのできる、というこのプラットフォームは、Googleが2013年9月に正式に発表したものです。
この「Chrome Apps」、現状は、PCやMacだけがターゲットのようです。（iOSやAndroidなどでは使えないみたい。）
また、日本語での呼び方は「Chromeアプリ」となっているようですね。
「Chrome Apps」については、以下のページが参考になります。
Google、デスクトップアプリのように使える「Chromeアプリ」を発表
今回は、この「Chrome Apps」を実際に作って動かしてみるための、最初の4つのステップを、順を追って紹介してみたいと思います。
ステップ1 Chromeのインストール
Chromeの最新版をインストールします。今回はMacにインストールしました。
インストール後、Chromeのバージョンを確認します。当記事の執筆時点では「30.0.1599.66」でした。
（※Chrome Appsの公式の開発ガイドでは、「Chrome Canary（＝ChromeのNightly Build版）」を使え、と書いているのですが、バージョン30の通常のChromeでも、今のところ問題なく使えるようでした。）
ステップ2 Chromeの設定
「Chrome Apps」を作って動かすために、ちょっとだけ「Chrome」の設定を変更します。
ステップ3 ソースコードの作成と読み込み
まずは、Googleが公開しているChrome Appsのサンプルアプリを、そのまま利用してみます。
サンプルアプリのソースはこちらから取得することができます。
先ほど開いた「拡張機能」画面の「パッケージ化されていない拡張機能を読み込む」ボタンをクリックします。
そして、表示されたダイアログボックスの「拡張機能のルートディレクトリ」欄に、読み込むアプリのディレクトリを指定します。（ここでは「Hello World」サンプルアプリのディレクトリを指定しました。）
読み込みが完了すると、「拡張機能」画面に、以下のように、読み込んだアプリの情報が表示されます。
ソースコード自体は、以下の通り、
- マニフェストファイル
- HTMLファイル
- JavaScriptファイル
- CSSファイル
- 画像などのリソースファイル
から構成されています。
このあたりの詳細については、近いうちにまた紹介できればいいなと思っています。
ステップ4 アプリの起動
読み込んだアプリを起動するのはとてもシンプルで、先ほどの「拡張機能」画面から、対象アプリの「起動」リンクをクリックするだけです。
もしくは、Chromeの新しいタブを表示して、アプリの一覧から、該当するアプリのアイコンをクリックします。
アプリが起動すると、以下の通り、Chromeのブラウザ内ではなく、通常のネイティブアプリと同様に、独立した形で画面上に表示されます。
「Chrome Apps」作ってみた
アプリ起動まで、なんの問題もなくスムーズにできてしまったので、私のほうでも、サンプルアプリを参考にして、ひとつアプリを作ってみました。
それがこちら。「Udon Advisor（うどんアドバイザー）」です。
うどん県在住の私が、日々のうどん情報収集のためだけに作ったアプリです。（もちろん、今日のお昼もうどん。）
アプリを起動しますと、上記のとおり、最新の「うどん」に関連するニュースが表示されます。（実際は、Googleのニュース検索結果を表示しているだけです。）
また、下側の「SEARCH」メニューをクリックすると、上部に検索欄のある画面に切り替わります。
ここでは、入力した内容に、必ず「うどん」をからめて、その検索結果を表示してくれる、という大変便利な機能が搭載されています。
この「Udon Advisor」アプリは、とてもシンプルなつくりではあるのですが、1点、「Chrome Apps」が独自に用意している、「webview」というタグとそのAPIを利用して、機能を実現しているところがあります。
この「webview」タグとそのAPIについては、また改めて紹介できる機会があればよいな、と考えています。
なお、「Udon Advisor」アプリのソースは、こちらから取得することができます。
補足その1 デバッグ
- 「Chrome Apps」を実行して表示される、HTMLの要素を確認する
- JavaScriptコードからのコンソール出力を確認する
といった操作も、以下のような手順で実施することができます。
1）Chromeの「拡張機能」画面から、「起動」リンクをクリックして、アプリを起動します。
2）「拡張機能」画面に、そのアプリのエントリポイントとなるHTMLファイル（今回の場合は「index.html」）のリンクが表示されます。
3）そのリンクをクリックすると、Chromeのデベロッパーツールが表示されます。
デバッグに関しては、このほかにも便利な機能があるかもしれません。
補足その2 アプリ起動ショートカット作成
Chromeのアプリ一覧画面から、アプリアイコンを右クリックして「ショートカットを作成」を選択することで、そのアプリを起動するショートカットを作成することができます。
Macの場合、「アプリケーション」ディレクトリにファイルが作成されます。
Windowsの場合は、デスクトップ、スタートメニュー、またはタスクバーのいずれか指定した場所に、ショートカットが作成されるようです。
「Chrome Apps」すごいのか？！
いろいろポテンシャルは持っているのだと思います。
現状は、PCやMacだけをターゲットにしていますが、もしこれが今後、iOSやAndroidなどのスマートデバイスでも難なく動作するようになったとしたら・・・、ひょっとしたらアプリ界隈に、大きな変化が出るかもしれないなぁ、とも考えています。
※追記
「Chrome Apps」の、モバイルプラットフォーム上での実行にもチャレンジしてみました。
「Mobile Chrome Apps」ツールキットを用いた挑戦について、詳しくはこちらから。
