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

Intelligent Technology's Technical Blog

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

それでも使ってみたい!Chrome Appsをモバイルで

f:id:IntelligentTechnology:20131018135833p:plain:w400


※2014/02/14追記
以下で紹介している「Mobile Chrome Apps」が、デベロッパープレビュー版となりました。
これに伴い、ツールの導入方法などが少し変わっています。
最新の情報については、当ブログの「乗るしかない、のか?!Mobile Chrome Apps!」の記事をご覧ください。
 

こんにちは、中山です。

先日の記事で、私は以下のように書いていました。

この「Chrome Apps」、現状は、PCやMacだけがターゲットのようです。
(iOSやAndroidなどでは使えないみたい。)

そうなのです。「Chrome Apps」は、iOSAndroidなどのスマートデバイス上では動作しないようです。

しかしどうにかして、iOSAndroidタブレットスマートフォンで動かすことができないか・・・、いやきっと何か方法があるはずだ、と探していたら、
・・・ありました。

Mobile Chrome Apps

Mobile Chrome Apps」は、「Chrome Apps」をAndroid、またはiOSプラットフォーム上で動作させるためのツールキットのようです。
このツールキットには「Apache Cordova(PhoneGap)」の技術が用いられています。

なお、このツールキット自体は、まだ開発途上らしいのですけれども、とにかく、まずは試してみることにします。
 

「Mobile Chrome Apps」の取得と設定

こちらから、「Mobile Chrome Apps」のソースを取得して、任意のフォルダに展開します。なお今回も、Macを用いて操作しました。
f:id:IntelligentTechnology:20131021140327p:plain

ソースを展開すると、以下のようなファイル構成となっていました。
f:id:IntelligentTechnology:20131021140654p:plain

また、「node.js」をインストールしておく必要があるようです。
こちらのサイトから、「node.js」を取得してインストールします。

「node.js」のインストール完了後、「Mobile Chrome Apps」を展開したフォルダ(「mobile-chrome-apps」フォルダ)に移動して、以下のコマンドを実行します。

./mca.js init

なお、Androidプラットフォームで動作させるためには、Android SDKのフォルダに、あらかじめパスを通しておく必要があります。
例えば、以下のような感じで。

export PATH=$PATH:/{android sdk}/sdk/platform-tools:/{android sdk}/sdk/tools 

 

Chrome Appsのソースを読み込む

すでにある「Chrome Apps」のソースを、ツールキットに読み込ませます。
今回は、先日作成した「Udon Advisor」アプリのソースを利用しました。

アプリのソースをいずれかのフォルダに配置した後、ツールキットのフォルダ(「mobile-chrome-apps」フォルダ)に移動して、以下のコマンドを実行します。

./mca.js create jp.co.iti.udonadvisor --source=../chromeapp/udon-advisor 

create」の後には、作成するアプリのパッケージ名、「--source」オプションには、読み込む「Chrome Apps」のソースフォルダへのパスを指定します。

処理が正常に完了すると、以下の通り、ツールキットのフォルダ(「mobile-chrome-apps」フォルダ)内に、「iti」フォルダが新規作成されました。
f:id:IntelligentTechnology:20131021142532p:plain
(※本来は、「udonadvisor」のようなアプリ名のフォルダが生成されるべきなのかもしれません。「Mobile Chrome Apps」のバグ?)
 

アプリを実行してみる(iOSの場合)

実はこれまでの操作で、iOSアプリ用、Androidアプリ用のプロジェクトが自動的に生成されているのです。

したがいまして、iOSプラットフォームで実行するには、以下の通り、「platforms」フォルダの、「ios」フォルダの中に生成されている、XCode用プロジェクトファイルをダブルクリックするだけ。
f:id:IntelligentTechnology:20131021143106p:plain

XCodeツールが起動した後、iPadのシミュレータを起動してみると、
f:id:IntelligentTechnology:20131021143239p:plain
・・・あれ?!正しく表示されていない?

PCで起動したときは、こんなふうに表示されていたのに・・・。
f:id:IntelligentTechnology:20131008152951p:plain
 

アプリを実行してみる(Androidの場合)

iOSプラットフォームで、なぜ正しく動作しなかったのか?念のためにAndoridプラットフォームでも実行してみます。

Androidの場合は、Eclipseを開いて、「File」→「Import」メニューから「Existing Android Code Into Workspace」を選択します。
f:id:IntelligentTechnology:20131021144744p:plain

読み込み元のフォルダとして、生成された「platforms」フォルダの「android」フォルダを指定します。
f:id:IntelligentTechnology:20131021144930p:plain

これで読み込みは完了です。
その後、Androidエミュレータを起動して実行してみると、
f:id:IntelligentTechnology:20131021145044p:plain

・・・あらら、iOS版よりももっとダメな結果になりました。
 

「Mobile Chrome Apps」は、まだまだ発展途上である

実際のところ、「Mobile Chrome Apps」ツールキットは、まさに開発途上であり、洗練されつつある最中のようです。
「Mobile Chrome Apps」のソースツリーにある、「Mobile Chrome Packaged App API Implementation Status」というドキュメントに、以下のような記述がありました。
f:id:IntelligentTechnology:20131021145523p:plain
この末尾に記されているとおり、「Udon Advisor」アプリで利用している「webviewAPIは、「Mobile Chrome Apps」ツールキットではまだサポートされていません。このため、上記のとおり、表示がおかしくなっていたのでした。

なお、「Mobile Chrome Apps」ツールキット付属の、「Hello World」サンプルアプリをiOSプラットフォーム上で実行すると、以下のように表示されました。
f:id:IntelligentTechnology:20131018135833p:plain
 

これからに期待

まだ実用的とは言いがたい状況ではありますが、Firefox OSが、HTML5ベースのアプリを採用していることなどを見ても、今後の流れとしては、おそらくはモバイルプラットフォーム上でも「Chrome Apps」がスイスイと動作する日が来るのでしょう。

今後も注意深く見守っていきたいと思います。

※追記(2013/12)

Mobile Chrome Apps」について、いくつか記事が出てきてますね。

報道:グーグル、Chrome AppsをAndroidとiOSに提供予定

2014年は、この界隈がにぎやかになってくるのかもしれません。