多層構造のスタイルシートを用いた、柔軟なアプリケーションUIデザイン

クロスプラットフォームのモバイル開発フレームワークであるMobileTogetherのようなツールを使用することは、非常に優れた選択肢ですネイティブアプリの開発, なぜなら、デザイン環境は、各オペレーティングシステムのネイティブな外観を利用して、アプリケーションのUIを適切に表示するように設計されているからです。そのため、開発者は一つのデザインを作成するだけで済みます。

これにより、アプリ開発者は、あらゆるユーザー向けの、高度でデータ 중심적인アプリを非常に迅速に開発できるようになります。この作業を支援するため、MobileTogetherは、RMAD（Rapid Mobile Application Development）のアプローチを採用しており、さらに、美しいユーザーエクスペリエンス（UX）をデザインするための柔軟なオプションも提供しています。特に、この最後の点について、マルチレベルのスタイルシートを用意しており、これにより、アプリのUIデザインのさまざまなレベルで、わずかな操作でスタイルをカスタマイズし、静的にまたは動的に適用することができます。

美しいユーザーインターフェースをデザインする

最初に導入されたのは、...においてです MobileTogether バージョン 3.0, マルチレベルのスタイルシートを使用することで、アプリケーション開発者は、プロジェクト全体、ページ、テーブル、コントロールといった様々なレベルで適用できるグローバルなスタイルを定義できます。これにより、アプリケーション開発プロジェクト全体で、複数のレベルで利用できるスタイルを一元的に管理することが可能になります。

スタイルをカスタマイズする必要があるのはなぜでしょうか？まず、これはオプションであることを強調しておきます。MobileTogetherは、各オペレーティングシステム（iOS、Android、Windowsなど）に対して、デフォルトのスタイルやボタンのデザインなどを自動的に適用するため、変更なしで、シンプルで機能的なユーザーインターフェースを構築できます。しかし、企業内のデザインガイドラインへの準拠、特定の機能の実現、または伝統的なデザイン表現など、場合によってはカスタムスタイルが必要になることがあります。MobileTogetherの新しい多層構造のスタイルシートは、そのようなニーズに対応し、より簡単かつ迅速なカスタマイズを可能にするように設計されています。

まず、プロジェクトメニューから「スタイルシート」ダイアログを開きます。これにより、2種類のスタイルシートを作成できます。それは「プロジェクト用」と「ユーザー定義」のスタイルシートです。

プロジェクトのスタイルシートでは、プロジェクト全体のカスタマイズを定義します。ここで定義したスタイルは、プロジェクト全体に自動的に適用されます。これにより、すべてのボタンのデザイン、テキスト要素のフォントサイズ、またはプロジェクト全体の色などを一括して変更したい場合に便利です。

2番目のタイプは、ユーザーが作成したスタイルシートです。これらのスタイルシートは開発者によって名前が付けられており、必要に応じて個々のページ、テーブル、コントロールに適用できます。つまり、これらのスタイルはプロジェクト全体に適用されるわけではありません。以下に示すスクリーンショットでは、私が「MyStyles」という名前で作成したスタイルシートがあり、ボタン、グラフ、ラベルに対していくつかのスタイルを定義しています。

スタイルシートのダイアログボックスの右側のペインでスタイルを定義する際、静的なプロパティ値を指定するか、または、プロパティ値に評価されるXPath式を入力することができます。動的な設定の例としては、エンドユーザーのモバイルデバイスの画面幅や、ユーザーの好みなど、特定の条件に基づいてプロパティ値を変更することです。例えば、アプリ内の設定ページでユーザーがフォントサイズを調整できるようにし、そのフォントサイズをアプリ内のすべてのテキスト要素に適用することができます。

以下に示すMyStylesのスタイルシートでは、XPathを使用して、グラフの高さと幅を動的に調整しています。これにより、ユーザーが現在使用しているデバイスに最適な表示を実現しています。

これらのユーザーが作成したスタイルシートは、必要に応じていくつでも定義できます。これにより、さまざまな要素の表示形式をカスタマイズするためのオプションを提供できます。

アプリケーション開発中に、デザイン要素にユーザーが作成したスタイルシートを適用するには、スタイルとプロパティのウィンドウでスタイルシートの名前を選択するだけです。

スタイルシートの選択をXPathを使って動的に指定することも可能です。例えば、現在のモバイルデバイスの種類に応じてスタイルシートを選択することができます。XPath式を使ってユーザーが作成したスタイルシートを選択する大きな利点は、その選択を動的な環境条件に基づいて行うことができる点です。例えば、iOSデバイスには特定のスタイルシートを、それ以外のデバイスには別のスタイルシートを使用したい場合、以下のXPath式を使用できます：if ($MT_iOS=true()) then 'iOSStyleSheet' else 'GeneralStyleSheet'。

ユーザーが作成したスタイルシートを特定のページや要素に適用すると、プロジェクト全体のスタイルシートに定義されている対応する値が上書きされます。これにより、全体的な調整だけでなく、細かな調整も可能です。

マルチレベルのスタイルシートを使用することで、大幅な時間短縮が可能になり、あらゆるプラットフォームのアプリケーションの外観をカスタマイズするための、他に類を見ない柔軟性を提供します。例えば、冒頭で述べたように、iOS、Android、Windowsのすべてのアプリケーションのボタンを同じように表示したい場合（つまり、それぞれのプラットフォームの標準的なボタンのデザインを使用しない場合）、以前は個別に設定する必要がありましたが、現在はプロジェクト全体（または必要に応じて他のレベル）で一度設定するだけで済みます。

この機能を試すには、無料で提供されているMobileTogether Designerを使ってアプリケーションを作成してみてください。（アプリケーション作成はこちら）