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-74 SharePoint へのパブリッシュが正常終了 図 5-75 リビジョン番号が増えている例 図 5-73 SketchFlow を SharePoint へ公開
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 を用いたプロトタイピング
画面の状態遷移の確認
ホームに戻り、［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］という 手書き風の英文フォントを利用しています。スケッチ コントロールを利用すれば、動作して いるアプリケーションがプロトタイプであることが伝わり、完成品と誤解を受ける可能性が低 くなり、プロトタイプに対するフィードバックをもらいやすくなります。
SketchFlow アニメーション
ホームに戻り、［Version 3］をクリックします。画面は図 5-81のようになります。 図 5-81 PCGamingSketch Version 3 の画面 画面に表示されている［Play SketchFlow Animation］ボタン、あるいはナビゲーショ ンから［SketchFlowAnimation1］をクリッ クすると、SketchFlow アニメーションが実 行されます。 この SketchFlow アニメーションは、再生 途中に一時停止や再開することができます。 画 面 左 上 に あ る［SketchFlowAnimation1］ の文字の左側にアニメーションのコントロールがあります。 このアニメーションでは、マウスをクリックしたらどのような画面の動きになるかを説明しアプリケーション フロー（画面遷移）を作成する
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のように［既存の画 面を接続］と表示されている部分からマウ 図 5-83 SketchFlow アニメーションの一時 停止中 図 5-82 SketchFlowアニメーションの再生中 図 5-84 接続された画面の作成アイコン 図 5-85 接続される画面の作成 図 5-86 既存の画面を接続
これで図 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
」と入力して、プロトタイプを起動しましょう。のように Expression Blend の環境とは独立して、SketchFlow プレイヤーが起動します。
図 5-89 IIS でホストした SketchFlow プレイヤーを起動
フィードバックの作成
さて、ここからフィードバックを行う側の人に視点を変えてみましょう。でき上がったプロ トタイプを正しく評価して、問題点は速やかに伝えることが重要です。場合によって、言葉で 説明しにくいこともあるでしょう。SketchFlow プレイヤーには、図 5-90のようにフィードバッ クを作成するためのツールが用意されています。 インク フィードバックや蛍光ペン フィードバックを利用して、フィードバックを作成しま しょう。図 5-91は、ヘッダーやフッターを作成するようコメントした例です。 フィードバックはファイルとして保存できるため、ファイル サーバーや電子メールの添付 ファイルなどを通じて、開発者に届けることができます。［フィードバックのエクスポート］ を選択すると、フィードバック ファイルを保存できます。 図 5-91 フィードバックを作成した例 図 5-90 フィードバックのツール 表示している画像のズーム インク フィードバックを有効にする コメントの表示 / 非表示 インク フィードバックの表示 / 非表示 インク フィードバックの消去 蛍光ペン フィードバックを有効にする コメントの入力 フィード バックのエクスポート（ファイルとして保存）受け取ったフィードバックを Expression Blend で参照する
フィードバックをファイルとして受け取り、新しいデザインへ反映させるには、SketchFlow フィードバック パネルを利用します。［ウィンドウ］→［SketchFlow フィードバック］を選択 すると、パネルの表示と非表示を切り替えられます。SketchFlow フィードバック パネル上で、 をクリックして、フィードバックを読み込みましょう。 ［既存のアイテムを追加］のダイアログが表示され、ファイルの種類が［SketchFlow フィー ド バ ッ ク ］ と な り ま す。 読 み 込 ん だ フ ィ ー ド バ ッ ク フ ァ イ ル は、 プ ロ ジ ェ ク ト 内 のFeedback
Files
フォルダーに追加されます。テキストとインクや蛍光ペンで描かれた フィードバックも表示されるので、新しい画面を作成する上で参考にできます。コンポーネント画面を作成する
複数の画面を持ったアプリケーションを開発する場合、アプリケーション全体で画面のヘッ ダーやフッターを共通化することがあります。SketchFlow は複数の画面から再利用できるコ ンポーネント画面を含めて、SketchFlow マップを管理できます。コンポーネント画面とは、 Silverlight の技術的にはUserControl
を作成することと同じです。それでは、SketchFlow のプロジェクトに戻り、コンポーネント画 面を作ってみましょう。 ボタンを 3 つ配置します。マウスをド ラッグして、図 5-92のように 3 つのボタ ンを選択します。［ツール］→［コンポーネ ント画面の作成］を選択します。［コンポー ネント画面の作成］ダイアログで、［名前］ に「Header
」と入力し、［OK］ボタンを クリックします。 新しいコンポーネント画面が作成され、 図 5-93のように表示されます。SketchFlow マップ パネルに、Header
と書かれた角の丸い矩形が表示され、［画面 1］に接続しているの がわかります。 これは、作成した 画面が、画面 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 コンポーネント画面が追加されたプ ロトタイプ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 行を見つけ て削除します。 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
コントロールに設定した画面の切り替えは、 それぞれのボタンを「 」「 」「 」と名前を付けて、 イベントを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 を活用した、効率的なプロトタイピングをお勧めします。
