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

第4回 SketchFlowから実開発への展開

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

連載も4回目となりました。これまで説明したSketchFlowは,設計やプロトタイプといった実開発前のフェーズで行われる作業ですが,今回は実開発へ視点を移し,それまでのSketchFlowの資産をいかに実開発で活用するかを解説していきます。

今回もサンプルを元に説明しますので,下記URLよりダウンロードしてください。

SketchFlow資産の活用ポイント

SketchFlowも,根本は通常のアプリケーション開発と同様のWPF/Silverlightプロジェクトを元に動作していますので,テクノロジーの概念は変わりません。その中で,SketchFlowの使用段階から意識すべきポイントは以下の4つになります。

  • テンプレート・スタイルをResource Dictionaryへ集約
  • ビヘイビアー
  • カスタムコントロール
  • 本開発プロジェクトへ変換
テンプレート・スタイルをResource Dictionaryへ集約

コントロールに対する表層を定義できるスタイル・テンプレートの概念は実開発でも変わりません。デザインの確定に合わせ,SketchFlowの段階でコントロールにデザインを適用しておけば,実案件にもそのまま利用できます。ここで,スタイル・テンプレートのリソースをResource Dictionaryとして独立したXAMLファイルに集約することで,スムーズに移行することができます。

ビヘイビアー

画面上のコントロールに対して振る舞いを与えるためにパーツ化されたクラスです。Expression Blendとの親和性が高く,GUI上からコントロールに適用できるため,デザイナーでも簡単に利用できます。また,パーツとして独立性が高く,再利用しやすいのが特徴です。

カスタムコントロール

カスタムコントロールを作成することで,標準コントロールと同等の汎用性の高いコントロールを作成できます。デザインとロジックの分離が明確にできるため,表層に左右されない部品を作成できます。SketchFlowの段階で明確に部品化が可能な要素がある場合は,検討するとよいでしょう。

SketchFlow作成時点で,いかにパーツとして再利用できる部分を見極められているかがポイントと言えます。

本プロジェクトへの変換

先にも言いましたように,SketchFlowプロジェクトも基本テクノロジーは共通であるので,プロジェクトファイルに手を加えることで,Silverlightアプリケーションのプロジェクト形式に変換することができます。

4つのポイントのうち前3つは,SketchFlowの時点から考慮し,進めていく事項でしたが,本プロジェクトへの変換は完全に実開発に切り替えるポイントとなりますので,SketchFlow作業には原則的に後戻りできなくなります。切り替えるタイミングが重要と言えるでしょう。

変換操作は決して難しい作業ではありません。ただし,実開発には不要なライブラリが組み込まれていることや,SketchFlow操作で,自動でファイル名称に日本語が入ってしまうなど,これから開発を始めるというスタートとしては,多少ソースコードの整理が必要な部分もあります。

では,以上の4つのポイントを,前回のワークフローに適用するとこのようになります。

図1 ワークフローに対する,各タイミング

図1 ワークフローに対する,各タイミング

設計・検討フェーズから,実装フェーズに移行する際,スムーズかつ効率よく移行するためには,SketchFlowで少しずつ準備を始めていくことが重要と言えるでしょう。

著者プロフィール

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

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

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

URLhttp://www.2ndfactory.com/


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

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

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

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

コメント

コメントの記入