はじめに
JavaScriptを用いて、ローカルで使うちょっとしたツールが書けたら便利だろうなぁと思ったことはありませんか？
JavaScriptはオブジェクト指向、正規表現、匿名関数などをサポートする強力なスクリプト言語です。
しかし、その利用範囲はほぼウェブ開発に限定されています。
最近でこそ兄弟言語とも言えるActionScriptがAIRテクノロジの登場によってデスクトップ分野に進出しましたが、普及度から見ればまだまだですし、手軽さから見れば「本格的すぎる」印象が強く、ちょっとしたツールを書くために利用しようとは思わないことでしょう。
しかし、もしもJavaScriptの持つ手軽さを失わずにツールが書けるとしたら、それは毎日の開発をちょっとだけハッピーにしてくれることだと思いませんか？
本稿ではJavaScript向けのwxWidget実装であるwxJavaScriptというライブラリおよびJavaScript実行環境を用いて、JavaScriptによるちょっとしたデスクトップアプリの実装法について可能な限り多くの実装例を交えながら解説したいと思います。
対象読者
- JavaScriptの基本的な使い方を理解している方
- JavaScriptでちょっとしたツールを書いてみたいとお考えの方
- 手軽にGUIプログラムを書きたいとお考えの方
なお、すべてのサンプルプログラムはwxJavaScript 0.9.75とWindows XP SP3上で動作確認を行っています。
準備
実際にライブラリを利用する前に、下準備をしておきましょう。必要なものは
- wxJavaScript本体
- UTF-8に対応した、JavaScriptの記述に適したエディタ
の2つです。
統合開発環境を使った開発と違い、wxJavaScriptを使った開発では、統合開発環境があらかじめ用意されているようなことはありませんので、各個人で使い慣れたエディタを選ぶ必要があります。
Web開発に特化した統合開発環境に付属しているエディタを使うのも良いですが、個人的には使い慣れたコンパクトなエディタを使って開発されることをオススメします。理由は簡単で、その方がお手軽感があるからです。
しかし、これだけJavaScriptが普及している反面、その記述に適したエディタというのはそう多くありません。加えて、スクリプト中で日本語を扱いたいときには、ソースコードの文字コードをUTF-8で保存する必要があります。UTF-8に対応したエディタをご用意ください。
wxJavaScriptの入手
公式サイトのダウンロードページから、ソースコードを含むwxjs_src.[バージョン]パッケージか、ソースコードを含まないwxjs_win.[バージョン]パッケージのいずれかのzipファイルを入手します（執筆時点での最新版は0.9.75です）。本稿ではWindows環境での運用に便利な、ソースコードを含まないものを利用します。
ファイルを入手したら、適当な場所にアーカイブを展開します。展開したアーカイブのbinフォルダ以下に必要なファイル――例えば、実行エンジンである「wxjs.exe」などが入っていますので、必要ならば環境変数のPATHにこの場所へのパスを追加しておくと良いでしょう。（なお、本稿ではC:\直下にwxjsという名前で展開したものとします。）
GUIプログラムを書くに当たって、モジュールを追加する
続いて、GUIプログラムを書くにあたって必要な設定を施します。
wxJavaScriptはいくつかのモジュールと呼ばれるDLLにその機能を分割しており、これらは必要に応じてプログラム内で読み込むか、デフォルトで読み込むように設定してやる必要があります。
本稿で扱う様々なスクリプトはほとんどがGUIライブラリを使ったスクリプトですので、逐一読み込むのは面倒なため、ここでデフォルト読み込みを行うように設定してしまいましょう。
binフォルダの中のmodules.jsを開き、ファイルの末尾にリスト1を追加します。
wxjs.modules.io = new Module("../modules/wxjs_gui.dll");
wxjs.modules.io.load();
標準ではテンプレートライブラリとIOライブラリ、SQLiteライブラリの3つを読み込むようになっていますので、これ以外の機能を使うときには、GUIライブラリと同様に追加してやる必要があります。
また、ウェブ上で使用されるJavaScriptと同様、パス区切り文字には/を使うことができます。
ただし、これはスクリプト内でパスのやりとりが完結するときだけの話で、外部のプログラムを利用する場合には、環境に沿ったパス区切り文字を利用する必要がありますのでご注意ください。
動作確認
動作確認を兼ねて、最初のスクリプトを動かしてみましょう。
最初はお約束通り、Hello Worldを表示するプログラムです。ただ、GUI的な要素を使っていることを意識するため、MessageBoxを表示し、そこにHello Worldを表示させたいと思います。
// 最初のスクリプト。Hello worldの表示
wxMessageBox("Hello world");
スクリプトが書けたら、適当な場所に保存しておきます。今回は「helloworld.js」というファイル名で保存しました。なお本稿では、「C:\wxjs」以下に「work」というフォルダを新たに作り、その中にスクリプトを保存しているものとして解説しています。パスについては、読者の環境に合わせて読み替えてください。
保存したら、コマンドプロンプトを立ち上げ、ソースコードのあるフォルダに移動し、スクリプトファイルを「wxjs.exe」の引数として与える形で実行します。
> cd C:\wxjs\work > ..\bin\wxjs.exe helloworld.js
小さなメッセージボックスと共に、Hellow Worldが表示されれば成功です（図1）。
エラーが出た場合には、ソースコードに間違いがないかチェックしてださい。
