SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

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

 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の起動画面

次のページ
Firefox OSの開発環境「WebIDE」(2)

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
Firefox OS搭載スマホ「Fx0」でつくろう! はじめてのFirefox OSアプリ開発連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8476 2015/02/27 14:01

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング