この記事は機械翻訳されたものです。

デザインと UX

Blend で Windows ストア アプリを作成する (機械翻訳)

Christian Schormann

 

Visual Studio の 2012 年のブレンドは、XAML または HTML を使用してビルド Windows ストアのアプリを作成する強力な視覚的なオーサリング ツールです。 ブレンドが Visual Studio 2012 では、含まれ、起動画面から直接利用可能です。

XAML アプリケーションの Windows プレゼンテーション財団 (WPF)、Silverlight または Windows Phone の作成に精通している場合は、すぐに自宅で感じるでしょう。 ブレンドのこのバージョンは以前のバージョンに類似しているツールを提供しますが、Windows 8 の XAML のプラットフォームのサポートも含まれます。 また、ブレンドは HTML、CSS、JavaScript を使用して Windows の店の apps を作成するため、革新的な新しいのビジュアル オーサリング ツールを提供します。

最初の xaml、Windows ストア アプリケーションを構築するために新しいもので簡単に見てみましょうし、ブレンド ツールはより詳細な探査を行う Windows ストア アプリケーションで HTML を作成するためします。

ブレンドを使用して Windows ストア アプリケーションで XAML を作成するには

Windows 8 はアプリの開発をサポートする新しい XAML プラットフォームを提供します。 プラットフォームは、伝統的なマネージ言語 (c# および Visual Basic) だけでなくネイティブ開発 C++ でをサポートします。 XAML の機能セットは、WPF と Silverlight のと同様で、8 固有の Windows コントロールとブレンドをサポートするターゲット デバイスのプロパティのセットが含まれています。 さらに、XAML デザイナー Visual Studio 2012 とブレンドで今同じコード ベースよりも多くのより良い互換性の前に使用結果します。 (全体的に、Visual Studio 2012 とブレンド偉大な統合されたワークフローを提供します。 同時に両方のツールで同じプロジェクトを開くし、スムーズに切り替えることができます。 私の偉大なコード エディター、デバッガー、利用設計、著者および UX Blend でスタイルを Visual Studio でコードを記述したい。)

Windows ストアのアプリ Blend で XAML を構築するための Windows 8 の機能のハイライトの少数はここにあります。

Windows 8 コントロールを組み込みサポートブレンド Windows 8 AppBar や簡単にこれらの象徴的なコントロールを持つアプリケーションを構築すること、ListView などのコントロールの組み込みのオーサリング サポートしています。 AppBar が通常隠されているフライでコントロールですが、ブレンド デザイン サーフェイス、対話的編集ビューにコントロールをもたらすことができます。 ListView のライオンと­のホームフォルダーのテンプレート データ項目と、グループのスタイルはブレンドでも完全にサポートです。

オーサリングを表示 Windows ストア アプリケーション、さまざまな異なる表示サイズと画素密度のフォーム ファクター上で実行して別のビューへ (ポートレート、風景、スナップとフル) を調整すると予想されます。 デバイス パネル (図 1)、作成、編集、デザイン画面で選択の異なるビューを持つアプリを変更することができます。 デバイス パネルもビジュアル状態マネージャーに統合されています。

Device Panel in Blend for Windows Store Apps Built with XAML
図 1 デバイス パネルで XAML を組み込まれて Windows の店の Apps のためのブレンド

ブレンドを使用して Windows ストア アプリケーションで HTML を作成するには

ブレンドの作成、スタイリング反復の HTML ベースの UI デザインときれいな、プロフェッショナルで、標準に準拠したマークアップを作成するためのユニークな環境です。 伝統的な HTML のオーサリング ツールとは異なり、ブレンドを作成またはコンテンツをその場で変更する JavaScript を使用するアプリケーションのための設計のシナリオを処理できます。 ブレンド デザイン サーフェイス Windows ランタイムとして同じレンダリング エンジンを使用しますが、それも両方の静的および動的なページ要素の正確な可視化を保証、ページをロードした瞬間から JavaScript を実行します。 DOM ライブ パネルと豊かな、生産的な CSS のツールのブレンドでスクリプトから来るまたはフラグメントから読み込まれるすべての要素とマークアップで作成する要素を処理できます。

次のセクションでは、私はこれらおよびその他のブレンドでの HTML 機能のハイライトをカバーします。

デザイン サーフェイス上のコードの正確なレンダリング コードで生成されたページのデザイン画面上のコードの HTML のブレンドで Windows ストア アプリケーションの構築の基盤実行しています。 たとえば、マークアップで図 2 標準 HTML と JavaScript の両方が含まれています。 このマークアップのブレンド、JavaScript の実行で空のページに貼り付けるし、編集モードでデザイン サーフェイス上で直接実行されます。

デザイン サーフェイス上の図 2 ブレンドの実行 JavaScript

<!DOCTYPE html>
<html>
  <head>
    <title></title>
      <script>
        function init() {
          var p = document.querySelector('#placeholder');
          if (p) {
            var fruit = ['apples', 'oranges',
                         'lemons', 'pears', 'strawberries'];
            for (var i=0; i<fruit.length; i++) {
              var e = document.createElement("div");
                e.textContent = fruit[i];
                e.className = 'fruit';
                p.appendChild(e);
            }
          }
        }
      </script>
  </head>
  <body onload="init()">
    <div id="placeholder"></div>
  </body>
</html>

JavaScript によって生成された要素はデザイン サーフェイスに正しく表示されます。 デザイン サーフェイスが編集モードでコードを実行するため、他の要素と JavaScript によって生成された要素を選択できます。

要素にもライブの DOM のパネルの表示 (図 3)、マークアップ ドキュメントのコンテンツだけでなく、ドキュメント オブジェクト モデル (DOM) ツリーの動的な状態を表します。 ようなそれらの JavaScript によって作成またはからのフラグメントを動的に読み込まれた要素のマークアップでは、存在しないこれらの要素がスクリプトによって生成されたことを示す稲妻アイコンでマークされます。

The Live DOM Panel
図 3 ライブの DOM パネル

ライブの DOM のパネルはまた、どのクラスが各要素にアタッチされている示しています。 たとえば、コードで図 2 クラス名「果実」の各生成要素を生成します。 JavaScript によって生成された要素の (変更ブレンドのマークアップがない) を直接変更することはできませんが、CSS クラス名の生成コードを使用または生成された要素はそれ以外の場合は CSS セレクターがアクセスできることクラスに対しては、まだスタイルすることができます。

豊富な CSS プロパティ エディター ブレンドの対話操作の要素のためのサポートのロットと同様、複雑なの CSS プロパティ アクセス、デザイン サーフェイス上を作る多くの豊富なプロパティ エディターを提供します。 たとえば、Windows 8 CSS のグリッドと呼ばれる新しい標準的な CSS レイアウト モデルをサポートします。 CSS のグリッド上の複数のフォーム ファクターを実行する必要が特にのサイズ変更可能なアプリケーションの驚くほど便利なレイアウトです。 グリッド レイアウト行のセットで動作し、どこでそれぞれの行と列は特定に割り当てることができますテーブルには、同様の列サイズを変更する動作。 行または列を固定のサイズに比例して、サイズを変更する、または自動的に自分のコンテンツに合うように設定できます。 XAML でグリッドを精通している場合は、自宅 HTML グリッドとにされるでしょう。

CSS のグリッドでのブレンドは、ストレス多くの CSS レイアウト シナリオを編集 (を参照してください図 4)。 描画しデザイン画面の右側のグリッドを変更、場所で測定 [1] を参照してください、サイズを変更することができます、ユニットの場所で使用する UI [2] オブジェクト、挿入および削除、行と列、および大いに多く。

Artboard Editing of CSS Grid
図 4 アートボード CSS のグリッドの編集

ブレンドも多層背景と CSS のグラデーションを提供カラー エディターとサポート (図 5)、すぐに視覚的フィードバックをすべて。 また、CSS の遷移でブレンドを簡単に編集できます。 図 6 CSS 遷移エディター千鳥遷移イージング関数を含む 3 つのプロパティの定義を示しています。

Color Editing Includes Visual Feedback
図 5 カラーを編集視覚的なフィードバックが含まれています。

Editing a CSS Transition
図 6 CSS の遷移の編集

CSS 編集スタイリング CSS では視覚的に HTML ベースの Ui をオーサリングの中心に。 ブレンド ツール CSS スタイル設定のための洗練されたセットの周りに構築されています。 たとえば、スタイル ルールのパネル (図 7) 現在開いている HTML ドキュメントに適用されるスタイル ルールを示しています。

Style Rules Panel
図 7 スタイル ルール ・ パネル

図 7、スタイル シート、宣言順 [1] のスタイルのルールの並べ替え方法を見ることができます。 検索は、スタイル ルールのより大きいコレクションのサポートです。 スタイル ルールのパネルには、メディア クエリ [2] と各クエリ内で定義されたスタイル ルールも示します。 あなたも、どのメディア クエリ場合は、現在アクティブになっている参照してください。 さまざまな表示状態を処理する Windows の店の apps を作るメディア クエリの使用するため、これは app のスタイリングを非常に重要です。

スタイル ルールは、作成、編集または (多くの生産性ショートカット スタイル ルールの作成をブレンドしていますが) スタイル ルール パネルで削除することができます。 CSS セレクターの作成中は、ブレンド intellisense 機能を CSS セレクターに役立ちます。 セレクターを入力するで見ることができるとブレンド、現在のドキュメントのコンテキストで補完オプションの一覧を示します図 8

IntelliSense for CSS Selectors
図 8 IntelliSense の CSS セレクター

IntelliSense の CSS セレクターも入力している間に、セレクターを対象要素がハイライトされます。 この機能は、ルールのスコープの装飾と呼ばれます。 ルール スコープ装飾だけ IntelliSense で表示されません。 また、スタイルを直接選択していつでも表示されます。 または直接によって選択されているスタイル ルールが適用される要素を識別する簡単がないです。 図 9、ルール スコープ装飾緑のアウトラインが表示されます。 この非常に有用なユーティリティを見つけることができますので、CSS セレクターがきわめて複雑になることができます。

An Example of the Rule Scope Adorner
図 9 ルール スコープ装飾の例

常に、スタイル ルール パネルで直接のスタイル ルールを選択し、[CSS プロパティ] パネルでスタイル ルールの CSS プロパティを編集できます。 多くの場合、ただし、デザイン サーフェイス上または DOM ライブ パネルで要素を選択し、その要素に影響するスタイル ルールを見つけることは簡単です。

表面の設計要素を選択するたびに、[CSS プロパティ] パネル (図 10) の優先順位の要素に適用されるスタイル ルールの一覧を表示します。 必要なスタイルを検索するはるかに簡単になります。 デフォルトでは、プロパティが分類済みのビューで表示されますが、アルファベット順の表示も可能です。 CSS プロパティのリストはかなり長いです (現在以上 300 CSS プロパティが定義されている)、プロパティを検索するには、プロパティのリストを検索またはフィルター ルールで現在設定されているプロパティのみを参照してできるように。

CSS Properties Panel
図 10 [CSS プロパティ] パネル

多くの場合、要素のスタイルに貢献プロパティは多くの異なるスタイル ルールから来る。 これはそれを難しい要素見えるなぜそれが方法を理解することができます。 これらのケースでは、ロールアップ ビュー「勝利」のすべてのプロパティに役立ちますどのスタイルが適用されているを確認 (図 11)。

View Winning Properties
図 11 ビュー受賞プロパティ

勝利プロパティ順に元のスタイル ルールでは CSS カスケードの表面に上昇プロパティのみが表示されます。 このビューは、既存のプロパティ値の簡単な調整のためにも診断、非常に役立ちます。

計算値: CSS 宣言を処理した後、レンダリングのためのブラウザーを見て値を持つプロパティが表示されます。 問題を解決しようとしているときこれは時々 大きな助けすることができます。 ブレンドは、CSS のカスケードは、お使いのディスプレイの問題を診断するために別のツールへのアクセスも提供します。

すべてのプロパティの値特定のプロパティに影響を与えるすべてのルールからを表示する CSS のカスケードを表示できます。 たとえば、「勝」は、そのプロパティの 1 つされている一番上の 1 つ、2 つの異なるルールで定義されている背景色のプロパティがあります。 CSS カスケード表示 (図 12) 競合するルールをすばやく移動することができます。

A View of the CSS Cascade
CSS カスケードの図 12 ビュー

ブレンドは、多くのショートカットをすばやく選択した要素のスタイル ルールを作成するのに提供しています。 選択した要素 (#foo、foo の ID 要素を持つ場合) の ID を対象とするルールを作成または、className 属性でクラスのいずれかに一致するルールを作成できます。 追加しクラスをすばやく、削除または新しいクラスを追加したり、ルールを 1 つのステップで作成 (を参照してください図 13)。 これらのコンテキストでの生産性のジェスチャーのスタイリング ブレンド、滑らかな高速かつ効率的とします。

Add a Class and Create a Style Rule in a Single Step
図 13 は、クラスを追加および 1 ステップでスタイル ルールを作成します。

誰もがミスをして彼の心を変更するので、大事なことを言い忘れたが、ブレンドいくつかリファクタリングの機能を提供します。 これらを迅速にカットし、全体のスタイル ルール、すべてのプロパティ値のスタイル ルールまたは選択されたプロパティの値からコピーできます。 その後、コピーしたルールまたはプロパティを新規または既存のスタイル ルールに貼り付けることができます。

WinJS コントロール JavaScript (WinJS) の Windows ライブラリでは、Windows は Windows ストア アプリの HTML ベースのコントロールのセットを提供します。 これには、トグル スイッチなどの単純なコントロール ListView や FlipView などの高度なコントロールも含まれます。 WinJS コントロールは、JQuery などの他の UI ツールキットのコントロールに似ています。 1 つの違いは、コードからコントロールを使用することができますその WinJS (とも宣言マークアップから) 標準のデータ属性を使用してコントロールのメタデータを適用します。 このメカニズムは、ファーストクラスのオーサリングの経験のコントロールを提供するためにブレンドをできます。

WinJS コントロール ブレンドでは、[アセット] パネルを使用して作成されます。 図 14 [アセット] パネルに表示される最も一般的なコントロールのカテゴリを示しています。 ドラッグするか、資産をダブルクリックすると、コントロール、または HTML タグをページに挿入できます。 検索してフィルター [アセット] パネルに結果します。

Blend Assets Panel
図 14 ブレンド [アセット] パネル

デザイン サーフェイスにコントロールを追加した後は、HTML 属性パネルを使用して構成できます。 構成オプション、選択したコントロールを Windows アプリケーションのコントロール カテゴリ パネル内に表示されます。 たとえばは、トグル スイッチは、labelOff と labelOn の属性を設定またはタイトルを変更できます。

ページを読み込むときは、WinJS ツールキット データ勝利コントロールの属性と要素を検索し、バッキング コントロール データ-勝つオプションで設定したオプションを作成します。 コントロールの実装は、HTML コントロールと同様に他のツールキットでは、コントロールを動的に表示される要素を作成します。 ブレンドがデザイン サーフェイスにコードを実行されるため、編集モードでコントロールを正確に表示されます。 コントロールによって作成された動的要素がわかります。 JavaScript によって生成された要素は、ライトニング ボルト アイコンによって識別されます。

データ テンプレートを編集して断片 ListView トグル スイッチよりもはるかに複雑なコントロールですが、それは同様の方法で属性を使用して構成されています。 これ以外に、ブレンド、ListView をデータ テンプレートを編集するための深いサポートしています。 データ テンプレートは、すべて単一のデータ項目のリストをレンダリングするために使用する HTML のスニペットです。 ライブ データ テンプレート編集のブレンドに役立ちますあなたのデザインし、スタイルのデータ テンプレートの更新で、ListView 内の場所を正確に反映します。

属性エディターから右の空の「デフォルトのデータ テンプレートを作成すると、オーサリング ツールのブレンドを使用してテンプレートを編集することができます。 図 15 、単純な ListView で示すデータ テンプレートでは、マークアップを示しています図 16

図 15 ListView データ テンプレート

<div id="cityTemplate" 
  data-win-control="WinJS.Binding.Template">
  <div class="cityItem">
    <img class="cityImage" 
      data-win-bind="src:image">
    <div class="cityLabel" 
      data-win-bind="textContent:name"></div>
  </div>
</div>
<div id="cityList"
  data-win-control="WinJS.UI.ListView"
  data-win-options="{
    itemDataSource:AppData.cities.dataSource,
    itemTemplate:select('#cityTemplate'),
    layout:{type:WinJS.UI.ListLayout}">
</div>


図 16 ListView のデータ テンプレートを使用して

1 つの div、ListView を定義し、データ テンプレート ルート テンプレート コントロールとしてマーク別の div を提供します。 この div (この例で、クラス cityItem を持つ div) のコンテンツをレンダリングする ListView データ項目ごとにインスタンス化されます。 テンプレートの div に接続されているテンプレート コントロールもテンプレートがページで実際に目に見えるではないことを保証します。

これは、データ テンプレートを編集するには、テンプレートのコンテンツを編集する必要があるため、ビジュアル編集の問題のビットを引き起こします。 ただし、データ テンプレート コントロール テンプレートのコンテンツを非表示に — それ方法のうち、「本物の」ページのコンテンツを維持する — 編集する何かを見ることができません。 テンプレート コンテンツが発見されても、実際に表示して編集する ListView それの外のコンテキストでデータ テンプレートです。

図 17 データ テンプレートを編集するために必要なものを示しています。 ListView は、デザイン画面の [1] に直接要素を選択します。 ライブの DOM のパネルで選択した要素 (画像) [2] の ListView 内の動的に生成される要素であることがわかります。 ListView は、ライブの DOM パネル [3] も表示されます。


図 17 ListView およびデータ テンプレートの編集

コード ビューでは、img タグの中のデータ テンプレート [4] が強調表示されます。 デザイン画面の上部に、情報、選択したコンテンツをデータ テンプレート [5] から由来する指示します。

とき、ListView でブレンドのトレースに表示される要素の起源、要素を選択します。 ブレンドは、データ テンプレートから来るには、この要素を識別し、この情報が表示されます。 要素を編集すると、今、Blend 自動的に関連する編集マークアップとスタイルのデータ テンプレートであなたが行くと、コントロールに表示されるすべてのアイテムを更新できます。 手動で更新する必要はありません。

ListView には、データ テンプレートを参照することは私の好きなブレンド機能の 1 つです。 これもフラグメントで動作します。 フラグメントは、WinJS ユーティリティ関数または、HTMLControl (特別な WinJS コントロール) を使用して別のページに動的に読み込まれる HTML ページです。 ちょうどテンプレートと同様、ブレンドのページ フラグメントを検出し、インプレース編集の同じレベルを提供します。 フラグメントおよびコンテキストの場所で見ることができます (図 18) している彼らのものを使用する、完全に制限なく、および別のドキュメントを開くことがなくそれらを編集する方法。

Editing an HTML Fragment
図 18 HTML フラグメントを編集

インタラクティブ モード

対話モードをブレンドのベストと最も有用な機能の 1 つです。 前にも言ったように、ブレンド、デザイン サーフェイス上のコードを常に実行されます。 通常の編集モードでは、それすることができますのみを選択、操作およびアートボードに表示されます要素を編集するので app の相互作用からを防ぎます。 対話モードを離れてこの保護層アプリケーションとしてそれをやり取りできるように実行しています。

だからなぜちょうどアプリケーションを実行するか? 最も重要な理由は、状態を蓄積する能力です。 Windows またはシミュレータでアプリを実行すると、実行中のインスタンスはあなたがデザイン サーフェイスにしている完全にデタッチされます。 任意の相互作用とアプリを実行している実行中のアプリの状態のみを変更します。 このインスタンスの停止の瞬間蓄積状態はなくなっています。

対話型モードと編集モードを切り替えるように、アプリケーション状態が保持されます。 トグル ボタンの状態を変更、フライアウトにもたらす、オプションを変更または編集モードに戻るときも、キャンバス上の図面を作成するような単純な何かを行う場合は、あなたの状態が保持されます。 編集し、あなたは通常、デザイン サーフェイス上を参照してください州であなたのアプリケーションを微調整できます。 これは非常に便利な高速、編集状態で視覚的に今することができますので解放静的にすべてで到達できません。 多くの方法で対話モードは、ブラウザーの開発者向けツールのようですが、密接に実際のソース プロジェクトおよびデザイン サーフェイスに関連付けられています。

図 19 シンプル世界時計アプリの 2 つのビューを示しています。 2 番目のビューを表示するには、いくつかのコードを実行するには、モード スイッチの切り替えによってトリガーが必要。 編集モードで実行、このコードを作成する方法はありませんがする対話モードに切り替えるとすぐ私は単にデジタル/アナログの切り替え、ビューの変化は、編集の準備ができてをスライドすることができます。 もう対話モードなしの作業を想像することはできません。


図 19 動的アプリケーション状態を介して対話モードの切り替え

デバイス用のデザイン

Windows ストアのアプリは、多種多様なデバイスは、大型のデスクトップ モニターに小さな錠剤からを実行します。 これらのデバイスは、さまざまな解像度で来るし、ピクセル密度を表示します。 また、Windows ストアのアプリはさまざまなビュー モード (風景、ポートレート、スナップと充填モード) ことができます。

アダプタブル アプリケーションを作成するときを参照してください、別のビューの状態の様々 なアプリケーションを編集することがでくことが重要です。 ブレンドは、これを正確に、異なる表示を行うことができますスケーリング モード デザイン画面で、[デバイス] パネルで制御します。

ラッピングする

ブレンドの Visual Studio の 2012 年のビジュアル オーサリング Windows ストア アプリケーションでは、XAML と HTML の両方のサポートで提供します。 以前のバージョンを使用した場合、自宅に感じるだろうように XAML 機能はブレンドは、以前のバージョンに似ています。 Windows ストアのアプリ開発の豊富なサポートに加えて、Visual Studio 2012 のためのブレンドはブレンドで強化された互換性、XAML のデザイナーもサポートします。

ブレンドのサポート HTML を HTML のオーサリング環境の新しい、革新的な種類を表します。 ブレンドには、HTML や CSS のマークアップだけでなく、むしろ頻繁にパターンの JavaScript が生成したコンテンツを処理できます。 視覚的な HTML、CSS、生産的な WinJS の高速オーサリングと楽しいの HTML のためのブレンドを最も重要になります。

キリスト教の Schormann ブレンド チームのパートナー プログラム マネージャーです。 彼の情熱ビジュアル オーサリング ツールは、デザイナー、アーティスト、開発者の建物です。

この記事のレビュー、次技術専門家のおかげで。ジョアンナ メイソン Unni Ravindranathan、ジョシュ コショウ、エリック ソルトウェル