--- title: "モバイル開発プロジェクトにおけるソフトウェア設計テンプレート" date: "2020-01-21" categories: - "app-development" - "mobile" - "tools" tags: - "app-design" - "app-development" - "mobile-development" - "mobiletogether" description: MobileTogetherのソフトウェア設計テンプレートが、モバイルアプリ開発をどのように効率化するかを探ります。具体的には、デザインの再利用を促進し、特に動的なユーザーインターフェースの更新を簡素化することで、開発プロセスを改善します。 --- Status: #blog Tags: #app-design #app-development #mobile-development #mobiletogether Categories: [mobile-development](/blog/ja/category/mobile-development.md) | [low-code+no-code](/blog/ja/category/low-codeno-code.md) # モバイル開発プロジェクトにおけるソフトウェア設計テンプレート ソフトウェア設計テンプレートは、[モバイルアプリ開発を効率化します](https://www.altova.com/ja/mobiletogether) これは、繰り返し使用されるコンポーネントの実装を省略することで実現されます。また、設計テンプレートを作成することで、テンプレートの変更がプロジェクト全体に反映されるため、修正やアップグレードも容易になります。 MobileTogetherは、クロスプラットフォームのモバイルアプリケーションにおけるユーザーインターフェースの設計テンプレートをサポートしており、これにより設計の再利用が容易になり、様々なアプリケーションの要件に対応した、効率的で柔軟な機能構築が実現できます。 MobileTogetherにおけるコントロールテンプレートは、開発者がユーザーインターフェースのコントロールを定義し、グループ化するための設計要素です。これにより、コントロールを容易に再利用できます。コントロールテンプレートはパラメータをサポートしており、各テンプレートは実行時にパラメータの値に基づいてカスタマイズできます。 例を見てみましょう。 ![](/blog/images/MT_control_templates.jpg) MobileTogether Designerには、コントロールテンプレートの使用例を示すいくつかのサンプルプロジェクトが含まれています。ここでは、Cities4-DynamicSelectionというアプリケーションについて説明します。以下のスクリーンショットは、Androidスマートフォンで動作しているこのアプリケーションの一部の画面を示しています [![Androidスマートフォン上のアプリケーションにおける、ソフトウェア設計テンプレートの例](/blog/images/screenshot-landscape-2-1030x286.png)](screenshot-landscape-2.png) このアプリケーションは、階層的なデータを表示する際に起こりやすい課題を示しています。最終的に、このアプリケーションはユーザーに都市を選択させたいと考えています。より効率的にするために、都市の完全なリストを大陸ごとに整理し、コンボボックスで表示します。次に、選択された大陸内の国ごとにフィルタリングを行い、ラジオボタンのセットで表示します。そして、さらにその国の都市を別のラジオボタンのセットで表示します。 ラジオボタンは、横向きの表示の場合、水平方向に並んで表示されます（上記参照）。一方、縦向きの表示の場合、垂直方向に並んで表示されます [![ソフトウェアのデザインテンプレートは、モバイルデバイスの向きに合わせて自動的に調整されます](/blog/images/screenshot-portrait-2.png)](screenshot-portrait-2.png) もし、ユーザーが選択できる各組み合わせに対して、ラジオボタンを一つずつ手作業で作成する必要がある場合、このアプリケーションの開発は非常に手間がかかることになります。さらに、国名や都市名などのデータはXML形式のファイルに格納されており、ソースファイルを編集するだけでアプリケーションを簡単に更新できるようにしたいと考えています。 [![ソフトウェア設計テンプレートで使用するための、XMLファイルに含まれる階層構造データ ](/blog/images/cities-list.png)](cities-list.png) MobileTogether Designerでアプリケーションを開くと、メインのデザインウィンドウにページレイアウトが表示されます。 [![MobileTogetherアプリのデザインウィンドウにおける、ソフトウェア設計テンプレート用のプレースホルダー](/blog/images/page-design-1.png)](page-design-1.png) ページの上部にある最初のコントロールは、大陸を選択するためのコンボボックスです。その下に、プレースホルダーコントロールが埋め込まれた2つのテーブルがあります。実行時に、最初のテーブルとプレースホルダーが国の一覧を生成し、2番目のテーブルが都市の一覧を生成します。 MobileTogether Designerには、ヘルパーウィンドウが付属しており、どのアプリケーションにおいても、すべてのページ、サブページ、およびコントロールテンプレートの構造をツリー形式で表示します。この例では、各テンプレートが2つのパラメータを受け取り、実行時にプレースホルダーによってこれらのパラメータが渡されます。 [![Pagesヘルパーウィンドウには、MobileTogetherで使用可能なアプリケーションのコンポーネントが表示されます](/blog/images/pages-window-1.png)](pages-window-1.png) コントロールテンプレートを選択すると、そのテンプレートに含まれる要素がメインのデザイン領域に表示されます。 [![MobileTogetherにおけるコントロールテンプレートの表示](/blog/images/template-design-view.png)](template-design-view.png) 垂直方向のバージョンでは、テンプレートは動的な行を持つテーブルを使用し、水平方向のバージョンでは、動的な列を持つテーブルを使用します。いずれの場合も、テンプレートによって生成されるテーブルは、最上部のページで定義された親テーブルの単一のセル内に配置されます。これにより、ラジオボタンが配置されている列に関わらず、チェックボックスが垂直方向に中央に配置されます。行数に関係なく、常に中央に配置されます。 プレースホルダーは、ページ上のコントロールテンプレートの位置を定義します。プレースホルダーに対応する「スタイルとプロパティ」ヘルパーウィンドウでは、どのコントロールテンプレートが使用されているか、およびそのパラメータの値が表示されます。国の一覧を表示するためのプレースホルダーでは、これらのプロパティが両方ともXQuery式で定義されています [![ソフトウェア設計テンプレートにおけるプレースホルダーの特性](/blog/images/control-template-properties.png)](control-template-properties.png) たとえ画面の一部しか表示されていなくても、表示されるコントロールテンプレートは、実行時にデバイスの向きによって決定されることがわかります。 MobileTogetherシミュレーターを使用することで、ソフトウェアの設計テンプレートを動作中に確認し、プレースホルダーやコントロールテンプレートが実際にどのように機能するかを観察することができます。以下のスクリーンショットでは、プレビューデバイスとしてiPhoneを横向きで使用しています。このアプリケーションには、デバイス固有の機能やOS固有の機能が含まれていないため、プレビューデバイスの種類は特に重要ではありません。 アプリでは、大陸、国、都市の選択肢はあらかじめ設定されていません。そのため、プログラムの起動時に表示されるのは、ページの上部と、大陸を選択するための空のコンボボックスのみです [![MobileTogetherシミュレーターで表示されるアプリケーションの画面](/blog/images/simulation-1.png)](simulation-1.png) 「メッセージ」ウィンドウには、大陸を選択する際に処理された操作が一覧表示されます。処理された操作は、以下のように緑色で強調表示されています [![シミュレーター上でアプリケーションを操作する](/blog/images/simulation-1.5.png)](simulation-1.5.png) [![メッセージウィンドウには、コンボボックスから大陸が選択されたことを示す情報が表示されます](/blog/images/sim-message-1.png)](sim-message-1.png) シミュレーションウィンドウには、現在、ヨーロッパの国名の一覧が表示されていますが、都市名は表示されていません [![選択された大陸に含まれる国々を、ソフトウェア設計テンプレートによって実行時に生成します](/blog/images/simulation-2.png)](simulation-2.png) この時点では、アプリはユーザーが国を選択するのを待機しています。進む代わりに、シミュレーター内でXQueryエディターを開き、コントロールテンプレートに渡されたパラメータを評価することができます。具体的には、スタイルとプロパティのウィンドウからテンプレートパラメータの式をコピーし、XQueryウィンドウに貼り付けます。この式を評価すると、ヨーロッパの国名リストとソート状態を含む配列が返されます [![XQuery評価ツールを使用すると、コントロールテンプレートに渡される正確なパラメータを確認することができます ](/blog/images/sim-evaluate-1.png)](sim-evaluate-1.png) しかし、なぜそのアプリのシミュレーション画面に、都市の一覧が表示されないのでしょうか？ セカンドのプレースホルダーから渡されるパラメータ式を検証してみましょう [![2つ目のコントロールテンプレートに渡されるパラメータ ](/blog/images/sim-evaluate-2.png)](sim-evaluate-2.png) その処理は、都市名のリストが空の状態で行われました。都市名を選択するためのラジオボタンが、動的な列を持つテーブル内に配置されているため、結果として列が一切表示されませんでした。 ソートを選択するためのチェックボックスは、動的な列には配置されていませんが、また表示もされていません。このチェックボックスの表示/非表示は、「$PERSISTENT/Root/@Country が空でない」という条件で定義されており、つまり、ユーザーが都市を選択するまでは、チェックボックスとそれに付随するテキストラベルは表示されません。 要するに、Cities4-DynamicSelectionの例は、複数のコントロールを組み合わせてカスタマイズされたソフトウェア設計テンプレートを作成し、それをモバイルアプリのデザインに組み込むことで、ユーザーの選択やその他の外部条件に基づいて正しい結果を表示する、洗練されたソリューションを構築する方法を示しています。このデモアプリとソースデータファイルは、MobileTogether Designerに同梱されていますので、上記の手順に従うことも、さらに深く探求することも可能です。 MobileTogether Designerは、無料で利用できるツールで、単一のデザインから様々なプラットフォームに対応したモバイルアプリケーションを[迅速に開発](https://www.altova.com/ja/mobiletogether/app-development#designer)できます。 [動画デモ](https://www.altova.com/ja/mobiletogether/demos)をご覧になり、MobileTogetherのユーザーが日々開発しているアプリの種類をご確認ください。そして、[インストーラーをダウンロード](https://www.altova.com/ja/mobiletogether/download)して、ソフトウェアのデザインテンプレートをすぐに使い始めてください！