更新
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と同じです。
でもアイコンに狐ちゃんがいません。寂しい。
4.about:configからWebIDEをtrueにする
アドレスバーに about:config と入力すると、Firefox Nightly のコンフィグ編集画面へアクセスできます(確認ダイアログが出ますが、続けて大丈夫です)
この中の devtools.webide.enable 項目の値をtrueに変更してください(ダブルクリックでtrueとfalseをトグルします)
検索バーがあるので、そこにwebideと入力すると、絞り込みやすいです。
5.WebIDEを起動する
これでWebIDEを使う準備は整いました。
ブラウザの右側にあるバーガーボタン(ハンバーガーに似てるからだとか)から、Developerをクリックしてください。
WebIDEの項目が表示されていると思います。
WebIDEを起動すると、こんな画面が表示されます。
左の「Open App」から、新規アプリケーション開発もしくは既存プロジェクトの読み込みが可能です。
ちなみにNew Appを選択すると下記の画面が開きます。
ここからアプリケーションを作成すると、色々な機能が実装されたテンプレートファイルが作成されますので、便利かもです。
右の「Select Runtime」からアプリケーションを起動するシミュレータを選択することができます。現在はFirefox OSのシミュレータのみ選択可能です。
あ、シミュレータだけじゃなくて実機にも繋がるようですね。
Firefox OS simulator 2.1 のインストール
Firefox Nightly の初期状態では、Firefox OSのシミュレータは入っていません。
下記の方法でインストールすることが出来ます。
1.ツールバーのViewをクリック
WebIDEをフォーカスした状態で、ツールバーのViewを開いてください。
Firefox Nightlyの方のViewは全く違う項目が表示されます。
2.Manage Simulatorをクリック
下記の画面が開きます。
3.Firefox OS 2.1 Simulator の installボタンをクリック
これで完了です。
Select EmulatorからFirefox OS 2.1を選択すると、シミュレータが起動します。
現時点だと、アイコンがすぐに真っ白になってしまうようですが…そのうち改善されるかしら。
まとめ
よかったところ
・アプリのテンプレートを作ってくれるところ
・UIがシンプル
ちょっとしょんぼりしたところ
・FirefoxOSのシミュレータ上でしか検証環境がないこと
(FirefoxOSの実機とつながるので、そのうちAndroid端末内のChromeさんと繋がったりとかするかな。もしくはローカルサーバとか立ててくれたり)
・IDEと言いながらコード補完とか全くない
そんなとこです。
今年のI/O 基調講演ながいですね!
今年のプレゼントはMoto360だそうで。ねむい。