GUI ビルダーによるユーザーインターフェイス作成 (6/6)

では、残る２つのイベントハンドラ用関数を作成しましょう。下のリスト欄にスクリプトを掲載しておきます。これらを記述し、イベントハンドラの設定を正しく行ったら、実際に動かしてみてください。

先のmyFunctionを実行すると、画面にGUIが表示されます。ここで入力フィールドに適当にテキストを書き、ボタンを押すと、「あなたは○○と書いた」とメッセージが表示されます。入力フィールドをカラにしてボタンを押すと、GUIは閉じて消えます。

基本的な機能がわかったら、ここで行っていることを見ていきましょう。まず、TextBoxの「値の変更」イベントに設定されたonChangeTextBox1関数です。ここでは、まず入力されたテキストを変数にとり出します。

var txt = e.parameter[e.parameter.source];

引数のオブジェクトでは、イベントが発生したコンポーネント名が「e.parameter.source」として渡されます。そしてコンポーネントの値は、「e.parameter[コンポーネント名]」という形で渡されます。つまり、e.parameter.sourceで得られたコンポーネント名を使い、e.parameterからコンポーネント名の値を取り出せば、入力されたテキストが取り出せる、というわけです。

続いて、取得したテキストを、'input_text'というユーザープロパティに保管します。ユーザープロパティの操作は、「UserProperties」というオブジェクトとして用意されています。値の保管は、この中のsetPropertyを使います。

UserProperties.setProperty('input_text',txt);

このように、値を保管するキー（プロパティの名前）と、保管する値を引数に渡して呼び出すことで、値を保管することができます。プロパティ関係の利用は、このようにシンプルなメソッドとして実装されています。以下に、基本メソッドを整理しておきましょう。

○ユーザープロパティの利用

変数 = UserProperties.getProperty( キー );
UserProperties.setProperty( キー , 値 );

○スクリプト・プロパティの利用

変数 = ScriptProperties.getProperty( キー );
ScriptProperties.setProperty( キー , 値 );

続いて、ボタンをクリックしたときに実行されるonClickButton関数です。ここでは、まず UiInstanceオブジェクトと、ユーザープロパティに保管した値を取得します。

var app = UiApp.getActiveApplication();
var txt = UserProperties.getProperty('input_text');

UiApp.getActiveApplicationは既に説明しましたね。もう１つの「UserProperties.getProperty」は、ユーザープロパティから値を取り出すためのものです。引数に取り出したいキーを指定すると、その値が返ります。ここでは、取り出した値をチェックし、カラの文字列でなければLabel1にメッセージを表示しています。

if (txt != ''){
    app.getElementById("Label1").setText('あなたは、' + txt + 'と書いた。');
}

GUIのコンポーネントは、UiInstanceの「getElementById」を使ってオブジェクトを取得することができます。そして、取得したオブジェクトの「setText」を呼び出すことで、表示されているテキストを変更できます。

後は、txtがカラだった場合にはapp.close();でGUIアプリケーションを閉じ、最後にreturn app;すれば終了です。――いちいちユーザープロパティを通して値をやり取りするのが面倒ですが、考え方さえわかればそれほど難しくはありませんね。いずれ、コンポーネントからダイレクトに値をとり出したりできるようになれば、こういう迂遠なやり方をしなくても済むようになるかも知れませんが、とりあえず現状ではこれでよしとしておきましょう。

それにしても、なんだってこんな中途半端な仕様のまま公開したのでしょう。これじゃ、みんな使いこなせないんじゃないか、と思った人。その理由は、「GUIは、本来、もうちょっと別の使い方をするように設計されていたから」ではないでしょうか。

実をいえば、これらのGUIは、もっと別の形で利用することができます。それは「サービス」です。サービスとして公開することで、これらのGUIを使ってWebアプリケーションそのものを構築することができるのです。今回紹介したやり方は、いわば「とりあえずの応急処置」的なアプローチといっていいでしょう。

このサービスでは、フォームを用意して送信することで、もっとWebらしいGUIの扱い方ができるようになっています。というわけで、サービスについては、また次の機会に説明します。



くれぐれも、「ここで説明したやり方が、GUIのイベント処理の正しいやり方だ」と思わないでください。これは、（まだ説明することがいろいろあるので、とりあえずやむを得ず仕方なく苦労して考えをひねり出した）非常によくない、推奨できないやり方です。

GUIと、そのイベント処理の「本来の正しいアプローチ」を理解するには、今回・次回・次々回の都合３篇の記事を読む必要があります。そこまで進んで、初めて「そうか、これが本来のGUIイベント処理の姿なんだな」ということがようやくわかる、と考えてください。


「そんなの面倒くさい！　今すぐ、GUIビルダーで入力フィールドや他のコンポーネントの部品を取り出して使えるようにする方法を教えろ！」という人は、以下を参照ください。

スクリプトによるGUIの生成 (5/5)
http://libro.tuyano.com/index3?id=647004&page=5

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

function onChangeTextBox1(e){
	var txt = e.parameter[e.parameter.source];
	UserProperties.setProperty('input_text',txt);
}

function onClickButton(e){
	var app = UiApp.getActiveApplication();
	var txt = UserProperties.getProperty('input_text');
	if (txt != ''){
		app.getElementById("Label1").setText('あなたは、' + txt + 'と書いた。');
	} else {
		app.close();
	}
	return app;
}