Blend for Visual Studio 2013 の作業の開始
Blend for Visual Studio は、ユーザー インターフェイスと Windows Desktop、Web、Windows Phone、Windows ストア アプリの豊富なメディア体験を視覚的に連動させるツールです。 Blend は、Windows Presentation Foundation (WPF) と Silverlight をサポートし、プロトタイピング用の SketchFlow (Visual Studio Ultimate および Premium の各エディション) が付属しています。
Blend for Visual Studio は Expression Blend に取って代わるものです。 その他の Expression 製品とサポート オプションについては、「Microsoft Expression の変更」ページを参照してください。
Blend では、XML ベースの宣言型マークアップ言語 (XAML) に作業内容を格納します。 また、Web アプリ向けに HTML5、CSS3、JavaScript コードもサポートしています。 UI の変更は [デザイン] ビューで視覚的に行うことができます。[デザイン ビュー] は、Blend が XAML で UI の優れた特性を引き出したり、微調整する場所です。 (Blend で XAML の UI を設計する方法について。)Visual Studio でアプリ コードに UI をフックすることができます。
Blend を取得する方法
Blend は、Visual Studio をインストールするときにインストールされます。 Visual Studio Professional 2013 更新プログラム 2 以降でご利用いただけます。 Blend を開くには、
Windows の [スタート] 画面で「Blend」と入力します。
または
Visual Studio で、WPF、Silverlight、Windows Phone、または Windows ストア プロジェクトを開いてから、[表示] メニューまたはプロジェクトのショートカット メニューから [Blend で開く] を選択します。
Blend を使用する理由
Visual Studio では、開発に対して Code First アプローチを提供しています。 また、優れたデザイナーもあるため、開発中にアプリに UI 要素を追加することができます。 Windows Presentation Foundation や Silverlight などのフレームワークを使用して UI を構築できます。 ただし、アニメーションとカスタム コントロールでは、多くの場合複雑な概念を熟知し、広範なコーディングの専門知識を持っている必要があります。
Blend には、新しい UI を構築したり、より迅速かつ直感的に既存の UI を操作する視覚的なワークスペースがあります。 Blend のツール パレットは、Visual Studio のパレットより範囲が広く、洗練されているため、さらに多くのことができます。 (たとえば、アニメーションを作成し、デザイナーで直接コントロールに 3D 効果を追加するよう投影面を設定します。)Blend でアプリの UI を設計し、必要な場合は基になる XAML を調整してから、Visual Studio コード エディターを使用して追加機能のプログラミングおよびアプリのデバッグを行うなど、各ジョブに最適なツールを使用して生産性を高めます。 Visual Studio と Blend の両方で同じプロジェクトを開き、設計とコードを交互に切り替えることで、結果を最速で得ることができます。
たとえば、C# で図形をアニメーション処理するコードを次に示します。
.png "C# コードでのアニメーションの作成")
Blend におけるエクスペリエンスのスナップショットを次に示します。
.png "Blend におけるアニメーションの作成")
生産性を高めるため、次のようなタスクに Blend を使用することを検討してください。 Blend が Visual Studio デザイナーまたはコード単独より短い時間でより多くの機能を提供する領域は以下のとおりです。
目的 |
Visual Studio 単独 |
Visual Studio と Blend |
詳細情報 |
|---|---|---|---|
アニメーションを作成する |
アニメーション用のデザイン ツールはないため、プログラムで作成する必要があります。 これを行うには、WPF におけるアニメーションおよびタイミング システムを理解し、広範なコーディングの専門知識を持っている必要があります。 Windows ストア アプリでは、アニメーションの作成には XAML または HTM5、CSS、JavaScript で自在操作できることが必要です。 |
アニメーションを視覚的に作成し、Blend でプレビューすることができます。 これは、コーディングでアニメーションを構築するよりもすばやく正確です。 ユーザーとの対話を処理するトリガーを追加できるほか、コードに切り替えてイベント ハンドラーとその他の機能を追加することができます。 Blend では、JavaScript コードが不要な、タイムライン ベースの CSS アニメーション (W3C で指定された) の作成もサポートしています。 他の要素とやり取りする方法を確認できるように、アプリ内で直接アニメーションを編集することができます。 |
|
簡単に操作できるよう、図形やテキストをパスに変換する |
サポートされていません。 |
図形 (四角形、楕円など) をパスに変換することで、図形に対して軽微な変更や劇的な変更を行えます。そうすることで、より良い編集コントロールができます。 形状を変更したり、パスを結合するとともに、複数の図形から複合パスを作成することができます。 さらに、テキスト ブロックをパスに変換して、ベクター イメージとして操作することもできます。 |
|
UI の設計に対話機能を追加する |
C#、Visual Basic、または C++ コードが必要です。 |
静的な設計に対話機能を追加するため、コントロールにビヘイビアーをドラッグ アンド ドロップします。 ビヘイビアーは、ドラッグ アンド ドロップ、ズーム、表示状態の変更などの機能をカプセル化する、すぐに使用できるコード スニペットです。 選択できる一連のビヘイビアーは増大しつつありますが、独自に作成することができます。 それから、Blend でビヘイビアーのプロパティを変更したり、コードでイベント ハンドラーを追加することで、各ビヘイビアーをカスタマイズできます。 |
|
アプリを対話的に編集する |
サポートされていません。 |
HTML アプリの実行中に操作して変更を行います (ボタンの切り替え、オプションの変更、またはキャンバスへの描画など)。 編集モードに戻るとき、変更内容は保持されます。 また、対話モードを使用すると、実行中のアプリを特定の状態で一時停止できるほか、基になるコードを編集し、影響をすぐに確認することもできます。 |
|
Adobe アートワークを使用する |
サポートされていません。 |
Adobe FXG、PhotoShop、または Illustrator のアートワークをインポートし、Blend および Visual Studio に UI を実装します。 |
|
コントロール、テンプレート、スタイルを編集する |
コーディングおよび WPF のスタイルとテンプレートの知識が必要です。 |
イメージをコントロールに変換します。 コントロール、スタイル、テンプレートを数回マウスでクリックするだけで変更するには、テンプレート編集ツールを使用します。 たとえば、Blend のスタイル リソースを使用して、一般的な WPF コントロール (ボタン、リスト ボックス、スクロール バー、メニューなど) を実装し、Blend で色、スタイル、または基になるテンプレートを直接変更します。 次に、必要な場合はコードに切り替えてタッチを仕上げます。 |
|
UI をデータに接続する |
SQL Server データベース、WCF や Web サービス、オブジェクト、または SharePoint リストなどのリソースからデータ ソースを作成し、データ ソースを UI コントロールにバインドします。 デザイン時のデータは、対話型のデザイン エクスペリエンスのため手動で作成する必要があります。 |
プロトタイプの作成とテスト用のサンプル データは簡単に作成できます。 準備ができたら、ライブ データに切り替えます。 Blend のデータの生成機能は並外れているため (名前、番号、URL、写真をその場で簡単に追加できるため)、多くの時間を節約できます。 ライブ データの場合は、UI コントロールを XML ファイルまたは任意の CLR データ ソースにバインドできます。 |
|
Windows Phone アプリまたは Windows Store アプリを設計する |
限られたデザイナーの機能で、XAML を使用して複雑な作業をする必要があります。 |
(Windows Phone のサポートには、Visual Studio Professional 2013 更新プログラム 2 以降 が必要です。) Blend では、広範囲の設計機能が提供されているため、アプリ開発を短い時間で簡単に行えます。 Blend デザイナーでアプリを最初から最後まで構築し、エミュレーターでテストして、追加機能のための独自のコードと統合することができます。 |
Blend による Windows Phone アプリの設計 Blend for Visual Studio 2012 (Windows ストア アプリ) Blend における Windows ストア アプリの作成 (MSDN Magazine) |
ストーリー ボードとプロトタイプを作成する |
Visual Basic または C# でプロトタイプをコーディングするか、Adobe Director または Flash などの個別のツールを使用する必要があります。 |
再実装を必要とせずに機能アプリに変換できる作業プロトタイプを描画し、ビルドするには、SketchFlow を使用します。 SketchFlow プロトタイプをアニメーション化し、表記の追加を行えます。 また、他のユーザーとプロトタイプを共有できるほか、使いやすさの調査や、SharePoint または SketchFlow プレーヤー上でのフィードバックの取得も行えます。 |
リソース
目的 |
参照トピック |
|---|---|
Blend のガイド付きツアーで作業を簡単に開始する |
Blend による XAML UI の設計 (Microsoft Virtual Academy) |
開発者が Blend に切り替える理由を確認する |
|
Blend の最新バージョンの新機能を参照する |
HTML の開発者向けの新機能 (ブログの投稿) Windows ストアの XAML アプリの新機能 (ブログの投稿) |
Blend ワークスペースをよく理解します。 |
|
レイアウト パネルとコントロールを使用して、コントロール、イメージ、その他のオブジェクトをページに配置する |
|
ユーザーはご使用のアプリと対話できるようになります。 |
|
イメージ、ビデオ、オーディオ クリップを導入して、アプリに視覚的な効果を追加します。 |
|
3D オブジェクトの作成、変更、アニメーション化を行います。 |
|
図形を追加したり、自由形式のパターンを描画します。 図形のスタイル設定、図形のコントロールへの変換、または図形を使用したアニメーション用のパスの作成を行います。 |
|
オブジェクトの表示方法を変更し、複数のオブジェクトに適用できるスタイルとテンプレートを作成します。 |
|
オブジェクトを動かす短いアニメーションを作成したり、フェードインとフェードアウトを行います。 |
|
ページのレイアウトをカスタマイズしたときに、デザイナーでサンプル データを表示します。 |
|
再実装を必要とせずに機能アプリに変換できる作業プロトタイプを構築します。 |
|
Windows Phone アプリと Windows ストア アプリを設計する |
|
ストア アプリを開発するための追加のリソースを取得する |