Blend for Visual Studio 2013 を使用した Windows ストア アプリのデザイン

  • [アーティクル]

Blend for Visual Studio は、Visual Studio 2013 に付属するデザイン ツール集です。これを使用すると、JavaScript、VB、C#、または C++ の Windows ストア アプリを視覚的に作成できます。

Blend は、Visual Studio をインストールすると一緒にインストールされます。Blend を見つけるには、[検索] ボックスに「Blend」と入力します。

Visual Studio 内から Blend でプロジェクトを開くこともできます。Visual Studio でプロジェクトを開いたら、次のいずれかの操作を行います。

  • [表示] メニューの [Blend で開く] をクリックします。

  • ソリューション エクスプローラーでプロジェクト ファイルを右クリックし、[Blend で開く] をクリックします。

    Visual Studio で Blend コマンドを開く

JavaScript による Windows ストア アプリの場合、Blend に含まれる HTML5 および CSS3 用ツール群を使用して、CSS3 アニメーションを手早く作成することや、スタイルの定義と管理、HTML と CSS のデバッグなどを行うことができます。詳細については、後半の「Windows ストア アプリのデザイン (HTML)」を参照してください。

Blend で初めて HTML Windows ストア アプリを作成する場合は、「Blend を使用した初めての Windows ストア アプリの作成、パート 1: マスター ページ (HTML と JavaScript)」を参照してください。

VB、C#、または C++ による Windows ストア アプリの場合、Blend に含まれる XAML 用ツール群を使用して、コントロールにスタイルを手早く適用することや、テンプレートの作成と定義、サンプル データのバインドなどを便利に行うことができます。詳細については、後半の「Windows ストア アプリのデザイン (XAML)」を参照してください。

Blend で初めて HTML Windows ストア アプリを作成する場合は、「Blend を使用した初めての Windows ストア アプリの作成、パート 1: マスター ページ (XAML と C#)」を参照してください。

Blend の新着情報について、詳細は「HTML Developers in Blend for Visual Studio 2013 の新着情報」および「Windows ストア XAML アプリ用 Visual Studio 2013 Preview の新着情報 」(Visual Studio ブログ) を参照してください。

Visual Studio での Blend の使用

Visual Studio には、開発者ライセンス管理ツール、マニフェスト デザイナー、および、Windows ストアへのアプリ提出に使用するコーディング ツールやパッケージ化ツールなど、Windows ストア アプリの開発に欠かせないツール群が含まれています。

Blend を Visual Studio と組み合わせて使用すると、Blend の強力な HTML および XAML デザイン ツールによって、開発するアプリの外観をいっそう手早く簡単にカスタマイズできます。開発者は、コードの構文を考えることに労力を費やすのではなく、アプリ全体の構造、レイアウト、データ ビュー、外観と操作などをゼロからビジュアルに構築する作業に専念できます。

Blend を Visual Studio と組み合わせて使用する場合に推奨されるワークフローやベスト プラクティスなど、詳細については、「Visual Studio との間で切り替えを行う」を参照してください。

Visual Studio で作成した Windows アプリ プロジェクトは、Blend で開くことができます。同じように、Blend で作成した Windows ストア アプリを Visual Studio で開くこともできます。

開発者は、Blend と Visual Studio の間を気軽に切り替えながら 1 つのプロジェクトの作業を進めることができます。Visual Studio から Blend に移るときは、ソリューション エクスプローラーで、プロジェクトを右クリックし、[Blend で開く] をクリックします。Blend から Visual Studio に移るときは、[プロジェクト] パネルで、プロジェクトを右クリックし、[Visual Studio で編集] をクリックします。

ヒント

プロジェクト ファイルは、同じコンピューター上の Blend と Visual Studio で同時に開いておくことができます。一方のツールでファイルに変更を加えて保存し、他方のツールに切り替えると、プロジェクトの最新バージョンを表示するためにファイルを再読み込みするかどうかを確認するメッセージが表示されます。

Windows ストア アプリのデザイン (JavaScript および HTML)

Blend では、内蔵された HTML プロジェクト テンプレートのいずれかを使用して Windows ストア アプリを新規作成することも、Visual Studio で作成した既存の Windows ストア アプリを開くこともできます。HTML5、CSS3、JavaScript でビルドされた Windows ストア アプリは、すべてのネイティブ Windows アプリケーションと同じように、基礎となるプラットフォームに直接アクセスすることも、他のアプリケーションと情報を共有することもできます。

アプリの外観については、次の機能を備えた強力な HTML5 および CSS3 デザイン ツール群を使用して、手早く変更を加えることができます。

  • HTML 要素の作成および修正   [アセット] パネルから、HTML 要素や Windows アプリ コントロールをドラッグ アンド ドロップでアートボードに配置してから、UI 上で直接に階層関係を変更したり、プロパティを設定したり、スタイルを適用したりできます。「項目テンプレートを作成してスタイルを設定する」を参照してください。

  • 実行時の状態の確認   対話モードを使用して、通常は実行時にしか知ることができないアプリの状態を調べ、その状態でアプリに変更を加えることができます。「対話モードを使用する」を参照してください。

  • デザイン時データの表示   開発する Windows ストア アプリにデータをバインドして表示し、実行時のデータの見え方を簡単に修正できます。「ムービー データにバインドする」を参照してください。

  • カスタム フォントの埋め込み   フォント ファミリ マネージャーを使用して、開発する Windows ストア アプリにカスタム フォントを埋め込むことができます。以下を参照してください。カスタム フォントの埋め込み

  • CSS3 アニメーションの作成   内蔵のキーフレーム アニメーション タイムラインを使用して、CSS3 アニメーションを作成および編集できます。

  • スタイルの定義および管理   [スタイル ルール] パネルで CSS スタイルを手早く作成した後、[CSS プロパティ] パネルで、スタイル定義を適用したり、任意の要素に関する CSS カスケード ([優勢なプロパティ] 仮想ルール) を参照したり、個々の要素に関する CSS プロパティ値が Windows 8.1 でどのように計算されるか ([計算値] 仮想ルール) を調べたりできます。「CSS スタイル ルールを定義する」を参照してください。

  • HTML および CSS のデバッグ   Blend 上で直接、ビジュアルに HTML と CSS のデバッグを実行し、[結果] パネルに表示されるエラーの原因を特定して解決できます。

Blend において JavaScript で構築された Windows ストア アプリをデザインするための新着情報について、詳細は「Visual Studio ブログ」を参照してください。

Windows ストア アプリのデザイン (VB/C#/C++ および XAML)

Blend では、内蔵された XAML プロジェクト テンプレートのいずれかを使用して Windows ストア アプリを新規作成することも、Visual Studio で作成した既存の Windows ストア アプリを開くこともできます。XAML および VB、C#、または C++ でビルドされた Windows ストア アプリは、すべてのネイティブ Windows アプリケーションと同じように、基礎となるプラットフォームに直接アクセスすることも、他のアプリケーションと情報を共有することもできます。

アプリの外観については、次の機能を備えた強力な XAML デザイン ツール群を使用して、手早く変更を加えることができます。

  • カスタム レイアウトのデザイン   テンプレート、ビルトイン コントロール、ルーラー、ガイド、スナップのサポートを含む強力なレイアウト ツールを使用して、Windows ストア アプリ用のカスタム レイアウトをデザインできます。「データ ビューのスタイルを設定する」を参照してください。

  • コントロールの作成およびスタイル指定   コントロールをドラッグ アンド ドロップでデザイン サーフェイスに配置した後、UI 上で直接にプロパティを変更してスタイルを指定できます。「イメージと要素のスタイルを設定する」を参照してください。

  • コントロール テンプレートの作成および編集   テンプレート編集ツール群を使用して、プロジェクト内のさまざまな場所での再利用が可能なカスタム コントロール テンプレートを作成できます。作成したテンプレートをコントロール ライブラリに追加すると、現在のプロジェクトだけでなく他のプロジェクトでの再利用も可能になります。「イメージからユーザー コントロールを作成する」を参照してください。

  • データ テンプレートの作成および編集   アプリ上にデータを表示する方法を定義するテンプレートを作成できます。「データ バインディングを作成してスタイルを設定する」参照してください。

  • サンプルおよびデザイン時データの表示   開発する Windows ストア アプリにデータをバインドして表示し、実行時のデータの見え方を簡単に修正できます。「DataContext を設定する」を参照してください。

  • ビヘイビアーによるインタラクティビティの追加   内蔵されたビヘイビアーをドラッグしてデザイン サーフェイスに追加した後、目的に応じてプロパティを修正し、アプリにインタラクティビティを加えることができます。「組み込みのビヘイビアーを追加する」を参照してください。

  • XAML マークアップの編集   UI ツールを使用するとコード編集なしで XAML の作成や修正ができますが、それだけでなく、Blend には強力な XAML エディターも備わっています。これにより、手早く簡単に XAML マークアップを直接変更することもできます。以下を参照してください。Blend での XAML のデバッグ

Blend において C#、C++、VB で構築された Windows ストア アプリをデザインするための新着情報について、詳細は「Visual Studio ブログ」を参照してください。

リソース

Windows ストア アプリの作成とデザインを始める際には、Windows デベロッパー センターで提供される Blend 関連ドキュメントだけでなく、次のような幅広いリソースが参考になります。