Au Fx0 を Ubuntu に接続して開発する (開発編)

前回の準備編に引き続き、本日は実際にプロジェクトを作って実機で実行してみます。

まずは前回と同様に、実機を USB 接続して Firefox Developer Edition を起動して WebIDE で実機に接続します。

何はなくともとりあえず、adb コマンドで実機が認識されているかを確認します。

$ adb devices
* daemon not running. starting it now on port 5037 *
* daemon started successfully *
List of devices attached 
LGOTMSXXXXXXXX  device

認識したら Firefox Developer Edition を起動します。

$ ~/firefox/firefox

Shift + F8 を押して WebIDE を起動し、ランタイムを選択から Firefox OS (LGL25) を選びます。

これでとりあえず実行の準備は整いました。実際にアプリを作ってみます。

Firefox OS は確かに HTML/JavaScript を書いてマニフェストファイルを追加するだけでアプリが作れてしまうのですが、実際のアプリは JavaScript の圧縮などを行わないといけません。今回は Apache Cordova 用の Yeoman Generator である generator-graybullet-cordova を使います。

何はなくとも、Yeoman と generator-graybullet-cordova のインストールです。

Ubuntu が提供する Node.js はかなり古いので、nvm などを利用してインストールするか、ppa を使ってください。(ppa の場合は sudo npm install -g としてインストールする必要があります)

$ npm install -g bower grunt-cli
$ npm install -g generator-graybullet-cordova

そしてプロジェクトを作成します。

$ mkdir firefoxosapp; cd $_
$ yo graybullet-cordova
 
     _-----_
    |       |    .--------------------------.
    |--(o)--|    |   Welcome to the Apache  |
   `---------´   |    Cordova generator!    |
    ( _´U`_ )    '--------------------------'
    /___A___\    
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 
 
? What is the name of Apache Cordova App? HelloCordova
? What is the ID of Apache Cordova App? io.cordova.hellocordova
? What app of the platform to be created? 
 ◯ android
 ◯ amazon-fireos
 ◯ blackberry10
 ◯ browser
❯◉ firefoxos
 ◯ ubuntu

android の選択を外して、firefoxos を選択するのを忘れないでください。残りの選択肢はそのまま使います。

? What app of the platform to be created? firefoxos
? Are you sure you want to add any plugins? Cordova Console Plugin, Cordova Device Plugin
 
     _-----_
    |       |    .--------------------------.
    |--(o)--|    |    Welcome to Yeoman,    |
   `---------´   |   ladies and gentlemen!  |
    ( _´U`_ )    '--------------------------'
    /___A___\    
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 
 
Out of the box I include HTML5 Boilerplate, jQuery, and a Gruntfile.js to build your app.
? What more would you like? Bootstrap
 
...

プロジェクトが作成されました!

Android や iOS アプリの時と同様に、おもむろに grunt run で実機で実行としたいところなのですが、Apache Cordova の firefoxos プラットフォームは emulate と run タスクに対応しておりません。

仕方ありませんので、build タスクを実行します。

$ grunt build
 
...
 
Running "cordova:package" (cordova) task
 
Running "cordova:build" (cordova) task
Cleaning Firefoxos project
Firefox OS packaged app built in platforms/firefoxos/build/package.zip
 
Running "cordova:package-files" (cordova) task
Copy to dist/firefoxos/package.zip.
Copy to dist/firefoxos/www.
 
Done, without errors.

無事ビルドできました!

メッセージに出ている通り、dist/firefoxos ディレクトリにパッケージされた package.zip ファイルと、パッケージされていない www ディレクトリができあがります。WebIDE では後者を使います。

WebIDE の左側にあるアプリ名もしくはアプリ一覧をクリックし、パッケージアプリを開くを選択します。そして、dist/firefoxos/www ディレクトリを開き、三角の実行ボタンを押すとアプリが実機で実行されます。

F12 を押すと開発ツールが起動し、デバッグもできます。コンソールタブを開くとこんなかんじです。

"'Allo 'Allo!" 1db73403.main.js:1
"adding proxy for Device" cordova.js:846
"deviceready" 1db73403.main.js:1

アプリを修正するときは、WebIDE 側でなく、Yeoman が作成したプロジェクトのファイルを修正してください。(app ディレクトリ) 修正が終わったら、まずは grunt serve で動作確認し、満足がいったら grunt build でビルドし、WebIDE の実行ボタンを押すようなスタイルになります。

Apache Cordova の firefoxos プラットフォームが emulate や run タスクに対応してくれるといいのですが...

以上で、アプリが作れるようになりました。

ところで、Firefox OS は Apache Cordova を使わなくても JavaScript でアプリを作ることができます。わざわざ Apache Cordova を使う理由は何でしょうか?

まず、Apache Cordova を使うことで Android と iOS と Firefox OS で動作するアプリを簡単に作れます。そして Firefox OS の作法を知らなくてもとりあえずアプリを作ることができます。マニフェストファイルはある程度 Apache Cordova が作ってくれます。

というわけで、Apache Cordova を使うメリットはあるわけです。(多分)

おまけ...

Yo や bower は初回起動時に、使用レポートを提出していいか聞いてきます。これが邪魔して Yeoman でプロジェクトをうまく作成できないことがあります。(提出していいならプロジェクトの作成中に止まっているように見えるときにエンターキーを叩いてください)

事前に以下のようにすることで、先に質問に答えておくことができます。Yeoman をインストールしたらとりあえずやっておくのがよいです。

$ yo --help
[?] ==========================================================================
We're constantly looking for ways to make yo better! 
May we anonymously report usage statistics to improve the tool over time? 
More info: <a href="https://github.com/yeoman/insight">https://github.com/yeoman/insight</a> & <a href="http://yeoman.io
==========================================================================:">http://yeoman.io
=======================================================...</a> (Y/n) Y
 
...
$ bower
[?] May bower anonymously report usage statistics to improve the tool over time? (Y/n) Y
 
...

コメントを追加

Filtered HTML

  • ウェブページアドレスとメールアドレスは、自動的にハイパーリンクに変換されます。
  • 使用できるHTMLタグ: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <img>
  • 次のタグを使用してソースコード構文をハイライトすることができます。: <code>, <blockcode>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby> The supported tag styles are: <foo>, [foo].
  • 行と段落は自動的に折り返されます。

Plain text

  • HTMLタグは利用できません。
  • ウェブページアドレスとメールアドレスは、自動的にハイパーリンクに変換されます。
  • 行と段落は自動的に折り返されます。
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
イメージ CAPTCHA
Enter the characters shown in the image.