about 5 years ago

Chrome上で動作するアプリをHTML5+JavaScript+CSS+その他で作成することができる。ブックマークバーに表示されるアプリから起動できる。テキストエディタがあれば作成できるが、SublimeTextの拡張機能を利用することで効率よく開発できる。

Chrome Apps and Extensionsは特に便利な拡張機能で、テンプレートを自動出力するだけでなく、サンプルやドキュメントを教えてくれる。

基本的にChromeアプリでは、JQuery等のJavaScriptライブラリは全て使えるので、見栄えの良いUIを表現できる。

テンプレート出力

SublimeTextへChrome Apps and Extensionsをインストールするとメニューに Chromeが追加される。Chrome -> New App -> Hello World で、index.html, main.js,manifest.jsonができる。これは全て同じディレクトリに置けば良い。

インストールする

拡張機能のページをChromeで開いてデベロッパーモードを有効にする。有効にするとパッケージ化されていない拡張機能を読み込むボタンが表示されるので、ボタンを押下して先ほどのディレクトリを指定する。インストールが完了すると、拡張機能一覧に表示される。起動させるとChrome Apps and Extensionsのテンプレートそのままなら、新しいウィンドウが開いて"Hello, World!"が表示される。

修正と実行

htmlやJavaScriptを修正したらページのリロードしてもらえば直ぐに反映を確認できる。

パッケージング

拡張機能のパッケージ化ボタンで配布可能なパッケージの形でアプリをエクスポートできる。

デバッグ

デバッグの基本はChromeのデベロッパーツールになる。

← Sublime Text SQLiteStudio →