Dart EditorでChrome Packaged Applicationを作ってみる

毎度お世話になっております。クラスメソッドの稲毛です。

モリモリと開発が進んでいる「Dart」ですが、「Dart Editor」のこの度のアップデートで、アプリケーション作成ウィザードの「Sample content」に「Chrome packaged application」が追加されました。ので、これを利用してChromeアプリのパッケージ化まで試してみました。

Dart Editorの準備

何はともあれ、Dart Editorの最新版をダウンロードします。
今回使用したDart EditorはWindows用、バージョンは下図の通りです。

Dart Editorの起動

自身の環境に応じてダウンロードしたアーカイブファイルを任意の場所に解凍します。

「DartEditor.exe」を実行すれば起動の完了です。

アプリケーションの作成

Fileメニューから「New Application」を選択してウィザードを開きます。

今回は「Sample content」として「Chrome packaged application」を選択、アプリケーションを作成します。

Finishボタンを押下すると、サンプルファイルと共にアプリケーションフォルダが作成されます。

サンプルファイルには、Dartのパッケージ管理機能である「pub」用のファイル「pubspec.yaml」が用意されている為、作成と同時に定義されているパッケージが自動的にダウンロードされます。

ダウンロードされたパッケージは下記の通りです。

browser

ブラウザ上で動作するDartアプリの起動時用スクリプト「dart.js」が提供されます。DartVMが搭載されていないブラウザでDartアプリケーションが起動された際の回避処理等が記述されています。

js

DartからJavaScriptにアクセスする為のライブラリ「js.dart」が提供されます。

meta

付与したプログラムに追加情報を提供するアノテーションが定義された「meta.dart」が提供されます。

unittest

Dartで単体テストを記述する為のライブラリ群が提供されます。

これらのパッケージが提供する機能はデフォルトのサンプルコードでは用いられていませんが、Chromeアプリを作成する際に有用であろうとの配慮で用意されているようです。

JavaScriptファイルの生成

Chromeアプリケーションは現状JavaScriptで記述する必要がありますので、サンプルで用意されているdartファイルからjsファイルを生成します。
「web」内のメインのHTMLファイル（ここでは「samplechromeapp.html」）もしくはmainメソッドを持つDartファイル（ここでは「samplechromeapp.dart」）を選択します。

Toolsメニューから「Generate JavaScript」を選択します。

JavaScriptファイルが生成されます。

サンプルのHTMLファイルでは標準でJSファイル版（ここでは「samplechromeapp.dart.js」）を読み込むようにscirptタグが記述されている為、そのままで問題ありません。

パッケージ化

ここからはChromeに用意されている機能を用いて、アプリケーションをパッケージ化します。
Chromeのメニューから「ツール＞拡張機能」と選択します。

「デベロッパーモード」をチェックします。

「拡張機能のパッケージ化」ボタンを押下します。

「拡張機能のルートディレクトリ」にアプリケーションファイルが存在するフォルダパス（デフォルトでは「C:\Users\ユーザ名\dart\アプリケーション名\web」）を指定し、「拡張機能のパッケージ化」ボタンを押下します。

パッケージ化されたCRXファイルが生成されます。

Chromeアプリのインストールおよび起動

生成されたCRXファイルをChromeの拡張機能ページにドラッグアンドドロップしてインストールを行います。

「追加」ボタンを押下します。

アプリケーションがインストールされました！

「SampleChromeApp」をクリックすると……

Chromeアプリが起動します。(^^)

まとめ

「Sample content」として「Chrome packaged application」を選択した場合の特徴は以下の通りです。

• JavaScriptベースであるChromeアプリの開発に有用とされるいくつかのパッケージがデフォルトで定義されている。
• Chromeアプリ定義用の「manifest.json」が予め用意されている。
• 「manifest.json」に記述されるエントリーポイント用のスクリプトファイル（ここでは「main.js」）が予め用意されている。
• アイコン用の画像ファイルが予め用意されている。

Chromeアプリを作成する為のテンプレートとしての必要最低限の構成は持っているものと思います。
興味を持たれた方は、新たにDart言語を学習しながらChromeアプリを作ってみては如何でしょうか。(^^)