Chrome Dev Editorを使ってウエブアプリ開発
今回は、JavaScriptやHTML5を利用してウエブアプリケーションを作成する際にとても便利なエディタの紹介です。
Chrome Dev Editor
Chrome Dev EditorはGoogleが開発したウエブアプリケーション作成用のテキストエディタです。通常のテキストエディタと同じように、ローカルに保存したファイルを読み込んで編集ができます。さらにいくつか便利機能がついています。
- シンタックスハイライト
- オートコンプリート
- WebアプリケーションやChromeアプリケーション用のテンプレート
- ローカルサーバー
一つ一つ説明はいらないと思うので省略しますが、テンプレートを利用するとウエブアプリケーションとしての最小構成を一瞬で作ってくれるので便利です。作り方もとても簡単です。まず画面左上の丸が三つ並んでいる部分をクリックしてNew Projectを選びます。するとダイアログボックスが開いて、プロジェクト名とテンプレートを入力するように求められます。Web AppsのJavascript web appsを選ぶとindex.html, main.js, style.cssが作成されます。index.htmlにはスタートとなるページを構成します。Javascriptのコードはmain.jsに書き込みます。そしてDOMのスタイルの詳細をあらかじめ決めるにはStyle.cssにコードを書き込みます。
また、ローカルサーバーの機能もとても便利です。Javascriptからローカルのファイルを
操作する場合、ブラウザのセキュリティポリシーに引っかかることがあります。これを回避するには、ブラウザのセキュリティポリシーを変更するか、ローカルサーバーを立てることです。（詳しくは過去の投稿をご覧ください。
ブラウザからローカルファイルへのアクセス方法 - jnobuyukiのブログ
）Chrome dev editorは後者のアプローチをとっています。ボタン一つなのであっという間にブラウザが立ち上がります。
まだ開発中であることに注意しよう
2014年8月22日の時点では、Chrome dev editorはまだまだ開発中です。なので、こまめにgit hub上のissue(
https://github.com/dart-lang/chromedeveditor
)を定期的にチェックするといいと思います。
