164

Chapter 5　Expression と Visual Studio を使用した開発

165

5.9　SketchFlow

SketchFlow プロトタイプを SharePoint に公開

　SharePoint を利用している場合、「5.9 SketchFlow」で紹介する SketchFlow プロトタイプを

SharePoint 上で管理できます。図 5-73 のように［SharePoint にパブリッシュ］を実行すると、

正しい権限を持っていれば、図 5-74 のようにライブラリへのリンクが表示されます。新しい

バージョンを SharePoint にアップロードするたびに図 5-75 のようにリビジョン番号が増えて

いきます。フィードバックファイルも SharePoint の中で管理できるようになります。

5.9　SketchFlow

SketchFlow 概要

　Expression Studio 4 Ultimate で提供されている Expression Blend 4 には SketchFlowと呼

ばれるプロトタイピング ツール＊5-1 が備わっています。プロトタイプと言っても、Silverlight

で動作するアプリケーションです。

　Microsoft Research に勤務する上級研究者 Bill Buxton は、Sketching User Experience という

書籍＊5-2 で、優れたユーザー エクスペリエンスを提供するために、アイデアをスケッチして書

き出すことから始めることを提唱しています。書き出したアイデアを確認し、またアイデアを

ブラッシュアップしていく、この繰り返しが重要になります。Expression Blend の SketchFlow

は、Bill Buxton のこの考え方を具現化し、開発者が便利に利用できるように開発されたツー

ルです。

　SketchFlow には次のような特長があります。

　　 手書き風のコントロール（BuxtonSketch という手書き風の英文フォント付属）　　 SketchFlow マップによるアプリケーション フロー（画面遷移）の作成　　 SketchFlow プレイヤーによるプロトタイプの実行とフィードバックの取得　　 ストーリーボード形式で利用できる SketchFlow アニメーション　　 画面の移動、画面内の状態遷移、リストボックスの項目削除用のビヘイビアー　　 でき上がったプロトタイプから Word 文書を生成　　 でき上がったプロトタイプから実稼働プロジェクトを作成

　SketchFlow のプロトタイプの実行は、Silverlight がインストールされているブラウザーで

行えます。Web サーバーを利用すれば、評価を行う人のコンピューターに Silverlight をイン

ストールしておき、URL を伝えるだけで済むので、すばやく最新のプロトタイプにアクセス

してもらえます。

　図 5-76は、SketchFlow を利用した場合の画面デザインの流れになります。

5-1： デスクトップ開発向けには WPF（Windows Presentation Foundation）による SketchFlow も用意されています。

5-2： Bill Buxton, Sketching User Experiences: Getting the Design Right and the Right Design，Morgan Kaufmann, 2007, ISBN：978-0-12-374037-3

図 5-74　SharePoint へのパブリッシュが正常終了

図 5-75　リビジョン番号が増えている例

図 5-73　SketchFlow を SharePoint へ公開

166

Chapter 5　Expression と Visual Studio を使用した開発

167

5.9　SketchFlow

　SketchFlow で作成したプロジェクトは、正式な開発において活用できます。従来のプロト

タイピングでは、捨てる前提でプロトタイプを作成しますが、SketchFlow のプロトタイプは

少しの手作業で通常の Silverlight アプリケーションに変更できるので、実稼働プロジェクトの

出発点にもできます。

SketchFlow プロトタイプのサンプル実行

　まずは、Expression Blend に付属しているサンプルプログラムから見ていきましょう。

図 5-77　PCGamingSketch サンプル

　メニューから［ヘルプ］→［ようこそ画面］を選び、［サンプル］タブから［PCGamingSketch］

というプロジェクトを開きましょう。図 5-77のような画面が表示されます。SketchFlow マッ

プ パネルに、アプリケーション フローが記されています。

　［F5］キーを押してテスト実行しましょう。図 5-78のように、ブラウザー上に SketchFlow

で作られたプロトタイプが読み込まれます。

図 5-78　PCGamingSketch を実行したところ

　画面の左上に、画面を移動するためのナビゲーションが用意されています。［Version 1］

［Version 2］［Version 3］［Version Approved］をクリックすれば、それぞれの画面に移動し

ますので試してみましょう。いくつかは手書きで書いたスケッチを画像として貼り付けたもの

になっています。家のマークをクリックすれば、最初の画面（ホーム）に戻ります。

Word文書へエクスポート

実稼働プロジェクトへ

変換

構想・企画・修正

ユーザビリティテスト・評価

パッケージ化Web展開

Blend上でフィードバック

確認Blend上でスケッチ

お客様のゴールを理解しながらインタラクションデザイン 仕様確定・開発支援

フィードバックファイル

図 5-76　SketchFlow を用いたプロトタイピング

168

Chapter 5　Expression と Visual Studio を使用した開発

169

5.9　SketchFlow

画面の状態遷移の確認

　ホームに戻り、［Version 2］をクリックします。画面は図 5-79のようになります。

図 5-79　PCGamingSketch の Version 2 画面（初期状態）

　続けて、［Transitions/Open］をクリックしましょう。画面の状態が変わるのが確認できます。

［Transitions/Close］をクリックすると状態が変わり、図 5-77に戻ります。これらの状態遷移は、

画面内の［HARDWARE］［GAMES］と書かれている部分をクリックしても実行できます。こ

れらは、ActivateStateActionというビヘイビアーで実装しています。

手書き風コントロールの確認

　［Version 2］から［Detail Page］をクリックすると、図 5-80のように手書き風のコントロー

ルを確認できます。

図 5-80　SketchFlow の手書き風コントロール

　この手書き風のコントロールは、スケッチ コントロールと呼ばれ、通常のコントロールの

外観をカスタマイズしたものです。XAML ではコントロールのテンプレートを作成すると、振

る舞いを変えずに、見た目を変えることができます。文字の部分は、［Buxton Sketch］という

手書き風の英文フォントを利用しています。スケッチ コントロールを利用すれば、動作して

いるアプリケーションがプロトタイプであることが伝わり、完成品と誤解を受ける可能性が低

くなり、プロトタイプに対するフィードバックをもらいやすくなります。

170

Chapter 5　Expression と Visual Studio を使用した開発

171

5.9　SketchFlow

SketchFlow アニメーション

　ホームに戻り、［Version 3］をクリックします。画面は図 5-81のようになります。

図 5-81　PCGamingSketch Version 3 の画面

　画面に表示されている［Play SketchFlow

Animation］ボタン、あるいはナビゲーショ

ンから［SketchFlowAnimation1］をクリッ

クすると、SketchFlow アニメーションが実

行されます。

　この SketchFlow アニメーションは、再生

途中に一時停止や再開することができます。

画 面 左 上 に あ る［SketchFlowAnimation1］

の文字の左側にアニメーションのコントロールがあります。

　このアニメーションでは、マウスをクリックしたらどのような画面の動きになるかを説明し

ています。SketchFlow アニメーションは言葉では伝えづらい、まとまった動きをプレゼンす

るためのツールとしても利用できます。

アプリケーション フロー（画面遷移）を作成する

　SketchFlow プロジェクトは複数の画面をともなうアプリケーションのプロトタイプ開発に

適しています。SketchFlow マップ パネルを利用すれば、画面間のつながりを簡単に作成でき

ます。加えて、複数の画面から共通で利用できるコンポーネント画面を作成することができま

す。

　試してみましょう。Expression Blend から［ファイル］→［新しいプロジェクト］を選び、

［Silverlight SketchFlow アプリケーション］を選択して、［名前］を「SFTFS01」として作成

します。Expression Blend の SketchFlow マップ パネルには、すでに［画面 1］が表示されて

います。もし SketchFlow マップ パネルが表示されていなければ、［Shift］+［F12］キーを押

してみましょう。［画面 1］と表示されている部分にマウス カーソルを持っていくと、図 5-84

のように表示されます。この状態でマウスをドラッグ アンド ドロップすると、図 5-85のよう

に新しい画面が作られます。

　［新しい画面］に入力フォーカスがありま

すので、［画面 2］に変更します。同様の操

作で、［画面 2］から［画面 3］を作成しましょ

う。

　続けて、［画面 3］から［画面 2］への接

続を作ります。図 5-86のように［既存の画

面を接続］と表示されている部分からマウ

スをドラッグし、矢印を［画面 2］まで伸ば

し、ドロップします。

図 5-83　 SketchFlow アニメーションの一時停止中

図 5-82　 SketchFlowアニメーションの再生中

図 5-84　 接続された画面の作成アイコン 図 5-85　 接続される画面の作成

図 5-86　 既存の画面を接続

172

Chapter 5　Expression と Visual Studio を使用した開発

173

5.9　SketchFlow

　これで図 5-87のように画面遷移が設定で

きました。

　Blend の［鉛筆］ツールを利用して、それ

ぞれ 3 つの画面が識別できるように、手書

きで番号や記号を描いておくとよいでしょ

う。

　3 つの画面を識別するものがスケッチでき

たら、［F5］キーを押してテスト実行しましょ

う。

　プロトタイピングの初期段階では、具体的

なコントロールを配置する前に、全体のシナリオを確認することが望ましいです。

　鉛筆ツールや手書きのアイデアを写真として貼り付けるなど、スケッチを繰り返しましょう。

　ナビゲーションから［マップ］をクリックすれば、SketchFlow マップで設定したアプリケー

ション フローが表示されます。それぞれの画面をクリックして、画面が変わるのを確認しま

しょう。

図 5-88　SketchFlow プロジェクトの実行

フィードバックを受け取るために、SketchFlowプロトタイプをWebに配置

　Expression Blend から SketchFlow プロジェクトを実行すると、SketchFlow プレイヤーの中

で、プロトタイプが実行されます。実際の開発では、テスト担当者やエンド ユーザーなど、

開発ツールとは別の場所でプロトタイプの評価を行います。作成したプロトタイプを

Expression Blend が入っていない環境で実行するには、プロジェクトをパッケージ化し、Web

サーバーなどで公開しましょう。［ファイル］→［SketchFlow プロジェクトのパッケージ化］

を選択すると、［SketchFlow プロジェクトのパッケージ化］ダイアログが表示されます。［完

成時に Windows Explorer を開く］にチェックしておくと、パッケージ化が終わった段階で、

エクスプローラーに生成されたファイルが表示されます。ファイルの内容は表 5-8のようにな

ります。

ファイル名 説明

Default.aspx ASP.NET を利用してプロトタイプをホストする際のページ

Default.html 一般の Web サーバーを利用してプロトタイプをホストする際のページ

favicon.ico ブラウザーに表示されるファビコン

< プロジェクト名 >.xapプロトタイプのパッケージ（Silverlight アプリケーション）例：SFTFS01.xap

表 5-8 ●生成されたファイルの説明

　プロトタイプは、生成されたパッケージ ファイルをフォルダーごとコピーして、ファイル

サーバーで共有するか、あるいは Web サーバーに配置して公開することができます。

　それでは IIS にホストしてみましょう。c:¥SFフォルダーを作り、先ほど生成されたパッケー

ジ ファイルをフォルダーごとコピーします。

　IIS 管理コンソールを立ち上げ、［Default Web Site］を右クリックして、［仮想ディレクトリ

の追加］を選びます。［仮想ディレクトリの追加］ダイアログが表示されますので、［エイリア

ス］に「SFTFS01」と入力し、［物理パス］として、「c:¥SF¥SFTFS01」を指定し、［OK］

ボタンをクリックします。

　Silverlight がインストールされているブラウザーを利用して、アドレスに「http://<コ

ンピューター名 >/SFTFS/Default.html」と入力して、プロトタイプを起動しましょう。

図 5-89のように Expression Blend の環境とは独立して、SketchFlow プレイヤーが起動します。

　従来のプロトタイピングのように、アプリケーションのバイナリを配布するのではなく、

SketchFlow プロトタイプの URL を伝えるだけで済むので、評価する側の人々はすぐにプロト

タイプを実行できます。

図 5-87　 完成した SketchFlow マップ

174

Chapter 5　Expression と Visual Studio を使用した開発

175

5.9　SketchFlow

図 5-89　IIS でホストした SketchFlow プレイヤーを起動

フィードバックの作成

　さて、ここからフィードバックを行う側の人に視点を変えてみましょう。でき上がったプロ

トタイプを正しく評価して、問題点は速やかに伝えることが重要です。場合によって、言葉で

説明しにくいこともあるでしょう。SketchFlow プレイヤーには、図5-90のようにフィードバッ

クを作成するためのツールが用意されています。

　インク フィードバックや蛍光ペン フィードバックを利用して、フィードバックを作成しま

しょう。図 5-91は、ヘッダーやフッターを作成するようコメントした例です。

　フィードバックはファイルとして保存できるため、ファイル サーバーや電子メールの添付

ファイルなどを通じて、開発者に届けることができます。［フィードバックのエクスポート］

を選択すると、フィードバック ファイルを保存できます。

図 5-91　フィードバックを作成した例

図 5-90　フィードバックのツール

表示している画像のズームインク フィードバックを有効にする

コメントの表示 / 非表示インク フィードバックの表示 / 非表示インク フィードバックの消去蛍光ペン フィードバックを有効にする

コメントの入力

フィード バックのエクスポート（ファイルとして保存）

176

Chapter 5　Expression と Visual Studio を使用した開発

177

5.9　SketchFlow

受け取ったフィードバックを Expression Blend で参照する

　フィードバックをファイルとして受け取り、新しいデザインへ反映させるには、SketchFlow

フィードバック パネルを利用します。［ウィンドウ］→［SketchFlow フィードバック］を選択

すると、パネルの表示と非表示を切り替えられます。SketchFlow フィードバック パネル上で、

をクリックして、フィードバックを読み込みましょう。

　［既存のアイテムを追加］のダイアログが表示され、ファイルの種類が［SketchFlow フィー

ド バ ッ ク ］ と な り ま す。 読 み 込 ん だ フ ィ ー ド バ ッ ク フ ァ イ ル は、 プ ロ ジ ェ ク ト 内 の

Feedback Files フォルダーに追加されます。テキストとインクや蛍光ペンで描かれた

フィードバックも表示されるので、新しい画面を作成する上で参考にできます。

コンポーネント画面を作成する

　複数の画面を持ったアプリケーションを開発する場合、アプリケーション全体で画面のヘッ

ダーやフッターを共通化することがあります。SketchFlow は複数の画面から再利用できるコ

ンポーネント画面を含めて、SketchFlow マップを管理できます。コンポーネント画面とは、

Silverlight の技術的には UserControlを作成することと同じです。それでは、SketchFlow

のプロジェクトに戻り、コンポーネント画

面を作ってみましょう。

　ボタンを 3 つ配置します。マウスをド

ラッグして、図 5-92のように 3 つのボタ

ンを選択します。［ツール］→［コンポーネ

ント画面の作成］を選択します。［コンポー

ネント画面の作成］ダイアログで、［名前］

に「Header」と入力し、［OK］ボタンを

クリックします。

　新しいコンポーネント画面が作成され、

図5-93のように表示されます。SketchFlow

マップ パネルに、Headerと書かれた角の丸い矩形が表示され、［画面 1］に接続しているの

がわかります。

　これは、作成した Header画面が、画面 1 で利用されていることを意味します。

　続いて、Header.xamlに戻り、Header

コントロールを使って画面遷移ができるよ

うにしましょう。

　［1］と書かれたボタンを選択し、［オブ

ジェクト］→［次の場所へ移動］→［画面 1］

を選びます。［2］と［3］についても同様

に［ 画 面 2］［ 画 面 3］ を 選 択 し ま す。

SketchFlowマップ パネル上では、Header

コントロールから、それぞれの画面に実線

の矢印が向かいます。

　続いて、SketchFlow マップ パネルで、

［Header］をドラッグして、［画面 2］へ

ドロップします。同様に［画面 3］へもド

ロップしましょう。図 5-94のように、各

画面に Header コントロールが貼り付け

られました。

　［F5］キーを押して、テスト実行しましょ

う。表示されたプロトタイプから［1］［2］

［3］のボタンをクリックして、対応する

画面に変わるのを確認します。画面の切り

替えを対話的に行うプロトタイピングが簡

単にできることがわかりました。

図 5-94　すべての画面に Header コントロールが貼り付いた状態

図 5-92　3 つのボタンを配置し、選択する

図 5-93　 コンポーネント画面が追加されたプロトタイプ

178

Chapter 5　Expression と Visual Studio を使用した開発

179

5.9　SketchFlow

Word 文書の出力

　SketchFlow のプロトタイプから Word 文書を出力できます。［ファイル］→［Microsoft

Word にエクスポート］を選び、［Word にエクスポート］ダイアログで［OK］をクリックし

ます。このとき、［完成時にドキュメントを開く］にチェックしておけば、出力が終わると

Word 文書が開かれます。目次が自動的に作られ、SketchFlow マップ、画面やコンポーネン

ト画面の画像が出力されます。

実稼働プロジェクトへの変換

　SketchFlow から実稼働プロジェクトに変換できます。実稼働プロジェクトでは SketchFlow

プレイヤーが表示されず、一般の Silverlight アプリケーションとして動作します。最初に［ファ

イル］→［プロジェクトのコピーを保存］を選択し、プロジェクトのコピーを保存しましょう。

誤って変更しないように開発環境と異なる場所に保存するとよいでしょう。続いて、App.

xamlを含んでいる SketchFlow プレイヤー側のプロジェクト ファイルを修正します。プロジェ

クト ファイルを右クリックし、［Windows エクスプローラーでフォルダーを開く］を選びます。

　SketchFlow ソリューションが入っているフォルダー内に、Visual C# のプロジェクト ファ

イルが 2 つあります。それらを見つけ、プロジェクト ファイルそのものをメモ帳などのテキ

スト エディターで開きましょう。

　プロジェクト ファイルの中から、リスト 5-8の 2 行を見つけて削除し、プロジェクト ファ

イルを保存します。

リスト 5-8 ● SketchFlow プロジェクトから削除するタグ<ExpressionBlendPrototypingEnabled>false</ExpressionBlendPrototypingEnabled><ExpressionBlendPrototypeHarness>true</ExpressionBlendPrototypeHarness>

　Expression Blend に戻ると、「このプロジェクトは、Expression Blend 以外のアプリケーショ

ンで変更されています。プロジェクトの再読み込みを行いますか ?」と確認ダイアログが表示

されるので、［はい］を選択します。

　もう一方のプロジェクト ファイルに対しても同様の方法で開き、リスト 5-8の 2 行を見つけ

て削除します。

　続いて、それぞれのプロジェクトの［参照］フォルダーにある［Microsoft.Expression.

Prototyping.Runtime.dll］を削除します。App.xamlを含んでいる側のプロジェクトに対して、

Silverlight の Navigation 機能である［System.Windows.Controls.Navigation］アセンブリを追

加します。これは Silverlight SDK がインストールされている場所＊ 5-3 に置かれています。

　SketchFlow プレイヤー側のプロジェクトから、App.xaml.csファイルを開き、リスト 5-9

のようなコードを見つけます。SketchFlowLibrariesのかっこ内にある文字列を書き写

したあと、その行を削除します。

リスト 5-9 ● App.xaml.cs から削除するコード[assembly: Microsoft.Expression.Prototyping.Services.SketchFlowLibraries("SFTFS01.Screens")]

　続けて、SketchFlow プレイヤーが起動している部分を Silverlight のナビゲーションに変更

します。App.xaml.cs から、リスト 5-10の部分を探し、リスト 5-11のように変更します。

リスト 5-11の Uriクラスのコンストラクタに渡される引数の先頭にあるアドレスは、「/」の

後が、リスト 5-9で書き写した文字列に一致させます。

リスト 5-10 ● SketchFlow プレイヤーが起動しているコードprivate void Application_Startup(object sender, StartupEventArgs e){ this.RootVisual = new Microsoft.Expression.Prototyping.Workspace.PlayerWindow();}

リスト 5-11 ● Silverlight Navigation フレームワークに置き換えたコードprivate void Application_Startup(object sender, StartupEventArgs e){ this.RootVisual = new System.Windows.Controls.Frame() { Source = new Uri("/SFTFS01.Screens;component/画面 _1.xaml", UriKind.Relative) };}

　［F5］キーを押してテスト実行しましょう。SketchFlow プレイヤーは消えています。一度、

実稼働プロジェクトに変換すると、SketchFlow プロジェクトに戻すのは簡単ではありません。

必ずバックアップを残しながら作業してください。

　SketchFlow 固有のビヘイビアーは動作しなくなるので、画面の遷移や状態変更などはコー

ディングが必要となります。例えば、Header コントロールに設定した画面の切り替えは、

それぞれのボタンを「btn1」「btn2」「btn3」と名前を付けて、Click イベントをリスト

5-3： 32 ビット OS の場合： C:¥Program Files¥Microsoft SDKs¥Silverlight¥v4.0¥Libraries¥Client 64 ビット OS の場合： C:¥Program Files (x86)¥Microsoft SDKs¥Silverlight¥v4.0¥Libraries¥Client

180

Chapter 5　Expression と Visual Studio を使用した開発

5-12のように実装できます。

リスト 5-12 ●画面の切り替えの実装例private void btn1_Click(object sender, System.Windows.RoutedEventArgs e){ //* fはリスト 4-6-4の this.RootVisualと同じオブジェクトになります Frame f = (Frame)Application.Current.RootVisual; Uri u = new Uri("/SFTFS01.Screens;component/画面 _1.xaml", UriKind.Relative); f.Navigate(u);}

private void btn2_Click(object sender, System.Windows.RoutedEventArgs e){ Frame f = (Frame)Application.Current.RootVisual; Uri u = new Uri("/SFTFS01.Screens;component/画面 2.xaml", UriKind.Relative); f.Navigate(u);}

private void btn3_Click(object sender, System.Windows.RoutedEventArgs e){ Frame f = (Frame)Application.Current.RootVisual; Uri u = new Uri("/SFTFS01.Screens;component/画面 3.xaml", UriKind.Relative); f.Navigate(u);}

　SketchFlow は と て も 強 力 な ツ ー ル で す。 シ ス テ ム 提 案 の 段 階 か ら も 利 用 で き ま す。

SketchFlow を活用した、効率的なプロトタイピングをお勧めします。