モバイル開発プロジェクトにおけるソフトウェア設計テンプレート

ソフトウェア設計テンプレートは、モバイルアプリ開発を効率化しますこれは、繰り返し使用されるコンポーネントの実装を省略することで実現されます。また、設計テンプレートを作成することで、テンプレートの変更がプロジェクト全体に反映されるため、修正やアップグレードも容易になります。

MobileTogetherは、クロスプラットフォームのモバイルアプリケーションにおけるユーザーインターフェースの設計テンプレートをサポートしており、これにより設計の再利用が容易になり、様々なアプリケーションの要件に対応した、効率的で柔軟な機能構築が実現できます。

MobileTogetherにおけるコントロールテンプレートは、開発者がユーザーインターフェースのコントロールを定義し、グループ化するための設計要素です。これにより、コントロールを容易に再利用できます。コントロールテンプレートはパラメータをサポートしており、各テンプレートは実行時にパラメータの値に基づいてカスタマイズできます。

例を見てみましょう。

MobileTogether Designerには、コントロールテンプレートの使用例を示すいくつかのサンプルプロジェクトが含まれています。ここでは、Cities4-DynamicSelectionというアプリケーションについて説明します。以下のスクリーンショットは、Androidスマートフォンで動作しているこのアプリケーションの一部の画面を示しています

このアプリケーションは、階層的なデータを表示する際に起こりやすい課題を示しています。最終的に、このアプリケーションはユーザーに都市を選択させたいと考えています。より効率的にするために、都市の完全なリストを大陸ごとに整理し、コンボボックスで表示します。次に、選択された大陸内の国ごとにフィルタリングを行い、ラジオボタンのセットで表示します。そして、さらにその国の都市を別のラジオボタンのセットで表示します。

ラジオボタンは、横向きの表示の場合、水平方向に並んで表示されます（上記参照）。一方、縦向きの表示の場合、垂直方向に並んで表示されます

もし、ユーザーが選択できる各組み合わせに対して、ラジオボタンを一つずつ手作業で作成する必要がある場合、このアプリケーションの開発は非常に手間がかかることになります。さらに、国名や都市名などのデータはXML形式のファイルに格納されており、ソースファイルを編集するだけでアプリケーションを簡単に更新できるようにしたいと考えています。

MobileTogether Designerでアプリケーションを開くと、メインのデザインウィンドウにページレイアウトが表示されます。

ページの上部にある最初のコントロールは、大陸を選択するためのコンボボックスです。その下に、プレースホルダーコントロールが埋め込まれた2つのテーブルがあります。実行時に、最初のテーブルとプレースホルダーが国の一覧を生成し、2番目のテーブルが都市の一覧を生成します。

MobileTogether Designerには、ヘルパーウィンドウが付属しており、どのアプリケーションにおいても、すべてのページ、サブページ、およびコントロールテンプレートの構造をツリー形式で表示します。この例では、各テンプレートが2つのパラメータを受け取り、実行時にプレースホルダーによってこれらのパラメータが渡されます。

コントロールテンプレートを選択すると、そのテンプレートに含まれる要素がメインのデザイン領域に表示されます。

垂直方向のバージョンでは、テンプレートは動的な行を持つテーブルを使用し、水平方向のバージョンでは、動的な列を持つテーブルを使用します。いずれの場合も、テンプレートによって生成されるテーブルは、最上部のページで定義された親テーブルの単一のセル内に配置されます。これにより、ラジオボタンが配置されている列に関わらず、チェックボックスが垂直方向に中央に配置されます。行数に関係なく、常に中央に配置されます。

プレースホルダーは、ページ上のコントロールテンプレートの位置を定義します。プレースホルダーに対応する「スタイルとプロパティ」ヘルパーウィンドウでは、どのコントロールテンプレートが使用されているか、およびそのパラメータの値が表示されます。国の一覧を表示するためのプレースホルダーでは、これらのプロパティが両方ともXQuery式で定義されています

たとえ画面の一部しか表示されていなくても、表示されるコントロールテンプレートは、実行時にデバイスの向きによって決定されることがわかります。

MobileTogetherシミュレーターを使用することで、ソフトウェアの設計テンプレートを動作中に確認し、プレースホルダーやコントロールテンプレートが実際にどのように機能するかを観察することができます。以下のスクリーンショットでは、プレビューデバイスとしてiPhoneを横向きで使用しています。このアプリケーションには、デバイス固有の機能やOS固有の機能が含まれていないため、プレビューデバイスの種類は特に重要ではありません。

アプリでは、大陸、国、都市の選択肢はあらかじめ設定されていません。そのため、プログラムの起動時に表示されるのは、ページの上部と、大陸を選択するための空のコンボボックスのみです

「メッセージ」ウィンドウには、大陸を選択する際に処理された操作が一覧表示されます。処理された操作は、以下のように緑色で強調表示されています

シミュレーションウィンドウには、現在、ヨーロッパの国名の一覧が表示されていますが、都市名は表示されていません

この時点では、アプリはユーザーが国を選択するのを待機しています。進む代わりに、シミュレーター内でXQueryエディターを開き、コントロールテンプレートに渡されたパラメータを評価することができます。具体的には、スタイルとプロパティのウィンドウからテンプレートパラメータの式をコピーし、XQueryウィンドウに貼り付けます。この式を評価すると、ヨーロッパの国名リストとソート状態を含む配列が返されます

しかし、なぜそのアプリのシミュレーション画面に、都市の一覧が表示されないのでしょうか？セカンドのプレースホルダーから渡されるパラメータ式を検証してみましょう

その処理は、都市名のリストが空の状態で行われました。都市名を選択するためのラジオボタンが、動的な列を持つテーブル内に配置されているため、結果として列が一切表示されませんでした。

ソートを選択するためのチェックボックスは、動的な列には配置されていませんが、また表示もされていません。このチェックボックスの表示/非表示は、「$PERSISTENT/Root/@Country が空でない」という条件で定義されており、つまり、ユーザーが都市を選択するまでは、チェックボックスとそれに付随するテキストラベルは表示されません。

要するに、Cities4-DynamicSelectionの例は、複数のコントロールを組み合わせてカスタマイズされたソフトウェア設計テンプレートを作成し、それをモバイルアプリのデザインに組み込むことで、ユーザーの選択やその他の外部条件に基づいて正しい結果を表示する、洗練されたソリューションを構築する方法を示しています。このデモアプリとソースデータファイルは、MobileTogether Designerに同梱されていますので、上記の手順に従うことも、さらに深く探求することも可能です。

MobileTogether Designerは、無料で利用できるツールで、単一のデザインから様々なプラットフォームに対応したモバイルアプリケーションを迅速に開発できます。動画デモをご覧になり、MobileTogetherのユーザーが日々開発しているアプリの種類をご確認ください。そして、インストーラーをダウンロードして、ソフトウェアのデザインテンプレートをすぐに使い始めてください！