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アプリを作ってみよう(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でリモートデバッグ

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

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

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング