CodeZine(コードジン)

特集ページ一覧

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

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

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

目次

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

WebIDEの起動

 ここからはWebIDEを使って実際にアプリをつくっていきましょう。

 はじめにWebIDEを起動します。まずFirefox上部メニューの一番右のメニューボタンから[開発ツール]をクリックします。開発ツールの一覧が表示されるので、そこから[WebIDE]をクリックします。WebIDEが別ウィンドウで起動します。

開発ツールアイコン
開発ツールアイコン
開発ツールリスト
開発ツールリスト
WebIDEの起動時ウィンドウ
WebIDEの起動時ウィンドウ

 ざっくりと画面の説明をすると、画面上部中央の再生、ストップ、一時停止の各ボタンはそれぞれアプリの実行、停止、デバッグをエミュレータ、または、USBでPCに接続されたFirefox OS端末上で実行するボタンです。

 画面上部左側の[アプリを開く]ボタンをクリックすると、新しいアプリの作成、既存アプリを開くメニューが表示されます。画面上部右側の[ランタイムを選択]をクリックすると、シミュレータやUSBで接続されたFirefox OS端末を管理するためのメニューが表示されます。

 画面構成からみてとれる機能はとてもシンプルで、ファイルの作成と編集、アプリのデバッグが主な機能です。IDEというと、Android Studioのような多くの機能を備えた重量級の開発環境を想像しがちですが、WebIDEはアプリケーションの開発に必要最低限な機能のみで覚えることが少ないので、はじめてでも操作をすぐ習得できると思います。

シミュレータをインストールする

 ではWebIDEを使って、さっそくアプリの作成をしたいところですが、その前に作成中のアプリを試しに起動したり、デバッグしたりするために必要なFirefox OSシミュレータをインストールしましょう。

 WebIDEが発表される前まではFirefox OSのシミュレータは、Firefoxブラウザのアドオンとして提供されていて、別途アドオンをダウンロードしてインストールする必要がありました(※2)。WebIDEでは、これをボタンクリック一発で簡単に行えるようになっています。

註釈

 ※2 WebIDE提供以前は、アドオンは下記URLからダウンロードしていました。

 まず、画面上部右側の[ランタイムを選択]ボタンをクリックして、出てきたメニューの中央付近にある[シミュレータをインストール]をクリックしてください。すると、メイン画面にインストールできるシミュレータの一覧が表示されます。

ランタイムを選択
ランタイムを選択
シミュレータ選択画面
シミュレータ選択画面

 今回は、現時点で最新の安定版であるバージョン2.0のシミュレータをインストールしてみましょう。「Firefox OS 2.0 シミュレータ(安定) 未インストール」と表記されている右側の[インストール]ボタンをクリックしてください。シミュレータのダウンロードとインストールが実行されます。

シミュレータをインストール中
シミュレータをインストール中

 しばらくして「インストール済み」と表示されるとインストールは完了です。

 WebIDEでは、複数のバージョンのシミュレータが管理でき、簡単に異なるOSバージョンのシミュレータを切り替えながらアプリを作成できます。

 シミュレータをインストールした後のアンインストールや、他のシミュレータの追加などは、この画面から行います。


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

著者プロフィール

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

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

バックナンバー

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