Metropolis UI アプリケーションの開発
主要なアプリケーション種別 への移動
Metropolis UI は、Microsoft® Windows 8 ユーザー インターフェイスのルック アンド フィールに準拠したアプリケーションを作成する一連の機能です。 RAD Studio を使用すると、Metropolis UI アプリケーションを、VCL または FireMonkey を使用して作成することができます。 Windows 8(またはそれ以前のバージョンの Windows)に RAD Studio をインストールして IDE を実行することもできます。 同様に、Metropolis UI アプリケーションを Windows 8(またはそれ以前の Windows)で動作させると、アプリケーションは Windows 8 のルック アンド フィールになります。
目次
タッチおよびジェスチャ用に設計された Metropolis UI
Windows 8 アプリケーションは、タッチ画面で操作できるように設計することができます。 また、Windows 8 と同様に、Metropolis UI は、タッチ対応でない画面の場合には通常のマウスで操作することもできます。
Metropolis UI は、モバイル プラットフォームをサポートしておらず、サポートしているのは、デスクトップ プラットフォームのみです。また、RAD Studio は、Windows RT をターゲット プラットフォームとしてはサポートしていません。
たとえば、Metropolis UI アプリケーション テンプレートでは、タッチで有効になるポップアップ AppBar をサポートしています。
RAD Studio Metropolis UI アプリケーションでは、以下のジェスチャをサポートしています。
- RAD Studio のこれまでのバージョンでサポートされている標準ジェスチャ
- 「列挙型 TStandardGesture」を参照してください。
- 対話型ジェスチャ:
RAD Studio Metropolis UI アプリケーションでは、カスタム ジェスチャはまだサポートされていません。
Windows 8 UI ガイドラインに基づいた Metropolis UI アプリケーションの設計
Metropolis UI アプリケーションの開発でまず重要になるのは、Windows 8 ユーザー インターフェイスについて学び、Windows 8 のビジュアル標準に従うようにアプリケーションを設計することです(この標準はタッチおよびジェスチャを対象にしていますが、それに限りません)。
デスクトップ画面のサイズと比較すると、大半の携帯型デバイスのタッチ パネル画面は小さいため、モバイル デバイス向けのアプリケーションは小さいタッチ画面用に設計する必要があります。 さらに、指でオブジェクトを操作するためには、コントロールが指先の大きさ以上でなければなりません。これらの点を考慮すると、既存のアプリケーションを Metropolis UI 用に変換する場合は、おそらくフォームの構成を設計し直す必要があるでしょう。
たとえば、Windows 8 コントロールは通常、デスクトップ コントロールよりも大きく、標準的なデスクトップ アプリケーションの場合より周りの "余白" が広くなっています。
Windows 8 UI 標準の詳細については、「Microsoft の Windows 8 アプリケーション ガイドライン」を参照してください。
FireMonkey フレームワークによる Metropolis UI のサポート
VCL も FireMonkey も Metropolis UI のウィザードやテンプレートをサポートしています。VCL コントロールは自動的に Windows 8 スタイルで描画されますが、それ以外の点では変わりはありません。一方、FireMonkey には、より機能豊富な開発環境が用意されているほか、VCL にはない新しい FireMonkey Metropolis UI コントロールが追加されています。
たとえば、FireMonkey Metropolis UI アプリケーションに TAniIndicator を追加し TAniIndicator に Metropolis UI スタイルを適用した場合、アプリケーションでは Windows 8 の進行状況不定リングと呼ばれる、アニメーション方式の特徴的な進行状況バーが使用されます。詳細については、「アニメーション方式の進行状況不定リング」を参照してください。
Metropolis UI アプリケーション ウィザード
RAD Studio には、Metropolis UI アプリケーションおよびフォームを作成するための以下の定義済みテンプレートが用意されています。
- [VCL Metropolis UI アプリケーション] - Delphi または C++Builder
- [FireMonkey Metropolis UI アプリケーション] - Delphi または C++Builder
Metropolis UI アプリケーション テンプレート
Metropolis UI アプリケーションの作成時には、Metropolis UI ウィザードで使用できるいくつかのテンプレートやレイアウトから選択することができます。たとえば、以下のものが使用可能です。
- [新しい Metropolis UI アプリケーション]テンプレート - 全画面表示、定義済みレイアウトなし
- [グリッド Metropolis UI アプリケーション]テンプレート - グリッド状にレイアウトされた 2 つのフォームから成るアプリケーション、横スクロールあり
- [分割ペイン Metropolis UI アプリケーション]テンプレート - 分割レイアウト(複数のグループおよび項目で構成)と二次ウィンドウ(リスト ボックスおよび関連するスクロール可能なテキスト領域で構成)を持つ、2 つのフォームから成るアプリケーション
- Metropolis UI アプリケーションおよびフォームの種類の詳細(画像を含む)については、「Metropolis UI アプリケーション テンプレート」を参照してください。
Metropolis UI アプリケーション スタイル
作成する Metropolis UI アプリケーションに、設計済みの Metropolis UI スタイルを適用することができます。RAD Studio には 4 つの Metropolis UI スタイルが用意されており、それらは通常、以下の場所にあります。
- FireMonkey Metropolis UI スタイル:
C:\Program Files (x86)\Embarcadero\Studio\21.0\Redist\styles\Fmx
- VCL Metropolis UI スタイル:
C:\Program Files (x86)\Embarcadero\Studio\21.0\Redist\styles\vcl
RAD Studio で使用可能な 4 つの Metropolis UI スタイルは以下のとおりです。
- MetropolisUIBlack
- MetropolisUIBlue
- MetropolisUIDark
- MetropolisUIGreen
- 詳細については、以下のトピックを参照してください。
FireMonkey Metropolis UI コントロール
FireMonkey は拡張され、カスタム Metropolis UI コントロールがいくつか実装されています。
さらに、独自の Windows 8 コントロールを実装することもできます。
埋め込みグリフ ボタン
以下のいくつかの FireMonkey Metropolis UI ボタンには、特定の目的で考案されたグリフが埋め込まれています。
ヒント: これらのボタン スタイルのいずれかを適用するには、フォーム デザイナで[項目の追加] コンテキスト メニュー コマンドを使用するか、オブジェクト インスペクタ で StyleLookup プロパティを使用します。
詳細については、「組み込みグリフを使った Metropolis UI 編集ボタンの作成」を参照してください。
アニメーション方式の進行状況不定リング
FireMonkey Metropolis UI アプリケーションでは、Windows 8 の特徴的な進行状況インジケータ(進行状況不定リング)を有効にすることができます。進行状況不定リングは、アニメーション表示される一組のドットが中心点の周りをぐるぐる回り、その回転速度が増減し、表示されなくなったり再び表示されたりするものです。
- RAD Studio での進行状況不定リングの使用方法については、「アニメーション方式の進行状況不定リングの作成」を参照してください。
- Microsoft からの詳しい情報については、『クイック スタート: プログレス コントロールの追加 (JavaScript と HTML を使った Metro スタイル アプリ)』を参照してください。
TMetropolisUIListBoxItem
FireMonkey は拡張され、このスタイル設定可能なコントロールをサポートするようになりました。Metropolis UI ウィザードの 1 つを使って Metropolis UI アプリケーションを作成する場合は、まず TListBox を作成し、次に TMetropolisUIListBoxItem を追加します。TListBox を TMetropolisUIListBoxItem の Windows 8 コントロールとしての必要なサイズに合わせるために、通常はサイズ変更が必要です。
- 詳細については、「Metropolis UI TMetropolisUIListBoxItem の作成」を参照してください。
AppBar
Metropolis UI アプリケーションは Windows 8 標準に従っており、アプリケーション ウィンドウの上部で永続的なメニュー バーを使用しません。その代わりに、AppBar というタッチ コントロールを使用します。
- 詳細については、「Metropolis UI アプリケーション バーの作成」を参照してください。
ツールチップ
Metropolis UI スタイル ツールチップは、マウスをコントロールの上に置いたりタッチ デバイスでコントロールをタッチしたときにヘルプのような情報を表示するポップアップ ウィンドウです。
- 詳細については、「Metropolis UI ツールチップの作成」を参照してください。
コンボボックス
TComboBox は、どの Metropolis UI スタイルと関連付けても、Metropolis UI コントロールとして機能します。
- 詳細については、「Metropolis UI コンボ ボックスの作成」を参照してください。
フライアウト
Metropolis UI スタイルのフライアウトは、一時的に表示される軽量なポップアップ ウィンドウです。フライアウトは、その外の領域をクリックすることにより閉じられます。
- 詳細については、「Metropolis UI フライアウトの作成」を参照してください。
VCL Metropolis UI ボタンのアイコン
RAD Studio には、アイコンとイメージのライブラリが含まれており、VCL Metropolis UI アプリケーションで使用することができます。ライブラリは基本的に次の場所にあります:
C:\Users\Public\Documents\Embarcadero\Studio\21.0\Styles\VCLMetropolisIconLibrary
Microsoft の Windows 8 アプリケーション ガイドライン
Windows 8 ユーザー インターフェイスは、体系化された複雑な一連のインターフェイス ガイドラインに基づいており、RAD Studio の定義済みテンプレートもこの Windows 8 ガイドラインに従っています。
Metropolis UI アプリケーションの開発を始める際には、Windows 8 アプリケーション設計についての MSDN ページにも説明されているように、まず、コンテンツを整理して直観的なナビゲーションを強化しなければなりません。あらかじめ設定されているグリッド ビューや分割ペインのレイアウトを使って、コンテンツを階層レイアウトで配置することも、フラット レイアウトで配置することもできます。
Windows 8 アプリケーション開発の詳細については、以下の Windows 8 ガイドライン ページを参照してください。
- Windows 8 アプリケーション開発: http://msdn.microsoft.com/en-US/windows/apps
- Windows 8 UI デザイン ガイドライン: http://msdn.microsoft.com/library/windows/apps/hh779072
- 『タッチ操作の設計 (Metro スタイル アプリ)』:https://msdn.microsoft.com/en-us/windows/uwp/input-and-devices/touch-interactions
- Microsoft の Windows 8 アプリケーション開発のロードマップ: http://msdn.microsoft.com/library/windows/apps/br211386
- Windows ストアでのアプリケーションの販売: http://msdn.microsoft.com/library/windows/apps/br230836
関連トピック
- Metropolis UI ウィザード:
- Metropolis UI フォント(図解入り)
- Metropolis UI アプリケーションでのジェスチャ サポート
- FireMonkey でのタッチ ターゲットのサポート
- StyleLookup による Metropolis UI コントロールのサポート(FireMonkey)
- FireMonkey Metropolis UI コントロール
- FireMonkey スタイルの Metropolis UI アプリケーションへの適用