--- title: "モバイルアプリのデザインテンプレート" date: "2020-07-28" categories: - "app-development" - "mobile-development" - "mobiletogether" - "tools" tags: - "app-design" - "cross-platform-app-development" - "mobile-development-tools" - "mobiletogether" description: Altova MobileTogetherでモバイルアプリケーションを開発する際に、デザインテンプレートを使用することで、開発速度と効率が向上します。 --- Status: #blog Tags: #app-design #cross-platform-app-development #mobile-development-tools #mobiletogether Categories: [mobile-development](/blog/ja/category/mobile-development.md) | [low-code+no-code](/blog/ja/category/low-codeno-code.md) # モバイルアプリのデザインテンプレート 以前の記事で、モバイルアプリのデザインを効率化し、さまざまなアプリの要件に対応できる柔軟な設計を実現するために、[ソフトウェア設計テンプレート](/blog/ja/2020/01/software-design-templates-in-mobile-development-projects.md)を活用する方法について解説しました。具体的には、実行時にユーザーの選択に基づいて、階層的なデータを複数のレベルで表示するように設計されたコントロールテンプレートの例を紹介しました。 弊社のサンプルアプリケーションは、開発者の皆様を支援するために、Altova社のRMAD（Rapid Mobile App Development：迅速なモバイルアプリケーション開発ツール）であるMobileTogetherを使用して構築されました [クロスプラットフォーム対応のアプリケーションを開発する](https://www.altova.com/ja/mobiletogether) そして、それらは、エンドユーザーに最高の体験を提供する、洗練された高性能なアプリケーションを実現します。 また、複数のコントロールを組み合わせて、クロスプラットフォームのモバイルアプリ用のコントロールテンプレートを作成できます。これは、個々の部品から構成される複雑なサブアセンブリのように、より大きな単位として機能します。これにより、モバイルアプリのデザインテンプレートが作成され、これらを簡単にどこにでも配置できるため、開発速度が向上し、一貫性を確保できます。 ![](/blog/images/Blog_MT_control_templates_1.jpg) MobileTogether Designerは、Altovaが提供するクロスプラットフォームのモバイル開発ツールで、ドラッグ＆ドロップによる視覚的なレイアウトツールと、関数型プログラミングの手法を組み合わせたものです。このツールには、様々な機能を説明するためのサンプルアプリケーションが含まれています。 「CompanySales」というアプリケーションは、注文データベースを検索し、架空の企業向けのリアルタイムなモバイル向け経営層向け販売レポートを生成します。このレポートには、全体の販売状況、製品別、地域別、または担当者別の販売状況が表示され、ユーザーが選択した期間のレポートと、過去の期間との比較が可能です。 以下に、2月15日のリアルタイム売上状況を表示する概要ページと、その日の製品別の売上内訳を表示する製品別売上ページの写真を示します。 [![MobileTogetherのサンプルアプリケーション「CompanySales」のいくつかのページ](/blog/images/designer-overview.png)](designer-overview.png) このアプリの各ページには、日付選択機能が搭載されており、ユーザーは過去の任意の日に移動して、過去の販売実績を確認することができます。 メインのデザイナーレイアウトウィンドウで確認すると、日付選択機能は、3つのボタンコントロールと1つの日付ピッカーコントロールを組み合わせることで実現されています [![複数の日付選択機能が組み合わさり、モバイルアプリのデザインテンプレートが作成されました](/blog/images/super-datepicker-1.png)](super-datepicker-1.png) 日付選択コントロールは、レポートの日付を表示し、ユーザーが過去の任意の日に変更できるようにします。左と右の矢印ボタンは、それぞれ1日前の日または1日後の日に移動し、「今日」ボタンをクリックすると、現在の日付が選択されます。 レポートの日付が現在の日付に設定されている場合、"今日"ボタンと右矢印ボタンは両方とも無効になります。 ### モバイルアプリ向けのUIデザインテンプレート まず、上記のコントロールが構築される前に、「ページ」ヘルパーウィンドウでコントロールテンプレートを追加します。新しいページやコントロールテンプレートは、左上にある緑色のプラスボタンをクリックすることで追加できます [![モバイルアプリにコントロールテンプレートを追加する](/blog/images/pages-helper-window.png)](pages-helper-window.png) あるいは、既存のコントロールを任意のページから選択し、右クリックメニューから選択することで、コントロールテンプレートを作成することもできます [![既存のコントロールを、モバイルアプリのデザインテンプレートに変換する](/blog/images/template-from-selection.png)](template-from-selection.png) 拡張された日付ピッカーでは、"今日"ボタン、矢印ボタン、および日付ピッカーコントロールが行う操作も、コントロールテンプレート内で定義されています。以下に、"今日"ボタンと左側の矢印ボタンで行われる操作を示します [![コントロールテンプレート内の「今日」ボタンに関連する操作](/blog/images/today-action.png)](today-action.png) [![コントロールテンプレート内で、左矢印ボタンが実行する操作](/blog/images/arrow-action.png)](arrow-action.png) 「今日」ボタンが、選択された日付が現在の日付である場合に有効にならないようにしたいと考えています。また、ユーザーが未来の日付に移動することを防ぎたいです。これらのボタンの有効/無効を切り替える設定は、「スタイルとプロパティ」のヘルプウィンドウで定義できます。以下に、「今日」ボタンの設定の一部の例を示します [![強化された日付ピッカーのデザインテンプレート内の「今日」ボタンのスタイルとプロパティ ](/blog/images/button-enable.png)](button-enable.png) 「今日」ボタンは、選択されたレポートの日付が現在の日付に設定されている場合、無効になります。また、ボタンがクリック可能かどうかを示すために、異なる色を使用しています。 色の定義はオプションです。CompanySalesアプリの開発において、すべてのデバイスで同じ色を表示することは必須要件でした。これは、企業のブランドイメージを統一することを目的としています。色の定義を空白のままにしておくと、MobileTogetherは自動的に各プラットフォーム（Android、iOS、Windows 10など）のデフォルトの色を使用します。 ### ページにコントロールテンプレートを追加する方法 この強化された日付ピッカーコントロールテンプレートは、アプリの「エグゼクティブセールスレポート」ページと、4つのサブページのうち3ページで使用されています。必要なページに、Pagesヘルパーウィンドウから強化された日付ピッカーをドラッグ＆ドロップするだけで、簡単に配置できます。これにより、テンプレートがプレースホルダーコントロール内に自動的にインスタンス化されるため、いくつかの手順を省略できます（以下に例を示します） [![モバイルアプリのアプリページレイアウトで使用されるデザインテンプレート](/blog/images/placeholder-control-1.png)](placeholder-control-1.png) ### モバイルアプリのデザインテンプレートにおける動作のカスタマイズ まだ一つ、考慮すべき点があります。ユーザーが新しいレポートの日付を選択した場合、アプリケーションが自動的に販売データベースを検索し、各ページに固有のレポートとグラフを表示できるようにしたいと考えています。現時点まで、拡張された日付選択機能で定義されている操作は、日付の選択のみを行っています。 コントロールテンプレートをさらに処理する方法は、以下の3つです。まず、コントロールテンプレート自体に定義されているアクションのみを実行する方法。次に、コントロールテンプレートに定義されているアクションをすべて上書きし、プレースホルダーに定義された新しいアクションのみを実行する方法。最後に、コントロールテンプレートのアクションと、プレースホルダーに定義された追加のアクションを組み合わせて実行する方法です。 弊社の販売アプリでは、3番目のオプションを使用しています。強化された日付選択機能により、ユーザーは日付を選択できます。また、各ページに表示されるプレースホルダーは、そのページに適したデータベースのクエリ実行やグラフの更新といった独自の機能を提供します。 各ページにおいて、テンプレートコントロールに対して、右クリックメニューからイベントのオーバーライド（上書き設定）を追加しました [![モバイルアプリのデザインテンプレートの動作をカスタマイズする](/blog/images/event-overrides.png)](event-overrides.png) これにより、「操作」ダイアログが開きます。以下に、「製品別売上」ページで利用可能な操作の一覧を示します。 [![](/blog/images/action-dialog-1.png)](action-dialog-1.png) 最初の処理は、特別な組み込みアクショングループである「テンプレートイベントコールバック」です。この「テンプレートイベントコールバック」を指定すると、拡張された日付ピッカーコントロールのテンプレートで定義されているすべての処理が最初に実行され、その後、プレースホルダーで定義されている追加の処理が実行されます。 上記の画像で、最後の操作グループを展開すると、「製品別売上レポート」を更新するための「再読み込み」操作が表示されます。最初の2つの「再読み込み」操作はデータベースへのクエリを実行し、最後の2つの「再読み込み」操作は、クエリの結果に基づいてグラフを再描画します。 ### ご自身で試してみてください 無料でご利用いただけるものをダウンロードできます [MobileTogether デザイナー](https://www.altova.com/ja/mobiletogether/download) そして、CompanySalesのサンプルアプリを開き、この販売レポート作成ツールで提供されているモバイルアプリのデザインテンプレートについて、より詳しく調べてみてください。または、 [モバイルアプリをダウンロードしてください](https://www.altova.com/ja/mobiletogether/download) そして、ご自身のモバイルデバイスでCompanySalesアプリをご利用いただけます。モバイルアプリにおけるデザインテンプレートのサポートは、MobileTogetherが提供する数多くの機能の一つであり、開発者がアプリケーションを構築する力を高めます [洗練されたネイティブアプリケーション](https://www.altova.com/ja/mobiletogether/app-development) 迅速かつ容易な、ローコードのアプローチを採用しています。