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 を活用した、効率的なプロトタイピングをお勧めします。