Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

FirefoxブラウザとWebの技術ですぐ作れる! HTML5で手軽にFirefox OSアプリ開発

Firefox OS搭載スマホ「Fx0」でつくろう! はじめてのFirefox OSアプリ開発 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/02/27 14:01

 Firefox OSはWebブラウザFirefoxの技術で開発されたオープンソースのスマートフォン、タブレット向けOSです。Firefox OSのアプリケーションはWebブラウザと同様JavaScript、CSSなどのHTML5関連技術をつかって開発することができます。本記事ではFirefox OSの基本的な構造を理解し、アプリの開発から、世界初(※1)のハイエンドなFirefox OS搭載スマートフォンである「Fx0」にインストールして動作させるまでを、Webブラウザ Firefoxのみを使って実施する方法を解説します。手軽なHTML5スマートフォンアプリ開発をFirefoxではじめてみましょう!

目次

※1 Mozilla Corporation調べ、2014年12月現在

Firefox OSの特長

Firefox OSの構成

 Firefox OSはMozillaが開発したオープンソースのスマートフォン、タブレット向けOSです。HTML、JavaScript、CSSなどのHTML5関連技術を用いてアプリを開発できるのが大きな特長であり、比較的軽量なOSとして設計されているため、低リソースのデバイスでも軽快に動作することも特長のひとつです。

 Firefox OSの内部構造は主にGonk、Gecko、Gaiaという3つの層に分かれています。

 一番上のアプリケーション/ユーザーインターフェース層はGaia(ガイア)と呼ばれています。Gonk(ゴンク)はデバイスとのインターフェースとなっているLinuxで、真ん中のGecko(ゲッコー)はHTML5アプリケーションのランタイムです。

Firefox OSのアーキテクチャ
Mozilla Developer Networkより引用、作者:Mozilla Contributors、ライセンス:CC BY-SA 2.5
Firefox OSのアーキテクチャ(Mozilla Developer Networkより引用、作者:Mozilla Contributors、ライセンス:CC BY-SA 2.5)

 アプリ開発者に大きく関係するのはGaiaの部分でしょう。Gaia層はFirefox OSの画面やアプリの集合体で、Firefox OSの中で一番目に見える部分、ユーザーが実際に操作するホーム画面やOSの設定、時計や電卓などアプリケーションの集合体です。ホーム画面を含むすべてのアプリケーションはHTML、JavaScript、CSSで開発されているので、Web技術者であれば新しいアプリを開発できるだけでなく、Gaiaそのものをカスタマイズすることもできます。

Firefox OSのアプリ開発

 Firefox OSのアプリ開発の魅力は、最新のWebブラウザで使えるHTML5のパワーが使えるというだけでなく、Webブラウザにはない様々なハードウェア制御系のAPIが使えるということでしょう。Firefox OSではスマートフォンのアラームやバイブレーション、プッシュ通知やBluetoothなどのAPIが提供されているので、Webページでは実現できない機能をもつアプリを開発することが出来ます。

 アプリを開発する環境は、WebブラウザのFirefoxさえあれば大丈夫です。アプリがHTML5なので、デバッグにはFirefox内蔵の開発ツールが使え、別途アドオンで提供されているFirefox OSシミュレータをインストールすれば、Firefox OS上でアプリの動作を確認することもできます。さらにFirefox 34からFirefox OSアプリ開発用のIDEである「WebIDE」が内蔵されました。

 WebIDEによって専用のエディタ、実機でのデバッグなどがサポートされるようになったので、Firefox OSアプリ開発環境の準備はWebブラウザFirefoxをインストールするだけ、と言えるようになりました。通常アプリ開発をはじめる前には様々なツールのインストールやセットアップが必要ですが、Webブラウザだけで全てまかなえるというのは便利ですね。

Firefox OSの開発環境「WebIDE」(1)

WebIDEとは

 WebIDEはFirefoxに新しく搭載された、Firefox OS用アプリを開発するための開発環境です。WebIDEを利用することで、Firefox OS用アプリを迅速に提供でき、デバッグやテストも効率よく行えます。

 JavaScriptやCSSのデバッグは、WebブラウザのFirefoxでも行うことができますが、WebIDEではテンプレートからのアプリ生成やシミュレータの管理、応答性の高いリモートデバッグなどの機能を提供しているので、Firefoxブラウザよりも効率よくFirefox OSアプリが開発できるというわけです。

 最初にWebIDEを起動したときには、インターフェースがシンプルすぎるので「ほんまにこれ使えるんかいな?」と思うかもしれませんが、実際ひととおり使ってみるとツボをおさえたなかなか使えるヤツだと感じるはずです。Firefox OSアプリ開発のキックスタートには、もってこいのツールです。ちなみに筆者はMacを使っているので、以下のスクリーンショットはOS Xの画面のものですが、Windowsでも同様の画面構成になります。

WebIDEの起動画面
WebIDEの起動画面

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 村岡 正和(ムラオカ マサカズ)

     1975年生まれ。鳥取県出身。  バスタイムフィッシュ代表。  神戸を拠点としてWebアプリケーションの開発、IT技術コンサルティングを行っている。  Webを有効活用したビジネスモデルの設計から、それを駆動させるためのアプリケーション開発、セールスマネージメントまで。事業の特性に合った最新...

バックナンバー

連載:Firefox OS搭載スマホ「Fx0」でつくろう! はじめてのFirefox OSアプリ開発
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5