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

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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

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

Dart Editorの準備

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

WS000000

Dart Editorの起動

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

WS000001

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

WS000002

アプリケーションの作成

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

WS000003

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

WS000004

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

WS000005

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

WS000006

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

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」)を選択します。

WS000007

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

WS000008

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

WS000009

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

パッケージ化

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

WS000010

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

WS000011

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

WS000012

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

WS000013

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

WS000014

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

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

WS000015

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

WS000016

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

WS000017

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

WS000018-2

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

まとめ

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

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

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