HTML5アプリ開発ツール（Atom/Chrome/Firefox/CDE）

概要

理系ジンは、HTML5アプリの開発ツールとして、Chrome/FirefoxブラウザとAtomとChrome Dev Editor（CDE）を使う予定です。

使い易かったのと、人気のツールなので情報が得やすく進歩もするだろうと考え選択しました。

以下で、簡単に説明します。

Chromeブラウザ

Chromeブラウザから、次のいずれかの方法で、デベロッパーツール（Chrome DevTools）を起動できます。

ブラウザの右上の[メニューボタン]>[ツール]>[デベロッパーツール]
ブラウザ上で右クリックして表示されたコンテキストメニューの[要素の検証]
Mac:[option]+[command]+[i]、Windows:[control]+[shift]+[i]または[F12]

HTML要素やCSSを確認したり、コンソールにログを表示したり、JavaScriptをデバッグしたり、ネットワーク等の動作を確認できます。

モバイル用ブラウザのシミュレーションもできます。Firefox OSのシミュレーションはできないようです。

詳しくは、参考資料のリンクを見て下さい。

Firefoxブラウザ、Firefox OS Simulator

Chrome デベロッパーツール同様に、Firefoxにも[開発ツール]やFirebugと言うものがあります。理系ジンは余り使いません。

主に、FirefoxとFirefox OS SimulatorでのHTML5アプリの動作確認に利用します。

Firefox OS Simulatorは現在、Stableな1.3, 1.4, 2.0と、Unstableな2.1, 2.2があります。

Firefoxで（fxos_2_2_simulator-mac64-latest.xpiなどを）ダウンロードしてインストールするか、ダウンロードしたファイルをFirefoxにドラッグすればインストールできます。

ブラウザ右上の[メニューボタン]>[開発ツール]>[アプリマネージャ]で、アプリマネージャ画面を開きます。

アプリマネージャ画面下部の[シミュレータを起動]で選んだFirefox OS Simulatorを起動します。Firefox OS SimulatorにはBrowserがあるのでこれで（例えばCDEでHTML5アプリを起動したURLを指定して）動作確認します。

Atom

HTML5アプリの開発では、エディタを一番使うと思います。HTMLやJavaScriptやCSSに対応したエディタや開発環境を一通り試してみて、GitHub製のAtomが一番使いやすく発展するだろうと思いました。

主な特徴は次のようになります。

無料（MIT License）
ChromiumにNode.jsを統合して開発、Chrome デベロッパーツールも利用可能
機能拡張のパッケージが多数。CoffeeScriptでパッケージを開発
Markdown Preview機能（[control]+[shift]+[m]またはメニューの[Packages]>[Markdown Preview]>[Toggle Preview]で起動）

メニューから[Preferences...]を選択して、[Settings]ウィンドウを開きます。[Packages]タブからパッケージをインストールできます。

デフォルトでインストールされていないパッケージでは、Autocomplete Plusは必須だと思います。他には、Atom Jshint、Atom Beautify、Linter、linter-jshint辺りが良さそうです。GitHub向けのパッケージも豊富です（理系ジンは、分からないのでまだ使ってませんが）。参考資料を参考にして下さい。

WebサイトやHTML5アプリをWebサーバーを使って起動する方法があるかもしれませんが、分からなかったので次のCDEで起動しています。

Chrome Dev Editor（CDE）

CDEは、Chrome Web Storeのアプリです。

Chrome Dev Editor (developer preview) - Chrome Web Storeからインストールして下さい。

理系ジンは主にCDEの実行（Run）機能を使います。CDEでプロジェクトを選択して、右向き三角の[Run]ボタンをクリックすればプロジェクトのHTML5アプリやWebサイトが起動します。簡易Webサーバーで起動します。URLを指定して他のFirefox OS Simulatorなどのブラウザからも動作確認できます。

ChromeアプリをChromeアプリとして起動したり、Androidで起動する事もできるそうです。Chrome Dev Editor で JavaScriptアプリの開発 - daizの日記をご覧ください。

CDEのエディタは、変更が自動で保存され、困る事があるので使いません。

また、[New Project]では次の雛形を生成できます。参考になると思います。

Default
- Blank Project
Web apps
- Dart web app
- Dart web app (using Polymer paper elements)
- JavaScript web app
- JavaScript web app (using Polymer paper elements)
- Web Starter Kit (boilerplate & tooling for multi-device development)
Chrome apps
- Dart Chrome App
- JavaScript Chrome App
- JavaScript Chrome App (using Polymer paper elements)
Polymer elements
- JavaScript Polymer custom element