引き続きSketchFlowを使用したアプリケーション設計について解説していきます。前回まではSketchFlowの概要や基本的な使用方法について説明してきました。今回からは実案件で実際に使用した場合どういった使い方が理想的なのか，セカンドファクトリーのワークフローと絡めてより現実的な視点で検証していきます。

なお，今回もサンプルを基に説明を進めていくので，下記URLからダウンロードして下さい。

• サンプルファイル

インタラクティブな要素の追加

SketchFlowを使用する利点は，短期に動く状態のプロトタイプを作成できる点にあるでしょう。使用感の確認と修正を繰り返すことができ，早期にUIの矛盾や問題点を解決することができます。それでは，プロトタイプの段階でどのような点を確認する必要があるか、という視点でみていきます。

前回作成したサンプルは基本的な遷移の方法を解説するためのものだったので，画面数も少なく画面の状態変化も確認できません。しかし，実案件を考えた場合，画面要素の状態は何種類あるか，画面遷移時に画面要素のアニメーションはどういった動きになるのか等はプロトタイプの段階で確認できることが必要です。今回のサンプルでは，画面の状態にフォーカスして要素を追加してあります。

Stateの定義

画面要素の状態を表現する場合，SketchFlowではVisualStateという形で作成することができます。これは，画面要素の状態をState(ステート)という形で定義し，SketchFlowPlayerで再生時にその状態を確認できる機能です。

SketchFlowPlayerでサンプルを再生してみてください。「⁠ツアー一覧画面」という画面を表示すると，この画面から遷移出来る画面だけではなく緑色の「絞り込みパネル/表示」「⁠絞り込みパネル/非表示」という項目が表示されます（図1⁠）⁠。これは，この画面が持っている画面要素の状態でクリックすると「絞り込みパネル」の表示を切り替えることができます（図2⁠）⁠。

このStateという仕組みは，SketchFlow特有のものではなくSilverlight / WPFでも使用できる機能です。簡単にStateの仕組みを説明します。

Stateの定義はExpression Blendの「状態パネル」を使用して行います（図3⁠）⁠。

「状態パネル」では，画面要素の状態の追加とその状態になった時に各要素の設定値がどのように変化するのかを定義できます。

サンプルの場合，「⁠絞り込みパネル」のY位置（TranslateTransform Y）の設定値を「表示」状態と「非表示」状態で切り替えることでStateを定義しています。

このStateを使用すると，コードを記述せずにExpression Blendで画面状態の切り替えを作成することができます。

SketchFlowアニメーション

つぎに，画面自体の状態変化について説明します。Stateは個別の要素の変化を確認することには向いていますが，実際の案件でクライアントにデモを行う場合等は，プロトタイプでも，ある操作をしたときに画面がどのように変化していくのかを伝えることができる必要があります。

サンプルを実行してみてください。図4はツアー一覧画面に遷移した際に，操作のヒントダイアログを表示している状態です。ダイアログは3秒表示された後自動的に非表示になります。このように，ある操作を行った後にアプリケーションがどういう挙動をするのかを伝えることはプロトタイプ作成では重要な要素です。

では，この画面状態変化の作成方法を解説していきましょう。SketchFlowには，SketchFlowアニメーションという機能が存在します。これは，画面の状態をフレーム単位で定義する仕組みです。

図5はExpression BlendのSketchFlowアニメーションパネルです。

サンプルの場合だと，フレームは3種類存在します（①初期状態　②ダイアログ表示　③ダイアログ非表示）また，各フレーム間には0.5sといった形で数字が表示されていますが，これは①の状態から何秒かけて②の状態に変化するかを表しています。この場合，0.5秒かけて画面状態が変化するように設定していることになります。

②のフレームにマウスをロールオーバーすると，図6のような状態になります。

ここでも3sという数字が表示されていますが，これはこの②の状態で何秒間表示するかを表しています。設定した秒数が経過すると次のフレームに移動します。

このようにSketchFlowアニメーションで画面状態変化を定義したら，指定の状態にするためのトリガーを設定する必要があります。Expression Blendの「オブジェクトとタイムライン」パネルで，[UserControl]という要素を右クリックすると図7のようなメニューが表示されます。

メニューの中の「SketchFlowアニメーションの再生」という項目を選択すると，[PlaySketchFlowAnimationAction]という名前のアニメーション再生のトリガーを作成できます。

サンプルでは，画面が表示された時にアニメーション再生されるようになっています。これを設定するためにはまず，作成した[PlaySketchFlowAnimationAction]を選択して，「⁠プロパティ」タブの中の「トリガー」を表示します（図8⁠）⁠。

このトリガーパネルの中の「EventName」という項目があります。これは，設定したアニメーションをどのタイミング（イベント）で再生するかを決める値です。選択するとLoaded，MouseLeftButtonDownといった項目が出てきますので，その中の「Loaded」を選択してください。Loadedは画面が読み込まれた際にアニメーションを再生する設定値です。もちろん，他の値を選択すれば，そのイベントの発生したタイミングでアニメーションが再生されるようになります。

このようにStateとSketchFlowアニメーションを使用することで，画面の遷移だけではなく要素の状態や画面の状態もプロトタイプに盛り込むことができます。