MATLABのAppDesignerでGUIアプリを作る (1)ボタン
こんにちは。
また１年以上ぶりの更新となってしまいました(;^_^A
今までGUIアプリの開発はVisual Studioを使うことが多かったのですが、最近はMATLABを使う機会が増えてきたので、MATLABのAppDesignerを使ったGUIアプリの作成方法を覚えていくことにしました。
ある程度まとまった機能を持つGUIアプリを作成する前に、まずはGUI部品1つ1つの基本的な使い方から抑えていこうと思います。
というわけで、初回の今回はタイトルにもある通り
ボタン
です。
●この記事の目次
１．App Designerの起動
初回なので、まずはApp Designerの起動方法を備忘録として書き留めておきます。
まず筆者の環境ですが、MATLAB 2023a Home版ですので、これを全体に説明します。
MATLABを起動後、「アプリ」タブをクリックすると、図１のような画面表示になるので、一番左にある「アプリの設計」ボタンをクリックします。
図１ App Designerの起動アイコン
ボタンをクリックすると、図２の画面が表示されます。
テンプレートがいくつか用意されているようですが、今回は「空のアプリ」を選択します。
図２ App Designerの起動画面
「空のアプリ」を選択すると、図３のようなGUIの編集画面が表示されます。
画面中央に空のキャンバスが表示され、左側のコンポーネントライブラリには、各種GUI部品が表示されます。
この画面構成はVisual Studioともよく似ていますね。
以降、主要（だと筆者が勝手に思っている）GUI部品の使い方を書いていきます。
一度にいくつも書くと大変なので、1つの記事で1～2個程度にしておこうと思います(;^_^A
２．ボタンの使い方
さて、ようやく本題です。
App Designerのボタン部品には「ボタン」と「状態ボタン」の2つがあるようです。
前者の「ボタン」はクリックするたびに同じイベントの動作が発生します。
後者の「状態ボタン」はその名のとおり「ON/OFF」の2通りの状態を持ち、クリックするたびに状態が入れ替わり、状態に応じた動作の切替を行うことができます。
（便宜上、状態名をここでは「ON」、「OFF」と定義しました。）
２.１ ボタン
まずは「ボタン」の使い方です。
図４の示すように、コンポーネントライブラリの中から「ボタン」をクリックし、GUIウィンドウの中心にドラッグ＆ドロップします。
デフォルトのボタンのテキスト表示は「Button」です。
図４ ボタンの部品をウィンドウ上に配置
ボタンのアイコンをダブルクリックすると、図５のように「Button」にハッチがかかり、任意の表示に編集することができます。
図５ ボタンのテキスト表示を編集
今回はシンプルにカタカナで「ボタン」と変更しました。（図６）
図６ ボタンのテキスト表示を「ボタン」に変更
次に図７のように、ボタン部品をクリックした状態で、コンポーネントブラウザの「コールバック」をクリックし、更に関数名の隣の「▼」をクリックして表示される「ButtonPushedFcnコールバックの追加」をクリックします。
図７ コールバック関数を追加
コールバック関数の追加を実行すると、画面が「設計ビュー」から「コードビュー」に切り替わり、コード上にボタンクリック時に実行されるコールバック関数「ButtonPushed」が追加されます。（図８）
この段階ではまだコールバック関数の中身は空なので、ここに処理を追記していきます。
図８ コールバック関数のコード
今回はごくシンプルにボタンがクリックされると、MATLABのコマンドウィンドウ上に「Hello World!!」が表示されるように、
disp("Hello World!!");
を追記します。（図９）
ここまで作成したら一度ファイルを保存します。
AppDesignerの編集ファイルは「.mlapp」という拡張子で保存されるようです。
図１０ ファイルを保存
保存が完了したらF5をクリックして、プログラムを実行してみましょう。
設計したボタンが１つだけ配置されたGUIアプリが起動し、ボタンをクリックすると、コマンドウィンドウ上に「Hello World!!」と表示されることが確認できます。（図１１）
（図１１の例ではボタンを３回クリックしています。）
図１１ 実行結果
ボタンの基本的な使い方はこんな感じです。
ちなみに今回配置したボタンは、コードビュー上では、図１２のように定義されるようです。
ボタンに表示されるテキストは
app.Button.Text
で定義されるようなので、コード上でこの値を変更することで、プログラムの動作中にボタンの表示を切り替えることも可能です。
図１２ 「ボタン」オブジェクト定義のコード
２.２ 状態ボタン
次は「状態ボタン」です。
２.1の「ボタン」とほとんど違いがないのと、2.1でだいぶ細かく説明したのでこちらは手抜きます(;^_^A
まずは2.1と同様、コンポーネントライブラリから「状態ボタン」を選択し、GUIウィンドウ上にドラッグ＆ドロップします。（図１３）
次にコールバック関数を追加します。
図１３ 「状態ボタン」部品の設置
コールバック関数を追加すると、コードビュー上に「ButtonValueChanged」という関数が追加されます。（図１４）
2.1の「ボタン」と比べると、「状態ボタン」のコールバック関数は空ではなく、
というコードがデフォルトで記述されています。
このコードは変数valueにボタンの押下状態（1:ON／0:OFF）を格納するためのものようです。
図１４ 「状態ボタン」のコールバック関数
今回はシンプルな例として、valueの0/1の値に応じてif文で処理を分岐し、コマンドウィンドウに表示させるテキストを切り替えてみます。（図１５）
コードを追記したらファイルを保存し、プログラムを実行してみます。
実行結果は図１６です。ボタンをクリックするたびにコマンドウィンドウに表示されるテキストが切り替わっていることが確認できます。
図１６ 実行結果
３．まとめ
今回はAppDesignerの起動から「ボタン」、「状態ボタン」の使い方についてシンプルな例を交えて説明しました。
長々と書いた割にはとても簡単でしたね(;^_^A
次回は「テキストエリア」部品の使い方について書こうと思います。
次はまた１年後・・・とはならないように１週間後くらいには更新できるように頑張ります(;^_^A
ではでは・・・
