アプリでの数値データのプロット
App Designer では、数値データをプロットし、ユーザー入力に応じて更新するアプリを作成できます。この例のアプリでは、ユーザー入力を収集し、入力に基づいて各月の支払金額の計算を行ってから、元金と利子の金額を経時的にプロットします。この例では、次のアプリ作成タスクを示します。
UI コンポーネントからプロパティ値にアクセスする。
アプリ内でデータをプロットする。
設計ビューでの UI コンポーネントのレイアウト
このアプリでは、次のコンポーネントを使用して、単純な割賦返済計算機を作成します。
数値編集フィールド — 借入額、金利、返済期間などの数値を入力します。計算された各月の支払金額が表示されます。MATLAB® は、値が数値で、指定された範囲内であるか自動的にチェックします。
プッシュ ボタン — 指定された入力から各月の支払金額を計算します。
座標軸 — ローンの分割払いに対する元金と利子額のプロットを表示します。
UI コンポーネントのレイアウト
ローン計算機を作成するには、まず、App Designer スタート ページから自動リフロー機能を備えた新しい 2 パネル アプリを開きます。[設計ビュー] で、数値編集フィールド、プッシュ ボタン、および座標軸を [コンポーネント ライブラリ] からアプリ キャンバスにドラッグします。
コンポーネントの外観の構成
コンポーネントの外観を変更するには、キャンバス上でコンポーネントを直接編集するか、[コンポーネント ブラウザー] でプロパティを変更します。以下に例を示します。
コンポーネントのラベルを対話的に編集する。アプリ キャンバスで編集フィールドのラベルをダブルクリックし、ラベルのテキストを変更します。
[Monthly Payment] 編集フィールドでデータを編集する機能をオフにする。編集フィールド コンポーネントを選択し、[コンポーネント ブラウザー] で [編集可能] チェック ボックスをオフにします。
アプリ コンポーネントをレイアウトした後、[設計ビュー] のアプリ キャンバスには、アプリ ユーザーが借入額、金利、返済期間を入力するフィールドと、各月の支払金額を計算するためのボタンが表示されます。このボタンはまだ機能しません。[Principal and Interest] プロットは空です。アプリ コンポーネントの配置の詳細については、App Designer の設計ビューでのアプリのレイアウトを参照してください。
コード ビューでのアプリの動作のプログラム
[コード ビュー] でアプリの動作をプログラムするには、アプリ ユーザーが特定のアプリ コンポーネントを操作するたびに実行されるコールバック関数を使用します。たとえば、各月の支払金額を計算し、ユーザーがボタンを押したときにデータをプロットする、[Monthly Payment] ボタン用のコールバック関数を作成します。
コールバック関数の追加
[コンポーネント ブラウザー] で app.MonthlyPaymentButton
を右クリックし、[Monthly Payment] ボタン用の ButtonPushedFcn
コールバック関数を追加します。次に、コンテキスト メニューで [コールバック]、[ButtonPushedFcn コールバックの追加] を選択します。App Designer は [コード ビュー] で空の関数を自動的に生成し、その関数をコールバック関数としてボタンに割り当てます。コールバックの詳細については、App Designer のコールバックを参照してください。
次に、作成したコールバック関数内に、各月の支払金額を計算し、元金と利子の金額を経時的にプロットするコードを追加します。コールバックがボタンに割り当てられているため、ユーザーが [Monthly Payment] ボタンをクリックすると、このコードが実行されます。
各月の支払金額の計算
ドット表記 app.ComponentName.Property
を使用して、アプリ コンポーネントの数値入力値にアクセスします。たとえば、[Loan Amount] フィールドの入力をコールバック関数内のローカル変数に格納します。
amount = app.LoanAmountEditField.Value;
[Loan Amount]、[Interest Rate]、および [Loan Period] の数値編集フィールドの入力を使用して、コールバック関数内で各月の支払金額を計算します。
payment = (amount*rate)/(1-(1+rate)^-nper);
計算された支払金額を [Monthly Payment] 数値編集フィールドに出力するには、[Monthly Payment] の値を計算された支払金額に設定します。
app.MonthlyPaymentEditField.Value = payment;
座標軸でのデータのプロット
[Monthly Payment] の値から元金と利子の金額を生成するには、変数を事前に割り当てて初期化することから始めます。
interest = zeros(1,nper); principal = zeros(1,nper); balance = zeros(1,nper); balance(1) = amount;
次に、元金と利子を計算します。
for i = 1:nper interest(i) = balance(i)*rate; principal(i) = payment - interest(i); balance(i+1) = balance(i) - principal(i); end
関数 plot
を使用し、アプリ内の UIAxes
オブジェクトを最初の引数として指定して、アプリ内でデータをプロットします。たとえば、元金と利子の金額を PrincipalInterestUIAxes
という名前の座標軸にプロットします。
plot(app.PrincipalInterestUIAxes,(1:nper)',principal,(1:nper)',interest);
座標軸の外観の編集
対応する関数の最初の引数として UIAxes
オブジェクトを指定して、軸の範囲とラベルを調整します。たとえば、座標軸に凡例を追加し、関数 legend
、関数 xlim
、関数 ylim
のそれぞれの最初の入力引数として app.PrincipalInterestUIAxes
を指定して軸の範囲を調整します。
legend(app.PrincipalInterestUIAxes,{"Principal","Interest"},"Location","Best"); xlim(app.PrincipalInterestUIAxes,[0 nper]); ylim(app.PrincipalInterestUIAxes,"auto");
アプリの実行
アプリを実行するには、App Designer のツールストリップで [実行] をクリックします。数値フィールドに値を入力し、[Monthly Payment] ボタンをクリックします。アプリは各月の支払金額を計算し、元金と利子のデータをプロットします。