アプリケーション フローの作成

[SketchFlow マップ] パネルはグラフ エディターで、これを使用してアプリケーションの構造、フロー、ナビゲーション、およびコンポジションを定義できます。

[SketchFlow マップ] パネルを使用してアプリケーションの構造に注目したり、アートボードを使用して個々の画面のコンテンツに注目することができます。

ナビゲーション画面

プロトタイプのすべての画面は、[SketchFlow マップ] パネルのノードで表されます。ナビゲーション接続を使用して画面間のナビゲーションを示すことにより、1 つの画面を他の画面に接続することができます。SketchFlow プレーヤーでプロトタイプを実行する場合、ナビゲーション ノード間の接続は [移動] パネルの画面間のナビゲーションをシミュレートします。

コンポーネント画面も [SketchFlow マップ] パネルに表示されます。詳細については、このトピックで後に説明する「コンポーネント画面」を参照してください。

SketchFlow マップ

SketchFlow の画面間のナビゲーションを定義するには、いくつかの方法があります。[SketchFlow マップ] パネルの既存の画面から、新しい接続画面を作成することができます。[SketchFlow マップ] パネルの 2 つの未接続の画面を接続できます。または、画面のオブジェクトを右クリックし、ショートカット メニューの [移動先] コマンドを使用してナビゲーションを定義できます。

新しい接続ナビゲーション画面を SketchFlow マップに追加するには

  1. 新しい SketchFlow プロジェクトを作成すると、"Screen 1.xaml" という名前の新しいファイルが作成されます。このファイルは [SketchFlow マップ] パネルにはノードとして、[プロジェクト] パネルには UserControl として表示されます。

    Noteメモ :

    新しい SketchFlow プロジェクトを開くには、｢プロトタイプ プロジェクトの作成｣を参照してください。

    ポインターを [SketchFlow マップ] パネルの左上隅にある一番目のノード (Screen 1) の上に移動します。

    Noteメモ :

    [SketchFlow マップ] パネルが表示されていない場合は、[ウィンドウ] メニューで [SketchFlow マップ] をクリック、または Shift キーを押しながら F12 キーを押します。

    ノードが反転表示され、その関連する XAML ファイル名がヒントに表示されます。ビジュアル メニューもノードの下部に表示されます。

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(ja-jp,Expression.40).png

  2. ポインターをビジュアル メニューの左アイコンの上に移動します。アイコンのドラッグを開始します。ポインターにしたがって、新しい"非実体化"ノードが表示されます。

  3. 新しい画面を移動する場所までナビゲーション画面をドラッグします。テキスト ボックスに名前を直接入力して、画面に名前を付けることができます。新しい画面の名前を変更しない場合は、新しいノード名は "画面 x" となり、この "x" の部分には、アプリケーション フローに表示される一連の番号付き画面名の次の番号が挿入されます。

    Noteメモ :

    ノードを右クリックし、[名前の変更] をクリックすると名前を変更できます。または、ノードをクリックし、Shift キーを押しながら F2 キーを押すと、ノードに直接新しい名前を入力できます。

  4. 新しい画面に描画するには、[SketchFlow マップ] パネルのノードをダブルクリックし、関連付けられているドキュメント タブを選択します。

ノード間の接続は、これらのノード間のナビゲーションを示します。ナビゲーション接続が定義されていないナビゲーション ノードを作成することもできます。

新しい未接続ナビゲーション画面を SketchFlow マップに追加するには

  1. [SketchFlow マップ] パネル内を右クリックし、[画面の作成] をクリックします。

    Noteメモ :

    [SketchFlow マップ] パネルが表示されていない場合は、[ウィンドウ] メニューで [SketchFlow マップ] をクリック、または Shift キーを押しながら F12 キーを押します。
    Noteメモ :

    ノードを右クリックし、[名前の変更] をクリックすると名前を変更できます。または、ノードをクリックし、Shift キーを押しながら F2 キーを押すと、ノードに直接新しい名前を入力できます。

  2. 新しい画面に描画するには、[SketchFlow マップ] パネルのノードをダブルクリックし、関連付けられているドキュメント タブを選択します。

    tip noteヒント :

    または、[SketchFlow マップ] ツール バーで [画面の作成] Ee341405.d63bd8e7-f302-48bb-a42e-119eb2fa06f8(ja-jp,Expression.40).pngをクリックします。

2 つの接続されていないナビゲーション画面を接続するには

  1. [SketchFlow マップ] パネルで、接続元のノードの上にマウスを移動します。

    Noteメモ :

    [SketchFlow マップ] パネルが表示されていない場合は、[ウィンドウ] メニューで [SketchFlow マップ] をクリック、または Shift キーを押しながら F12 キーを押します。

    ノードが反転表示され、その関連する XAML ファイル名がヒントに表示されます。ビジュアル メニューもノードの下部に表示されます。

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(ja-jp,Expression.40).png

  2. ビジュアル メニューの左から 2 番目の [既存画面の接続] Ee341405.edc454d7-a6dd-4721-a849-4069d5ffebe6(ja-jp,Expression.40).png アイコンにポインターを移動します。アイコンのドラッグを開始し、新しいナビゲーション接続を作成します。ポインターにしたがって、矢印が表示されます。

  3. 接続先の画面まで矢印をドラッグします。接続を削除するには、矢印の上で右クリックし [削除] をクリックします。

    tip noteヒント :

    または、接続元のノードをクリックし接続先のノードへドラッグします。

コンポーネント画面

コンポーネント ノードはナビゲーション ノードと同様に、[SketchFlow マップ] パネルに表示されます。コンポーネント ノードとナビゲーション ノードの重要な相違点は、コンポーネント ノードにはナビゲーション ノードと異なり受信ナビゲーション接続がないということです。ただし、コンポーネント ノードは受信コンポーネント接続を持つことができます。アプリケーション フローのノード間のリンクを示す矢印、つまり接続は、コンポーネント画面が表示される画面を示します。

コンポーネント ノードには、複数の画面で再使用可能なコンテンツが含まれています。たとえば、背景を含むコンポーネント ノードとメニューを含むコンポーネント ノードを作成し、これらのコンポーネントをプロトタイプ全体にわたり複数の画面上で使用することができます。

新しいコンポーネント ノードを作成するには、いくつかの方法があります。新しいコンポーネント ノードを直接 [SketchFlow マップ] パネルに追加するか、画面上でコンテンツを選択して SketchFlow マップのコンポーネント ノードとして表示する画面を作成することができます。

新しい未接続コンポーネント画面を SketchFlow マップに追加するには

  • [SketchFlow マップ] パネル内の任意の場所を右クリックし、[コンポーネント画面の作成] をクリックします。

新しい接続コンポーネント画面を SketchFlow マップに追加するには

  1. [SketchFlow マップ] パネルで、追加するコンポーネント画面の接続元のノードの上へポインターを移動します。

    Noteメモ :

    [SketchFlow マップ] パネルが表示されていない場合は、[ウィンドウ] メニューで [SketchFlow マップ] をクリック、または Shift キーを押しながら F12 キーを押します。

    ノードが反転表示され、その関連する XAML ファイル名がヒントに表示されます。ビジュアル メニューもノードの下部に表示されます。

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(ja-jp,Expression.40).png

  2. ビジュアル メニューの右から 2 番目の [コンポーネント画面を作成して挿入] Ee341405.91c06759-86fc-4dbf-a8b7-061300304308(ja-jp,Expression.40).png アイコンの上にポインターを移動します。アイコンのドラッグを開始し、新しいコンポーネント接続を作成します。ポインターにしたがって、矢印が表示されます。

UserControl

コンポーネント画面は UserControl の一種です。コンポーネント画面を作成すると、SketchFlow マップに表示されます。コンポーネント画面以外の UserControl を作成することもできます。コンポーネント画面以外のユーザー コントロールは SketchFlow マップには表示されません。

UserControl をコンポーネント画面にするには

  1. コンポーネント画面に変換するオブジェクトまたはオブジェクトのグループを選択します。

    Noteメモ :

    オブジェクトのグループを選択するには、含めたいオブジェクト グループの周りに境界アウトラインをドラッグします。

  2. 選択項目を右クリックして、[コンポーネント画面の作成] をクリックします。

  3. [コンポーネント画面の作成] ダイアログ ボックスで、[名前] ボックスに UserControl の名前を入力します。

  4. [OK] をクリックします。

    Noteメモ :

    コンポーネント画面がナビゲーション画面に表示される前に、プロジェクトを再構築 (F5) する必要がある場合があります。

既存のオブジェクトから UserControl を作成するには

  1. UserControl に変換したいオブジェクトまたはオブジェクトのグループを選択します。

    Noteメモ :

    オブジェクトのグループを選択するには、その周りにある境界アウトラインをドラッグします。[リソース] パネルで直接オブジェクトを選択することもできます。

  2. 選択項目を右クリックし、[UserControl の作成] をクリックします。

  3. [UserControl の作成] ダイアログ ボックスで、[名前] ボックスに UserControl の名前を入力します。

    詳細については、「空のユーザー コントロールの作成」を参照してください。

ビジュアル タグ

ビジュアル タグを利用すると、SketchFlow マップの画面および接続の種類に合わせて異なる色を適用し、画面および接続の種類を識別しやすくなります。

ビジュアル タグをノードに追加するには

  1. [SketchFlow マップ] パネルで、タグを付けるノードの上にポインターを移動します。

    Noteメモ :

    [SketchFlow マップ] パネルが表示されていない場合は、[ウィンドウ] メニューで [SketchFlow マップ] をクリック、または Shift キーを押しながら F12 キーを押します。

  2. ノードが反転表示され、その関連する XAML ファイル名がヒントに表示されます。ビジュアル メニューもノードの下部に表示されます。

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(ja-jp,Expression.40).png

  3. [ビジュアル タグの変更](右側のアイコン) の上にポインターを移動します。アイコンをクリックし、そのノードに使用したい色をクリックします。

ビジュアル タグを接続に追加するには

  1. [SketchFlow マップ] パネルで、タグを付ける接続を右クリックします。

    Noteメモ :

    [SketchFlow マップ] パネルが表示されていない場合は、[ウィンドウ] メニューで [SketchFlow マップ] をクリック、または Shift キーを押しながら F12 キーを押します。

    接続が反転表示されます。

  2. [ビジュアル タグ] をクリックし、その接続に使用したい色をクリックします。

SketchFlow プロジェクト設定を変更して、プロジェクト全体のビジュアル タグ設定を変更することもできます。

詳細については、「SketchFlow プロジェクトの設定の変更」を参照してください。

Copyright ©2011 by Microsoft Corporation. All rights reserved.

  • Last updated on