読者です 読者をやめる 読者になる 読者になる

理系ジン

しばらくPythonに力を入れる予定です。

HTML5アプリ開発ツール(Atom/Chrome/Firefox/CDE)

概要

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

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

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

Chromeブラウザ

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

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

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

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

Firefoxブラウザ、Firefox OS Simulator

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

主に、FirefoxFirefox 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やJavaScriptCSSに対応したエディタや開発環境を一通り試してみて、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]では次の雛形を生成できます。参考になると思います。

理系ジンの意見

今回紹介したツールはいずれも使いやすくおすすめです。

理系ジンでは、これから個人でHTML5アプリを開発しようと思っています。実証実験的なものはソースも公開するつもりです。理系ジンを読めば一通りの開発の流れが分かるようになると思います。

予定

次回は、JavaScriptから離れて、TeXの描画プログラムであるTikZの記事を予定しています。

参考資料

Chromeデベロッパツール

Firefox

Atom

Chrome Dev Editor(CDE)

他の主な開発ツール

以下のテキストエディタや統合開発ツールも(WebIDE以外)一通り試してみました。