Open Web Boardを使ってFirefox OSアプリ開発に入門してみた！

Open Web Boardとは?

Open Web Boardとは、KDDIが開発者向けイベントで配布しているFirefox OS（FxOS）ベースの小さな開発ボードです。

パソコンとFirefoxブラウザがあれば、このボードで動くアプリを開発することができます。

Open Web Boardのスペックは下記のような感じです。

CPU RK3066 (Cortex-A9 Dual)
USB (電源用と拡張用の2つ)
HDMI (モニタ用)
RAM 1G
ROM 8G
初期搭載Firefox OSバージョン v1.4

これを私も11/1にKDDIで開催された『Open Web Board』『Gluin』ハンズオン＆ラピッドプロトタイピングに参加してGetしてきましたので、これを機にFirefox OSのアプリ開発に入門してみました！

環境構築！

はい。最初に白状しておきますと、正直、環境構築というものは苦手です。
「そんなに難しくないヨ！」という周りの言葉に騙されてやってみることにしました。

結果、動くまで2日かかりました。今でも原因は謎ですw

正直にいうと、運が悪いと簡単じゃないかもです。
というわけで、2度と出来ない疑いがあるので、忘れないうちに手順を書いておくことにします。

※すいません。。。手もとにMacしかないのでMacだけです。。。

Firefoxのインストール

とりあえず、 Firefox というブラウザをPCに入れる必要があります。

「俺はGoogle Chromeしか入ってないぞ！！！」という人も、黙っていれてくださいw

Firefoxは、「Nightly Builds」の方を入れよう

Firefoxをまだいれてない人（1週間前の私だ！w）は、Google ChromeやIEなどで "firefox" と検索して下記サイトが見つかるので、思わずそれをいれてしまいそうになります。

Firefoxのダウンロード (https://www.mozilla.org/ja/firefox/new/)

これでも運が良ければ動くのですが、私のMac（OSX 10.10 Yosemite）
だと、うまく動きませんでした。（もう一台のMac、OSX 10.8 だと動いたのですが）
・・・正直いろいろよくわかりません。

ですので、

Firefox Nightly Builds (https://nightly.mozilla.org/)

の方を入れましょう。
私見ですが、今のところ、こっちの方が成功確率が高いです。

Firefoxもバージョンアップしてるので、そのうち通常版でも問題なくなるとは思います。

Firefox OS Simulator

Firefox Nightlyが無事インストールできたら、次に、Firefox OS Simulatorというものをインストールします。

まず、最初に、右上のメニューボタンから、 Developer を選択します。

次に、WebIDEを選択して起動します。

WebIDEを起動すると、下記のような画面が表示されます。
ここで、 Install Simulator を選択します。

すると、いろいろなバージョンのFirefox Simulatorがインストールできる画面が表示されます。

この画面から、Firefox OS Simulatorをインストールします。
Open Web Boardに最初にインストールされているFirefox OSはv1.4ですので、同じバージョンのSimulatorをいれておきましょう。

ADB Helperのインストール

Firefox OS Simulatorをインストールした先ほどの画面から ADB Hepler Add-on もインストールしておいてください。

Tools Adapters Add-on ? も入れる

Tools Adapters Add-onというのも、同じ画面からインストールできます。
これもいれておきましょう。

続けて、Open Web BoardをFirefoxブラウザに認識させるための設定 (PC側)

これまでで、Firefoxブラウザ（Nightly Builds）、Firefox OS Simulator、ADB Helperがインストールできました。

Mac（Linuxも同じみたい）の場合、次にADBのUSB設定ファイル（~/.android/adb_usb.ini）にVendor ID（0x2207）を追加します。

下記ファイルを追加

~/.android/adb_usb.ini

0x2207

ユーザーのアクセス権をつけておきましょう。

これで、Mac側の設定は終わりです。

念のため、Firefoxブラウザを一旦終了しておいてください。

Open Web Boardをつなぐ

いよいよ、Open Web Boardをつなぎます。

Open Web BoardのHDMI端子　→ モニタやTVのHDMI端子へ
Open Web Boardの大きい方のUSB端子にマウスを接続 ※キーボードもつなぎたい場合は、USBハブ経由で
Open Web Boardの小さい方のUSB端子と PC/MacのUSB端子を接続

上記順番でつないでください。

下記のように起動画面が出たら成功です。（誰かキャプチャーの取り方教えてくれ〜w）

やっと君に会えたよ。。。

本記事のOpen Web Boardについて

今回の記事に利用したOpen Web Boardは英語設定にしています。
Open Web Boardは日本語と英語に対応していて、設定画面から切り替えることができます。

でも、ここでFirefoxを起動しても、まだOpen Web Boardを認識してくれません。
Open Web Board側にも設定が必要なのです。

Open Web Boardの設定画面の出し方！

さて、先ほどの画面から設定画面を出すには、下記のようにします。

画面の上の方でマウスボタンを押す（離さない！！！）
そのまま、マウスを下の方に移動！！！
一番下まで移動したらマウスボタンを離す

・・・・・これで、設定画面が出てるはずです！！
（誰か教えてくれよ！というくらい隠し機能風。。。）

一応、キャプチャー（じゃなくて写真）も載せておきます。

と、ここまで書いて、周りから「別の出し方もあるよ！」と教えてもらいました！
そっちも紹介しておきます。

ホーム画面の右のほうでマウスボタンを押す（離さない！！！）
そのまま、マウスを左の方に勢いよく移動！！！
なんか、横からスクロールで２画面目が出てきますね！？出てきたらマウスを離してよいです。
2画面目に「設定」（言語設定を英語にしてる場合「Setting」）があるので、クリック！

この方法でも設定画面を呼び出すことができます。

設定！

設定画面から、[Developer]→[ADB and Devtools]を選択してください。

モアレっててすいません。。。

繋がった！？

ここまでできたら、いよいよ、Firefox（Nightly Builds）起動しましょう！
先ほど、Firefox OS SimulatorやADB Helperをインストールした時同様に、WebIDEを起動します。

[右上の設定ボタンを押す]→[Developerアイコンをクリック]→[WebIDEをクリック]

で起動できます。

ここで、デバイスの一覧に、 RK3066 が表示されていれば、MacからOpen Web Boardが認識できています。
さっそく、接続してみましょう。

WebIDEの Select Runtime をクリックして、USB Devicesに、それらしいDeviceが見つかりますので選択します。

すると、Open Web Boardのモニタ画面にダイアログBOXがでます。

ここでOKを選択すると、接続できるはずです！！

繋がんないときは?

繋がらないときには、下記を試してみてください。

1.Open Web Boardを再起動

Open Web Boardの電源USBを抜き差しして再起動しましょう。

2.Firefoxブラウザの再起動

これでつながることもあります。

3.PCやMacの再起動

困ったら、よくやりますねw

4.(Android SDKなど入れてる人は)AdbをKill-Serverする

PCやMacに「もともとAndroid SDKや、ADBがインストールされている」場合、ADB HelperとADBが競合してうまく繋がらないことがあります。
Android SDKやADBがインストールされている人は、コマンドラインから

adb kill-server

と入力してから、Firefoxを再起動してみると良いかもしれません。

5.ADB Helperの[Disable]→[Enable]切り替え

Firefoxのアドオンに入れるADB Helperの再起動が必要な場合もあるようです。

つながりましたか?

繋がったら、WebIDEの右上のデバイス欄に選択したデバイス名が表示されます！
こうなったら成功です。

それでは、Hello Worldやってみる。

さて、いよいよFirefox OSアプリを作ってみます。

たいしたモンは作りませんよ！もちろん、Hello Worldですよ！

Firefox OSでは、Packaged AppとHosted Appという２種類のアプリを作ることができます。

Packaged App: 端末にインストールするアプリ
Hosted App: サーバに置くアプリ。

今回は、Packaged Appを作ってみたいと思います。

WebIDEを使えば簡単！

WebIDEを使えば、簡単にHello Worldアプリを作って動かすことができます。
手順は下記の通りです。

WebIDEから「OpenApp」を選択します
プルダウンが出るので、「New App」を選択します
テンプレートを選択するダイアログ画面で「HelloWorld」を選択します
プロジェクト名をつけて、OKを押す！
保存画面が出るので、保存先を指定してOK！

以上で、HelloWorldアプリができました！

この画面で実行ボタンを押すと、Open Web Boardにアプリが転送されて実行されます。

よっしゃぁ！！

まとめ。次回はコードを修正してみます！

今回、Open Web Boardを使ってFirefox OSアプリ開発環境の構築とHelloWorldアプリの実行までやってみました。
案の定、環境設定が苦手な私はADBなどで、つまづきまくりましたので、 記事のほとんどが環境設定 になってしまいましたw

しかし一旦Open Web BoardとFirefoxブラウザが繋がってしまうと、WebIDEで用意されたHelloWorldテンプレートのおかげで、想像してた以上に簡単に！ アプリの作成とインストールを行うことができました！（おかげで書くことが無くなるレベルw）

これまで、AndroidやiOSだと開発環境構築後も覚えることが多くて取り組めていませんでしたが、Firefox OSであれば、この先Webサイトを作る要領でアプリが作れそうです。

試しに、以前に書いたPixi.jsの記事で作ったサンプルを修正してみました。

をを！

簡単にOpen Web BoardでWebGLも動きましたヨ！
※今回はPixi.js v2を使いましたが、もちろん問題なく！

というわけで、ガゼン楽しみになったので、引き続きFirefox OSアプリの作り方を見ていきたいと思います！
次はコードをちゃんと書きますよ！w

最後までおつきあいいただき、ありがとうございました。
記事の中でおかしなところがありましたら、ツッコミをお願いします！