LoginSignup
14
14

More than 5 years have passed since last update.

Firefox WebIDEを使ってみよう(あとFirefox OS 2.1 Simulatorも)

Last updated at Posted at 2014-06-25

更新

3/17
WebIDEがFirefoxの標準ブラウザで扱えるようになりました。
ブラウザの右上にある地球儀のようなマークをぽちっと押せばWebIDEが出てきます。

所感
・ブレークポイント貼れるけどうまく消えない場合がある
・WebIDEで表示している内容は自動で更新されない。WebIDEでファイルを開いたまま他のエディタで編集した場合、未保存マーク(*)が出る。で、うっかり古い内容で保存してしまうことがあるので注意。
・Fx0はprivileged権限以上だとデバッグできないです

下記は2014/06くらいの記事で古いです。


なんか世間がGoogle I/O で盛り上がってるので
Firefoxさんの WebIDE を使ってみました。
あとついでに FirefoxOS simulator 2.1 も入れてみました。

WebIDEとは。

Firefoxブラウザ上で利用できる、IDEです。そのままですね!(雑)
IDEというか、エディタぽい気が。

ちなみに、現時点だとWebIDE上から実行して検証できる環境はFirefoxOSのみのようです。

インストールから利用までご説明します。

1.Firefox Nightlyをダウンロード

2014/6/25 現在だと、Firefox Nightlyでのみ利用可能です。
Nightlyは、正式リリースしていない最新技術がいろいろ入ったバージョンのFirefoxブラウザです。ChromeさんにもCanalyというバージョンがあります。
下記サイトからOSに対応したファイルをダウンロードしてください。
http://nightly.mozilla.org/

2.Firefox Nightlyをインストール

ダウンロードしたファイルをインストールしてください。
だいたいダブルクリックでいけるんではなかろうか(雑)。

3.Firefox Nightlyを起動

Nightlyを起動してみてください。基本的には通常のFirefoxと同じです。
でもアイコンに狐ちゃんがいません。寂しい。

スクリーンショット 2014-06-26 2.29.47.png

4.about:configからWebIDEをtrueにする

アドレスバーに about:config と入力すると、Firefox Nightly のコンフィグ編集画面へアクセスできます(確認ダイアログが出ますが、続けて大丈夫です)
この中の devtools.webide.enable 項目の値をtrueに変更してください(ダブルクリックでtrueとfalseをトグルします)
検索バーがあるので、そこにwebideと入力すると、絞り込みやすいです。

スクリーンショット 2014-06-26 2.35.34.png

5.WebIDEを起動する

これでWebIDEを使う準備は整いました。
ブラウザの右側にあるバーガーボタン(ハンバーガーに似てるからだとか)から、Developerをクリックしてください。

スクリーンショット 2014-06-26 2.44.41.png

WebIDEの項目が表示されていると思います。

スクリーンショット 2014-06-26 2.54.22.png

WebIDEを起動すると、こんな画面が表示されます。

スクリーンショット 2014-06-26 2.58.51.png

左の「Open App」から、新規アプリケーション開発もしくは既存プロジェクトの読み込みが可能です。
ちなみにNew Appを選択すると下記の画面が開きます。
ここからアプリケーションを作成すると、色々な機能が実装されたテンプレートファイルが作成されますので、便利かもです。

スクリーンショット 2014-06-26 3.00.53.png

スクリーンショット 2014-06-26 3.07.43.png

右の「Select Runtime」からアプリケーションを起動するシミュレータを選択することができます。現在はFirefox OSのシミュレータのみ選択可能です。
あ、シミュレータだけじゃなくて実機にも繋がるようですね。

スクリーンショット 2014-06-26 3.01.03.png

Firefox OS simulator 2.1 のインストール

Firefox Nightly の初期状態では、Firefox OSのシミュレータは入っていません。
下記の方法でインストールすることが出来ます。

1.ツールバーのViewをクリック

WebIDEをフォーカスした状態で、ツールバーのViewを開いてください。
Firefox Nightlyの方のViewは全く違う項目が表示されます。

2.Manage Simulatorをクリック

下記の画面が開きます。

スクリーンショット 2014-06-26 3.26.52.png

3.Firefox OS 2.1 Simulator の installボタンをクリック

これで完了です。
Select EmulatorからFirefox OS 2.1を選択すると、シミュレータが起動します。

スクリーンショット 2014-06-26 3.34.06.png

現時点だと、アイコンがすぐに真っ白になってしまうようですが…そのうち改善されるかしら。

まとめ

よかったところ
・アプリのテンプレートを作ってくれるところ
・UIがシンプル

ちょっとしょんぼりしたところ
・FirefoxOSのシミュレータ上でしか検証環境がないこと
(FirefoxOSの実機とつながるので、そのうちAndroid端末内のChromeさんと繋がったりとかするかな。もしくはローカルサーバとか立ててくれたり)
・IDEと言いながらコード補完とか全くない

そんなとこです。
今年のI/O 基調講演ながいですね!
今年のプレゼントはMoto360だそうで。ねむい。

14
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
14