デスクトップパッケージャーを使ったネイティブアプリケーション開発
こんにちは、ゼノフィkotsutsumiです。
Sencha Desktop PackagerはSencha Complete: Termに含まれる新製品です。既存のExt JSウェブアプリケーションを用いて、ネイティブ デスクトップ アプリケーションとしてパッケージすることができます。これからはWindowsやMac OS Xを使っている顧客にアプリケーションを送付できます。
HTML5技術により、先進のインタラクティブかつ高機能のアプリケーションを開発できます。しかしアプリケーションのユーザがモダンブラウザを利用している場合にしかその恩恵に浴せません。固定デスクトップの企業IT環境に、先進のリッチなインターネットアプリケーションをデプロイするのは難しいかもしれません。ユーザがブラウザの特定バージョンを押しつけられて、いつアップグレードできるかも分からないことはよくあります。最新で最高のハードウェアを使っていても古いIT規格のブラウザを使わざるを得ない場合です。その場合には、アプリケーションとWebランタイムを統合して一緒に送付するのが唯一の現実的な方法です。
Sencha Desktop Packagerはこうした配置にまつわる制限を克服すべく設計されています。Packagerは、GoogleのオープンソースプロジェクトでありGoogle Chromeを可能にしているChromiumを利用します。Packagerはウェブアプリケーションをネイティブに変えるだけではなく、ネイティブAPIとの統合をも容易にします。私たちはアプリケーションをデスクトップと統合するのに利用できるAPIを提供します。そこにはウィンドウ管理、メニュー管理、ファイルシステムアクセス、ネイティブダイアログなどが含まれます。
Sencha Desktop Packagerの使い方はかんたんです。シンプルなZIPアーカイブとして配布され、インストール不要なので単純に作業ディレクトリに復元すればいいのです。アーカイブにはまたマニュアルとテンプレートも含まれています。
パッケージを解凍してしまえば、必要なツールはionpackageコマンドラインプログラム (ionpackage.exe on Windows) だけです。このツールはJSON設定ファイルと一緒に使われ、しばしば以下のマニフェストとして指示されます。
ionpackage myappconfig.json
シンプルな設定ファイルを作成してみましょう。
{
"applicationName": "HelloWorld",
"versionString": "1.0",
"outputPath": "HelloApp",
"webAppPath": "hello/",
"settings": {
"mainWindow": {
"autoShow": true
}
}
}
JSONファイルは、名称、バージョン、アプリケーションの所在地を示す設定を含みます。利便性のために、メインウィンドウでautoShowも使えるようにします。
この設定が機能するためには、アプリケーションを供給しなくてはなりません。例としてhello/index.htmlにおいて非常にシンプルな ‘Hello, world!’ メッセージを用います。
<html> <head> <title>Hello</title> </head> <body> <p>Hello, world!</p> </body> </html>
Ionpackageツールをこの設定ファイルとともに実行することにより、WindowsやMac OS Xのネイティブアプリケーションが作成され特定の出力ディレクトリに保存されます。この場合は ‘HelloApp’ です。ExplorerやFinderを使って、アプリケーションを配置して実行してみましょう。
作成したばかりのこのアプリケーションは自己完結型です。これは、インストールしたままのWindows（Windows XPからWindows 8） およびMac OS X (10.6+) で動作するように設計されています。ここからプログラムおよびその関連依存ファイルを外部インストーラーに統合できます。
もちろんSencha Desktop Packagerが提供するのはランタイムシェルにとどまりません。さまざまなデスクトップ機能を提供するすぐに使える追加API (全レファレンスを参照) をも備えています。アプリケーションにメニューを追加する方法を見てみましょう。例えば、アプリケーションコードに以下の機能を追加できます。
function addMenu() { var fileMenu = Ion.ui.mainWindow.menuBar.addMenu('File'); var colorMenu = fileMenu.addMenu('Change Color'); colorMenu.addMenuItem('Red', changeColorRed); colorMenu.addMenuItem('Green', changeColorGreen); colorMenu.addMenuItem('Blue', changeColorBlue); }
上記機能を生じさせると、ネイティブメニューバーが作成されます。それはFileと呼ばれる1つの最上レベルメニューと、さらにその下にサブメニューアイテムを持っています。下図がその結果です。
Sencha Desktop Packagerを使うもう一つの利点はファイルシステムへのアクセスが得られることです。つまりアプリケーションが永続データをユーザのシステムの記憶装置上で読み書きできるのです。Sencha Desktop Packagerはこれらの作業のためにシンプルな機能を提供します。以下のコードフラグメントにおいて、ユーザはファイルを開きコンテンツを読むようにモーダルダイアログにより促されます。
var result = Ion.io.browseFiles({ path: Ion.io.userHomePath, type: 'open', filters: [{ name: 'JSON Files', pattern: '*.json' }] }); if (result.success) { var read = Ion.io.readFile(result.value); if (read.success) { var obj = JSON.parse(read.data); // Do something with obj... } }
アプリケーションが作成するダイアログもまたネイティブです。それは WindowsやMac OS Xの標準ファイルダイアログと識別できません。APIが同期性 (ブロッキング) を備えているのでコールバックする必要はありません。
Sencha Desktop Packagerは、アプリケーションがメインアプリケーションウィンドウを管理できるようにします。例えばポジション調整、サイズ変更、フルスクリーン化などです。これは一連のウィンドウ管理APIを通して行えます。ここにメインウィンドウのポジショニングとサイズ変更の例を示します。
Ion.ui.mainWindow.setPosition(40, 30); Ion.ui.mainWindow.setDimensions(800, 400);
ウィンドウ状態の変更もできます。
// Move the window to the center of the current screen Ion.ui.mainWindow.center(); // Minimize the window Ion.ui.mainWindow.minimize(); // Set window to fullscreen Ion.ui.mainWindow.fullscreen();
加えて、Mac OS X 10.7+のネイティブフルスクリーン機能もサポートされています。
Sencha Desktop Packagerにより可能になる追加ネイティブ機能は、他のデスクトップアプリケーションであるかのように動作するアプリケーションを構築するのにも役立ちます。またSencha Desktop PackagerのZIPアーカイブには、これらのデスクトップ統合機能を活用できるように修正されたExt JSからの例がいくつか含まれています。試してみるとよいでしょう。
Sencha Complete (Team) によりSencha Desktop Packagerを入手できます。詳細はオンラインドキュメントを参照してください。