SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事

wxJavaScriptを使ったデスクトップアプリケーションの作成

wxJavaScriptの紹介と実装例

  • X ポスト
  • このエントリーをはてなブックマークに追加

 JavaScriptを用いて、ローカルで使うちょっとしたツールが書けたら便利だろうなあと思ったことはありませんか? 本稿ではJavaScript向けのwxWidget実装である「wxJavaScript」というライブラリおよびJavaScript実行環境を用いて、JavaScriptで作るちょっとしたデスクトップアプリの実装法について可能な限り多くの実装例を交えながら解説したいと思います。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 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を追加します。

リスト1:モジュールに追記するコード(modules.js)
  wxjs.modules.io = new Module("../modules/wxjs_gui.dll");
  wxjs.modules.io.load();

 標準ではテンプレートライブラリとIOライブラリ、SQLiteライブラリの3つを読み込むようになっていますので、これ以外の機能を使うときには、GUIライブラリと同様に追加してやる必要があります。

 また、ウェブ上で使用されるJavaScriptと同様、パス区切り文字には/を使うことができます。

 ただし、これはスクリプト内でパスのやりとりが完結するときだけの話で、外部のプログラムを利用する場合には、環境に沿ったパス区切り文字を利用する必要がありますのでご注意ください。

動作確認

 動作確認を兼ねて、最初のスクリプトを動かしてみましょう。

 最初はお約束通り、Hello Worldを表示するプログラムです。ただ、GUI的な要素を使っていることを意識するため、MessageBoxを表示し、そこにHello Worldを表示させたいと思います。

リスト2:Hello World!(helloworld.js)
// 最初のスクリプト。Hello worldの表示
wxMessageBox("Hello world");

 スクリプトが書けたら、適当な場所に保存しておきます。今回は「helloworld.js」というファイル名で保存しました。なお本稿では、「C:\wxjs」以下に「work」というフォルダを新たに作り、その中にスクリプトを保存しているものとして解説しています。パスについては、読者の環境に合わせて読み替えてください。

 保存したら、コマンドプロンプトを立ち上げ、ソースコードのあるフォルダに移動し、スクリプトファイルを「wxjs.exe」の引数として与える形で実行します。

wxjs.exeの引数にファイル名を与えて実行します。
 > cd C:\wxjs\work
 > ..\bin\wxjs.exe helloworld.js

 小さなメッセージボックスと共に、Hellow Worldが表示されれば成功です(図1)。

図1:実行結果
実行結果

 エラーが出た場合には、ソースコードに間違いがないかチェックしてださい。

次のページ
シンプルなスクリプト

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

太田 晃(オオタ アキラ)

 ブログ(http://repse.blogspot.com/)では、coLinux上にMinGWを用いてクロスコンパイル環境を構築し、そのうえでSDLやOpenGLを使ってWindows向けのプログラムを書くとか、海外のソフトウェアを(勝手に)日本語化するとか、Windowsのインデックスサービ...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3815 2009/04/23 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング