進んでます。「Mobile Chrome Apps」
こんにちは、中山です。
このブログでも以前紹介した「Mobile Chrome Apps」ですが、その後もどんどん開発が進んでいるようで、先日、ついに「デベロッパプレビュー」版が発表されていました。
「デベロッパプレビュー」版となったことで、操作方法が変わったところもありましたので、あらためて、「モバイル版Chrome Appsが動くまで」を、かんたんに紹介してみたいと思います。
開発環境をつくる
公式のGitHubサイトの情報を参考に、「Mobile Chrome Apps」を開発するための環境を作成してみます。
なお今回は、Mac(OS X 10.9.1 Mavericks)で環境を作りました。
1.Node.jsのインストール
このあと使うことになる「npm」ツールのために、「Node.js」のインストールが必要です。
今回は、Node.jsの公式サイトから、バージョン 0.10.25 のパッケージを取得してインストールしました。
3.XCode Command Line Toolのインストール
XCode付属の「Command Line Tool」をインストールします。
XCodeバージョン5では、以下のような方法でインストールできるようです。
- XCodeのメニューから、「XCode」→「Open Developer Tool」→「More Developer Tools」を選択。
- ブラウザが起動してウェブページが表示されるので、その中から「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" が、生成されるフォルダ名になります。)
Mobile Chrome Appsを動かしてみる
iPhone(またはiPad)のシミュレータを用いて、生成されたアプリを実際に動作させてみます。
先ほどの「MyChromeApp」フォルダの中の、
platforms/ios/Hello World.xcodeproj
を選択して、XCodeを起動します。(せっかく "MyChromeApp" と名前を付けたんですけど、ここで自動生成されているのは「Hello World.xcodeproj」なんですね・・・。)
そのままアプリを実行すると、
このように表示されました。
あら、「www」フォルダが2つあるで!
起動したXCodeの画面を見ますと、生成された「Mobile Chrome Apps」プロジェクトのファイルは、以下のように表示されていました。
この中の「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。「乗るしかない?!」などと悩まずに、まずはひとつアプリを作ってみる、というのが、いちばんいい方法なのではないかと思ってます。