シミュレーションアプリの設計にレイアウトテンプレートを使用

COMSOL Multiphysics® ソフトウェアのアプリケーションビルダーは, シミュレーションアプリのグラフィカルユーザーインターフェースの設計に使用します. レイアウトテンプレートを使することで, アプリ設計のワークフローを効率化することができます. これらのテンプレートはアプリの初期設定をガイドしてくれますが, 独自の機能を盛り込むことも可能です. このブログでは, レイアウトテンプレートの使い方をご紹介します.

レイアウトテンプレートを使って, バスバーをシミュレートするアプリを2バージョン作成します.

組み込みモデルの構成

レイアウトテンプレートをアプリに適用する前に, まずCOMSOLMultiphysicsのモデルビルダーでモデルを作成する必要があることに注意してください. プロセスを示すために, アプリケーションライブラリに含まれているバスバーの電気加熱モデルを使用します. モデルビルダーのホームリボンタブにあるアプリケーションビルダーボタンをクリックして, アプリの作成を開始することができます.

この例に従うには, Microsoft®Windows®バージョンのCOMSOL Multiphysicsを起動し, ファイルメニューからアプリケーションライブラリを選択します. COMSOL Multiphysics > Multiphysicsを参照し, バスバーをダブルクリックします.

アプリを作成する前に, 少し調整してみましょう. モデルビルダーで, 結果 > 温度(ht)ノードを展開し, 表面を選択します. 表面の設定ウィンドウで, 範囲セクションを展開し, マニュアルカラーレンジのチェックを外します. （完成したアプリではアプリユーザーが入力パラメーターを定義できるため, 色範囲の最大値と最小値を特定の値に固定することはできません.）

レイアウトテンプレートの使用

モデルビルダーのホームリボンタブにあるアプリケーションビルダーボタンをクリックして, アプリの作成を開始することができます.

グラフィカルユーザーインターフェースを作成するには, 少なくとも1つのフォームオブジェクトが必要です. リボンの新規フォームボタンをクリックすると, あらかじめ定義されたテンプレートの中から選択するウィンドウが表示されます. 基本テンプレートは, フォームを作成するための典型的な方法であり, 入力と出力, グラフィックス, ボタンをユーザーインターフェースのどこにでも配置することができます. ブランクフォームは, 内容のない空のフォームを作成します.

一方, レイアウトテンプレートには, 以下のような多くの付加価値があります.

1. より具体的なコンテンツグループとロケーション
2. 構造化されたインターフェースの作成が容易
3. 自動的にサイズ変更されるアプリ
4. フォームコレクション, リボンメニュー, ファイルメニューなど, より洗練されたフォームオブジェクトを簡単に組み込むことができます.
5. 特定の画面サイズに合わせてテンプレートを調整可能

ここでは, リボン, セクション, グラフィックというテンプレートを選択してみましょう. 下の画像の右側に表示されているテンプレートの選択ウィンドウの画像と説明文は, レイアウトがどのように見えるかの例を示しており, 含まれるさまざまなフォームオブジェクトを示しています.

新規フォーム作成時にテンプレートを1つ選択.

次に, コンテンツボタンをクリックします. このテンプレートでは, ユーザーインターフェースの一部として, リボンボタン, 入力, 出力を含めることを選択できます.

リボンボタンタブが選択されている場合, 左側のツリーにある利用可能なアイテムをダブルクリックするか, 1つまたは複数のアイテムを選択してから, 選択項目を追加ボタンでクリックします. また, 右側のリストでアイテムを選択し, 選択を削除ボタンをクリックすると, アイテムを削除することができます. 右側のプレビューはすぐに更新され, アプリのデザインに関するフィードバックがすぐに得られます.

テンプレートが選択され, リボンにボタンが追加されました. プレビューには, 対応するユーザーインターフェースが即座に表示されます.

次に, 入力タブを選択します. 追加された入力は, フォームコレクションのセクションに結合されます. なお, フォームコレクションには複数のセクションを追加することもできます. 例えば, ジオメトリを定義するセクションと, フィジックスを定義するセクションを用意することができます.

ジオメトリセクションを作成するには, まず, ジオメトリのパラメーターL, rad_1, tbb, and wbb, （それぞれ長さ, 半径,厚さ, 幅に対応）を選択して, 選択項目を追加ボタンをクリックします. 新規フォームダイアログで, タイトルをジオメトリ, 名前をinputGeometrySectionに変更し, OKをクリックします.

2つ目のセクションを作成するには, 選択したアイテムのリストの下にあるフォーム追加ボタンをクリックします. 新規フォームのダイアログで, タイトルをフィジックスに, 名前を入力フィジックスセクションに変更します. 次に, htcパラメーターとVtotパラメーターをダブルクリックします. これらのパラメーターは, それぞれ熱伝達率と電圧を表しています.

1つのフォームコレクションに複数のセクションを追加することができます.

出力タブを選択し, 計算値の下のボリューム最大値1をダブルクリックします. タイトルを結果に変更し, OKをクリックします. これにより, バスバーの最大温度が表示されます.

これで,必要なステップをすべて実行しました. 完了をクリックする前に, 下のスクリーンショットのようなプレビューが表示されるはずです.

テンプレートからアプリを作成する際の最終ステップのスクリーンショット.

完了ボタンを選択すると, アプリケーションビルダーのウィンドウに移動します. リボンのテストアプリケーションボタンを選択して, アプリを試してみましょう.

テンプレートの手順が完了したときのアプリのデザイン.

レイアウトテンプレートで作成したアプリの編集

いくつかの簡単な手順で, サイズ変更可能な完全に機能するアプリができました. これで, アプリの編集とデザインの改善を続けることができます. 初期設計と比較して, 変更を検討する場合があります.

• 温度と電流密度を可視化するアイコンとボタンのテキスト
• 計算後に解を可視化するかどうか
• アプリの起動時にグラフィックスにジオメトリを表示するかどうか
• 結果のテキストラベル
• さまざまなセクションの入力フィールドの配置

まず, アプリの一般的なレイアウトを見てみましょう. フォームノードでメインフォームをダブルクリックすると, メインフォームが3つの部分に分割されていることがわかります.

レイアウトテンプレートによって作成されるメインフォームは, 3つの部分に分かれています. 左側にセクション, 右側にグラフィックスを備えた2つのフォームコレクション.

左上には, 次の2つのセクションを含むフォームコレクションがあります.

1. inputGeometrySection
2. 入力フィジックスセクション

これらのセクションは, 選択したレイアウトテンプレートを使用して最初の手順を実行したときに定義されました. 最初のフォームコレクションの下に, 出力セクション1フォームを含む2番目のフォームコレクションがあります. リボンのボタンのいずれかをクリックすると, グラフィックスが更新されます.

リボンメニューには, 結果を可覚化するための2つのボタンが含まれています. どちらも同じアイコンですが, アイコンをより適切なものに変更するのは簡単です. まず, アプリケーションビルダーツリーでリボンボタン温度(ht)を選択します. 次の手順で見つけることができます：メインウィンドウ > リボン > ホーム > メイン. 設定ウィンドウで, テキストを温度に変更します. 次に, ライブラリに画像を追加してここで使用ボタン（+記号の付いたボタン）をクリックします. デフォルトでは, これはアイコンが保存されているディレクトリを指します. 通常は次のとおりです. C:\Program Files\COMSOL\COMSOL56\Multiphysics\data\images.

このディレクトリで, modnav_heattransfer_32.pngという名前の画像をダブルクリックして, アイコンを変更します. 同時に, ボタンにツールチップを追加することもできます. 温度を可覚化することは, コマンドの良い説明です. 電流密度リボンボタンに対して手順を繰り返しますが, 今回は画像modnav_acdc_32.pngを選択し, ツールチップを設定して現在の密度を可覚化します.

リボンボタンの設定は簡単に変更でき, 実行する特定のコマンドに適合させることができます.

アプリの計算ボタンをクリックすると, 埋め込みモデルのスタディ1が計算されます. 計算ボタンをクリックすると, 計算が終了した直後に結果プロットを可覚化したいと思います. これは, 解を計算するときにシーケンスにプロットコマンドを追加することで実現できます. アプリケーションビルダーツリーのメインウィンドウ > リボン > ホーム > メインにある計算ノードを選択します. 設定ウィンドウの実行するコマンドの選択セクションで, モデル > 結果の下にある温度(ht)を選択します. 選択したら, プロットボタンを押すと, コマンドがシーケンスに追加されます.

また, 温度プロットを可覚化する場所に関する情報を追加する必要があります. これを行うには, 設定ウィンドウの下部にある引数の編集ボタンをクリックします. 引数の編集ダイアログボックスで, メインフォームでグラフィックス1を選択し, OKをクリックします.

解が計算されると, 温度をプロットするコマンドがコマンドシーケンスに追加されます. プロットを可覚化するグラフィックを定義するための引数が追加されていることに注意してください.

アプリを起動すると, グラフィックスウィンドウが空になっていることに気付く場合があります. ユーザーエクスペリエンスを向上させるために, 最初にジオメトリを可視化したいと思います. これを行うには, 最初にメインフォームでグラフィックス１を選択します. グラフィックスの設定ウィンドウで, 初期グラフィックスコンテンツのソースセクションでジオメトリを選択し, ソースとして使用ボタンをクリックします. アプリを起動するとすぐにジオメトリが表示されるようになりました.

アプリの起動時にジオメトリを可視化するには, メインフォームでグラフィックフォームオブジェクトを選択し, ジオメトリを初期グラフィックスコンテンツのソースとして設定します.

今度は, アプリケーションをもう一度テストして, 編集によってデザインが改善されたことを確認します.

温度ボタンと電流密度ボタンのアイコンとテキストが変更されました. アプリを起動すると, グラフィックスにジオメトリが表示され, 解が計算されると, 温度プロットが可視化されます.

上の画像のアプリのデザインを見ると, 考慮すべきいくつかの改善点がまだあります. 入力フィールドを水平方向に整列させたいので, 温度の計算値は, 単に温度ではなく, 最大温度という名前にする必要があります.

後者から始めましょう. アプリケーションビルダツリーで, 出力セクション1というローカルフォームをダブルクリックします. 次が手順です：フォーム > メイン > フォーム > 出力セクション1. テキストラベル1を選択し, 設定ウィンドウでテキストを最高温度に変更します.

テンプレートで作成したアプリは簡単に調整できます. ここでは,最高温度のテキストラベルが変更されています.

セクション間で入力フィールドを水平方向に揃えるには, inputGeometrySectionフォームをダブルクリックすることから始めます. 最初の列（青い背景色）の上部を右クリックして, 固定列を選択します. 列を特定の幅にドラッグするか, inputGeometrySectionフォームの設定ウィンドウの含まれるフォームオブジェクトのグリッドレイアウトセクションでサイズを150ピクセルに設定します. 列を継承を使用すると, このレイアウトを他のフォームに簡単に再利用できます. inputPhysicsSectionフォームをダブルクリックします. 設定ウィンドウの含まれるフォームオブジェクトのグリッドレイアウトセクションで, 列を継承をinputGeometrySectionに設定します. 出力セクション1に対して手順を繰り返します.

最後に, アプリの初期サイズを少し広くしたいと思います. メインフォームをもう一度ダブルクリックします. 設定ウィンドウの含まれるフォームオブジェクトのグリッドレイアウトセクションで,

列2を固定に, 幅を800に設定します. この段階でアプリケーションをテストすると, グラフィックスウィンドウが水平方向にサイズ変更できなくなっていることがわかります. したがって,

メインフォームの設定ウィンドウに戻り, 列2の幅を拡大に設定します.

レイアウトテンプレートで生成されたアプリを編集することで, アプリのデザインを向上させることができます！

レイアウトテンプレートに含まれるオブジェクトの編集に限定されません. アプリと埋め込みモデルに引き続き機能を追加して, 必要なアプリを作成できます.

小さな画面に適応したレイアウトテンプレートの使用

一部のレイアウトテンプレートは, 小さい画面に合うように調整されています. COMSOL Server™を使用すると, アプリケーションビルダーで開発されたアプリは, Safari, Firefox®, Chrome™, Internet Explorer®, Microsoft Edge®などのウェブブラウザーで実行できます. これにより,タブレットやスマートフォンでシミュレーションアプリを実行できるようになります. Application Builderには, COMSOL Server™にアップロードする前にウエブブラウザーでアプリケーションをテストするためのサポートが組み込まれています.

まず, 新しく COMSOL Multiphysicsセッションを開始し, このブログの冒頭の指示に従って, 埋め込みモデルを変更します. さらに,小さな画面サイズでアプリの見栄えを良くするために, いくつかの小さな調整を行うことができます.

1. モデルビルダーで, 結果 > 温度(ht)ノードを選択します. 3Dプロットグループの設定ウィンドウで, カラーレジェンドセクションを展開し,

   位置を下に設定します. 電流密度プロットグループについても同じ手順に従います.

2. グラフィックスをきれいにするために, 軸と軸の向きを削除します. モデルビルダーで, コンポーネント1 > 定義 >ビュー1ノードを選択します. 表示セクションを展開し, グリッドを表示と軸の方向を表示のチェックを外します. 同時に, 色セクションでマテリアルの色とテクスチャを表示するを確認することもできます.
3. プロットタイトルのデフォルトのフォントサイズを小さくしてスペースを節約し, アプリの他の部分との整合性を高めることができます. ルートノード busbar.mphを選択し, グラフィックスセクションでサイズを8ポイントに設定します.

スマートフォン向けの高度なコンパクトレイアウトと呼ばれるレイアウトテンプレートを使用してアプリを作成しましょう. 次の手順を実行します：

1. アプリケーションビルダーで, リボンの新規フォームボタンを選択.
2. スマートフォン用コンパクトレイアウト（詳細）のテンプレートを選択. 画像の下のレイアウト, テンプレートに含まれるフォームオブジェクト, および説明に注意. 次に, コンテンツをクリック.
3. デザインボタンタブで, ジオメトリをダブルクリック.
4. デザイン入力タブを選択. I, rad_1, tbb, と wbb次に, 選択項目の追加ボタンをクリックし, 新規フォームダイアログボックスでOKをクリックして, デフォルトのタイトルと名前を保持.
5. フィジックス入力タブを選択. htcとVtotを選択し, 選択項目を追加ボタンをクリック. 次に, 新規フォームダイアログでOKをクリックして, デフォルトのタイトルと名前を保持. （注：必要な場合を除いて, 必ずしもフィジックスボタンタブにコンテンツを追加する必要はありません. この例では, コンテンツを空のままにします.）
6. シミュレートボタンタブを選択. メッシュ1をプロットとスタディ1を計算を選択. 次に, 選択項目を追加ボタンをクリック.
7. シミュレート入力タブを選択. mhをダブルクリックし, 新規フォームダイアログボックスでOKをクリック, デフォルトのタイトルと名前を保持.
8. 結果ボタンタブを選択. プロット温度(Ht)とプロット電流密度を選択. 次に, 選択項目を追加ボタンをクリック.
9. 結果出力タブを選択. 体積最大1をダブルクリック. 次に, 新規フォームダイアログボックスでOKをクリックし, デフォルトのタイトルと名前を保持.
10. 完了を押して設定を完了.

リボンのアプリケーションをテストボタンを選択してアプリ試してみましょう. 上部のボタン（デザイン, フィジックス, シミュレーション, 結果）をクリックして, レイアウトがどのように機能しているかをよりよく理解します.

メインフォームには上から順に次のものが含まれます.

• ビューを選択するための4つの大きなボタン.
  • 各ボタンは, 引数を使用してローカルメソッドhighlightTopMenuItemを呼出し.
  • highlightTopMenuItemは, 選択したボタンとトップメニューの水平線を強調表示します. また, カードスタック（カードスタック1およびカードスタック2）を制御するローカル文字列アクティブカードも更新します.
• 現在選択されているビューに応じて色が変わるボタン下の水平線.
• 現在選択されているビューに応じて異なるローカルフォームを表示するカードスタック（カードスタック1）. ローカルフォームはツールバーを含む.
• 現在選択されているビューに応じて異なるローカルフォームを表示するカードスタック（カードスタック2）. ローカルフォームは,入力と出力を含まむ.
• カードスタック1で選択したコマンドに基づいて更新される1つのグラフィックスオブジェクト.

メインフォームには12のローカルフォームが含まれています. 文字列 activeCard は, 2つのカードスタックを制御します. アレイ1D文字列topMenuButtons には,トップメニューのボタンの名前が含まれています. ローカルメソッド, initializeApplication は, アプリケーションの起動時に実行され, highlightTopMenuItemは, トップメニューのボタンがクリックされたときに実行されます. スマートフォン用コンパクトレイアウト（詳細）と呼ばれるレイアウトテンプレートを使用して, すべてが自動的に設定されます.

レイアウトテンプレートで作成したアプリは簡単に編集できます. リボン, セクション, グラフィックスと呼ばれるテンプレートを使用して作成したアプリと同様に, 次のように変更できます.

1. アプリの起動時にジオメトリを表示.
   1. メインフォームをダブルクリック.
   2. グラフィックス1を選択.
   3. 設定ウィンドウで, ジオメトリを初期グラフィックスコンテンツのソースとして設定.
2. アイコンを変更.
   1. resultsCommandsフォームをダブルクリック.
   2. resultsToolbarを選択.
   3. 設定ウィンドウのツールバーアイテムセクションで, アイテム１を選択し, 編集ボタンをクリック.
   4. テキストを温度に変更.
   5. ライブラリに画像を追加してここで使用ボタンをクリックし, modnav_heattransfer.pngを選択.

      （ツールバーは小さなボタンを使用しているため, 16×16ピクセルのアイコンを使用していることに注意.）

   6. OKをクリックして, カスタムツールバーアイテムの編集ダイアログボックスをクローズ.
   7. 設定ウィンドウのツールバーアイテムセクションで, アイテム2を選択し, 編集ボタンをクリック.
   8. ライブラリに画像を追加しここで使用ボタンをクリックし, modnav_acdc.pngを選択.
   9. OKをクリックし, カスタムツールバーアイテムの編集ダイアログボックスをクローズ.
3. 最高温度のテキストラベルを変更.
   1. 結果出力フォームをダブルクリック.
   2. テキストラベル1を選択し, テキストを最高温度に変更.
4. 計算ボタンをクリックし, デフォルトで温度プロットが可視化. 同時に, 結果を強調表示し, 所属する2枚のカードスタックをアクティブに設定.
   1. メインフォームをダブルクリックし,トップメニューの結果ボタンを選択. resultsButtonの設定ウィンドウの実行するコマンドの選択セクションで, 引数の結果を使用してメソッドhighlightTopMenuItemが実行されていることを確認. 計算が終了した後も同じコマンドを使用可能.
   2. simulateCommandsフォームをダブルクリックして, ツールバーを選択します. simulateToolbarの設定ウィンドウのツールバー項目セクションで, アイテム2を選択し, 編集ボタンをクリックします.
   3. カスタムツールバーアイテムの編集ダイアログボックスで, 実行するコマンドタブを選択します.
      1. フォームメソッドの下にあるhighlightTopMenuItemを選択し, 実行ボタンをクリックします. 引数フィールドに, 文字列の結果を入力引数として追加します.これにより,

         ユーザーはシュミレーションから結果に移動します.

      2. モデル > 結果の下にある温度(ht)を選択し, プロットボタンをクリックします. 引数の編集ボタンをクリックし, 引数の編集ダイアログボックスで, フォーム > メインの下のグラフィックスを選択して, OKをクリックします. OKをクリックして, カスタムツールバーの編集ダイアログボックスを閉じます.

計算ツールバーボタンのコマンドシーケンスが変更されました. 計算が終了すると, 結果が強調表示され, その2つのカードスタックがアクティブになります. 温度もグラフィックスウィンドウにプロットされます.

次に, アプリケーションを再テストします. このアプリのユーザーインターフェースは小さな画面とウエブブラウザー専用であるため, リボンのウエブブラウザーでテストを選択します.

アプリは, スマートフォン用のコンパクトレイアウト（詳細）と呼ばれるレイアウトテンプレートによって作成されたアプリにいくつかの小さな変更を加えた後, Firefox®ウエブでテストされます. ここでは, 画面サイズは375 x 812ピクセルに設定されています. これは, Apple iPhone XS のビューポートサイズです.

ほとんどのウエブブラウザーは, さまざまな画面サイズでウエブページを試すことをサポートしています. Chrome™を使用すると, 開発ツール (Ctrl+Shift+I) を開いて, 事前定義されたサイズの1つを選択できます. Firefox®を使用している場合は, レスポンシブデザインモード (Ctrl+Shift+M)を試して, 選択した画面サイズにアプリが適合することを確認できます.

COMSOL Server™にアクセスできる場合は, アプリをアップロードします. その後, タブレット, スマートフォン, またはその他の任意のデバイスのウェブブラウザーを使用して COMSOL Server™ にログインできます. アプリを起動すると, スマートフォン用レイアウト（詳細）テンプレートで作成したアプリのインターフェースが表示されます.

シミュレーションアプリは COMSOL Server™ にアップロードされ, スマートフォンのウエブブラウザーで実行されます.

おわりに

COMSOL Multiphysicsバージョン5.6以降で利用可能なレイアウトテンプレートを使用して, シミュレーションアプリを簡単に作成する方法をマスターしました. アプリケーションビルダーに含まれているツールのいずれかを使用してアプリを開発し続けることができるため, 選択したテンプレートの特定のデザインに限定されないことに注意してください.

Apple, iPhone, and Safari は, 米国およびその他の国で登録された Apple Inc. の商標です.

Microsoft, Microsoft Edge, Internet ExplorerとWindows は, Microsoft Corporation 米国およびその他の国における登録商標または商標です.

Chrome は Google Inc. の商標です.

Firefox は Mozilla Foundation の商標です.