Chapter 5 Expression と Visual Studio を使用した開発 5.9 SketchFlow SketchFlow プロトタイプを SharePoint に公開 SharePoint を利用している場合 5.9 SketchFlow で紹介する SketchFlow プロト

Transcription

1 SketchFlow プロトタイプを SharePoint に公開 SharePoint を利用している場合 で紹介する SketchFlow プロトタイプを SharePoint 上で管理できます 図 5-73 のように [SharePoint にパブリッシュ ] を実行すると 正しい権限を持っていれば 図 5-74 のようにライブラリへのリンクが表示されます 新しいバージョンを SharePoint にアップロードするたびに図 5-75 のようにリビジョン番号が増えていきます フィードバックファイルも SharePoint の中で管理できるようになります 図 5-73 SketchFlow を SharePoint へ公開図 5-74 SharePoint へのパブリッシュが正常終了図 5-75 リビジョン番号が増えている例 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:

2 図 5-76 SketchFlow を用いたプロトタイピング メニューから [ ヘルプ ] [ ようこそ画面 ] を選び [ サンプル ] タブから [PCGamingSketch] というプロジェクトを開きましょう 図 5-77 のような画面が表示されます SketchFlow マップパネルに アプリケーションフローが記されています [F5] キーを押してテスト実行しましょう 図 5-78 のように ブラウザー上に SketchFlow で作られたプロトタイプが読み込まれます 図 5-78 PCGamingSketch を実行したところ SketchFlow で作成したプロジェクトは 正式な開発において活用できます 従来のプロトタイピングでは 捨てる前提でプロトタイプを作成しますが SketchFlow のプロトタイプは少しの手作業で通常の Silverlight アプリケーションに変更できるので 実稼働プロジェクトの出発点にもできます SketchFlow プロトタイプのサンプル実行 まずは Expression Blend に付属しているサンプルプログラムから見ていきましょう 図 5-77 PCGamingSketch サンプル 画面の左上に 画面を移動するためのナビゲーションが用意されています [Version 1] [Version 2][Version 3][Version Approved] をクリックすれば それぞれの画面に移動しますので試してみましょう いくつかは手書きで書いたスケッチを画像として貼り付けたものになっています 家のマークをクリックすれば 最初の画面 ( ホーム ) に戻ります

3 画面の状態遷移の確認 ホームに戻り [Version 2] をクリックします 画面は図 5-79 のようになります 図 5-79 PCGamingSketch の Version 2 画面 ( 初期状態 ) 手書き風コントロールの確認 [Version 2] から [Detail Page] をクリックすると 図 5-80 のように手書き風のコントロールを確認できます 図 5-80 SketchFlow の手書き風コントロール 続けて [Transitions/Open] をクリックしましょう 画面の状態が変わるのが確認できます [Transitions/Close] をクリックすると状態が変わり 図 5-77 に戻ります これらの状態遷移は 画面内の [HARDWARE][GAMES] と書かれている部分をクリックしても実行できます これらは ActivateStateAction というビヘイビアーで実装しています この手書き風のコントロールは スケッチコントロールと呼ばれ 通常のコントロールの外観をカスタマイズしたものです XAML ではコントロールのテンプレートを作成すると 振る舞いを変えずに 見た目を変えることができます 文字の部分は [Buxton Sketch] という手書き風の英文フォントを利用しています スケッチコントロールを利用すれば 動作しているアプリケーションがプロトタイプであることが伝わり 完成品と誤解を受ける可能性が低くなり プロトタイプに対するフィードバックをもらいやすくなります

4 SketchFlow アニメーション ホームに戻り [Version 3] をクリックします 画面は図 5-81 のようになります 図 5-81 PCGamingSketch Version 3 の画面 アプリケーションフロー ( 画面遷移 ) を作成する SketchFlow プロジェクトは複数の画面をともなうアプリケーションのプロトタイプ開発に適しています SketchFlow マップパネルを利用すれば 画面間のつながりを簡単に作成できます 加えて 複数の画面から共通で利用できるコンポーネント画面を作成することができます 試してみましょう Expression Blend から [ ファイル ] [ 新しいプロジェクト ] を選び [Silverlight SketchFlow アプリケーション ] を選択して [ 名前 ] を SFTFS01 として作成します Expression Blend の SketchFlow マップパネルには すでに [ 画面 1] が表示されています もし SketchFlow マップパネルが表示されていなければ [Shift]+[F12] キーを押してみましょう [ 画面 1] と表示されている部分にマウスカーソルを持っていくと 図 5-84 のように表示されます この状態でマウスをドラッグアンドドロップすると 図 5-85 のように新しい画面が作られます 図 5-84 接続された画面の作成アイコン 図 5-85 接続される画面の作成 画面に表示されている [Play SketchFlow 図 5-82 SketchFlow アニメーションの再生中 Animation] ボタン あるいはナビゲーションから [SketchFlowAnimation1] をクリックすると SketchFlow アニメーションが実図 5-83 SketchFlow アニメーションの一時行されます 停止中この SketchFlow アニメーションは 再生途中に一時停止や再開することができます 画面左上にある [SketchFlowAnimation1] の文字の左側にアニメーションのコントロールがあります このアニメーションでは マウスをクリックしたらどのような画面の動きになるかを説明しています SketchFlow アニメーションは言葉では伝えづらい まとまった動きをプレゼンするためのツールとしても利用できます [ 新しい画面 ] に入力フォーカスがありますので [ 画面 2] に変更します 同様の操作で [ 画面 2] から [ 画面 3] を作成しましょう 続けて [ 画面 3] から [ 画面 2] への接続を作ります 図 5-86 のように [ 既存の画面を接続 ] と表示されている部分からマウスをドラッグし 矢印を [ 画面 2] まで伸ばし ドロップします 図 5-86 既存の画面を接続

5 これで図 5-87 のように画面遷移が設定で図 5-87 完成した SketchFlow マップきました Blend の [ 鉛筆 ] ツールを利用して それぞれ 3 つの画面が識別できるように 手書きで番号や記号を描いておくとよいでしょう 3 つの画面を識別するものがスケッチできたら [F5] キーを押してテスト実行しましょう プロトタイピングの初期段階では 具体的なコントロールを配置する前に 全体のシナリオを確認することが望ましいです 鉛筆ツールや手書きのアイデアを写真として貼り付けるなど スケッチを繰り返しましょう ナビゲーションから [ マップ ] をクリックすれば SketchFlow マップで設定したアプリケーションフローが表示されます それぞれの画面をクリックして 画面が変わるのを確認しましょう フィードバックを受け取るために SketchFlow プロトタイプを Web に配置 Expression Blend から SketchFlow プロジェクトを実行すると SketchFlow プレイヤーの中で プロトタイプが実行されます 実際の開発では テスト担当者やエンドユーザーなど 開発ツールとは別の場所でプロトタイプの評価を行います 作成したプロトタイプを Expression Blend が入っていない環境で実行するには プロジェクトをパッケージ化し Web サーバーなどで公開しましょう [ ファイル ] [SketchFlow プロジェクトのパッケージ化 ] を選択すると [SketchFlow プロジェクトのパッケージ化 ] ダイアログが表示されます [ 完成時に Windows Explorer を開く ] にチェックしておくと パッケージ化が終わった段階で エクスプローラーに生成されたファイルが表示されます ファイルの内容は表 5-8 のようになります 表 5-8 生成されたファイルの説明ファイル名説明 Default.aspx ASP.NET を利用してプロトタイプをホストする際のページ 図 5-88 SketchFlow プロジェクトの実行 Default.html favicon.ico < プロジェクト名 >.xap 一般の Web サーバーを利用してプロトタイプをホストする際のページブラウザーに表示されるファビコンプロトタイプのパッケージ (Silverlight アプリケーション ) 例 :SFTFS01.xap プロトタイプは 生成されたパッケージファイルをフォルダーごとコピーして ファイルサーバーで共有するか あるいは Web サーバーに配置して公開することができます それでは IIS にホストしてみましょう c: SF フォルダーを作り 先ほど生成されたパッケージファイルをフォルダーごとコピーします IIS 管理コンソールを立ち上げ [Default Web Site] を右クリックして [ 仮想ディレクトリの追加 ] を選びます [ 仮想ディレクトリの追加 ] ダイアログが表示されますので [ エイリアス ] に SFTFS01 と入力し [ 物理パス ] として c: SF SFTFS01 を指定し [OK] ボタンをクリックします Silverlight がインストールされているブラウザーを利用して アドレスに >/SFTFS/Default.html と入力して プロトタイプを起動しましょう 図 5-89 のように Expression Blend の環境とは独立して SketchFlow プレイヤーが起動します 従来のプロトタイピングのように アプリケーションのバイナリを配布するのではなく SketchFlow プロトタイプの URL を伝えるだけで済むので 評価する側の人々はすぐにプロトタイプを実行できます

6 図 5-89 IIS でホストした SketchFlow プレイヤーを起動 図 5-90 フィードバックのツール 表示している画像のズームインクフィードバックを有効にするフィードバックのエクスポート ( ファイルとして保存 ) コメントの表示 / 非表示インクフィードバックの表示 / 非表示インクフィードバックの消去蛍光ペンフィードバックを有効にする コメントの入力 図 5-91 フィードバックを作成した例 フィードバックの作成 さて ここからフィードバックを行う側の人に視点を変えてみましょう でき上がったプロトタイプを正しく評価して 問題点は速やかに伝えることが重要です 場合によって 言葉で説明しにくいこともあるでしょう SketchFlow プレイヤーには 図 5-90 のようにフィードバックを作成するためのツールが用意されています インクフィードバックや蛍光ペンフィードバックを利用して フィードバックを作成しましょう 図 5-91 は ヘッダーやフッターを作成するようコメントした例です フィードバックはファイルとして保存できるため ファイルサーバーや電子メールの添付ファイルなどを通じて 開発者に届けることができます [ フィードバックのエクスポート ] を選択すると フィードバックファイルを保存できます

7 受け取ったフィードバックを 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-93 コンポーネント画面が追加されたプロトタイプ

8 Word 文書の出力 SketchFlow のプロトタイプから Word 文書を出力できます [ ファイル ] [Microsoft Word にエクスポート ] を選び [Word にエクスポート ] ダイアログで [OK] をクリックします このとき [ 完成時にドキュメントを開く ] にチェックしておけば 出力が終わると Word 文書が開かれます 目次が自動的に作られ SketchFlow マップ 画面やコンポーネント画面の画像が出力されます SketchFlow プレイヤー側のプロジェクトから App.xaml.cs ファイルを開き リスト 5-9 のようなコードを見つけます SketchFlowLibraries のかっこ内にある文字列を書き写したあと その行を削除します リスト 5-9 App.xaml.cs から削除するコード [assembly: Microsoft.Expression.Prototyping.Services.SketchFlowLibraries( "SFTFS01.Screens")] 実稼働プロジェクトへの変換 SketchFlow から実稼働プロジェクトに変換できます 実稼働プロジェクトでは SketchFlow プレイヤーが表示されず 一般の Silverlight アプリケーションとして動作します 最初に [ ファイル ] [ プロジェクトのコピーを保存 ] を選択し プロジェクトのコピーを保存しましょう 誤って変更しないように開発環境と異なる場所に保存するとよいでしょう 続いて App. xaml を含んでいる SketchFlow プレイヤー側のプロジェクトファイルを修正します プロジェクトファイルを右クリックし [Windows エクスプローラーでフォルダーを開く ] を選びます SketchFlow ソリューションが入っているフォルダー内に Visual C# のプロジェクトファイルが 2 つあります それらを見つけ プロジェクトファイルそのものをメモ帳などのテキストエディターで開きましょう プロジェクトファイルの中から リスト 5-8 の 2 行を見つけて削除し プロジェクトファイルを保存します リスト 5-8 SketchFlow プロジェクトから削除するタグ <ExpressionBlendPrototypingEnabled>false</ExpressionBlendPrototypingEnabled> <ExpressionBlendPrototypeHarness>true</ExpressionBlendPrototypeHarness> 続けて 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) ; Expression Blend に戻ると このプロジェクトは Expression Blend 以外のアプリケーションで変更されています プロジェクトの再読み込みを行いますか? と確認ダイアログが表示されるので [ はい ] を選択します もう一方のプロジェクトファイルに対しても同様の方法で開き リスト 5-8 の 2 行を見つけて削除します 続いて それぞれのプロジェクトの [ 参照 ] フォルダーにある [Microsoft.Expression. Prototyping.Runtime.dll] を削除します App.xaml を含んでいる側のプロジェクトに対して Silverlight の Navigation 機能である [System.Windows.Controls.Navigation] アセンブリを追 * 加します これは Silverlight SDK がインストールされている場所 5-3 に置かれています [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

9 5-12 のように実装できます リスト 5-12 画面の切り替えの実装例 private void btn1_click(object sender, System.Windows.RoutedEventArgs e) //* f 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 を活用した 効率的なプロトタイピングをお勧めします 180