Intelligent Technology's Technical Blog

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

乗るしかない、のか?!Mobile Chrome Apps!

進んでます。「Mobile Chrome Apps」

こんにちは、中山です。
このブログでも以前紹介した「Mobile Chrome Apps」ですが、その後もどんどん開発が進んでいるようで、先日、ついに「デベロッパプレビュー」版が発表されていました。

 
デベロッパプレビュー」版となったことで、操作方法が変わったところもありましたので、あらためて、「モバイル版Chrome Appsが動くまで」を、かんたんに紹介してみたいと思います。

開発環境をつくる

公式のGitHubサイトの情報を参考に、「Mobile Chrome Apps」を開発するための環境を作成してみます。
なお今回は、MacOS X 10.9.1 Mavericks)で環境を作りました。

1.Node.jsのインストール

このあと使うことになる「npm」ツールのために、「Node.js」のインストールが必要です。
今回は、Node.jsの公式サイトから、バージョン 0.10.25 のパッケージを取得してインストールしました。

2.XCodeのインストール

AppleApp Storeから、最新のXCode(今回利用したのはバージョン5.0.2)を取得してインストールします。

3.XCode Command Line Toolのインストール

XCode付属の「Command Line Tool」をインストールします。
XCodeバージョン5では、以下のような方法でインストールできるようです。

  1. XCodeのメニューから、「XCode」→「Open Developer Tool」→「More Developer Tools」を選択。
  2. ブラウザが起動してウェブページが表示されるので、その中から「Command Line Tools (OS X Mavericks) for Xcode」を選択。

なお、公式サイトの説明だと、このほか「ios-deploy」や「ios-sim」といったツールのインストールを行うようになっているのですが、今回、XCode上でほとんどの操作を行うので、これらは使っていません。

4.「cca」ツールのインストール

ここまでできたところで、「cca」というツールをインストールします。ターミナルを開いて、以下のように入力します。

sudo npm install -g cca

またインストール完了後、同じくターミナルから以下のように入力することで、環境が正しく構築されているかどうかをチェックすることができます。

cca checkenv

今回は、以下のような出力結果となりました。XCodeが正しく検出されていることがわかります。

cca v0.0.5
Loading command: checkenv
## Checking that tools are installed
Android not detected (`android` command not detected on your PATH).
Xcode detected.

以上で開発環境の構築は完了です。
 

Mobile Chrome Appsのプロジェクトをつくる

お好きなフォルダに移動し、以下のように入力します。

cca create MyChromeApp

これだけで、以下のような空の「Mobile Chrome Apps」プロジェクトが生成されました。(※上記で指定した、"MyChromeApp" が、生成されるフォルダ名になります。)

f:id:IntelligentTechnology:20140213172505p:plain
 

Mobile Chrome Appsを動かしてみる

iPhone(またはiPad)のシミュレータを用いて、生成されたアプリを実際に動作させてみます。

先ほどの「MyChromeApp」フォルダの中の、

platforms/ios/Hello World.xcodeproj

を選択して、XCodeを起動します。(せっかく "MyChromeApp" と名前を付けたんですけど、ここで自動生成されているのは「Hello World.xcodeproj」なんですね・・・。)

そのままアプリを実行すると、

f:id:IntelligentTechnology:20140213175654p:plain

このように表示されました。
 

あら、「www」フォルダが2つあるで!

起動したXCodeの画面を見ますと、生成された「Mobile Chrome Apps」プロジェクトのファイルは、以下のように表示されていました。

f:id:IntelligentTechnology:20140213173638p:plain

この中の「www」フォルダには、Chrome Appsの本体となるHTMLファイルやJavaScriptファイルが格納されています。
しかし、よく見てみますと、あら?「www」フォルダ、2つあるで?

ひとつは

  • プロジェクト直下の「www」フォルダ

もうひとつは

  • 「Staging」グループフォルダ内の「www」フォルダ

です。

実は、「Staging」グループフォルダ内の「www」フォルダのファイルだけを修正すれば、そのまま問題なく、モバイル版(iOS版)のChrome Appsに反映されます。
しかし、公式サイトにも説明があるとおり、基本的にはプロジェクト直下の「www」フォルダのファイルを修正して、その修正内容を、「Staging」グループフォルダ内の「www」フォルダにも反映させる、という手順をとるのがよさそうです。

プロジェクト直下の「www」フォルダのファイルを修正したあとは、ターミナルから「MyChromeApp」フォルダに移動して、

cca prepare

を実行すると、その変更内容が、「Staging」グループフォルダ内の「www」フォルダにも、自動的に反映されます。
(「cca prepare」の実行は、なんらかの方法で自動化したいところですね。)
 

乗るしかない、のか!?

着々と開発が進む、モバイル版Chrome Apps。「乗るしかない?!」などと悩まずに、まずはひとつアプリを作ってみる、というのが、いちばんいい方法なのではないかと思ってます。