SketchFlowでのWindows Phoneアプリのプロトタイピング

こんにちは、％ユーザー名％、％wpdeveloper％、％デザイナー％、およびこのトピックを読んでいる全員！



Imagine Cup：Windows Phone Challengeのアプリケーションが終了する前に、2週間以上が残ります。それを行う時間です！ ただし、 SketchFlowで作成したアプリケーションプロトタイプも添付する必要があります。 今日はそれを作成する方法についてお話します。



注意、カットの下にたくさんの写真！

始める準備はできましたか？

それで、あなたはアプリケーションを書いて、アプリケーションのテーマを思いつきました、それはプロトタイプの場合のままです。 作成するには、次のものが必要です。

• Windows Phone SDK
• Expression Blend 4 （学生はDreamsparkで無料で利用できます）
• Windows Phone用のスケッチフローテンプレート
• Windows Phone Silverlightツールキット

SketchFlowテンプレートをインストールした後、 Expression Blendで新しいプロジェクトを作成すると、 Windows Phone SketchFlowアプリケーションを選択できるようになります。







今回はサンプルアプリケーションを開発せず、プロトタイプを作成するときに役立つ主な機能のみを示します。 スケッチの目的は信頼性の高いプロトタイプを作成することではなく、一般的な用語でアプリケーションの外観と基本的な機能を示すことです。

前提条件

この記事は、少なくとも一般的な用語でSketchFlowに精通している人を対象としています。 基本的な原理を理解するために、 kichik （ 1、2、3）による一連の記事「Expression Blend + SketchFlowでのプロトタイピング」に精通することをお勧めします。 すべて、今すぐ開始できます！

Sketchflowマップ

SketchFlowマップは、画面とコンポーネント間のすべての接続を示すアプリケーションのマップです。 前提条件項目から2番目の記事を読むと、マップの主な機能は新しい画面とコンポーネント（コンポーネント画面、複数のページに表示される要素）の追加であることがわかります。

Windows Phoneのスケッチの機能-プロジェクトを作成するときに、4つの画面を作成します。3つのシステムとアプリケーションのメイン画面：







お気づきかもしれませんが、すべてのアプリケーション画面はメイン画面（ホーム）と検索画面（検索）に接続されています。 これは、電話のスケッチで適切なボタンを押すことを処理するために行われます。

また、メインページとアプリケーションページで、タイルまたはトースト通知用の独自のアイコンを作成できます。



新しい画面を作成すると、ホーム画面と検索画面へのリンクが自動的に作成されます。

ページナビゲーション

ページ間のナビゲーションを作成する方法は2つあります。 ビヘイビアーまたはマウスの右ボタンを使用します（実際、これは同じことですが、2番目のケースでは身体の動きが少なくて済みます）。 ビヘイビアについては少し後で説明しますが、ここでは簡単な方法を使用しましょう。

状態とアニメーションを作成する

要素のパラメーターを変更するには、「状態」タブを使用します。 ご覧のとおり、最初はWindows Phoneの SketchFlowテンプレートには、すでに2つの状態があります。電話の縦位置と横位置です。 状態グループを作成しましょう（タブの右上にある[状態グループの追加 ]ボタン）。 [状態の追加 ]ボタンを使用して、このグループに状態を追加できます。 例として、通常のTextBlockでテキストの不透明度を変更します。



いずれかの状態をクリックすると、作業ウィンドウが赤枠で囲まれます。これは、このイベントへの移行時に変更が記録および再現されることを意味します。 初期状態に戻すには、「状態」タブで「 ベース」を選択します。



したがって、新しい状態を作成します。

1. 基本状態が選択されていることを確認してください。 アイテムの不透明度を0に変更します。
2. 作成した状態を選択します。 赤いフレームが表示されたら、記録を開始できます。 [ タイムラインを表示]ボタンをクリックします。
3. キーフレームを作成し、スライダーを数秒間動かして、 不透明度が 100に設定された別のキーフレームを作成します。
4. アニメーションの作成が終了したら、 ベース状態を再度選択し、 不透明度が0であることを確認します。

クリック可能



そのため、状態を作成しました。ボタンをクリックしたときに呼び出してみましょう。 残念ながら、コンテキストメニューから状態をバインドできませんでした（ボタンを右クリックして、状態をアクティブにします）。 したがって、[ 資産 ]タブに移動し、[ 動作 ]を選択して、 GoToStateActionをボタンにドラッグします。







任意の動作について、イベント（ボタン- クリック ）にいくつかの条件を割り当て、発生する状態を指定できます。



すべてを正しく行った場合、ブラウザでプロトタイプを起動した後、ボタンをクリックすると、テキストがスムーズに表示されます。

ストレージを使用したデータ転送

ページ間でデータを転送する必要のないアプリケーションを想像することは困難です。 実際のアプリケーションを作成する場合、パラメーターを渡すか、何らかの静的フィールドを作成することで、この問題を簡単に解決できます。 しかし、 SketchFlowプロトタイプでデータを送信する必要がある場合はどうでしょうか？ SketchFlowには組み込みのデータストレージがいくつかあり、それを使用するにはSetDataStoreValueActionの動作が役立ちます。



前の例を少し複雑にしましょう。 これで、 TextBoxのテキストがTextBlockに表示されます 。 もちろん、これは通常のBindingを使用して実装できますが、組み込みストレージを使用してこれを行う方法を学習した後、同じ方法でページ間でデータを転送できます。



ボタンに新しい動作 SetDataStoreValueAction を追加します。 そのプロパティに移動し、[ Common Properties ]タブで[ Property ]フィールドをクリックして、 DataStoreに新しいプロパティを作成します 。 私はそれをnew_textと呼びました 。 次に、値を割り当てる必要があります。 この場合、「 値」フィールドの右側のボックスをクリックし、「 要素プロパティのバインド 」を選択してTextBoxをポイントする必要があります 。







ここで、変数の値をTextBlockに バインドします。TextBlockプロパティのTextフィールドの横にあるボックスをクリックし、メニューからBindingを選択します。



できた！ アプリケーションを再度実行して、ストレージ使用量の操作性を確認できます。 もちろん、単一のページ内でデータを転送するためにそれを使用することの利点は疑わしいですが、複数ページのデータアプリケーションを開発する場合、このアプローチは不可欠です。

ピボット/パノラマ要素の使用

残念ながら、 SketchFlowでのパノラマページまたはピボットページの操作は 、 実装がかなり不十分です。 もちろん、デモモードではこれらのページは正常に動作し、ジェスチャーに応答してスムーズにスクロールしますが、作成モードでは最初のページしか表示されず、[ オブジェクトとタイムライン ]タブでページを変更しても、実際の編集時のようにパノラマは切り替わりませんExpression Blendのページ。







パノラマをページに追加し、作成済みの要素を最初のPanoramaItemにドラッグしましょう。







2番目のPanoramaItemを選択すると、エディターはそれに切り替えません。 これにより、パノラマの他の要素のコンテンツを編集するときに小さな問題が発生します。 この場合、2番目のアイテムがまだ少し見える場合、3つ以上の要素を使用している場合、またはページにパノラマが含まれていないがピボットがある場合、視覚的にそれらを操作することはできなくなります。

解決策として、パノラマの他のページから最初にグリッドをドラッグし、その上で要素を作成および編集してから、このグリッドを目的のPanoramaItemに戻すだけです。 ピボットページを編集するときにも同じスキームが機能します 。

アプリケーションにテストデータを入力する

この項目はWindows Phoneには直接適用されませんが、パノラマの2ページ目を空のままにできませんでした:)。 SketchFlowは、アプリケーションをコンテンツで満たすために、さまざまな形式でデータを生成する機能をサポートしています。



生成されるデータには、テキスト、数値、ブール、画像の4種類があります。 テキストデータの場合、次のプリセットがあります：Lorem Ipsum（指定されたパラメーターを持つテキストのみ）、名前、日付、住所、電話番号など。 数値データの場合は長さが示され、画像の場合はそれらを取得するフォルダーが示されます。



次のようにテストデータを作成できます。[ データ ]タブで、[ データサンプルの作成 ]ボタンをクリックし、[ 新しいサンプルデータを選択]をクリックします 。 お気づきかもしれませんが、データはXmlから取得することも、クラスを使用して取得することもできます。



[ サンプル値の編集 ]ボタンを使用して、要素の数を変更し、要素自体を編集できます。



生成されたデータでListBoxを作成するには、必要なコレクションを[ データ ]タブからプロトタイプにドラッグアンドドロップするだけです。 次に、ListBoxItemTemplateテンプレートを編集して、リストに必要な外観を与えることができます 。 生成されたデータを別の場所で使用する場合は、 バインディングメカニズムを使用する必要があります。



この例では、新しいグリッドに ListBoxを作成し、このグリッドを2番目のPanoramaItemにドラッグして戻しました。 したがって、パノラマの2ページ目のコンテンツを問題なく編集することができました。

おわりに

この記事の一部として、 SketchFlowを使用してWindows Phone用のアプリケーションをプロトタイピングするすべての機能を検討しようとしました 。



SkyDriveの記事から例をダウンロードしてください。



詳細については、次のリンクを使用できます。

• 5役立つWindows Phone Mango SketchFlowチュートリアル
• ブレンド3とスケッチフロー：プロトタイプアプリケーション （スピーカー-女の子）
• エクスプレッションスケッチフローによるSilverlightアプリケーションのプロトタイピング：パート2。

Windows PhoneのSketchFlowテンプレートをご存知ですか。オーストラリアでお会いできることを楽しみにしています。