jnobuyukiのブログ

JavaScriptとR言語を中心に研究活動に役立つwebアプリケーション技術について考えていきます。twitter ID: @j_nobuyuki

Chrome Dev Editorを使ってウエブアプリ開発

今回は、JavaScriptHTML5を利用してウエブアプリケーションを作成する際にとても便利なエディタの紹介です。

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
)を定期的にチェックするといいと思います。