Do-It-Yourself シリーズ
Expression Blend® 4 + SketchFlowsaa
自習書
著作権
このドキュメントに記載されている情報は、このドキュメントの発行時点におけるマクロソフトの見解を反映した ものです。マクロソフトは市場の変化に対応する必要があるため、このドキュメントの内容に関する責任を問われ ないものとします。また、発行日以降に発表される情報の正確性を保証できません。 このホワトペーパーは情報提供のみを目的としています。明示、黙示、または法令に基づく規定に関わらず、これ らの情報についてマクロソフトはいかなる責任も負わないものとします。 この文書およびソフトウェゕを使用する場合は、適用されるすべての著作権関連の法律に従っていただくものとしま す。このドキュメントのいかなる部分も、米国 Microsoft Corporation の書面による許諾を受けることなく、その目 的を問わず、どのような形態であっても、複製または譲渡することは禁じられています。ここでいう形態とは、複写 や記録など、電子的な、または物理的なすべての手段を含みます。ただしこれは、著作権法上のお客様の権利を制限 するものではありません。 マクロソフトは、この文書に記載されている事項に関して、特許、申請中特許、商標、著作権、および他の知的財 産権を所有する場合があります。別途マクロソフトのラセンス契約上に明示の規定のない限り、このドキュメン トはこれらの特許、商標、著作権、またはその他の知的財産権に関する権利をお客様に許諾するものではありません。 別途記載されていない場合、このドキュメントで使用している会社、組織、製品、ドメン名、電子メール ゕドレス、 ロゴ、人物、場所、出来事などの名称は架空のものです。実在する商品名、団体名、個人名などとは一切関係ありま せん。© 2011 Microsoft Corporation. All rights reserved.
Microsoft、Windows、Visual Studio、Expression、Expression Blend、Silverlight、Expression ロゴは、米国 Microsoft Corporation の米国およびその他の国における登録商標または商標です。他のすべての商標は、それぞれ の所有者の財産です。
1 |
目次
第 1 章 SketchFlow の概要 ... 3
■はじめに ... 3
●使用環境について ... 3
●本書がカバーする内容 ... 3
■SketchFlow とは ... 4
●Expression Blend+SketchFlow を使う ... 5
●SketchFlow の設定 ... 8
■第 1 章のまとめ ... 9
第 2 章 画面とフローの作成 ... 10
■画面フローの作成 ... 11
●ビジュゕル タグ ... 13
■「スケッチ」画面の作成 ... 14
●「起動画面」の作成 ... 15
●「ログン」画面の作成 ... 16
●「商品一覧」画面の作成 ... 16
●「スケッチ」用のコントロール（参考） ... 17
■プロジェクトの実行 ... 19
■画面の遷移 ... 21
■第 2 章のまとめ ... 22
第 3 章 スケッチの機能 ... 23
■コンポーネント画面の作成 ... 24
■コンポーネント画面の挿入 ... 27
●ゕプリケーションの実行 ... 28
■SketchFlow ゕニメーション ... 30
■第 3 章のまとめ ... 33
第 4 章 サンプル データの埋め込み ... 34
■サンプル データの作成 ... 35
■サンプル データの利用 ... 38
2 |
●「商品詳細」画面でサンプル データを利用する ... 40
●サンプル データの生成元データ（参考） ... 43
■第 4 章のまとめ ... 43
第 5 章 レビューとフゖードバック ... 44
■SketchFlow プレーヤーの配布 ... 45
●SharePoint への配置 ... 46
■フゖードバックを返す ... 47
■フゖードバックを参照する ... 49
●Team Foundation Server の作業項目への変換 ... 51
■ドキュメントの生成 ... 52
■第 5 章のまとめ ... 54
第 6 章 実稼働ゕプリケーションへの変換 ... 55
■SketchFlow プレーヤー プロジェクトの修正 ... 56
■SketchFlow 画面 プロジェクトの修正 ... 60
■プロジェクトの実行 ... 61
■画面遷移の遷移例 ... 61
■まとめ ... 62
3 |
第 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 シリーズ) などを参照してください。
4 |
■SketchFlow とは
SketchFlow は、Expression Studio Ultimate に含まれる Expression Blend の機能で、ゕプリケーションの概念的なデザンか らゕプリケーションの完成まで、プロトタプの作成を支援します。SketchFlow は、単一のユーザー ンターフェスで構成さ れるようなシンプルなゕプリケーションのために使うこともできますが、複数の画面で構成されるような規模の大きいゕプリケー ションの開発においてその真価を発揮します。このようなゕプリケーションを開発する場合、しばしば試作品（プロトタプ）を 作ることがありますが、SketchFlow は、このプロトタプ作成を支援するものです。 プロトタプを作るのは、最初から完成品を作ろうとしても、操作性や機能がユーザーの期待に応えるものになるかどうか、わか らないためです。ゕプリケーションが完成した後に、画面のフロー（遷移）や表示する内容を変更することは大変な作業です。あ らかじめ簡易的なプロトタプを作成して、ゕプリケーションがどのような動きになるかを確認しておけば、そうした作業を効率 化できます。 ユーザー ンターフェスを考える際には、最初からデザン ツールを使うのではなく、ホワトボードなどを使って大まかな デザンを決めることもあるでしょう。そこで「スケッチ」した内容を元にユーザー ンターフェスを作成したり、画面の流れ、 つまり「フロー」を実装したりすることで、ゕプリケーションのプロトタプを作成することができます。この「スケッチ」と「フ ロー」を検討する仕組みを Expression Blend の機能として取り入れたのが SketchFlow です。
SketchFlow でプロトタプ画面を作成している様子を以下に示します。
SketchFlow を使う場合、実際に Expression Blend の機能を使ってゕプリケーションのユーザー ンターフェスをデザンし ます。しかし、これは完成品を作るためのものではありません（最終的にプロトタプから完成品へ移行することはできます）。
5 |
SketchFlow はプロトタプを作るためのツールであり、ホワトボードに大まかな画面を描くのと同じように、手書き風のデザ ンが使われます。これは、デザンの細部にとらわれることなく、全体像を把握しやすくするためです。 これまで、このような段階ではホワトボードや紙とペンを使うことがありました。SketchFlow を使うことで、大まかな画面を 使ったプロトタプを作り、どのように画面が切り替わっていくかを、コンピューター上で確認できるようになります。また、そ のようなプロトタプを実際にユーザーに使ってもらい、フゖードバックを受けたり、反映したりできます。さらに、デザンし た仕組みを文書化することもできるようになります。 ●Expression Blend+SketchFlowを使う ここから、実際にプロトタプ ゕプリケーションの作成を通じて、SketchFlow の機能について学んでいきます。まず、[フゔ ル]－[新しいプロジェクト] で「新しいプロジェクト」ダゕログを表示し、「Silverlight」プロジェクトの中から「Silverlight SketchFlow ゕプリケーション」を選びます。6 |
[OK] ボタンを押すと、SketchFlow に対応した新しいプロジェクトが生成されます。この画面の主要な要素を以下に示します（以 下は、ゕニメーション ワークスペースの場合）。 通常の Silverlight ゕプリケーションのユーザー ンターフェスと同じように、ゕートボード上に表示されたページにはコント ロールを配置できますが、ツール パネルで利用できるコントロールのほとんどは「-Sketch」とついた SketchFlow 用のものです。 適当なコントロールをページ上に配置した様子を以下に示します。 ゕートボード SketchFlow マップ パネル メニュー ツール パネル SketchFlow ゕニメーション プロパテゖ パネル （およびその他のパネル） ゕセット7 |
これらの Sketch コントロールをページ上に配置すると、輪郭や文字列が手書き風のものになります。コントロールは、Sketch で ない通常のコントロールと同じ機能を持ち、ユーザー ンターフェスのデザンでは通常のコントロールと同じように配置でき ます。
8 |
●SketchFlowの設定 本書は、Expression Blend のデザン機能についてはほとんど取り上げません。このため、デザンするページは、あまり大きい 必要はありません。[ツール]－[オプション] メニューを選び、「SketchFlow」カテゴリーのオプションで、「既定サズ」を小さ めに設定しておきます。 プロジェクトを作成した後で、ページの大きさを変更する場合は、「オブジェクトとタムラン」パネルで UserControl を選び、 ゕートボードでサズを変更します。表示したいウゖンドウが見つからない場合は、[ウゖンドウ] メニューを確認してください。 [SketchFlow ゕニメーション] から [状態] メニューのうち左側がチェックされているものが現在表示されているウゖンドウです。 これらの選ぶことで、各ウゖンドウの表示状態を切り替えられます。 ここでは、Expression Blend のレゕウトが「ゕニメーション ワークスペース」に設定されている場合をご紹介しましたが、[ウ9 |
ゖンドウ]－[ワークスペース] メニューで「デザン ワークスペース」に切り替えることもできます。しかし、実際の SketchFlow の多くの作業は、ゕートボードと SketchFlow マップ パネルに集中しています。このため、これら以外のウゖンドウ（パネル）を 右上の虫ピン ゕコンをクリックして自動的に隠すようにしておくこともできます。 使用するモニターのサズが大きくない場合は、次のようなレゕウトにしておくとよいでしょう。 ■第 1 章のまとめ 今回は、Expression Blend+SketchFlow の概要について簡単に説明しました。次回以降は、プロトタプ ゕプリケーションの作 成を通じて、SketchFlow の各機能を個別に学んでいきます。10 |
第 2 章 画面とフローの作成
今回は、SketchFlow の基本となる、画面とフローを作成します。ここでは、次のことを学習します。 ユーザー ンターフェスの「スケッチ」画面の作成 ゕプリケーションの画面「フロー」の作成 第 1 章で説明したとおり、SketchFlow は、ユーザー ンターフェスの「スケッチ」と、画面「フロー」を通じてプロトタプ 作成を支援するための機能です。 ゕプリケーションの仕様を考える際には、いくつかの画面を想定し、どのような流れで使われるかを想定します。たとえば、次の ような画面のフロー（流れ）を考えることができます。 このような画面フローを、ホワトボードや紙を使って考える代わりに、SketchFlow を使えます。これは簡単な例ですが、実践 的なゕプリケーションでは、より多くの画面や複雑な流れを考える場合に、ホワトボードを書き直したり、紙に書いたものを消 しゴムで消したりする必要はありません。保存や再編集が容易な SketchFlow を使うことで、プロトタプ作成の効率は大幅に向 上します。11 |
■画面フローの作成 [フゔル]－[新しいプロジェクト] メニューを選び、「Silverlight SketchFlow ゕプリケーション」を作成します。 画面下部の [SketchFlow マップ] パネルには、「画面 1」と表示された青い四角が表示されています。これは「ノード」と呼ばれ、 画面や画面要素をあらわしています。ノード上にマウスカーソルを移動させると、そのノードの情報が表示され、ノード下部には いくつかのゕコンが表示されます。 ここで「画面 1」という文字列をダブルクリックすると、この文字列を変更できます。ここでは「起動画面」に変更します。12 |
ノードの下に表示されるゕコンの意味は、以下の通りです。 アイコン 意味 接続された画面の作成 既存の画面を接続 コンポーネント画面を作成して挿入 ビジュゕルタグの変更たとえば、
ゕコンをドラッグすることで、新しい画面を作成できます。 ドロップすると、表示名を入力できます。ここでは「ログン」とします。いったん名前が確定した後でも、ノードを選択した状 態でクリックし、しばらくすれば表示名を変更できるようになります。 ここでは、前述の手書きの画面フローを参考にして次のような画面フローを作成してください。 「商品詳細」から「商品一覧」に戻るフローを作る場合は、「商品詳細」をマウス オーバーしたときに表示される「既存の画面を 接続」ゕコンから商品一覧へドラッグ ゕンド ドロップします。13 |
●ビジュアル タグ 初期状態では、ノードはすべて青で表示されていますが、わかりやすく色分けすることができます。[プロジェクト]－[SketchFlow プロジェクトの設定] メニューを選ぶと「SketchFlow プロジェクトの設定」ダゕログが表示されます。ここで色に対応する文 字列が「ビジュゕル タグ」と呼ばれるものです。 ここでは、以下のように黄色（エロー）のタグとして「スタートゕップ」、オレンジ色のタグとして「商品」と設定しておきます。 このように設定することで、[SketchFlow マップ] パネル上のノードを色分けできます。 なお、[SketchFlow マップ] パネル下部にもズーム用のドロップダウンや画面作成などに関するゕコンがあります。14 |
■「スケッチ」画面の作成 [プロジェクト] パネルを表示させると、作成したノードごとに画面が作成されていることがわかります。 ここで項目をダブルクリックするか、[SketchFlow マップ] パネルのノードをダブルクリックすると、対応する画面をゕートボー ドに表示できます。 [ツール] パネルのゕセット ボタン（ ）を押すと、[ゕセット] パネルが表示されます。ここで、SketchFlow の「スタル」カ テゴリーで「Sketch スタル」を選びます。ここには、ユーザー ンターフェスを「スケッチ」するためのコントロールが登 録されています。 ※「コントロール」カテゴリーには通常のコントロールが含まれていますが、プロトタプを作成する際には、あえて手書き風の 「-Sketch」コントロールを使います。15 |
●「起動画面」の作成 実際に、それぞれの画面を作成してみます。なお、以下で作成する画面は手順を示すためのもので、正確に同一である必要はあり ません。レゕウトや使用するコントロールは、同一でなくてもかまいませんし、最初からすべての画面を作る必要はありません （ただし、今回以降の解説では、ここで作成したユーザー ンターフェスの要素を使う部分があります）。SketchFlow を使っ たプロトタプの作成では、コントロールの選択や配置場所に厳密性を求められることなく、画面やフローを作り直すことができ ます。 起動画面は、製品名やバージョン情報などを表示することを想定します。[ツール] パネルのコントロールはスケッチ用（-Sketch） のものになっていますが、使い方は通常のコントロールと同じです。ここでは BasicTextBlock-Sketch と Button-Sketch を次の ように配置します（赤枠/赤文字は注釈）。 コントロールは、[ツール] パネルにあるもの、あるいは前述の [ゕセット] ボタンを押して表示される [ゕセット] パネルのもの を使います。 BasicTextBlock-Sketch Button-Sketch16 |
●「ログイン」画面の作成 ここでは、BasicTextBlock-Sketch、BasicTextBox-Sketch、PasswordBox-Sketch、Button-Sketch コントロールを次のように 配置します。 ●「商品一覧」画面の作成 ここでは、BasicTextBlock-Sketch、BasicTextBox-Sketch、PasswordBox-Sketch、Button-Sketch コントロールを次のように 配置します。 ※その他の画面は、次回以降で作成します。 BasicTextBlock-Sketch BasicTextBlock-Sketch Password-Sketch Button-Sketch Button-Sketch BasicTextBox-Sketch BasicTextBlock-Sketch ListBox-Sketch17 |
●「スケッチ」用のコントロール（参考） 画面スケッチにおいては、「-Sketch」という名前のコントロールを使いますが、これらは通常のコントロールと何が違うのでしょ うか。たとえば、前述の「商品一覧」画面を XAML で表示させると以下のようになっています。 <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 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] の詳細オプショ ンで [リセット] を選ぶと、スケッチ用のスタルがクリゕされます。 そうすると商品一覧は、次のように通常のコントロールとして表示されるようになります。
18 |
ここでは引き続きスケッチ風のスタルを使うため、[Ctrl]+[Z] を押すか、[編集]－[Style の変更を元に戻す] を選んで、スタ ルの設定を元に戻しておきます。 なお、スタルをリセットした後で、（リセットを取り消さずに）ふたたびスケッチ風のスタルに戻すためには、ひとつひとつの コントロールを選び、Style プロパテゖの [詳細オプション]－[ローカルリソース] で表示されるスタルを適用します。または、 [ゕセット] パネルから、「-Sketch」スタルをコントロールにドラッグ ゕンド ドロップして、スタルを適用することもできま す。19 |
■プロジェクトの実行 この段階で、[プロジェクト]－[プロジェクトの実行] メニューを選ぶか、[F5] キーを押すと、プロジェクトを実行できます。す ると、次のように表示されます。 作成したゕプリケーションは、単独のゕプリケーションとして実行されるのではなく、「SketchFlow プレーヤー」と呼ばれる機能 の中に画面が表示されます。 左側の「ナビゲーション」タブには、現在表示されている画面から移動できる画面が表示されています。前述のとおり [SketchFlow マップ] パネルで「起動画面」から移動できるのは「ログン」画面だけなので、ここには「ログン」と表示されています。「ロ グン」画面に移動すると、「ナビゲーション」には「ゕカウント作成」と「商品一覧」が表示されます。 「ナビゲーション」タブの上にある「家」のゕコンをクリックすると、いつでも最初の画面（この例では「起動画面」）に戻るこ とができます。また、その右側の三角のゕコンをクリックして、前の画面に戻ることもできます。 「ナビゲーション」の右隣にある「マップ」をクリックすると、次のように [SketchFlow マップ] を画面上にオーバーラップ表示 できます。20 |
オーバーラップさせたマップ上の画面をクリックすれば、対応する画面が即座に表示されます。マップの表示は、画面上部のズー ム バーで拡大縮小できます。また、画面そのものは「ナビゲーション」領域にあるズーム バーで拡大縮小できます。
なお、Silverlight を使う場合、SketchFlow プレーヤーは Silverlight ゕプリケーションとして提供されるため、ブラウザーを使っ て表示されます。WPF を使う場合、SketchFlow プレーヤーは WPF ゕプリケーションとして提供されるため、Windows のゕプリ ケーションとして実行されます。
21 |
■画面の遷移 「ナビゲーション」を使って画面を切り替えることはできますが、実際に画面上のボタンを押しても、何の機能も割り当てていな いため、何も起きません。そこで、ボタンを使って画面を切り替えられるようにします。 ゕプリケーションを終了させて、ゕートボードに「起動画面」を表示し、ボタンを右クリックして、[次の場所へ移動] メニューを 選ぶと、以下のように表示されます。 このボタンを押したときに、どの画面に移動するかを選ぶことができるのです。ここでは「ログン」を選びます。同じように、 「ログン」の [Log In] ボタンは「商品一覧」へ、「商品一覧」の [Search] ボタンには「商品詳細」へ移動するように設定し てください。「次の場所へ移動」する候補としては、[SketchFlow マップ] パネルのフローで設定した移動先の画面が優先的に表示されますが、 他の画面を選ぶこともできます。他の画面を選んだ場合は、自動的に[SketchFlow マップ] パネルに、そのフローを示す線が追加 されます。
22 |
今回は、「起動画面」で [OK] ボタンを押したり、「ログン」画面で ID やパスワードを入力して [Log In] ボタンを押したりす ることで、次の画面に移動することができます。実際に、ID やパスワードが正しいかどうかを確認されるわけではありませんが、 より実際のゕプリケーションの動作に近い形でプロトタプをテストできるようになります。
■第 2 章のまとめ
今回は、SketchFlow による「スケッチ」画面とゕプリケーションの「フロー」の作成について説明しました。 次回は、コンポーネント画面を使って部品を作る例など、スケッチの拡張機能について学びます。
23 |
第 3 章 スケッチの機能
第 2 章では、SketchFlow の基本である画面の「スケッチ」と「フロー」について学びました。SketchFlow は Expression Blend の機能を元にしており、画面構成にも Expression Blend の機能をフルに活用でき、スケッチのための機能も充実しています。こ こでは、次のことを学習します。 コンポーネント画面の作成と利用 スケッチ図形 SketchFlow ゕニメーション 複数の画面を持つゕプリケーションにおいては、しばしば異なる画面で共通の表現（部品）を使うことがあります。SketchFlow では、このような部品を「コンポーネント画面」として組み込むことができるようになっています。 また、第 2 章で説明した画面の遷移やスケッチ風の外観は、Expression Blend のビヘビゕやスタルを使って実装されていま す。さらに、プロトタプ画面をわかりやすくするためスケッチ用の図形も用意されています。 今回は、これらの拡張的な機能について説明します。なお、第 2 章で作成したプロジェクトを引き続き使います。
24 |
■コンポーネント画面の作成 [SketchFlow マップ] パネルで、ノードをマウス オーバーしたときに表示されるゕコンから、「コンポーネント画面を作成して 挿入」をドラッグ ゕンド ドロップして、新しい画面ノードを作成します。 ここでは、以下のように「ヘッダー」と「フッター」の 2 つのコンポーネント画面を作成します。 ※ゕートボードには「ログン」画面の上に、空の「ヘッダー」と「フッター」が重なって表示されていますが、これは後で調整 します。 まず、[SketchFlow マップ] パネルの「ヘッダー」ノードをダブルクリックして、ヘッダーを表示します。このヘッダーの大きさ を変更します。大きさを変更する際は、[オブジェクトとタムラン] パネルを使って、[UserControl] を選ぶとよいでしょう。 ここでは、以下のようにゕプリケーションのタトルを表示するために BasicTextBlock-Sketch コントロールを配置します。 同様に、フッター画面も作成します。25 |
[SketchFlow マップ] パネルで「ログン」ノードをダブルクリックして、ふたたび「ログン」画面をゕートボードに表示する と、次のように表示されています。 「ヘッダー」も「フッター」も「ログン」画面を構成する要素として表示されており、他のコントロールと同じように配置を変 更・調整できます。 ここでは、以下のように「ヘッダー」を画面の上部に、「フッター」を画面の下部に配置しなおします。26 |
コンポーネント画面は、他のコントロールと同じように配置したり、レゕウト パネルを使って調整したりできます。コンポーネ ント画面は、UserControl として作成されます。ユーザー コントロールは、ページ（Silverlight の場合）やウゖンドウ（WPF の 場合）に配置できる部品を自分で作成するものです。なお、Silverlight ゕプリケーションでは、通常の画面（ページ）も UserControl で作成されています。
27 |
■コンポーネント画面の挿入 コンポーネント画面は、部品として他の画面ノードに挿入することもできます。コンポーネント画面をマウスオーバーしたときに 表示されるゕコンで「コンポーネント画面の挿入」を選び、別の画面ノードへドラッグ ゕンド ドロップすると、コンポーネン ト画面をそのノードに挿入できます。 ここでは、「ヘッダー」と「フッター」を、「起動画面」以外のすべてに挿入します（「ログン」には挿入済み）。 それぞれの画面で、どのようなレゕウト パネルが使われているかはわかりません。このため、挿入したコンポーネント画面の配 置は、それぞれの画面で調整する必要があります。ここでは、各画面で「ヘッダー」を上部に、「フッター」を下部に割り当てれば よいでしょう。コンポーネント画面は、画面を構成する部品であり、配置場所を統一する必要はありません。28 |
●アプリケーションの実行コンポーネント画面を使ったゕプリケーションを実行すると、第 2 章で説明した SketchFlow プレーヤーを使って実行されます。
なお、コンポーネント画面はナビゲーションの一覧には表示されませんが、「マップ」表示を有効にして選択すれば、単独で表示で きます。
29 |
ここで、「商品詳細」画面を作成します。 ここで、スケッチ図形とは、[ゕセット] パネルの「SketchFlow」カテゴリーの「スケッチ図形」に登録されているものです。 ここに登録されているものは、ユーザー ンターフェスの部品ではなく、画面上に矢印や注釈、図形などを描画するためのもの です。[ツール] パネルの「ペン」や「鉛筆」を使えば自由な線を描画できますが、これらを使う方がわかりやすくなることもある でしょう。 BasicTextBlock-Sketch BasicTextBox-Sketch スケッチ図形30 |
■SketchFlowアニメーション Expression Blend では、ユーザー ンターフェスにゕニメーション（動き）を取り入れられることも大きな特徴です。ゕニメ ーションは、ユーザーの注目を引き付けるために役立ちますが、SketchFlow では、この機能を使って動作のシミュレーションを 表現できます。 まず、[ウゖンドウ]－[SketchFlow ゕニメーション] を使って、[SketchFlow ゕニメーション] パネルを表示します。ここで、ゕニメーションを行う前の状態を設定します。星形の図形と「Product Description」と書いてある TextBox の Opacity プロパテゖを 0%に設定します。さらに、このテキストボックスは少し上にずらしておきます。
31 |
次に、[SketchFlow ゕニメーション] パネルで「+」ボタンをクリックして、新しい SketchFlow ゕニメーションを作成します。 するとゕートボードに「SketchFlowAnimation フレーム 1 記録オン」と表示されて、ゕニメーションを記録する状態になります。
ここでは初期状態があらわされています。ここに表示されている「+」ボタンをクリックして、新しいフレームを追加します。
32 |
同様にゕニメーションを追加してもよいでしょう。ゕニメーションの仕組みが、Silverlight や WPF と同じであることには注意し てください。たとえば、Silverlight でゕニメーションできる要素は、浮動小数値、座標、色です。新たなコントロールを生成する ことはできないので、上記のように Opacity プロパテゖを使うか、座標値をページ枠外から枠内に移動するといった手法を使って ください。また、TabControl のタブを切り替えるといったこともできません。 「SketchFlowAnimation フレーム(番号)記録オン」の左側の赤い印をクリックすると、ゕニメーションの記録を中断できます。 さらに、下矢印記号を右クリックして、[SketchFlow ゕニメーションの再生] メニューを選ぶと、作成したゕニメーション（[商品 詳細/SketchFlowAnimation]）を選べます。33 |
このプロトタプを実行して、「商品詳細」画面でこの記号をクリックすると、作成したゕニメーションが開始されます。
■第 3 章のまとめ
今回は、拡張的な機能を使ったスケッチ画面の作成について学びました。
34 |
第 4 章 サンプル データの埋め込み
ゕプリケーションのプロトタプを作成する際に面倒なのが、ゕプリケーションで使うデータを用意することです。ゕプリケーシ ョンが稼働していないため、データを入力する仕組みもなく、ダミーのデータを用意することもありました。Expression Blend で は、プロトタプで利用できるサンプル データを自動的に生成する機能を提供しています。 ここでは、次のことを学習します。 サンプル データの生成 サンプル データの利用 今回も、前回までに作成したプロジェクトを引き続き利用します。35 |
■サンプル データの作成 サンプル データを作成するためには、[データ] パネルを使います。表示されていない場合は、[ウゖンドウ]－[データ] メニュー で表示させてください。 [データ] パネルの右上にある、「サンプルデータの作成」ゕコンをクリックすると、メニューがドロップダウン表示されるので、 [新しいサンプルデータ] を選びます。 すると、次のような「新しいサンプル データ」ダゕログが表示されます。36 |
サンプル データは、プロジェクト全体で使うことも、特定の画面（ドキュメント）だけで使うこともできます。ここでは、「プロ ジェクト」を選択します。[OK] ボタンを押すと、[データ] パネルは次のようになります。
ここで「Collection」が、ひとまとまりのデータ（コレクション）をあらわしています。初期状態で 2 つの項目（Property1 と Property2） が提供されています。ここで「Collection」の右側にある「+」記号（シンプルプロパテゖの追加）を 3 回クリックして、全部で 5 個の項目を作ります。 まず、Property1 をダブルクリックして「ItemName」という名前に変更します。右端の「プロパテゖの種類の変更」をクリック して、次のように設定します。 同じようにして、以下の表のとおりの項目を追加します。 名称 型 形式 備考 ItemName 文字列 サンプル文字列 最大文字数＝2、最大文字長＝8 Manufacturer 文字列 会社名 Photo メージ 場所は空のままでよい Price 数値 長さ＝5
URL 文字列 Web サトの URL
入力する順序に関わらず、項目名でソートされることに注意してください。「文字列」型の形式で「サンプル文字列」は、もっとも 汎用的な文字列データを挿入します。「最大文字数」は文字列データに含まれる単語の最大数をあらわし、「最大文字長」は単語ご との最大文字数をあらわしています。「最大文字数」を増やすことで、文章のように長い文字列を用意することもできます。 「文字列」型には、次のようにさまざまな形式を選択できます。
37 |
形式として「時刻」「色」「日付」「料金」を選ぶと、最終的なデータ項目が文字列型以外の場合でも、プロトタプ用のデータとし て、それに対応したデータが埋め込まれます。たとえば、色を指定した項目を、Background などにバンデゖングすることで、 色をあらわす数値ではなく、背景色として利用することができます。上記の例では、Price に「文字列」型の「料金」形式を選ぶこ ともできます（この場合、ドル表記になります）。 ※項目には、単純型だけでなく、複合型やコレクションを指定することもできます。 設定が完了すると、次のようになります。 これで、サンプル データを使う準備ができました。38 |
■サンプル データの利用
作成したサンプルデータを使うのは、項目を設定した「Collection」を [データ] パネルからゕートボードにドラッグ ゕンド ドロ ップするだけです。このとき、ListBox（または TreeView）にドロップすると、データが ItemsSource にバンドされ、これ以 外の場合には、新たに ListBox が作成されてデータがバンドされます。コンポーネント画面（UserControl）にドロップすると、 DataContext としてデータが割り当てられます。
第 2 章で作成した「商品一覧」画面の ListBox に、Collection をドラッグ ゕンド ドロップします。
すると、次のように適当なデータが生成されて、ListBox の中に表示されます。
デフォルトでは項目が定義順に表示されます。ListBox にどのように項目を表示するかは ItemTemplate で変更できます （ItemTemplate プロパテゖには DataTemplate オブジェクトが割り当てられています）。たとえば、ListBox を右クリックし、[追 加テンプレートの編集]－[生成されたゕテムの編集(ItemTemplate)]－[現在のテンプレートの編集] メニューで、編集できるよ うになります。
39 |
定義されているテンプレートを次のように修正してください。 …
<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」の右側にある「サンプル地の編集」ゕコンをクリックすると、「サンプル値の編集」ダゕログが表示されて、サ ンプルデータの編集やデータの数を変更することができます。
40 |
メージ データとしては、個別に選択するだけでなく、項目名の右側にある「プリパテゖの種類の変更」ボタンを使って「場所」 を選択できます（項目を追加するときにも指定できます）。たとえば、Windows の「サンプル ピクチャ」フォルダーを選ぶと、 次のようになります。
41 |
次に第 3 章で作成した「商品詳細」画面で、サンプルデータを利用してみます。 前述のとおり、[データ] パネルからゕートボード上にコレクションをドラッグ ゕンド ドロップすると、新たな ListBox コントロ ールが作られます。「商品詳細」画面では、個々のコントロールに、単一の項目を割り当てる必要があります。バンデゖングには いくつかの方法がありますが、ここではコントロールを配置しているコンテナの DataContext プロパテゖにコレクションを割り当 て、個々のコントロールにそれぞれの要素をバンデゖングします。 まず、[オブジェクトとタムラン] パネルを使って LayoutRoot（Grid コントロール）を選択します。ここで [プロパテゖ] パ ネルの「共通プロパテゖ」カテゴリーにある DataContext の「詳細オプション」をクリックして、[データバンド] メニューを 選びます。 すると「データ バンドの作成」ダゕログが表示されるので、データソースとしてさきほど作成した SampleDataSource が表 示されます。これを選び、「フゖールド」に表示された SampelDataSource の中にある Collecttion を選んで、[OK] ボタンを押し ます。42 |
3 つの TextBox については、Text プロパテゖの [詳細オプション] をクリックして、[データ バンド] メニューを選び、同じよ うに ItemName、Price、Manufacturer をバンドします。これで、次のようにサンプルデータをバンドできます。
43 |
●サンプル データの生成元データ（参考）サンプル データの埋め込みで使われるデータの生成元データは、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 ゕニメーション」について学びます。
44 |
第 5 章 レビューとフィードバック
プロトタプを作成するのは、クラゕントや最終的な利用者に、ゕプリケーションの動きを確認してもらうためです。ここでは、 次のことを学習します。
SketchFlow プレーヤーの配布とレビュー
フゖードバック（SharePoint や Team Foundation Server の利用） ドキュメント出力 これまで説明したとおり、プロジェクトを実行するときには SketchFlow プレーヤーが使われます。作成中のプロトタプを単独 のゕプリケーションとして実行するのと違い、画面から画面にナビゲーションしたり、[マップ] パネルを使って特定の画面の様子 を確認したりできます。 この SketchFlow プレーヤーには、フゖードバックを返すための機能があり、SketchFlow の中でフゖードバックを確認できます。 今回は、こうした機能について学びます。
45 |
■SketchFlowプレーヤーの配布 プロトタプをレビューするためには、利用者にプロトタプを配布する必要があります。まず、[フゔル]－[SketchFlow プロ ジェクトのパッケージ化] メニューを選び、作成中のプロジェクトをパッケージ化（ンストールできる形にすること）したもの を保存する場所を選びます。 すると、プロジェクトがビルドされて、指定したフォルダーに次のようなフゔルが生成されます。 作成されたフゔルをントラネット サトなどに配置するか、電子メールなどで送信することで、利用者はゕプリケーションを 試すことができます。46 |
●SharePointへの配置SharePoint が使える場合は、Expression Blend から直接 SharePoint のドキュメント フォルダーにプロトタプを配置できます。 あらかじめ、SharePoint 上にプロトタプを配置するドキュメント フォルダーを作成しておきます。 [フゔル]－[SharePoint にパブリッシュ] メニューを選んで、「SharePoint にパブリッシュ」ダゕログでドキュメント ラブ ラリの場所や保存用のフォルダーを指定します。 プロジェクトがビルドされた後、自動的に SharePoint にフゔルがゕップロードされます（配置に時間がかかる場合があります）。 配置が完了すると、次のようなダゕログが表示されます。 ここで [リンクのコピー] ボタンを選ぶと、SketchFlow プレーヤーを直接開くための URL がクリップボードにコピーされます （[ラブラリを開く] は、ブラウザーでドキュメント ラブラリを開くボタンですが、正常に機能しない場合があります）。ブラ ウザーのゕドレス バーに指定すれば、SketchFlow プレーヤーが表示されます。 SharePoint のドキュメント ラブラリを見ると、次のようにフゔルが配置されていることがわかります。この Default（.html） をクリックすると、SketchFlow プレーヤーをブラウザーに表示できます。
47 |
■フィードバックを返す SketchFlow プレーヤーを使って、プロトタプの動作を確認する利用者は、左下の [マ フゖードバック] パネルを使って、プ ロトタプに対するフゖードバック（評価や意見）を入力できます。 このパネルの上部にある [ンク フゖードバック] ボタンは、プロトタプの画面上に直接マウスで描画するためのものです。た とえば、次のように直接描画できます。48 |
ンク フゖードバックは、ユーザー ンターフェスの設計には影響しません。「ンクフゖードバックの表示/非表示」ボタン を使えば、いつでも隠すことができます。 画面ごとに確認し、フゖードバック（コメントやンク描画）を残したら、プロトタプの開発者にフゖードバックを返します。 SharePoint を使ってゕップロードできます。SharePoint を使て値ない場合は、フゖードバックをフゔルとして保存できます。[マ フゖードバック] パネル上部の右端にある [フゖードバック オプションの表示] ボタンを使うと、これらを選ぶことができま す。 SharePoint にゕップロードする場合も、外部フゔルにエクスポートする場合も、次のようにフゖードバック作成者の名前を入力 するダゕログが表示されます。 [OK] ボタンを押すと、SharePoint の場合は自動的にドキュメント ラブラリに、外部フゔルに保存する場合は保存フォルダ ーとフゔル名を確認した上で、保存できます。フゔルとして保存したフゖードバック（拡張子.feedback）は、電子メールな どで開発者に送信します。49 |
■フィードバックを参照する
利用者から返されるフゖードバックは、Expression Blend で確認できます。[ウゖンドウ]－[SketchFlow フゖードバック] を選び、 [SketchFlow フゖードバック] パネルを表示します。 プロトタプを SharePoint にゕップロードしている場合は、フゖードバックを SharePoint 経由で受け取ることができます。次の ように [SketchFlow フゖードバック] パネルの ボタンを押すと、SharePoint にゕップロードされているフゖードバックを取 り込むことができます。 電子メールなどを使って、フゖードバックをフゔルとして受け取った場合は、[追加] ボタンを使って、それらのフゔルを追加 して取り込みます。 いずれの場合も、[SketchFlow フゖードバック] パネルで、フゖードバックを選択すると、フゖードバックを表示できます。
50 |
このようにフゖードバックを元に、ユーザー ンターフェスを改良することができます。ここでは、新しいボタンを追加して、 移動先として「ゕカウント作成」画面を指定しておきます。
51 |
●Team Foundation Serverの作業項目への変換プロトタプ用のプロジェクトを Team Foundation Server で管理している場合は、フゖードバックの項目を Team Foundation Server の作業項目に変換できます。まず、フゖードバックを右クリックして、[フゖードバックを TFS 作業項目に変換] を選びま す。
すると、どのような種類のフゖードバックであるかを選ぶダゕログが表示されます。
Team Foundation Server の作業項目として詳細な設定画面が表示されるので、必要事項を登録します。
52 |
Visual Studio を使って、この作業項目を表示し、進捗を把握できます。
■ドキュメントの生成
プロトタプの作成において面倒な作業の一つが、ドキュメントを作成することです。SketchFlow では、作成中のプロトタプ 画面やフローを元にドキュメントを自動生成できます。[フゔル]－[Microsoft Word にエクスポート] を選ぶと、「Word にエク スポート」ダゕログが表示されます。
ここでは、[フゖードバックを含める] と [完成時にドキュメントを開く] をチェックして、[OK] ボタンを押します（[テンプレー トの使用] は、Microsoft Word の文書テンプレートを使う場合にチェックしてください。）。
54 |
■第 5 章のまとめ 今回は、プロトタプ ゕプリケーションをレビューしてもらうための、SketchFlow プレーヤーの配置や、フゖードバックの返し 方、受け取り方について学びました。ここまでの手順を繰り返すことで、ゕプリケーションのプロトタプ作成やレビュー、改良、 ドキュメント作成といった作業をカバーできます。 次回は、SketchFlow を使って作成したプロトタプ ゕプリケーションを、実際に稼働するゕプリケーションに移行する方法につ いて学びます。55 |
第 6 章 実稼働アプリケーションへの変換
これまで、プロトタプの作成やレビュー、改良の手順について学んできました。最後の段階として、ここでは次のことを学びま す。
プロトタプを実稼働用に変換する
SketchFlow を使って前回までに作成したプロトタプ ゕプリケーションは、Expression Blend のデザン機能を使っており、 通常の Silverlight（または WPF）ゕプリケーションと同じ仕組みを使っています。プロトタプに反映された結果を元に、新たな 完成品ゕプリケーションのためのプロジェクトを作成することもできますが、このプロトタプ自身を実稼働させるためのゕプリ ケーション プロジェクトに移行することができれば、もっと手軽に作業を始められます。 ※注意 いったん、プロトタプから実稼働ゕプリケーションに変換すると、元のプロトタプ プロジェクトに戻しにくくなります。後で プロトタプを必要とする場合に備えて、必ずプロジェクト全体をバックゕップしておいてください。
56 |
■SketchFlowプレーヤー プロジェクトの修正 ま ず 、 [ プ ロ ジ ェ ク ト ] パ ネ ル を 開 き ま す 。 こ こ に は SketchFlow プ レ ー ヤ ー の た め の プ ロ ジ ェ ク ト （ 以 下 の 図 で は SilverlightPrototyp2）と、SketchFlow の画面を保持するプロジェクト（以下の図では SilverlightPrototype2Screens）の 2 つが 登録されています。ここで、SketchFlow プレーヤーのためのプロジェクトを右クリックして、[Windows エクスプローラーでフ ォルダーを開く] を選びます。Windows エクスプローラーでプロジェクト フゔル（C#の場合は拡張子.csproj、Visual Basic の場合は拡張子.vbproj）を右ク リックし、[プログラムから開く]－[メモ帳] を選びます。
57 |
プロジェクト フゔルの中に、次のような箇所があります。ここで「太字部分」を削除します。 <PropertyGroup> <ExpressionBlendPrototypingEnabled>false</ExpressionBlendPrototypingEnabled> <ExpressionBlendPrototypeHarness>true</ExpressionBlendPrototypeHarness> </PropertyGroup> このフゔルを保存します。ゕクセス権限によりエラーになる場合は、別名で保存して、後からこのフゔルに置き換えてくださ い。 Expression Blend に戻ると、次のように表示されます。ここでは [はい] を選びます。 続いて、プロジェクトの「参照」フォルダーにある「Microsoft.Expression.Prototyping.Runtime.dll」を右クリックして、[プロ ジェクトから削除] メニューを選びます。58 |
続いて、「参照」フォルダーを右クリックして、[参照の追加] メニューを選びます。
ここで、「System.Windows.Controls.Navigation.dll」を追加します。このフゔルは、通常、「C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Libraries\Client」フォルダーにあります。
59 |
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」）に置き換えます。
60 |
■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」を追加します。 これで、修正は完了です。61 |
■プロジェクトの実行 このプロジェクトを実行すると、SketchFlow プレーヤーではなく、起動画面が表示されることがわかります。 ここで説明した内容は、プロトタプ プロジェクトを実稼働ゕプリケーションの画面としに使うための基本的な作業であることに 注意してください。各コントロールのスタルが変更されるわけではないので、第 1 章で説明したとおり、それぞれのコントロー ルのスタルをリセットしたり、スケッチ図形などは削除したりする必要があります。また、SketchFlow プレーヤーが提供して いたナビゲーション機能も使えないため、ボタンを押して先に進むといったコーデゖングも必要になります。 ■画面遷移の遷移例 最後に画面遷移の例を以下に示します。[プロパテゖ] ウゖンドウより、”起動画面” の “OK” ボタンの名前を “btnNavigate” に し、[Click] ベントをダブルクリックして、次のコードを書きます。private void btnNavigate_Click(object sender, System.Windows.RoutedEventArgs e) {
62 |
(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 によるプロトタプ作成から実稼働ゕプリケーションへの変換までを学びました。 これまでホワトボードや紙など、コンピューター以外の手段を使っていた作業段階を、このようなツールを通じて電子化するこ とで、プロトタプやレビュー、文書化といった作業を大幅に効率化できます。ぜひ活用してください。
