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
理系ジンの意見
今回紹介したツールはいずれも使いやすくおすすめです。
理系ジンでは、これから個人でHTML5アプリを開発しようと思っています。実証実験的なものはソースも公開するつもりです。理系ジンを読めば一通りの開発の流れが分かるようになると思います。
予定
次回は、JavaScriptから離れて、TeXの描画プログラムであるTikZの記事を予定しています。
参考資料
Chromeデベロッパーツール
- Chrome DevTools Overview
- Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider
- Chrome デベロッパーツールの使い方概要 | Web Tips
- Chromeデベロッパーツールのモバイル向けデバッグ機能について | infoScoop開発者ブログ
- Web開発に必携の「Google Chrome デベロッパーツール」の便利ワザ10個まとめ*二十歳街道まっしぐら
Firefox
Atom
Chrome Dev Editor(CDE)
- Chrome Dev Editor - GitHub
- Chrome Dev Editor (developer preview) - Chrome Web Store
- Chrome Dev Editor で JavaScriptアプリの開発 - daizの日記