連載プロデル入門の7話目です。今回は、プロデルでGUIアプリを作る方法をご紹介します。
GUIとはグラフィカルユーザインタフェースのことです。今回はメモ帳やペイント、電卓のようなウィンドウ上で操作するデスクトップアプリを作ってみます。前話でご紹介した「手順」をたくさん定義したり使ったりします。
画面を作ろう！
では早速メイン画面を作ってみましょう。
プロデルデザイナには、ウィンドウを簡単に作ることができる「ウィンドウの設計」機能が用意されています。この機能では、マウス操作でGUI部品を貼り付ければ必要なプログラムを自動的に生成してくれます。
メイン画面を定義する
まずは、ウィンドウを定義します。プロデルデザイナの画面右側のアウトラインから[新しいウィンドウの作成]ボタン(ウィンドウアイコン)をクリックします。
新しいウィンドウの名前は、「メイン画面」のまま[OK]をクリックします。
新しいウィンドウが作成されました！
ボタン部品を貼り付ける
ではウィンドウにボタン部品を貼り付けてみます。
ウィンドウの設計画面の左側のツールバーには、ウィンドウに貼り付けられる部品の種類がリストで表示されます。(1)この中から「ボタン」という種類の部品を選択します。(2)「ボタン」を選択した上で、ウィンドウの貼り付けたい場所をクリックします。(またはドラッグアンドドロップでも貼り付けられます)
ウィンドウにボタン部品が貼り付けられました。ドラッグすると、ボタンの位置を変えられます。また部品の周囲の□をドラッグするとボタンの大きさを変えられます。
設定項目を変える
ボタンの見出しを変えてみましょう。
ボタンの見出しや色、フォントなどは、プロデルデザイナの右下の設定項目一覧から変えられます。
ボタンの見出しは「内容」という設定項目ですので、表から「内容」という欄を探して「OK」と入力してエンターキーを押します。
そうすると、ウィンドウのボタンの見出しが「OK」に変わります。
ボタンの背景色やフォントも変えてみましょう。
ウィンドウの部品には、名前が付いています。部品の名前は、プログラム中で部品を操作するときに使いますので、分かりやすい名前に変えておきましょう。
このようにGUI部品には、それぞれの部品の状態や設定を表す「設定項目」という情報が格納されています。この設定項目の値を変えることで、部品の内容や位置と大きさ、色などの設定を変えることができます。
クリックした時の手順を作る
次に、ボタンをクリックした時にメッセージを表示するようにしましょう。
ボタンをクリックした時など、部品が特定の状況になった時に実行される手順のことを「イベント手順」と言います。イベント手順を定義すると、クリックした時に決まったプログラムを実行できます。
- ボタンを右クリックします
- 「イベント手順の選択」を選択します
- リストから「クリックされた」を選択して[OK]ボタンをクリックします
画面がプログラムの編集画面に戻り、「OKボタンがクリックされた時の手順」が自動的に入力されます。
それでは、「OKボタンがクリックされた時の手順」の中にメッセージを表示するプログラムを入力します。手順定義の部分は、自動的に入力されますので、実際に入力するのは、手順の中(23行目)の1行だけです。
イベント手順を入力するときは、プログラムを書く場所に注意してください。また色が違う2つの「終わり」を誤って消さないように注意しましょう。
それでは、F5キーなどで実行してみましょう。実行するとメイン画面が表示されてます。そしてメイン画面に貼り付けたボタンをクリックすると、メッセージが表示されます。ボタンは何度でもクリックできます。
ウィンドウを使ったプログラムでは、メイン画面を閉じるか、プロデルデザイナでプログラムを停止させるまで実行され続けます。プログラムを修正する時には、実行中のプログラムを終了させてください。
ここまでの操作で出来上がったプログラムは、次の通りです。実際に入力したプログラムは1行だけで、その他の部分はプロデルデザイナが自動的に生成してくれたものです。
メイン画面を表示する
待機する
メイン画面とは
ウィンドウを継承する
はじめの手順
初期化する
ーー貼り付けた部品に対する操作をここに書きます
終わり
初期化する手順
ーー自動生成された手順です。ここにプログラムを書き加えても消える場合があります
この実質大きさを｛428,394｝に変える
この内容を「メイン画面」に変える
初期化開始する
OKボタンというボタンを作る
その位置と大きさを｛120,103,112,34｝に変える
その内容を「OK」に変える
初期化終了する
この設計スケール比率を｛144,144｝に変える
終わり
OKボタンがクリックされた時の手順
「こんにちは」を情報アイコンで表示する
終わり
終わり再びウィンドウ設計画面を開くには
プログラム画面から再びウィンドウ設計画面を開くには、タブが開いている場合は「メイン画面」タブを選択してください。タブが表示されていない場合は、右側のアウトラインのツリーから「メイン画面」の項目を選びダブルクリックします。
テキストボックスを作る
今度は、テキストボックスを貼り付けて、[OK]ボタンをクリックした時にテキストの内容を表示するプログラムを作ってみましょう。
ツールバーから「テキスト」種類を選び、ウィンドウに貼り付けます。
テキストのフォントを大きいサイズに変えてみましょう。作られたテキストを選択して、設定項目一覧から「フォント」を選択します。右側の[…]ボタンをクリックすると、フォントのダイアログが表示されます。
テキスト部品の名前を「名前テキスト」に変えます。
今度は、プログラムを書き直します。設定項目の値にアクセスするためには、次の書式で式を書きます。
《部品の名前》の《設定項目名》
例えば、テキスト部品に入力した内容をプログラムで取得するには、次のような式を書きます。この式は、変数や式、値を返す手順と同じように使うことができます。
名前テキストの内容「OKボタンをクリックされた時の手順」のプログラムを文字列の部分を次のように書き換えます。
名前テキストの内容を情報アイコンで表示する
それでは、プログラムを実行してみます。
メイン画面のテキストボックスに、任意の名前を入力して、[OK]ボタンをクリックしてみましょう。メッセージボックスに、その名前が表示されたら成功です。
サンプルコード: ストップウォッチを作る
もう少し実用的なアプリということで「ストップウォッチ」を作ってみましょう。
新規のプログラムを作り、メイン画面を定義した上で、次の部品を配置してください。
- ラベル×1 (経過ラベル)
- ボタン×1 (スタートボタン)
次にプログラムを書きます。貼り付けた[スタート]ボタンの「イベント手順の選択」で「クリックされた」を選び、次のようなプログラムを作ります。
スタートボタンがクリックされた時の手順
タイマー1が動作中なら
スタートボタンの内容を「スタート」に変える
スタートボタンの背景色を「LightGreen」に変える
タイマー1を停止する
そうでなければ
スタートボタンの内容を「ストップ」に変える
スタートボタンの背景色を「LightCoral」に変える
タイマー1を開始する
最後は、今
そして
終わりタイマーを使う
「タイマー」とは、指定した一定の間隔で決められたイベント手順を実行してくれる部品です。ここでは「タイマー1」という名前のタイマーを作ります。「タイマー1を開始する」と、この後で定義する「タイマー１が時間になった時の手順」のイベント手順が実行され、ストップウォッチの経過時間が進みます。「タイマー1を停止する」と、イベント手順が実行されなくなります。
また、「タイマー1が動作中」という手順呼び出し式でタイマーが動作中かどうかを調べられます。これに応じて、タイマーを開始,停止したり、ボタンの色や内容を変えたりします。
タイマー1を使うことをまだ定義していませんので、プログラムの先頭の方で自動生成された「はじめの手順」を次のように2行書き加えます。この2行で、はじめの手順でタイマー1という部品を作り、イベントの間隔を10ミリ秒に設定します。
タイマー1を作ることではじめて、タイマーを使うことができます。
はじめの手順
初期化する
ーー貼り付けた部品に対する操作をここに書きます
タイマー１というタイマーを作る
タイマー１の間隔を10に変える
終わりそして「はじめの手順」の終わった次の行に、新しく「タイマー１が時間になった時の手順」を定義します。
タイマー１が時間になった時の手順
経過時間に(最後と今の日付差)のミリ秒数を足す
最後は、今
経過ラベルの内容は、「[(経過時間/100)を「0.00」へ整える]秒」
終わりこのプログラムでは、「経過時間」と「最後」という2つの変数を使っています。「経過時間」変数は、[スタート]ボタンが押されてたらの経過時間を記憶するための変数です。「最後」変数は、タイマーが最後に「時間になった」時の時刻で、今の時刻との差を計算してそのミリ秒を「経過時間」に加えるために使います。
タイマーはおよそ10ミリ秒間隔でイベント手順を実行しますが、この間隔はPCの処理状況により微妙に誤差があるため、PCの時計を使って正確に秒数を測っています。
これでプログラムは完成です。プログラムを実行して、[スタート]ボタンを押してみましょう。
経過時間を0秒に戻せるように、リセットボタンを作ってみましょう。リセットとはどういう状態か、何をどうすればリセットされるか、一つ一つ考えてみましょう。
サンプルコード: 買い物メモを作る
リストビューという部品を使って、買い物する物をメモするアプリを作ってみましょう。リストビューとは、エクスプローラ(フォルダを見るアプリ)のファイルの一覧のようなリスト形式を表現するための部品です。
プログラムの入力
まず、プログラムに必要な変数を定義するために、プログラムの先頭に次のプログラムを入れてください。
メモファイルは「memo.txt」 //買い物メモを保存するファイル
メモアイコンは「shell32.dll」の1番目からアイコン画像を抽出したもの //アイコンの取得
データは{} //買い物メモを入れた配列続いて、ウィンドウの設計画面にて、貼り付けたそれぞれ部品のイベント手順を定義していきます。
手順のおおまかな構成は、次の図のようになります。(初期化する手順の内容は消してあります)
リストビューの項目の追加と削除
これからそれぞれの手順にプログラムを順番に書いていきます。
- 追加ボタンがクリックされた時の手順
- 削除ボタンがクリックされた時の手順
- メモリストビューが選択された時の手順
- メモを保存する手順 ←こちらは自動生成できないので入力します
追加ボタンで項目を増やす
まず、[追加]ボタンをクリックした時にリストビューに項目を追加するプログラムを作ります。「メモ」変数には、メモ1件の内容を配列に入れておきます。メモは、1番目の要素が品名で、2番目の要素が購入済みかどうかを表すことにします。
リストビューに項目を追加するには、リストビューの「追加する」手順を使います。その後に「データ」配列にも同じメモを追加します。
追加ボタンがクリックされた時の手順
メモは、｛品名テキストの内容,済みチェックボックスのチェック｝
メモリストビューにメモをメモアイコンで追加する
データにメモを加える
メモを保存する
終わりとりあえず実行してみます。品名を入力して[追加]ボタンをクリックすると、項目が増えることを確認してみましょう。
削除ボタンで項目を消すには
次に、[削除]ボタンのプログラムを書きます。リストビューで選択した項目を[削除]ボタンで消すようにします。
リストビューの項目は、追加した順番に1番目からの番号が付いています。リストビューで選択中の項目の番号は、設定項目「メモリストビューの選択番号」で調べられます。そしてリストビューの項目を削除するには、「メモリストビューの～番目を消す」手順を使います。
同じように「データ」配列からも番号の要素を消します。
削除ボタンがクリックされた時の手順
削除番号は、メモリストビューの選択番号
もし削除番号が-1なら返す
メモリストビューの(削除番号)番目を消す
データは、データから削除番号を消したもの
メモを保存する
終わりなお「選択番号」設定項目は、未選択状態の時は-1となるので、未選択時は削除せずに「返す」文で手順から抜け出します。
メモをファイルへ保存する
追加したメモを、次に起動する時まで残しておくために、ファイル(memo.txt)へ保存します。「メモを保存する」手順を定義して、そのプログラムを書きます。
メモを保存する手順
データの内容をメモファイルへ保存する
終わりメモを選択すると、その内容を表示する
リストビューで選択したメモに合わせて、品名テキストや購入済みチェックが切り替わるようにします。リストビューの項目を選択した時は、「メモリストビューが選択された時の手順」というイベント手順が実行されます。
このイベント手順で、選択番号に合わせてメモの内容を配列から取り出して、部品の内容に設定します。
メモリストビューが選択された時の手順
選択番号は、メモリストビューの選択番号
選択番号が-1なら
品名テキストをクリアする
済みチェックボックスのチェックは、×
そうでなければ
品名テキストの内容は、データ(選択番号)(1)
済みチェックボックスのチェックは、データ(選択番号)(2)
そして
終わり保存したメモを読み込む
次回起動したときに、ファイルに保存したメモを読み込むプログラムを「はじめの手順」に追記します。
はじめの手順
初期化する
ーー貼り付けた部品に対する操作をここに書きます
メモファイルというファイルが存在するなら
メモファイルから読み込んで配列化してデータとする
データをメモにそれぞれ繰り返す
メモリストビューに｛メモ(1),メモ(2)｝をメモアイコンで追加する
そして
そして
終わりファイルの操作方法については、まだご紹介していませんが、日本語プログラムなので何をしているかは何となく分かってもらえたら嬉しいです。
編集機能を付ける
だんだん出来上がってきました！
続けて、追加したメモを後から修正できるように編集機能を付けます。
- 品名テキストのキーが入力された時の手順
- 済みチェックボックスがチェックされた時の手順
- メモを適用する手順
部品を修正した時にメモも更新する
品名テキストと済みチェックボックスが修正された時に、メモを適用するように改良しましょう。品名テキストはEnterキーを押したときに、済みチェックボックスはチェックを変えたときに、メモを適用するようにします。
テキスト部品でEnterキーが押された時のプログラムを実行するには、「～のキーが入力された時の手順」を定義します。このイベント手順は、どんなキーを押したときにも実行されます。押されたキーは、「この時のキー番号」で調べられます。Enterキーを表すキー番号は13なので、「もし文」を使ってキー番号が13の時にメモを適用するように書き加えます。
品名テキストのキーが入力された時の手順
選択番号は、メモリストビューの選択番号
選択番号が-1なら返す
この時のキー番号が13なら
メモを適用する
この時の処理済みは、○
そして
終わり済みチェックボックスがチェックされた時のイベント手順は、「～がチェックされた時の手順」です。
済みチェックボックスがチェックされた時の手順
メモを適用する
終わり「メモを適用する手順」では、品名テキストの内容と購入済みチェックの内容に合わせてリストビューと「データ」配列を変更します。「メモリストビューの選択番号」で修正するリストビュー項目,配列の要素は分かっているので、リストビュー項目の設定項目と、配列の要素の内容を変更します。
メモを適用する手順
選択番号は、メモリストビューの選択番号
選択番号が-1なら返す
メモは｛品名テキストの内容,済みチェックボックスのチェック｝
データ(選択番号)は、メモ
メモリストビューの(選択番号)番目の詳細一覧は、データ(選択番号)
メモを保存する
終わり買い物メモプログラムが出来上がりました！実行してみましょう。
これで後から品名を修正したり「購入済み」のチェックを変えたりすることができるかと思います。
もっと使いやすく改良してみましょう。例えば、新しく複数行テキスト部品を貼り付けて「備考」欄を作ってみましょう。この場合は、追加した欄もファイルに保存できるようにする必要もありますね。
他のGUI部品も使ってみよう
プロデルには、今回紹介した部品以外にもたくさんのGUI部品が用意されています。プロデルマニュアルのGUI部品のページにてサンプルコードと共に紹介しています。
またプログラム掲示板には、GUI部品を使ったサンプル例を掲載しています。
まとめ
今回は、GUIアプリを作る方法をご紹介しました。プロデルならプロデルデザイナで簡単にGUI部品を貼り付けられるので、あっと言う間にGUIアプリが作れます。また部品のイベントが発生した時の手順を定義して、部品の状態を「設定項目」で調べたり設定を変えると言った操作もできることをご紹介しました。
プロデルなら本格的なアプリを作ることができます。
ぜひチャレンジしてみてください。
※当ブログの記事の著作権はゆうとにあります。プロデルに関係が無い目的で、文章や図表,プログラムを複製, 改変, 移植して掲載することを堅く禁止します
