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

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

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

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

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

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

http://jp.techcrunch.com/2014/06/24/20140623mozilla-brings-built-in-html5-development-environment-to-firefox-nightly/

ちなみに、現時点だと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](https://qiita-image-store.s3.amazonaws.com/0/18884/47bc4a5a-ce3d-3c6b-3809-8bfaa411c572.png)

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

![スクリーンショット 2014-06-26 2.35.34.png](https://qiita-image-store.s3.amazonaws.com/0/18884/78dcd15d-186a-6908-7647-d67dd8fd577a.png)

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

![スクリーンショット 2014-06-26 2.44.41.png](https://qiita-image-store.s3.amazonaws.com/0/18884/87d3f477-754a-d61b-fa28-40d6660c53e2.png)

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

![スクリーンショット 2014-06-26 2.54.22.png](https://qiita-image-store.s3.amazonaws.com/0/18884/d70e0fac-3ab0-2656-066e-7bc3b7e5c587.png)

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

![スクリーンショット 2014-06-26 2.58.51.png](https://qiita-image-store.s3.amazonaws.com/0/18884/0697167c-e491-7370-2358-f2e88a367433.png)

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

![スクリーンショット 2014-06-26 3.00.53.png](https://qiita-image-store.s3.amazonaws.com/0/18884/0967e748-2424-a239-30ea-5e8fc1124f3f.png)

![スクリーンショット 2014-06-26 3.07.43.png](https://qiita-image-store.s3.amazonaws.com/0/18884/ac36c05d-03d4-0395-0fcc-f0a89bcbcb7b.png)

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

![スクリーンショット 2014-06-26 3.01.03.png](https://qiita-image-store.s3.amazonaws.com/0/18884/49e84140-9c8a-1f92-d7d6-bfa62f06a8fa.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](https://qiita-image-store.s3.amazonaws.com/0/18884/b67454ec-60c2-d03c-aa49-55bd25437ad0.png)

### 3.Firefox OS 2.1 Simulator の installボタンをクリック
これで完了です。
Select EmulatorからFirefox OS 2.1を選択すると、シミュレータが起動します。

![スクリーンショット 2014-06-26 3.34.06.png](https://qiita-image-store.s3.amazonaws.com/0/18884/78e1c07d-10cc-077f-412b-5698b0e33f23.png)

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

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

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

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