より実用的なスクリプト
ここまでご覧いただいたように、wxJavaScriptを用いれば、日常の作業をちょっとだけ楽にしてくれるスクリプトをさくっと手軽に構築することができます。
より実用的な例として、wxJavaScriptの強力さを知っていただくため、小さなテキストエディタアプリ――いわゆるメモ帳を実装してみたいと思います。
// 簡易テキストエディタ
// メニューID
const MENU_FILE_NEW = 1;
const MENU_FILE_OPEN = 2;
const MENU_FILE_SAVE = 3;
const MENU_FILE_CLOSE = 4;
const MENU_EDIT_COPY = 5;
const MENU_EDIT_CUT = 6;
const MENU_EDIT_PASTE = 7;
const MENU_EDIT_UNDO = 8;
const MENU_EDIT_DATE = 9;
wxTheApp.onInit = function() {
// 基本になるオブジェクト
var frm = new wxFrame( null, -1, "簡易テキストエディタ" );
var txt = new wxTextCtrl( frm, -1, "", wxDefaultPosition, wxDefaultSize, wxTextCtrl.MULTILINE);
var menuBar = new wxMenuBar();
// メニューバーをセット
frm.menuBar = menuBar;
// ステータスバーを作成
frm.createStatusBar(1);
// メニューを作る
var menu = new wxMenu();
// メニューを登録していく
menu.append( MENU_FILE_NEW, "新規(&N)", "現在の内容をクリアします" );
menu.actions[ MENU_FILE_NEW ] = function() { txt.clear(); }
menu.append( MENU_FILE_OPEN, "開く(&O)", "テキストファイルを開きます" );
menu.actions[ MENU_FILE_OPEN ] = function() {
var dlg = new wxFileDialog( frm, "開くファイルの選択" );
dlg.style = wxFileDialog.OPEN;
dlg.wildcard = "テキストファイル(*.txt)|*.txt";
dlg.showModal();
if( (new wxTextFile(dlg.path)).exists() ) {
txt.loadFile( dlg.path ); // ファイルを読み込む
}
}
menu.append( MENU_FILE_SAVE, "保存(&S)", "テキストファイルを保存します" );
menu.actions[ MENU_FILE_SAVE ] = function() {
var dlg = new wxFileDialog( frm, "ファイルの保存" );
dlg.style = wxFileDialog.SAVE; // バグがあるらしく、SAVEにしても保存ダイアログにならない
dlg.wildcard = "テキストファイル(*.txt)|*.txt";
dlg.showModal();
txt.saveFile( dlg.path ); // ファイルを保存
}
menu.appendSeparator(); // セパレータを追加
menu.append( MENU_FILE_CLOSE, "閉じる(&X)", "テキストエディタを終了させます" );
menu.actions[ MENU_FILE_CLOSE ] = function() { this.close(); }
// ここまでのメニューをファイルメニュー以下に追加
menuBar.append( menu, "ファイル(&F)" );
// 続いて編集関連メニューの作成
menu = new wxMenu();
menu.append( MENU_EDIT_UNDO, "元に戻す(&Z)", "直前の操作を取り消します" );
menu.actions[ MENU_EDIT_UNDO ] = function() { txt.redo(); }
menu.append( MENU_EDIT_COPY, "コピー(&C)", "テキストをコピーします" );
menu.actions[ MENU_EDIT_COPY ] = function() { txt.cut(); txt.redo(); }
menu.append( MENU_EDIT_CUT, "切り取り(&T)", "テキストを切り取ります" );
menu.actions[ MENU_EDIT_CUT ] = function() { txt.cut(); }
menu.append( MENU_EDIT_PASTE, "貼り付け(&P)", "テキストを貼り付けます" );
menu.actions[ MENU_EDIT_PASTE ] = function() { txt.paste(); }
menu.appendSeparator(); // セパレータを追加
menu.append( MENU_EDIT_DATE, "日付の挿入(&D)", "現在の日付を挿入します" );
menu.actions[ MENU_EDIT_DATE ] = function() {
txt.appendText( (new Date).getFullYear() + "年" + ((new Date).getMonth()+1) + "月" + (new Date).getDate() + "日");
}
// ここまでを編集メニューとして登録
menuBar.append( menu, "編集(&E)" );
// トップレベルウィンドウを表示させる
this.topWindow = frm;
frm.visible = true;
return true;
}
機能的に貧弱だとは言え、100行以内でこれだけのテキストエディタが書けるのは、なかなかお手軽だと思いませんか？
ベンチマーク
さて、ここまで多数の例を見てきましたが、実際にある程度の規模と人数で使うツールを開発しようと思った場合、気になるのが記述したスクリプトの処理速度です。
特にwxJavaScriptはその実行環境であるwxjsとセットで使うことが前提となっているため、wxjsによるJavaScriptの処理スピードがどの程度のものなのかというのは、使ってみた方なら誰しも気になることでしょう。
そこで、最後にwxjsとFirefox3.08、Opera9.64、IE8、Safari4（Beta）、Google Chromeの各ブラウザで、リスト15に示したスクリプトついて、表1の環境でその処理スピードを計測してみました。
// ベンチマーク用スクリプト
var start = (new Date()).getTime();
for( l=0; l<1000000; l++ ) {
var tmp = new Object();
}
var end = (new Date()).getTime();
print("time : " + (end-start) + "msec");
| 使用OS | Windows XP SP3 |
| CPU | Pentium M 1.8GHz |
| RAM | 512MB |
なお、（当たり前ですが）各ブラウザとの比較に支障が出るため、文字の出力等を除いて、wxJavaScript特有の機能は利用していません。
また厳密にコントロールされたベンチマークではないため、あくまで指標程度にしかなりませんし、オブジェクトの作成速度しか見ていないので、文字連結のスピードだとかそういった部分まで同一の結果が出るとは限りませんが、実行速度を知る上での一つの指標になるかと思います。
なおこのスクリプトについても、配布プロジェクトにbench.jsおよびbench.htmlとして含めてありますので、実行速度を計測するためのサンプルとしてご活用ください。
方法と結果
ベンチマーク方法
可能な限りサービスや他のプログラムを終了し、ブラウザにはHTMLスクリプトを記述したファイルを、wxjsにはスクリプトのみをそれぞれ10回実行させ、その平均値をグラフ化しました。
なお、今回の計測で用いたデータについてもCVS形式で配布プロジェクトに同梱しています。
結果
ベンチマークの結果をまとめ、Excelを用いて可視化したものがグラフ1です。横軸に処理にかかった時間をとっているため、グラフが短いほど高速に処理できた環境であったと言えます。
結果はグラフ1に見るように、wxjsのJavaScript処理スピードはFirefoxやOperaと同程度である、という結論になりました。
この結果を見る限りでは、十分実用になる処理速度を発揮してくれると言って良いと思います。もちろん、SafariやGoogle Chromeの処理スピードを見れば、改善の余地があるのは明かですが。
まとめ
wxJavaScriptには、今回紹介した以外にもwxWidget由来のライブラリや、外部の機能と連携するタイプのライブラリ、データベースへアクセスするためのライブラリが多数備わっています。
調べていくと、JavaScriptによって、日常のちょっとしたストレスを解消できそうだと感じていただけることでしょう。
今回例示した実装例を見るだけでも、中にはまだまだ実用段階にはほど遠いと思える部分もありますが、あなたの日常がちょっとだけハッピーになれば、筆者としてこれに勝る喜びはありません。
参考資料
本稿の執筆にあたり、以下の資料を参考にさせていただきました。
- wxJavaScript付属ドキュメントおよびサンプルソース
- CodeZine 『再帰プログラムによるフラクタル図形の描画』 石立喬 著、翔泳社、2005年5月
- とほほのJavaScriptリファレンス
