CodeZine(コードジン)

特集ページ一覧

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

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

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

目次

Firefox OSアプリを作ってみよう(2)

アプリを実機でデバッグする

 次はWebIDEをつかってアプリを実機に転送し、デバッグしてみましょう。WebIDEでは実機とのUSB接続によるアプリのデバッグが可能です。UIなどの確認にはシミュレータで十分ですが、BluetoothなどデバイスAPIを使ったアプリの場合は実機によるデバッグが有利ですので、ぜひ実機デバッグをおぼえておきましょう。

 今回実機は「Fx0」を使用します。エントリーモデルのFirefox OS搭載スマートフォンが多数登場している中、Fx0は、4G LTE対応・クアッドコアCPU搭載の、世界初のハイエンドなFirefox OS搭載スマートフォンとなっています。

Fx0でのアプリでバッグの様子
Fx0でのアプリでバッグの様子

 実機転送するにはまずWebIDEの画面上部右側の[ランタイムを選択]ボタンから[シミュレータをインストール]を選択して、追加のコンポーネント中にある「ADB Helper アドオン」をインストールしてください。「ADB Helper アドオン」はWebIDEと実機を接続するときに必要なアドオンです。

 アドオンのインストールが完了したら、Fx0側でリモートデバッグを許可する設定をします。まずFx0の[環境設定]を起動します。

Fx0の環境設定をひらく
Fx0の環境設定をひらく

 次に[端末情報]をタップします。

端末情報をタップする
端末情報をタップする

 [その他の情報]をタップします。

その他の情報をタップする
その他の情報をタップする

 一番下の開発者メニューをタップしてチェックをオンにします。

その他の情報をタップする
その他の情報をタップする

 「環境設定」のメニューにもどると、「開発者」という項目が追加されています。[開発者]をタップします。

開発者をタップする
開発者をタップする

 「USB経由のデバッグ」直下のリストボックスをタップし、[ADBと開発ツール]を選択して下部のOKボタンをタップします。

USB経由のデバッグを設定する
USB経由のデバッグを設定する
ADBと開発ツールを選択する
ADBと開発ツールを選択する

 これでFx0とWebIDEが接続できるようになりました。Fx0をUSBケーブルでPCと接続してください。接続するとWebIDEの「ランタイムを選択」中のUSBデバイス一覧にFx0が表示されます。下のスクリーンショットで Firefox OS(LGL25)と表示されているのがそうです。

WebIDEにFx0が表示される
WebIDEにFx0が表示される

 「ランタイムを選択」で Firefox OS(LGL25)を選択します。するとFx0側でリモートデバッグの許可を求めるダイアログが表示されるのでOKをタップします。

リモートデバッグを許可する
リモートデバッグを許可する

 これでFx0とWebIDEとの接続が完了しました。この状態でWebIDEの上部中央の再生ボタンをクリックしてください。Fx0にアプリが自動的にインストールされアプリが起動します。以降はシミュレータのときと同じ感覚で、Fx0で起動したアプリをリアルタイムにデバッグすることができます。

Fx0とWebIDEでリモートデバッグ
Fx0とWebIDEでリモートデバッグ

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

著者プロフィール

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

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

バックナンバー

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