2014年7月9日

MonacaにChrome Appsビルド機能が追加されました

こんにちは。生形です。

先日、Monacaがリニューアルしました。
ダッシュボードのデザインが大きく変更されたので、お気づきの方も多いのではないでしょうか。

今日は、リニューアルによって追加された機能の中でも目玉の、「Chrome Appsビルド機能」についてご紹介します。

そもそも、Chrome Appsとは何かと言いますと、
Chromeのエンジンによって動作する「デスクトップアプリ」です。
Chromeブラウザの中で動くのではなく、一般的なデスクトップアプリのように単独のウィンドウで動作します。
インストールしたアプリはオフラインでも利用することができます。

Chrome AppsはChromeウェブストアで公開されています。
動作確認用アプリ「Monacaデバッガー」も、Chrome Apps版がリリースされています。
Chromeウェブストアで「monaca」で検索してみて下さい。
「無料」ボタンを押すとインストールが行われます。

それでは、Chrome Appsの開発手順について、順を追って解説していきます。

(1) 開発
アプリの作り方はAndroidアプリやiOSアプリを作るときと同様に、HTML、CSS、JavaScriptで開発します。
PhoneGapの機能は使えないので気をつけてください。
また、ダイアログの表示やローカルストレージを利用したい場合は、
Web標準のAPIでは動かないため、Chrome Apps用のAPIを使います。
その他、インラインスクリプトは使えないなどの制約もあります。
詳しくは公式のデベロッパーサイトに記載されていますが、まだ英語ページしかありません。

(2) テスト
Chrome Apps版 Monacaデバッガーを使います。
Chromeブラウザの右上の三本線のアイコンから、ツール＞拡張機能の順に選択して「拡張機能」画面を表示し、
Monacaデバッガーの「起動」リンクを押して下さい。

また、Chromeランチャーをインストールしておけば、
デスクトップからアプリを起動することもできます。

アカウント情報を入力してログインすると、プロジェクトの一覧が表示されます。

対象のプロジェクトを選択すると、初回のみ「ワーキングディレクトリを選択」という画面が表示されます。
ワーキングディレクトリとは、クラウド上のソースコードをダウンロードする場所のことです。
任意のフォルダを指定して下さい。

ワーキングディレクトリを設定すると、プロジェクトのダウンロードが始まります。
ダウンロードが完了すると、「（アプリ名）の起動を行ってください」という画面が表示されます。

アプリの起動の仕方は、まず、ワーキングディレクトリとして設定したフォルダを開きます。
そして対象のプロジェクトフォルダを、Chromeの「拡張機能」画面にドラッグ＆ドロップします。
少々面倒ですが、アプリの追加はセキュリティ上の問題で手作業で行わなければなりません。
この作業は最初の１回だけやってしまえば、次回以降は行う必要がありません。

追加したアプリを「起動」リンクかChromeランチャーから選択すると、アプリが立ち上がります。

(3) ビルド
アプリが完成したら、Chromeウェブストアにリリースするためのファイルを生成します。
アプリ名などの変更はMonaca IDEの設定＞Chrome Apps設定から行うことができます。
ビルドはMonaca IDEのビルド＞Chrome Appsのビルドを選択するだけです。
生成されたzipファイルをChromeウェブストアの「デベロッパーダッシュボード」から登録します。
なお、Chromeウェブストアのデベロッパー登録には5ドルかかります。

Chrome Appsに関してはまだ開発のノウハウがそれほど蓄積されていないため、
特に日本語の情報は手に入りにくい状況にあります。
しかし、モバイルと併せてPC向けにもアプリを展開したいという要件に対しては、
HTMLでデスクトップアプリを開発できるChrome Appsはまさにうってつけではないでしょうか。
これまでAndroidやiPhoneアプリ開発を行ってきたMonacaユーザーの皆さま、
この機会に是非Chrome Appsアプリにも挑戦してみてください！