App Designer を使用した簡単なアプリの作成と実行

App Designer では、プロットやスライダーを含む簡単なアプリの作成方法を手引きするチュートリアルを提供しています。このスライダーは、プロットした関数の振幅を制御します。チュートリアルを実行するか、以下に示すチュートリアルの手順に従うことで、このアプリを作成できます。

チュートリアルの実行

App Designer でチュートリアルを実行するには、App Designer スタート ページを開き、[アプリ] セクションで [例を表示] をクリックします。次に、[対話型のチュートリアル] を選択します。

アプリを作成するチュートリアルの手順

App Designer には、アプリ作成用のビューが 2 つあります。[設計ビュー] と [コード ビュー] です。[設計ビュー] は、UI コンポーネントの作成や対話形式でのアプリのレイアウトに使用します。[コード ビュー] は、アプリの動作のプログラムに使用します。App Designer の右上隅にあるトグル ボタンを使用して、2 つのビューを切り替えることができます。

簡単なプロット アプリを作成するには、App Designer で新しいアプリを開き、次の手順に従います。

手順 1: 座標軸コンポーネントの作成

[設計ビュー] で、UI コンポーネントを作成し、その外観を対話形式で変更します。[コンポーネント ライブラリ] に、対話形式でアプリに追加できるすべてのコンポーネント、コンテナー、ツールが含まれています。[コンポーネント ライブラリ] からアプリのキャンバスにコンポーネントをドラッグして追加します。その後、[コンポーネント ブラウザー] でプロパティを設定するか、コンポーネントのサイズやラベル テキストなどの特定の特性をキャンバスで直接編集して、コンポーネントの外観を変更できます。

プロット アプリで、プロット データを表示する座標軸コンポーネントを作成します。[座標軸] コンポーネントを [コンポーネント ライブラリ] からキャンバスにドラッグします。

手順 2: スライダー コンポーネントの作成

[スライダー] コンポーネントを [コンポーネント ライブラリ] からキャンバスにドラッグします。座標軸コンポーネントの下に配置します。

手順 3: スライダー ラベルの更新

スライダー ラベルのテキストを置換します。ラベルをダブルクリックして、Slider という単語を Amplitude で置き換えます。

アプリのレイアウトが完了すると、[設計ビュー] のキャンバスは次のようになります。

アプリのレイアウトの詳細については、App Designer の設計ビューでのアプリのレイアウトを参照してください。

手順 4: [コード ビュー] に移動

アプリのレイアウトが完了したら、アプリの動作をプログラムするコードを記述します。キャンバスの上にある [コード ビュー] ボタンをクリックしてアプリ コードを編集します。

[設計ビュー] でアプリにコンポーネントを追加すると、アプリを実行したときに実行されるコードが App Designer で自動的に生成されます。このコードは、アプリの外観をキャンバスに表示されているとおりに構成します。このコードは編集できず、グレーの背景で表示されます。App Designer で生成されるこのコードの一部として、アプリの動作をプログラムするときに使用するいくつかのオブジェクトが作成されます。

• app オブジェクト — このオブジェクトは、UI コンポーネントやプロパティを使用して指定したデータなど、アプリのすべてのデータを格納します。アプリのすべての関数で、このオブジェクトを最初の引数として使用する必要があります。このパターンにより、それらの関数内からコンポーネントやプロパティにアクセスできます。

• コンポーネント オブジェクト — [設計ビュー] でコンポーネントを追加するたびに、App Designer では、そのコンポーネントに app.ComponentName の形式で名前を付けてオブジェクトとして格納します。アプリのコンポーネントの名前は、[コンポーネント ブラウザー] を使用して表示および変更できます。アプリ コード内からコンポーネントのプロパティにアクセスして更新するには、app.ComponentName.Property のパターンを使用します。

手順 5: スライダーのコールバック関数の追加

"コールバック関数" を使用してアプリの動作をプログラムします。コールバック関数は、アプリ ユーザーがスライダーの値の調整などの特定の操作を行ったときに実行される関数です。

プロット アプリで、ユーザーがスライダーの値を調整するたびに実行されるコールバック関数を追加します。[コンポーネント ブラウザー] で app.AmplitudeSlider を右クリックします。次に、コンテキスト メニューで [コールバック] 、 [ValueChangedFcn コールバックの追加] を選択します。

コンポーネントにコールバックを追加すると、App Designer によってコールバック関数が作成され、カーソルがその関数の本体に置かれます。App Designer では、コンポーネントやそのプロパティにアクセスできるように、コールバック関数の最初の引数として app オブジェクトを自動的に渡します。たとえば、関数 AmplitudeSliderValueChanged では、スライダーの値にアクセスするためのコード行が App Designer で自動的に生成されます。

コールバック関数を使用したアプリの動作のプログラムの詳細については、App Designer のコールバックを参照してください。

手順 6: データのプロット

App Designer でグラフィックス関数を呼び出すときは、ターゲットの座標軸または親オブジェクトを関数の引数として指定します。

プロット アプリで、アプリの axes オブジェクトの名前 app.UIAxes を関数 plot の最初の引数として指定して、アプリ ユーザーがスライダーの値を変更するたびに座標軸のプロット データを更新します。次のコードを AmplitudeSliderValueChanged コールバックの 2 行目に追加して、関数 peaks のスケーリングされた出力を座標軸にプロットします。

plot(app.UIAxes,value*peaks)

アプリでのグラフィックスの表示の詳細については、App Designer でのグラフィックスの表示を参照してください。

手順 7: 座標軸の範囲の更新

アプリ コード内からコンポーネントのプロパティにアクセスして更新するには、app.ComponentName.Property のパターンを使用します。

プロット アプリで、app.UIAxes オブジェクトの YLim プロパティを設定することにより、y 軸の範囲を変更します。このコマンドを AmplitudeSliderValueChanged コールバックの 3 行目に追加します。

app.UIAxes.YLim = [-1000 1000];

手順 8: アプリの実行

[実行] をクリックして、アプリを保存して実行します。スライダーの値を調整して、アプリでいくつかのデータをプロットします。

変更の保存後、App Designer で、または MATLAB^® コマンド ウィンドウで名前 (.mlapp 拡張子を除く) を入力することによって、アプリは再度実行可能になります。コマンド プロンプトからアプリを実行する場合は、ファイルが現在のフォルダー内か、または MATLAB パスに存在しなければなりません。

関連するトピック

• App Designer の設計ビューでのアプリのレイアウト
• App Designer コード ビューでのコードの管理
• App Designer のコールバック
• App Designer でのグラフィックスの表示
• App Designer アプリ内でのデータの共有