プロトタイピングツールSketchFlowを用いた,Silverlightアプリ開発

第1回 SilverlightとSketchFlowの紹介

この記事を読むのに必要な時間:およそ 3 分

開発環境の準備

それでは,次回でSketchFlowを使ったサンプルを解説していきますが,その前に環境を整備しておきましょう。

前項「デザインとロジックの分離」で挙げましたが,Silverlightの開発環境にはVisual Studio 2008とExpression Blend3の2種類のツールを使用します。

初めてSilverlightを試したいという方は,以下のような組み合わせで無償の環境を構築することができます。

画像

各インストーラーのダウンロードURLは以下のページにまとめられていますので参考にしてください。

SketchFlowとは

ここまでで,Silverlightについて紹介してきましたが,この連載の主役となるSketchFlowについての特徴を見ていきます。SketchFlowとは,Expression Blend 3で搭載されたプロトタイプ開発機能です。画面間の遷移やアニメーションの定義をGUI上で行えるため,ワイヤーフレーム状態で素早く動くものを簡単に作成し視覚的に確認することができ,クライアントとの意思疎通をスムーズにすることができます。

図2 SketchFlow

図2 SketchFlow

以下に,SketchFlowの主な特徴を挙げます。

手書きのようなワイヤーフレームスタイル

ワイヤーフレームにデザイン要素が入ってしまうと,クライアントとの意思疎通で誤解を生じることがあります。それを防ぐため,手書きで書いたようなスタイルが搭載されています。

SketchFlow マップ パネル

ワイヤーフレームを作成した場合,画面遷移図を別途作成することはよくあることだと思います。SketchFlowマップパネルでは,画面遷移図を描きながら必要な画面を随時追加することができます。

プログラミングすることなくモックアップを作成

実際に操作した感覚をつかむため,ワイヤーフレームが簡単に切り替わるだけのモックアップを作る場合があります。このときSketchFlowであれば,画面遷移やアニメーションをする程度のモックアップならばプログラミングなしで作成できます。また,ドラッグ&ドロップなどの特殊な振る舞いも,ビヘイビアを組み合わせて実現できます。必要であればカスタムビヘイビアをプログラミングすることで,独自の振る舞いも表現できます。

SketchFlowプレーヤー

SketchFlowタイプのプロジェクトをビルドした場合,SketchFlowプレーヤー形式で実行ファイルが生成されます。SketchFlowプレーヤーでは,実際にワイヤーフレームを操作して,画面遷移の動作を確認することや,SketchFlow マップから目的の画面を表示することができます。同時に,コメントの記入や手書き入力ができ,その情報は.feedbackファイルとして保存することができます。これを利用し,作成したSketchFlowプレーヤーファイルをクライアントに渡し,フィードバックファイルを返送してもらう,といった使い方が想定できます。

ドキュメントの出力

SketchFlowで行った作業を最終的にWord形式のドキュメントに出力することができるので,プロジェクトの成果物の1つとすることができます。

プロトタイププロジェクトへの変換

SketchFlowプロジェクトも,基盤は通常のWPFやSilverlightプロジェクトと変わりはありません。プロジェクト設定ファイルの編集やライブラリの追加削除をすることで,SketchFlowでの成果をプロトタイプ開発に活かすことができます※2⁠。

※2
プロトタイププロジェクトの変換の手順は,MSDNのページに記載されています。

第1回は事始めとして,SilverlightとSketchFlowの特徴を紹介していきました。第2回からは,SketchFlowを中心にサンプルを作成しながら解説していきます。実際に動かしながら使うことで,開発現場においての新たな広がりや,逆に機能として物足りないと感じる部分も出てきます。そういったところも踏まえ,セカンドファクトリーでの活用例もご紹介していきます。

著者プロフィール

杉下高仁(すぎしたたかひと)

Flash3から携わるインタラクションデザインの経験を生かし,2001年セカンドファクトリーに参加。創業期(本人は在学中)よりアルバイトとして現場に関わっていたこともあり,アプリケーション開発に対する UXの重要性をリアルに感じてきた。入社後インタラクションデザイナーとして業務を行う傍らソフトウエア開発 のノウハウを学び,双方の視点からクライアントを真に満足させることをポリシーとして現場を牽引する。

資格として,経済産業省認定テクニカルエンジニア(情報セキュリティ),経済産業省認定ソフトウエア開発技術者,Microsoft MVPなど多数保有。

URLhttp://www.2ndfactory.com/


落合健太郎(おちあいけんたろう)

在学中に情報の視覚化とインタラクションデザインについて研究し,多摩美術大学情報デザイン学科情報デザインコース卒業後,知識だけではなく実際のアプリケーション開発に生かしたいと,2007年セカンドファクトリーに参加。

UIの可能性を最大限発揮すべく,入社後はテクノロジーの領域を限定せず,製品プロトタイプや,デバイス向けUI等,デザインとシステムの融合が強く求められる案件に従事。今後の開発には欠かせないインタラクティブな操作を実現できる技術者として活躍中。

URLhttp://www.2ndfactory.com/
Twitter:http://twitter.com/nxxdle