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の開発環境「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バージョンのシミュレータを切り替えながらアプリを作成できます。

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

次のページ
Firefox OSアプリを作ってみよう(1)

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

  • このエントリーをはてなブックマークに追加
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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング