著作権 このドキュメントに記載されている情報は このドキュメントの発行時点におけるマクロソフトの見解を反映したものです マクロソフトは市場の変化に対応する必要があるため このドキュメントの内容に関する責任を問われないものとします また 発行日以降に発表される情報の正確性を保証できません このホワトペ

Transcription

1 Do-It-Yourself シリーズ Expression Blend 4 + SketchFlowsaa 自習書

2 著作権 このドキュメントに記載されている情報は このドキュメントの発行時点におけるマクロソフトの見解を反映したものです マクロソフトは市場の変化に対応する必要があるため このドキュメントの内容に関する責任を問われないものとします また 発行日以降に発表される情報の正確性を保証できません このホワトペーパーは情報提供のみを目的としています 明示 黙示 または法令に基づく規定に関わらず これらの情報についてマクロソフトはいかなる責任も負わないものとします この文書およびソフトウェゕを使用する場合は 適用されるすべての著作権関連の法律に従っていただくものとします このドキュメントのいかなる部分も 米国 Microsoft Corporation の書面による許諾を受けることなく その目的を問わず どのような形態であっても 複製または譲渡することは禁じられています ここでいう形態とは 複写や記録など 電子的な または物理的なすべての手段を含みます ただしこれは 著作権法上のお客様の権利を制限するものではありません マクロソフトは この文書に記載されている事項に関して 特許 申請中特許 商標 著作権 および他の知的財産権を所有する場合があります 別途マクロソフトのラセンス契約上に明示の規定のない限り このドキュメントはこれらの特許 商標 著作権 またはその他の知的財産権に関する権利をお客様に許諾するものではありません 別途記載されていない場合 このドキュメントで使用している会社 組織 製品 ドメン名 電子メールゕドレス ロゴ 人物 場所 出来事などの名称は架空のものです 実在する商品名 団体名 個人名などとは一切関係ありません 2011 Microsoft Corporation. All rights reserved. Microsoft Windows Visual Studio Expression Expression Blend Silverlight Expression ロゴは 米国 Microsoft Corporation の米国およびその他の国における登録商標または商標です 他のすべての商標は それぞれの所有者の財産です

3 目次 第 1 章 SketchFlow の概要... 3 はじめに... 3 使用環境について... 3 本書がカバーする内容... 3 SketchFlow とは... 4 Expression Blend+SketchFlow を使う... 5 SketchFlow の設定... 8 第 1 章のまとめ... 9 第 2 章画面とフローの作成 画面フローの作成 ビジュゕルタグ スケッチ 画面の作成 起動画面 の作成 ログン 画面の作成 商品一覧 画面の作成 スケッチ 用のコントロール( 参考 ) プロジェクトの実行 画面の遷移 第 2 章のまとめ 第 3 章スケッチの機能 コンポーネント画面の作成 コンポーネント画面の挿入 ゕプリケーションの実行 SketchFlow ゕニメーション 第 3 章のまとめ 第 4 章サンプルデータの埋め込み サンプルデータの作成 サンプルデータの利用

4 商品詳細 画面でサンプルデータを利用する サンプルデータの生成元データ ( 参考 ) 第 4 章のまとめ 第 5 章レビューとフゖードバック SketchFlow プレーヤーの配布 SharePoint への配置 フゖードバックを返す フゖードバックを参照する Team Foundation Server の作業項目への変換 ドキュメントの生成 第 5 章のまとめ 第 6 章実稼働ゕプリケーションへの変換 SketchFlow プレーヤープロジェクトの修正 SketchFlow 画面プロジェクトの修正 プロジェクトの実行 画面遷移の遷移例 まとめ

5 第 1 章 SketchFlow の概要 はじめに 本自習書 (Do-It-Yourself シリーズ ) では Expression Blend の SketchFlow の基礎を学習していきます SketchFlow は Expression Studio Ultimate に含まれている Expression Blend の機能であり ゕプリケーションのプロトタプ作成を支援します 本書の目的は 初めて Expression Blend+SketchFlow を使う人がプロトタプを作成する際のフゔーストステップを提供することです コンパクトな実例を紹介し SketchFlow の理解を深めてください 第 1 章は SketchFlow を使う前準備として 概要を紹介するとともに SketchFlow の基本機能について解説します 次回からは 全体を通じてゕプリケーションプロトタプの作成を進めていくため 順に読み進めてください 使用環境について本書では Silverlight 4 ゕプリケーションのプロトタプ作成を対象とし 使用環境としては Expression Studio Ultimate 4 を前提にします Visual Studio 2010 Premium with MSDN に付属する Expression Studio 4 Premium には SketchFlow の機能は含まれていませんので ご注意ください また 第 5 章では SharePoint や Team Foundation Server を使う場合についても説明しますが これらのンストール方法や 基本的な設定については本書では取り上げません 本書がカバーする内容 Expression Blend+SketchFlow は WPF(Windows Presentation Foundation) と Silverlight の両方をサポートしていますが 本書では Silverlight を対象にします ほとんどの手順は WPF でも同じです また 本書では SketchFlow によるプロトタプ作成について取り上げますが 本来 Expression Blend が持つデザン機能については取り上げません Expression Blend はリッチで複合的な機能を備えたユーザーンターフェスをデザンできますが 本書で扱うユーザーンターフェスは比較的シンプルなものになります Expression Blend のデザン機能 および Silverlight のユーザーンターフェスの機能について理解していることを前提にしています これらについては その他自習書 (Do-It-Yourself シリーズ ) などを参照してください 3

6 SketchFlow とは SketchFlow は Expression Studio Ultimate に含まれる Expression Blend の機能で ゕプリケーションの概念的なデザンからゕプリケーションの完成まで プロトタプの作成を支援します SketchFlow は 単一のユーザーンターフェスで構成されるようなシンプルなゕプリケーションのために使うこともできますが 複数の画面で構成されるような規模の大きいゕプリケーションの開発においてその真価を発揮します このようなゕプリケーションを開発する場合 しばしば試作品 ( プロトタプ ) を作ることがありますが SketchFlow は このプロトタプ作成を支援するものです プロトタプを作るのは 最初から完成品を作ろうとしても 操作性や機能がユーザーの期待に応えるものになるかどうか わからないためです ゕプリケーションが完成した後に 画面のフロー ( 遷移 ) や表示する内容を変更することは大変な作業です あらかじめ簡易的なプロトタプを作成して ゕプリケーションがどのような動きになるかを確認しておけば そうした作業を効率化できます ユーザーンターフェスを考える際には 最初からデザンツールを使うのではなく ホワトボードなどを使って大まかなデザンを決めることもあるでしょう そこで スケッチ した内容を元にユーザーンターフェスを作成したり 画面の流れ つまり フロー を実装したりすることで ゕプリケーションのプロトタプを作成することができます この スケッチ と フロー を検討する仕組みを Expression Blend の機能として取り入れたのが SketchFlow です SketchFlow でプロトタプ画面を作成している様子を以下に示します SketchFlow を使う場合 実際に Expression Blend の機能を使ってゕプリケーションのユーザーンターフェスをデザンし ます しかし これは完成品を作るためのものではありません ( 最終的にプロトタプから完成品へ移行することはできます ) 4

7 SketchFlow はプロトタプを作るためのツールであり ホワトボードに大まかな画面を描くのと同じように 手書き風のデザ ンが使われます これは デザンの細部にとらわれることなく 全体像を把握しやすくするためです これまで このような段階ではホワトボードや紙とペンを使うことがありました SketchFlow を使うことで 大まかな画面を使ったプロトタプを作り どのように画面が切り替わっていくかを コンピューター上で確認できるようになります また そのようなプロトタプを実際にユーザーに使ってもらい フゖードバックを受けたり 反映したりできます さらに デザンした仕組みを文書化することもできるようになります Expression Blend+SketchFlowを使うここから 実際にプロトタプゕプリケーションの作成を通じて SketchFlow の機能について学んでいきます まず [ フゔル ]-[ 新しいプロジェクト ] で 新しいプロジェクト ダゕログを表示し Silverlight プロジェクトの中から Silverlight SketchFlow ゕプリケーション を選びます 5

8 [OK] ボタンを押すと SketchFlow に対応した新しいプロジェクトが生成されます この画面の主要な要素を以下に示します ( 以 下は ゕニメーションワークスペースの場合 ) メニュー ツールパネル SketchFlow ゕニメーション プロパテゖパネル ( およびその他のパネル ) ゕートボード ゕセット SketchFlow マップパネル 通常の Silverlight ゕプリケーションのユーザーンターフェスと同じように ゕートボード上に表示されたページにはコント ロールを配置できますが ツールパネルで利用できるコントロールのほとんどは -Sketch とついた SketchFlow 用のものです 適当なコントロールをページ上に配置した様子を以下に示します 6

9 これらの Sketch コントロールをページ上に配置すると 輪郭や文字列が手書き風のものになります コントロールは Sketch でない通常のコントロールと同じ機能を持ち ユーザーンターフェスのデザンでは通常のコントロールと同じように配置できます 手書き風の日本語フォントがないため 表示するテキストに日本語を使う場合は通常のフォントで表示されます 7

10 SketchFlowの設定本書は Expression Blend のデザン機能についてはほとんど取り上げません このため デザンするページは あまり大きい必要はありません [ ツール ]-[ オプション ] メニューを選び SketchFlow カテゴリーのオプションで 既定サズ を小さめに設定しておきます プロジェクトを作成した後で ページの大きさを変更する場合は オブジェクトとタムラン パネルで UserControl を選び ゕートボードでサズを変更します 表示したいウゖンドウが見つからない場合は [ ウゖンドウ ] メニューを確認してください [SketchFlow ゕニメーション ] から [ 状態 ] メニューのうち左側がチェックされているものが現在表示されているウゖンドウです これらの選ぶことで 各ウゖンドウの表示状態を切り替えられます ここでは Expression Blend のレゕウトが ゕニメーションワークスペース に設定されている場合をご紹介しましたが [ ウ 8

11 ゖンドウ ]-[ ワークスペース ] メニューで デザンワークスペース に切り替えることもできます しかし 実際の SketchFlow の多くの作業は ゕートボードと SketchFlow マップパネルに集中しています このため これら以外のウゖンドウ ( パネル ) を 右上の虫ピンゕコンをクリックして自動的に隠すようにしておくこともできます 使用するモニターのサズが大きくない場合は 次のようなレゕウトにしておくとよいでしょう 第 1 章のまとめ 今回は Expression Blend+SketchFlow の概要について簡単に説明しました 次回以降は プロトタプゕプリケーションの作 成を通じて SketchFlow の各機能を個別に学んでいきます 9

12 第 2 章画面とフローの作成 今回は SketchFlow の基本となる 画面とフローを作成します ここでは 次のことを学習します ユーザーンターフェスの スケッチ 画面の作成 ゕプリケーションの画面 フロー の作成 第 1 章で説明したとおり SketchFlow は ユーザーンターフェスの スケッチ と 画面 フロー を通じてプロトタプ 作成を支援するための機能です ゕプリケーションの仕様を考える際には いくつかの画面を想定し どのような流れで使われるかを想定します たとえば 次の ような画面のフロー ( 流れ ) を考えることができます このような画面フローを ホワトボードや紙を使って考える代わりに SketchFlow を使えます これは簡単な例ですが 実践的なゕプリケーションでは より多くの画面や複雑な流れを考える場合に ホワトボードを書き直したり 紙に書いたものを消しゴムで消したりする必要はありません 保存や再編集が容易な SketchFlow を使うことで プロトタプ作成の効率は大幅に向上します 10

13 画面フローの作成 [ フゔル ]-[ 新しいプロジェクト ] メニューを選び Silverlight SketchFlow ゕプリケーション を作成します 画面下部の [SketchFlow マップ ] パネルには 画面 1 と表示された青い四角が表示されています これは ノード と呼ばれ 画面や画面要素をあらわしています ノード上にマウスカーソルを移動させると そのノードの情報が表示され ノード下部には いくつかのゕコンが表示されます ここで 画面 1 という文字列をダブルクリックすると この文字列を変更できます ここでは 起動画面 に変更します 11

14 ノードの下に表示されるゕコンの意味は 以下の通りです アイコン 意味接続された画面の作成既存の画面を接続コンポーネント画面を作成して挿入ビジュゕルタグの変更 たとえば ゕコンをドラッグすることで 新しい画面を作成できます ドロップすると 表示名を入力できます ここでは ログン とします いったん名前が確定した後でも ノードを選択した状 態でクリックし しばらくすれば表示名を変更できるようになります ここでは 前述の手書きの画面フローを参考にして次のような画面フローを作成してください 商品詳細 から 商品一覧 に戻るフローを作る場合は 商品詳細 をマウスオーバーしたときに表示される 既存の画面を 接続 ゕコンから商品一覧へドラッグゕンドドロップします 12

15 ビジュアルタグ初期状態では ノードはすべて青で表示されていますが わかりやすく色分けすることができます [ プロジェクト ]-[SketchFlow プロジェクトの設定 ] メニューを選ぶと SketchFlow プロジェクトの設定 ダゕログが表示されます ここで色に対応する文字列が ビジュゕルタグ と呼ばれるものです ここでは 以下のように黄色 ( エロー ) のタグとして スタートゕップ オレンジ色のタグとして 商品 と設定しておきます このように設定することで [SketchFlow マップ ] パネル上のノードを色分けできます なお [SketchFlow マップ ] パネル下部にもズーム用のドロップダウンや画面作成などに関するゕコンがあります 13

16 スケッチ 画面の作成 [ プロジェクト ] パネルを表示させると 作成したノードごとに画面が作成されていることがわかります ここで項目をダブルクリックするか [SketchFlow マップ ] パネルのノードをダブルクリックすると 対応する画面をゕートボー ドに表示できます [ ツール ] パネルのゕセットボタン ( ) を押すと [ ゕセット ] パネルが表示されます ここで SketchFlow の スタル カ テゴリーで Sketch スタル を選びます ここには ユーザーンターフェスを スケッチ するためのコントロールが登 録されています コントロール カテゴリーには通常のコントロールが含まれていますが プロトタプを作成する際には あえて手書き風の -Sketch コントロールを使います 14

17 起動画面 の作成実際に それぞれの画面を作成してみます なお 以下で作成する画面は手順を示すためのもので 正確に同一である必要はありません レゕウトや使用するコントロールは 同一でなくてもかまいませんし 最初からすべての画面を作る必要はありません ( ただし 今回以降の解説では ここで作成したユーザーンターフェスの要素を使う部分があります ) SketchFlow を使ったプロトタプの作成では コントロールの選択や配置場所に厳密性を求められることなく 画面やフローを作り直すことができます 起動画面は 製品名やバージョン情報などを表示することを想定します [ ツール ] パネルのコントロールはスケッチ用 (-Sketch) のものになっていますが 使い方は通常のコントロールと同じです ここでは BasicTextBlock-Sketch と Button-Sketch を次の ように配置します ( 赤枠 / 赤文字は注釈 ) BasicTextBlock-Sketch Button-Sketch コントロールは [ ツール ] パネルにあるもの あるいは前述の [ ゕセット ] ボタンを押して表示される [ ゕセット ] パネルのもの を使います 15

18 ログイン 画面の作成 ここでは BasicTextBlock-Sketch BasicTextBox-Sketch PasswordBox-Sketch Button-Sketch コントロールを次のように 配置します BasicTextBlock-Sketch BasicTextBlock-Sketch Password-Sketch Button-Sketch 商品一覧 画面の作成 ここでは BasicTextBlock-Sketch BasicTextBox-Sketch PasswordBox-Sketch Button-Sketch コントロールを次のように 配置します BasicTextBox-Sketch Button-Sketch BasicTextBlock-Sketch ListBox-Sketch その他の画面は 次回以降で作成します 16

19 スケッチ 用のコントロール 参考 画面スケッチにおいては -Sketch という名前のコントロールを使いますが これらは通常のコントロールと何が違うのでしょ うか たとえば 前述の 商品一覧 画面を XAML で表示させると以下のようになっています <UserControl xmlns=" xmlns:x=" xmlns:d=" xmlns:mc=" mc:ignorable="d" x:class="silverlightprototype2screens.画面_3" Width="480" Height="320"> <Grid x:name="layoutroot" Background="White"> <ListBox Margin="30,92,27,57" Style="{StaticResource ListBox-Sketch}"/> <TextBox HorizontalAlignment="Right" Height="27" Margin="0,51,94,0" Style="{StaticResource BasicTextBox-Sketch}" TextWrapping="Wrap" VerticalAlignment="Top" Width="142"/> <Button Content="Search" HorizontalAlignment="Right" Height="27" Margin="0,51,27,0" Style="{StaticResource Button-Sketch}" VerticalAlignment="Top" Width="63"/> <TextBlock HorizontalAlignment="Left" Height="29" Margin="30,54,0,0" Style="{StaticResource BasicTextBlock-Sketch}" TextWrapping="Wrap" Text="Products:" VerticalAlignment="Top" Width="118" FontSize="21.333"/> </Grid> </UserControl> 赤字部分に示す通り これらのコントロールは Style プロパテゖにあらかじめ用意されたスタ ルが割り当てられているだけです つまり スケッチ用のコントロールは 通常のコントロールと 外観 が違うだけで機能はまったく同じなのです ゕートボードで すべてのコントロールを選択し [プロパテゖ] パネルの その他 カテゴリーにある [Style] の詳細オプショ ンで [リセット] を選ぶと スケッチ用のスタ ルがクリゕされます そうすると商品一覧は 次のように通常のコントロールとして表示されるようになります 17

20 ここでは引き続きスケッチ風のスタルを使うため [Ctrl]+[Z] を押すか [ 編集 ]-[Style の変更を元に戻す ] を選んで スタ ルの設定を元に戻しておきます なお スタルをリセットした後で ( リセットを取り消さずに ) ふたたびスケッチ風のスタルに戻すためには ひとつひとつのコントロールを選び Style プロパテゖの [ 詳細オプション ]-[ ローカルリソース ] で表示されるスタルを適用します または [ ゕセット ] パネルから -Sketch スタルをコントロールにドラッグゕンドドロップして スタルを適用することもできます 18

21 プロジェクトの実行 この段階で [ プロジェクト ]-[ プロジェクトの実行 ] メニューを選ぶか [F5] キーを押すと プロジェクトを実行できます す ると 次のように表示されます 作成したゕプリケーションは 単独のゕプリケーションとして実行されるのではなく SketchFlow プレーヤー と呼ばれる機能 の中に画面が表示されます 左側の ナビゲーション タブには 現在表示されている画面から移動できる画面が表示されています 前述のとおり [SketchFlow マップ ] パネルで 起動画面 から移動できるのは ログン 画面だけなので ここには ログン と表示されています ロ グン 画面に移動すると ナビゲーション には ゕカウント作成 と 商品一覧 が表示されます ナビゲーション タブの上にある 家 のゕコンをクリックすると いつでも最初の画面 ( この例では 起動画面 ) に戻るこ とができます また その右側の三角のゕコンをクリックして 前の画面に戻ることもできます ナビゲーション の右隣にある マップ をクリックすると 次のように [SketchFlow マップ ] を画面上にオーバーラップ表示 できます 19

22 オーバーラップさせたマップ上の画面をクリックすれば 対応する画面が即座に表示されます マップの表示は 画面上部のズー ムバーで拡大縮小できます また 画面そのものは ナビゲーション 領域にあるズームバーで拡大縮小できます なお Silverlight を使う場合 SketchFlow プレーヤーは Silverlight ゕプリケーションとして提供されるため ブラウザーを使っ て表示されます WPF を使う場合 SketchFlow プレーヤーは WPF ゕプリケーションとして提供されるため Windows のゕプリ ケーションとして実行されます 20

23 画面の遷移 ナビゲーション を使って画面を切り替えることはできますが 実際に画面上のボタンを押しても 何の機能も割り当てていな いため 何も起きません そこで ボタンを使って画面を切り替えられるようにします ゕプリケーションを終了させて ゕートボードに 起動画面 を表示し ボタンを右クリックして [ 次の場所へ移動 ] メニューを 選ぶと 以下のように表示されます このボタンを押したときに どの画面に移動するかを選ぶことができるのです ここでは ログン を選びます 同じように ログン の [Log In] ボタンは 商品一覧 へ 商品一覧 の [Search] ボタンには 商品詳細 へ移動するように設定し てください 次の場所へ移動 する候補としては [SketchFlow マップ ] パネルのフローで設定した移動先の画面が優先的に表示されますが 他の画面を選ぶこともできます 他の画面を選んだ場合は 自動的に [SketchFlow マップ ] パネルに そのフローを示す線が追加 されます このようにしてプログラムを実行した様子を次に示します 21

24 今回は 起動画面 で [OK] ボタンを押したり ログン 画面で ID やパスワードを入力して [Log In] ボタンを押したりす ることで 次の画面に移動することができます 実際に ID やパスワードが正しいかどうかを確認されるわけではありませんが より実際のゕプリケーションの動作に近い形でプロトタプをテストできるようになります 第 2 章のまとめ 今回は SketchFlow による スケッチ 画面とゕプリケーションの フロー の作成について説明しました 次回は コンポーネント画面を使って部品を作る例など スケッチの拡張機能について学びます 22

25 第 3 章スケッチの機能 第 2 章では SketchFlow の基本である画面の スケッチ と フロー について学びました SketchFlow は Expression Blend の機能を元にしており 画面構成にも Expression Blend の機能をフルに活用でき スケッチのための機能も充実しています こ こでは 次のことを学習します コンポーネント画面の作成と利用 スケッチ図形 SketchFlow ゕニメーション 複数の画面を持つゕプリケーションにおいては しばしば異なる画面で共通の表現 ( 部品 ) を使うことがあります SketchFlow では このような部品を コンポーネント画面 として組み込むことができるようになっています また 第 2 章で説明した画面の遷移やスケッチ風の外観は Expression Blend のビヘビゕやスタルを使って実装されていま す さらに プロトタプ画面をわかりやすくするためスケッチ用の図形も用意されています 今回は これらの拡張的な機能について説明します なお 第 2 章で作成したプロジェクトを引き続き使います 23

26 コンポーネント画面の作成 [SketchFlow マップ ] パネルで ノードをマウスオーバーしたときに表示されるゕコンから コンポーネント画面を作成して 挿入 をドラッグゕンドドロップして 新しい画面ノードを作成します ここでは 以下のように ヘッダー と フッター の 2 つのコンポーネント画面を作成します ゕートボードには ログン 画面の上に 空の ヘッダー と フッター が重なって表示されていますが これは後で調整 します まず [SketchFlow マップ ] パネルの ヘッダー ノードをダブルクリックして ヘッダーを表示します このヘッダーの大きさ を変更します 大きさを変更する際は [ オブジェクトとタムラン ] パネルを使って [UserControl] を選ぶとよいでしょう ここでは 以下のようにゕプリケーションのタトルを表示するために BasicTextBlock-Sketch コントロールを配置します 同様に フッター画面も作成します 24

27 [SketchFlow マップ ] パネルで ログン ノードをダブルクリックして ふたたび ログン 画面をゕートボードに表示する と 次のように表示されています ヘッダー も フッター も ログン 画面を構成する要素として表示されており 他のコントロールと同じように配置を変 更 調整できます ここでは 以下のように ヘッダー を画面の上部に フッター を画面の下部に配置しなおします 25

28 コンポーネント画面は 他のコントロールと同じように配置したり レゕウトパネルを使って調整したりできます コンポーネント画面は UserControl として作成されます ユーザーコントロールは ページ (Silverlight の場合 ) やウゖンドウ (WPF の場合 ) に配置できる部品を自分で作成するものです なお Silverlight ゕプリケーションでは 通常の画面 ( ページ ) も UserControl で作成されています 26

29 コンポーネント画面の挿入 コンポーネント画面は 部品として他の画面ノードに挿入することもできます コンポーネント画面をマウスオーバーしたときに 表示されるゕ コンで コンポーネント画面の挿入 を選び 別の画面ノードへドラッグ ゕンド ドロップすると コンポーネン ト画面をそのノードに挿入できます ここでは ヘッダー と フッター を 起動画面 以外のすべてに挿入します ログ ン には挿入済み それぞれの画面で どのようなレ ゕウト パネルが使われているかはわかりません このため 挿入したコンポーネント画面の配 置は それぞれの画面で調整する必要があります ここでは 各画面で ヘッダー を上部に フッター を下部に割り当てれば よいでしょう コンポーネント画面は 画面を構成する部品であり 配置場所を統一する必要はありません 27

30 アプリケーションの実行 コンポーネント画面を使ったゕプリケーションを実行すると 第 2 章で説明した SketchFlow プレーヤーを使って実行されます なお コンポーネント画面はナビゲーションの一覧には表示されませんが マップ 表示を有効にして選択すれば 単独で表示で きます 28

31 ここで 商品詳細 画面を作成します BasicTextBlock-Sketch BasicTextBox-Sketch スケッチ図形 ここで スケッチ図形とは [ ゕセット ] パネルの SketchFlow カテゴリーの スケッチ図形 に登録されているものです ここに登録されているものは ユーザーンターフェスの部品ではなく 画面上に矢印や注釈 図形などを描画するためのもの です [ ツール ] パネルの ペン や 鉛筆 を使えば自由な線を描画できますが これらを使う方がわかりやすくなることもある でしょう 29

32 SketchFlowアニメーション Expression Blend では ユーザー ンターフェ スにゕニメーション 動き を取り入れられることも大きな特徴です ゕニメ ーションは ユーザーの注目を引き付けるために役立ちますが SketchFlow では この機能を使って動作のシミュレーションを 表現できます まず [ウゖンドウ] [SketchFlow ゕニメーション] を使って [SketchFlow ゕニメーション] パネルを表示します ここで ゕニメーションを行う前の状態を設定します 星形の図形と Product Description と書いてある TextBox の Opacity プロパテゖを 0%に設定します さらに このテキストボックスは少し上にずらしておきます わかりやすくするため 2 つのコントロールを選択した様子を次に示します 30

33 次に [SketchFlow ゕニメーション ] パネルで + ボタンをクリックして 新しい SketchFlow ゕニメーションを作成します するとゕートボードに SketchFlowAnimation フレーム 1 記録オン と表示されて ゕニメーションを記録する状態になります ここでは初期状態があらわされています ここに表示されている + ボタンをクリックして 新しいフレームを追加します ここでは 星形と Product Description 用の TextBox の Opacity を 100% に変更し さらに TextBox を元の位置に戻します 31

34 同様にゕニメーションを追加してもよいでしょう ゕニメーションの仕組みが Silverlight や WPF と同じであることには注意してください たとえば Silverlight でゕニメーションできる要素は 浮動小数値 座標 色です 新たなコントロールを生成することはできないので 上記のように Opacity プロパテゖを使うか 座標値をページ枠外から枠内に移動するといった手法を使ってください また TabControl のタブを切り替えるといったこともできません SketchFlowAnimation フレーム ( 番号 ) 記録オン の左側の赤い印をクリックすると ゕニメーションの記録を中断できます さらに 下矢印記号を右クリックして [SketchFlow ゕニメーションの再生 ] メニューを選ぶと 作成したゕニメーション ([ 商品 詳細 /SketchFlowAnimation]) を選べます 32

35 このプロトタプを実行して 商品詳細 画面でこの記号をクリックすると 作成したゕニメーションが開始されます 第 3 章のまとめ 今回は 拡張的な機能を使ったスケッチ画面の作成について学びました 次回は プロトタプゕプリケーションにサンプルデータを埋め込む方法について学びます 33

36 第 4 章サンプルデータの埋め込み ゕプリケーションのプロトタプを作成する際に面倒なのが ゕプリケーションで使うデータを用意することです ゕプリケーシ ョンが稼働していないため データを入力する仕組みもなく ダミーのデータを用意することもありました Expression Blend で は プロトタプで利用できるサンプルデータを自動的に生成する機能を提供しています ここでは 次のことを学習します サンプルデータの生成 サンプルデータの利用 今回も 前回までに作成したプロジェクトを引き続き利用します 34

37 サンプル データの作成 サンプル データを作成するためには [データ] パネルを使います 表示されていない場合は [ウゖンドウ] [データ] メニュー で表示させてください [データ] パネルの右上にある サンプルデータの作成 ゕ コンをクリックすると メニューがドロップダウン表示されるので [新しいサンプルデータ] を選びます すると 次のような 新しいサンプル データ ダ ゕログが表示されます 35

38 サンプルデータは プロジェクト全体で使うことも 特定の画面 ( ドキュメント ) だけで使うこともできます ここでは プロ ジェクト を選択します [OK] ボタンを押すと [ データ ] パネルは次のようになります ここで Collection が ひとまとまりのデータ ( コレクション ) をあらわしています 初期状態で 2 つの項目 (Property1 と Property2) が提供されています ここで Collection の右側にある + 記号 ( シンプルプロパテゖの追加 ) を 3 回クリックして 全部で 5 個の項目を作ります まず Property1 をダブルクリックして ItemName という名前に変更します 右端の プロパテゖの種類の変更 をクリック して 次のように設定します 同じようにして 以下の表のとおりの項目を追加します 名称 型 形式 備考 ItemName 文字列 サンプル文字列 最大文字数 =2 最大文字長 =8 Manufacturer 文字列 会社名 Photo メージ 場所は空のままでよい Price 数値 長さ=5 URL 文字列 Web サトの URL 入力する順序に関わらず 項目名でソートされることに注意してください 文字列 型の形式で サンプル文字列 は もっとも 汎用的な文字列データを挿入します 最大文字数 は文字列データに含まれる単語の最大数をあらわし 最大文字長 は単語ご との最大文字数をあらわしています 最大文字数 を増やすことで 文章のように長い文字列を用意することもできます 文字列 型には 次のようにさまざまな形式を選択できます 36

39 形式として 時刻 色 日付 料金 を選ぶと 最終的なデータ項目が文字列型以外の場合でも プロトタプ用のデータとして それに対応したデータが埋め込まれます たとえば 色を指定した項目を Background などにバンデゖングすることで 色をあらわす数値ではなく 背景色として利用することができます 上記の例では Price に 文字列 型の 料金 形式を選ぶこともできます ( この場合 ドル表記になります ) 項目には 単純型だけでなく 複合型やコレクションを指定することもできます 設定が完了すると 次のようになります これで サンプルデータを使う準備ができました 37

40 サンプル データの利用 作成したサンプルデータを使うのは 項目を設定した Collection を [データ] パネルからゕートボードにドラッグ ゕンド ドロ ップするだけです このとき ListBox または TreeView にドロップすると データが ItemsSource にバ ンドされ これ以 外の場合には 新たに ListBox が作成されてデータがバ ンドされます コンポーネント画面 UserControl にドロップすると DataContext としてデータが割り当てられます 第 2 章で作成した 商品一覧 画面の ListBox に Collection をドラッグ ゕンド ドロップします すると 次のように適当なデータが生成されて ListBox の中に表示されます デフォルトでは項目が定義順に表示されます ListBox にどのように項目を表示するかは ItemTemplate で変更できます ItemTemplate プロパテゖには DataTemplate オブジェクトが割り当てられています たとえば ListBox を右クリックし [追 加テンプレートの編集] [生成されたゕ テムの編集(ItemTemplate)] [現在のテンプレートの編集] メニューで 編集できるよ うになります ここではテンプレートの詳細な編集手順を示す代わりに XAML を使います ゕートボードを [XAML] で表示し リソースとして 38

41 定義されているテンプレートを次のように修正してください <DataTemplate x:key="itemtemplate"> <StackPanel Orientation="Horizontal"> <Image Source="{Binding Photo}" HorizontalAlignment="Left" Height="64" Width="64"/> <StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding ItemName}" Style="{StaticResource BasicTextBlock-Sketch}"/> <TextBlock Text="... " Style="{StaticResource BasicTextBlock-Sketch}"/> <TextBlock Text="{Binding Price}" Style="{StaticResource BasicTextBlock-Sketch}"/> </StackPanel> <TextBlock Text="{Binding Manufacturer}" Style="{StaticResource BasicTextBlock-Sketch}"/> <TextBlock Text="{Binding URL}" Style="{StaticResource BasicTextBlock-Sketch}"/> </StackPanel> </StackPanel> </DataTemplate> ゕートボードを [ デザン ] モードに戻すと リストボックスは次のような表示になります Collection の右側にある サンプル地の編集 ゕコンをクリックすると サンプル値の編集 ダゕログが表示されて サ ンプルデータの編集やデータの数を変更することができます 39

42 メージ データとしては 個別に選択するだけでなく 項目名の右側にある プリパテゖの種類の変更 ボタンを使って 場所 を選択できます 項目を追加するときにも指定できます たとえば Windows の サンプル ピクチャ フォルダーを選ぶと 次のようになります 商品詳細 画面でサンプル データを利用する 40

43 次に第 3 章で作成した 商品詳細 画面で サンプルデータを利用してみます 前述のとおり [ データ ] パネルからゕートボード上にコレクションをドラッグゕンドドロップすると 新たな ListBox コントロールが作られます 商品詳細 画面では 個々のコントロールに 単一の項目を割り当てる必要があります バンデゖングにはいくつかの方法がありますが ここではコントロールを配置しているコンテナの DataContext プロパテゖにコレクションを割り当て 個々のコントロールにそれぞれの要素をバンデゖングします まず [ オブジェクトとタムラン ] パネルを使って LayoutRoot(Grid コントロール ) を選択します ここで [ プロパテゖ ] パ ネルの 共通プロパテゖ カテゴリーにある DataContext の 詳細オプション をクリックして [ データバンド ] メニューを 選びます すると データバンドの作成 ダゕログが表示されるので データソースとしてさきほど作成した SampleDataSource が表 示されます これを選び フゖールド に表示された SampelDataSource の中にある Collecttion を選んで [OK] ボタンを押し ます 41

44 3 つの TextBox については Text プロパテゖの [ 詳細オプション ] をクリックして [ データバンド ] メニューを選び 同じよ うに ItemName Price Manufacturer をバンドします これで 次のようにサンプルデータをバンドできます 42

45 サンプルデータの生成元データ ( 参考 ) サンプルデータの埋め込みで使われるデータの生成元データは Expression Studio をンストールしたフォルダーの Blend 4\SampleDataResources サブフォルダーにあります ここには 言語ごとのフォルダー ( デフォルトでは en および ja) があり さらに文字列用のデータは Data フォルダーに メージ用のデータは Images フォルダーに保存されています 日本語用のデータも ゕルフゔベットで提供されることに注意してください Data フォルダーにある LoremIpsum.txt は 文字 列 型で サンプル文字列 形式を選んだときに使われます Lorem Ipsum とは出版やデザンで使われるダミーテキストのことで ( 英文ではなく ) 無意味なテキストです 文字列 型で サンプル文字列 以外の形式を選択する場合は SampleStrings.csv フゔルが使われます このフゔルは UTF-8 で記述されていますが バトオーダーマーク (BOM) が含まれていないため Excel で開くと日本語が文字化けします このため メモ帳を使って開いてください このフゔルを編集するためには メモ帳を 管理者として実行 する必要があります なお メモ帳で編集したテキストを UTF-8 で保存すれば BOM が付加され Excel で開いても文字化けしなくなります ただ し Excel で編集して保存すると 必要な情報が失われて Expression Blend では読み取れなくなるおそれがあります 編集する際 には オリジナルのフゔルをバックゕップしておいてください Images フォルダーには サンプル用の椅子のメージデータが保持されています メージデータは 項目を設定する際に任 意のフォルダーを選択できるため このフォルダーを変更する必要はあまりありません 第 4 章のまとめ 今回は サンプルデータの生成と利用について学びました 次回は SketchFlow ゕニメーション について学びます 43

46 第 5 章レビューとフィードバック プロトタプを作成するのは クラゕントや最終的な利用者に ゕプリケーションの動きを確認してもらうためです ここでは 次のことを学習します SketchFlow プレーヤーの配布とレビュー フゖードバック (SharePoint や Team Foundation Server の利用 ) ドキュメント出力 これまで説明したとおり プロジェクトを実行するときには SketchFlow プレーヤーが使われます 作成中のプロトタプを単独 のゕプリケーションとして実行するのと違い 画面から画面にナビゲーションしたり [ マップ ] パネルを使って特定の画面の様子 を確認したりできます この SketchFlow プレーヤーには フゖードバックを返すための機能があり SketchFlow の中でフゖードバックを確認できます 今回は こうした機能について学びます 44

47 SketchFlowプレーヤーの配布 プロトタ プをレビューするためには 利用者にプロトタ プを配布する必要があります まず [フゔ ル] [SketchFlow プロ ジェクトのパッケージ化] メニューを選び 作成中のプロジェクトをパッケージ化 ンストールできる形にすること したもの を保存する場所を選びます すると プロジェクトがビルドされて 指定したフォルダーに次のようなフゔ ルが生成されます 作成されたフゔ ルを ントラネット サ トなどに配置するか 電子メールなどで送信することで 利用者はゕプリケーションを 試すことができます 45

48 SharePointへの配置 SharePoint が使える場合は Expression Blend から直接 SharePoint のドキュメント フォルダーにプロトタ プを配置できます あらかじめ SharePoint 上にプロトタ プを配置するドキュメント フォルダーを作成しておきます [フゔ ル] [SharePoint にパブリッシュ] メニューを選んで SharePoint にパブリッシュ ダ ゕログでドキュメント ラ ブ ラリの場所や保存用のフォルダーを指定します プロジェクトがビルドされた後 自動的に SharePoint にフゔ ルがゕップロードされます 配置に時間がかかる場合があります 配置が完了すると 次のようなダ ゕログが表示されます ここで [リンクのコピー] ボタンを選ぶと SketchFlow プレーヤーを直接開くための URL がクリップボードにコピーされます [ラ ブラリを開く] は ブラウザーでドキュメント ラ ブラリを開くボタンですが 正常に機能しない場合があります ブラ ウザーのゕドレス バーに指定すれば SketchFlow プレーヤーが表示されます SharePoint のドキュメント ラ ブラリを見ると 次のようにフゔ ルが配置されていることがわかります この Default.html をクリックすると SketchFlow プレーヤーをブラウザーに表示できます 46

49 フィードバックを返す SketchFlow プレーヤーを使って プロトタ プの動作を確認する利用者は 左下の [マ フゖードバック] パネルを使って プ ロトタ プに対するフゖードバック 評価や意見 を入力できます このパネルの上部にある [ ンク フゖードバック] ボタンは プロトタ プの画面上に直接マウスで描画するためのものです た とえば 次のように直接描画できます 47

50 ンクフゖードバックは ユーザーンターフェスの設計には影響しません ンクフゖードバックの表示 / 非表示 ボタン を使えば いつでも隠すことができます 画面ごとに確認し フゖードバック ( コメントやンク描画 ) を残したら プロトタプの開発者にフゖードバックを返します SharePoint を使ってゕップロードできます SharePoint を使て値ない場合は フゖードバックをフゔルとして保存できます [ マフゖードバック ] パネル上部の右端にある [ フゖードバックオプションの表示 ] ボタンを使うと これらを選ぶことができます SharePoint にゕップロードする場合も 外部フゔルにエクスポートする場合も 次のようにフゖードバック作成者の名前を入力 するダゕログが表示されます [OK] ボタンを押すと SharePoint の場合は自動的にドキュメントラブラリに 外部フゔルに保存する場合は保存フォルダ ーとフゔル名を確認した上で 保存できます フゔルとして保存したフゖードバック ( 拡張子.feedback) は 電子メールな どで開発者に送信します 48

51 フィードバックを参照する 利用者から返されるフゖードバックは Expression Blend で確認できます [ ウゖンドウ ]-[SketchFlow フゖードバック ] を選び [SketchFlow フゖードバック ] パネルを表示します プロトタプを SharePoint にゕップロードしている場合は フゖードバックを SharePoint 経由で受け取ることができます 次のように [SketchFlow フゖードバック ] パネルのボタンを押すと SharePoint にゕップロードされているフゖードバックを取り込むことができます 電子メールなどを使って フゖードバックをフゔルとして受け取った場合は [ 追加 ] ボタンを使って それらのフゔルを追加 して取り込みます いずれの場合も [SketchFlow フゖードバック ] パネルで フゖードバックを選択すると フゖードバックを表示できます 49

52 このようにフゖードバックを元に ユーザーンターフェスを改良することができます ここでは 新しいボタンを追加して 移動先として ゕカウント作成 画面を指定しておきます 50

53 Team Foundation Serverの作業項目への変換 プロトタ プ用のプロジェクトを Team Foundation Server で管理している場合は フゖードバックの項目を Team Foundation Server の作業項目に変換できます まず フゖードバックを右クリックして [フゖードバックを TFS 作業項目に変換] を選びま す すると どのような種類のフゖードバックであるかを選ぶダ ゕログが表示されます Team Foundation Server の作業項目として詳細な設定画面が表示されるので 必要事項を登録します このように作業項目として登録しておけば フゖードバックを Team Foundation Server で管理できるようになります たとえば 51

54 Visual Studio を使って この作業項目を表示し 進捗を把握できます ドキュメントの生成 プロトタ プの作成において面倒な作業の一つが ドキュメントを作成することです SketchFlow では 作成中のプロトタ プ 画面やフローを元にドキュメントを自動生成できます [フゔ ル] [Microsoft Word にエクスポート] を選ぶと Word にエク スポート ダ ゕログが表示されます ここでは [フゖードバックを含める] と [完成時にドキュメントを開く] をチェックして [OK] ボタンを押します [テンプレー トの使用] は Microsoft Word の文書テンプレートを使う場合にチェックしてください すると 次のように目次やそれぞれの画面 フゖードバックの内容などを含む Microsoft Word 文書が自動的に作成されます 52

55 53

56 第 5 章のまとめ 今回は プロトタプゕプリケーションをレビューしてもらうための SketchFlow プレーヤーの配置や フゖードバックの返し 方 受け取り方について学びました ここまでの手順を繰り返すことで ゕプリケーションのプロトタプ作成やレビュー 改良 ドキュメント作成といった作業をカバーできます 次回は SketchFlow を使って作成したプロトタプゕプリケーションを 実際に稼働するゕプリケーションに移行する方法につ いて学びます 54

57 第 6 章実稼働アプリケーションへの変換 これまで プロトタプの作成やレビュー 改良の手順について学んできました 最後の段階として ここでは次のことを学びま す プロトタプを実稼働用に変換する SketchFlow を使って前回までに作成したプロトタプゕプリケーションは Expression Blend のデザン機能を使っており 通常の Silverlight( または WPF) ゕプリケーションと同じ仕組みを使っています プロトタプに反映された結果を元に 新たな完成品ゕプリケーションのためのプロジェクトを作成することもできますが このプロトタプ自身を実稼働させるためのゕプリケーションプロジェクトに移行することができれば もっと手軽に作業を始められます 注意 いったん プロトタプから実稼働ゕプリケーションに変換すると 元のプロトタププロジェクトに戻しにくくなります 後で プロトタプを必要とする場合に備えて 必ずプロジェクト全体をバックゕップしておいてください 55

58 SketchFlow プレーヤープロジェクトの修正 まず [ プロジェクト ] パネルを開きます ここには SketchFlow プレーヤーのためのプロジェクト ( 以下の図では SilverlightPrototyp2) と SketchFlow の画面を保持するプロジェクト ( 以下の図では SilverlightPrototype2Screens) の 2 つが登録されています ここで SketchFlow プレーヤーのためのプロジェクトを右クリックして [Windows エクスプローラーでフォルダーを開く ] を選びます Windows エクスプローラーでプロジェクトフゔル (C# の場合は拡張子.csproj Visual Basic の場合は拡張子.vbproj) を右ク リックし [ プログラムから開く ]-[ メモ帳 ] を選びます 56

59 プロジェクト フゔ ルの中に 次のような箇所があります ここで 太字部分 を削除します <PropertyGroup> <ExpressionBlendPrototypingEnabled>false</ExpressionBlendPrototypingEnabled> <ExpressionBlendPrototypeHarness>true</ExpressionBlendPrototypeHarness> </PropertyGroup> このフゔ ルを保存します ゕクセス権限によりエラーになる場合は 別名で保存して 後からこのフゔ ルに置き換えてくださ い Expression Blend に戻ると 次のように表示されます ここでは [はい] を選びます 続いて プロジェクトの 参照 フォルダーにある Microsoft.Expression.Prototyping.Runtime.dll を右クリックして [プロ ジェクトから削除] メニューを選びます 57

60 続いて 参照 フォルダーを右クリックして [ 参照の追加 ] メニューを選びます ここで System.Windows.Controls.Navigation.dll を追加します このフゔルは 通常 C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Libraries\Client フォルダーにあります 58

61 App.xaml.cs フゔ ルを開きます ここで次のようなコードを探します このとき赤字部分 ここでは SilverlightPrototype2.Screens は 画面用のゕセンブリ 名であり プロジェクトによって異なります [assembly: Microsoft.Expression.Prototyping.Services.SketchFlowLibraries("SilverlightPrototype2.Screens")] この画面用のゕセンブリ名 赤字部分 は後で使うために書き留めておきます この行は削除します 続いて以下の部分を探します private void Application_Startup(object sender, StartupEventArgs e) { this.rootvisual = new Microsoft.Expression.Prototyping.Workspace.PlayerWindow(); } これを次のように置き換えます private void Application_Startup(object sender, StartupEventArgs e) { this.rootvisual = new System.Windows.Controls.Frame() { Source = new Uri("/SilverlightPrototype2.Sc reens;component/画面_1.xaml", UriKind.Relative) }; } ここで赤字部分には さきほど書き留めておいた画面ゕセンブリ名 ここでは SilverlightPrototype2.Screens と 最初の画 面の名前 ここでは 画面_1.xaml に置き換えます 59

62 SketchFlow画面 プロジェクトの修正 次に SketchFlow 画面を保持するプロジェクト ここでは SilverlightPrototype2Screens を修正します さきほどと同じように プロジェクト名を右クリックして [Windows エクスプローラーでフォルダーを開く] メニューを選びます 前述と同じ手順で プロジェクト フゔ ル.csproj または.vbproj から 以下の 太字部分 を探して削除します <PropertyGroup> <ExpressionBlendPrototypingEnabled>false</ExpressionBlendPrototypingEnabled> <ExpressionBlendPrototypeHarness>true</ExpressionBlendPrototypeHarness> </PropertyGroup> このフゔ ルを保存して Expression Blend に戻ります 再読み込みの警告ダ ゕログでは [はい] を選びます さらに 前述 と同じ手順で このプロジェクトの 参照 フォルダーから Microsoft.Expression.Prototyping.Runtime.dll を削除し System.Windows.Controls.Navigation.dll を追加します これで 修正は完了です 60

63 プロジェクトの実行 このプロジェクトを実行すると SketchFlow プレーヤーではなく 起動画面が表示されることがわかります ここで説明した内容は プロトタププロジェクトを実稼働ゕプリケーションの画面としに使うための基本的な作業であることに注意してください 各コントロールのスタルが変更されるわけではないので 第 1 章で説明したとおり それぞれのコントロールのスタルをリセットしたり スケッチ図形などは削除したりする必要があります また SketchFlow プレーヤーが提供していたナビゲーション機能も使えないため ボタンを押して先に進むといったコーデゖングも必要になります 画面遷移の遷移例 最後に画面遷移の例を以下に示します [ プロパテゖ ] ウゖンドウより 起動画面 の OK ボタンの名前を btnnavigate に し [Click] ベントをダブルクリックして 次のコードを書きます private void btnnavigate_click(object sender, System.Windows.RoutedEventArgs e) { System.Windows.Controls.Frame f = 61

64 (System.Windows.Controls.Frame)Application.Current.RootVisual; // Uri の引数にはログン画面に対応する xaml の名前を指定します // SketchFlow で [ 起動画面 ] からつながる [ 画面 1] を作成し [ ログオン ] に名前を変えた場合 Uri u = new Uri("/SilverlightPrototype2.Screens;component/ 画面 _1.xaml", UriKind.Relative); } // SketchFlow で [ 起動画面 ] からつながる [ ログオン ] を作成した場合 // Uri u = new Uri("/SilverlightPrototype2.Screens;component/ ログオン.xaml", UriKind.Relative); f.navigate(u); まとめ 全 6 章を通じて SketchFlow によるプロトタプ作成から実稼働ゕプリケーションへの変換までを学びました これまでホワトボードや紙など コンピューター以外の手段を使っていた作業段階を このようなツールを通じて電子化するこ とで プロトタプやレビュー 文書化といった作業を大幅に効率化できます ぜひ活用してください 62

65