続・Firefox OSアプリ開発マニュアル

第1回 Firefox OSアプリ開発最新動向

この記事を読むのに必要な時間:およそ 2 分

5回にわたり,Firefox OSアプリ開発の連載を持たせていただくことになりました。

本連載は,2013年6月に発売した電子書籍Firefox OSアプリ開発スタートアップマニュアルの続編として,最新情報を反映しつつ,実践的なアプリ開発の内容まで盛り込んでいく予定なので,よろしくお願いします。

アプリ開発に必要な知識とは

Firefox OSは,乱暴な言い方をすれば,Linuxの上でFirefoxのレンダリングエンジンである「Gecko」が動作しているようなものです。よって,アプリといってもObjective-CやJavaといった開発言語を使ってアプリを開発するワケではなく,Webアプリを開発するようなもので,

  • JavaScript
  • HTML
  • CSS

の知識が必要になります。

それぞれ,JavaScriptは,アプリのロジックの記述をするため,HTMLとCSSは,主にアプリのユーザインターフェースを構築するために使います。

これまで,携帯端末向けアプリを開発して来た方の中には,HTMLやCSSは,縁遠い存在で,おおよその知識だけで,詳しく知らないと言う方も多いかもしれません。

乱暴な言い方ですが,ちょっとした根気さえあれば,詳しく知らなくても心配いりません。デバッガを使えば,簡単にアプリを解析できるのです。たとえば,自分のやりたいことと似た動きをするアプリを探して,どう実装しているのか解析すれば,必要な知識を最短で身に着けていくことができるはずです。

筆者は,Firefox OS向けのメモ帳アプリを開発して,Firefox Marketplaceに公開しています。これを開発するにあたり,いくつか似たアプリを解析して,どんな造りになっているのか,参考にしたので,他のプラットホームよりも取っかかりは良かったと感じています。

また,筆者もしかりですが,PDA時代からアプリを開発してきた方にとっては,しっくりしない環境で開発をすることになります。しかし,これも時代の流れです。モバイルアプリ開発は,今後,JavaScriptやHTML, CSSで開発するのが主流になることが考えられます。Firefox OSは,ウェブ標準で開発できる商用プラットホームなので,技術取得の一貫としてアプリにチャレンジしても,決して無駄にはなりません。

アプリ開発に必要な環境

Firefox OSのアプリ開発向けの統合環境があるワケではないので,複数のツールを組み合わせて開発を進めます。それでも,2013年の春頃と比較すると,ずいぶん整備されて,使いやすくなっています。

まずは,開発環境の構築手順をご紹介していきます。

  • 【必須】Firefox 29以上
  • 【必須】Firefox OS シミュレータ
  • エディタ(好みのもの)

まずは,WebブラウザとしてFirefox 29以上が必須です。

Firefoxが必要になるのは,これのWeb開発ツール「アプリマネージャ」を使って,アプリのインストールやデバックを行うためです。これの使い方は,あとでご紹介します。

次に,Firefox OSシミュレータが必須です。

これは,Firefoxのアドオンとなっており,原稿執筆時点(2014年5月)では,1.3がstable,1.4がbeta,1.5がunstableとなっています。筆者は1.4を使っているので,同じように,以下の場所から「Install Firefox OS 1.4 Simulator (beta)」をクリックしてインストールします。

Firefox OSを搭載した実機をお持ちであれば,一緒に「ADB Helper」をインストールしておいてください。これをインストールすると,リモートデバッグが可能になります。

Firefox OSシミュレータを起動する

下準備は終わったので,まずは,アプリマネージャからFirefox OSシミュレータをを起動してみます。

Firefoxを起動して[ツール]メニューの[Web 開発]「アプリマネージャ」をクリックします。すると,新にタブが開いて,アプリマネージャが表示されます。

アプリマネージャ

アプリマネージャ

画面下にあるステータスバーに「接続されていません。端末が見つかりません。端末を接続してください または[シミュレータを起動]」と表示されているはずです。これの[シミュレータを起動]をクリックすると[Firefox OS 1.4]のボタンが表示されるので,続けてクリックします。しばらくすると,Firefox OSシミュレータが起動します。

このバージョンのシミュレータは,メッセージが日本語になるので[Settings][Language]をタップして,「Language」から「日本語」を選択しておきます。

アプリマネージャの使い方

アプリマネージャは,エディタまでを含んだ統合環境というワケではなく,アプリのインストールやデバッグに使う環境です。よって,エディタは好みのものを使ってください。参考までにですが,筆者はMacで開発しているので「Coda 2」を使っています。機能的には,アプリマネージャと被る部分がありますが,コーディングからデバックまで,1本でカバーできる部分が気に入っています。

画面左端にある[アプリ]タブは,シミュレータでデバッグするアプリが管理できます。ここに,パッケージアプリを追加すると,シミュレータにアプリが転送できるようになります。

パッケージアプリの追加は,[パッケージアプリを追加]をクリックして,ファイル選択ダイアログで「manifest.webapp」が置かれているフォルダを選択します。すると,以下のような画面が表示されます。

Manifestエディタ

Manifestエディタ

アプリアイコンの近くにある[更新]は,シミュレータに新しいアプリを転送します。[デバッグ]をクリックすると,アプリのデバッグが開始します。

アプリマネージャから接続している端末は[端末]に表示されます。

インストールされているアプリの一覧が表示されて,アプリの開始・停止,デバッグの開始が行えます。

アプリの開始・停止,デバッグが行える

アプリの開始・停止,デバッグが行える

デバックでは,コンソール,インスペクタ,デバッガ,スタイルエディタ,プロファイラ,スクラッチパッドの機能が使え,Firefoxの機能がそのまま使えます。

次回は……

今回は,アプリ開発に必要な環境構築をご紹介しました。次回は,Firefox OSらしいアプリを開発するために,使うべきライブラリ郡のご紹介します。

Firefox OSアプリ開発 スタートアップマニュアル

傍島康雄 著
形式:EPUB
価格:1,000円
ISBN 978-4-7741-5726-9

著者プロフィール

傍島康雄(そばじまやすお)

5月30日生まれ。

モバイルデバイスが大好物。それで動くアプリの開発に喜びを感じている。スマートフォン前夜のWindows Mobile,PalmOSのアプリに情熱を傾けていたが,最近は停滞気味でコードを書くよりも文章を書く機会が多くなっており,文章を書くのも,プログラミングと同じくらい奥深い作業だと感じている。

ブログ:http://yasuos.com/blog/

コメント

コメントの記入