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

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

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

ここでポイントとなるのがOnAttachedおよびOnDetachingメソッドになります。

Blend上でビヘイビアーを定義したオブジェクトの参照が,このクラスではthis.AssociatedObjectで取得できますので,通常のSilverlight開発と同様に,マウスイベントとその処理を加えることでドラッグ&ドロップ機能を実現しています。

図5 作成したビヘイビアーがアセットライブラリに表示

図5 作成したビヘイビアーがアセットライブラリに表示

作成したビヘイビアーは一度ビルドを行うと,図5のようにアセットライブラリのビヘイビアー一覧に追加されますので,標準で提供されるビヘイビアーと同様の操作でオブジェクトへ適用できます。このサンプルでは,同一プロジェクトにビヘイビアーを作成しましたが,別のSilverlightクラスライブラリプロジェクトに作成することで,複数のSketchFlowプロジェクト間で共有することも容易になります。

図6 ビヘイビアー選択時のプロパティパネル

図6 ビヘイビアー選択時のプロパティパネル

また,ビヘイビアーで定義したプロパティは,プロパティパネルに表示されます。適宜プロパティを定義し,使用するごとにパラメータを変更することで,汎用性を確保するとよいでしょう。今回のサンプルでは、ドラッグ中に要素が半透明になるかどうかを設定できるプロパティを作成してあります。

図7 完成したプランニング画面

図7 完成したプランニング画面

図7の完成画面では,プランニング画面の、アクティビティ要素にビヘイビアーが適用されており、タイムラインに吸着するドラッグアンドドロップの動きが確認できます。

参照情報など

今回は4つのポイントのうちビヘイビアーに着目して解説をしてきました。その他にも様々なテクニックやサンプルがMSDNなどで詳しく解説されていますので,参考にしてください。

テンプレート・スタイルをResource Dictionaryへ集約

ビヘイビアー

  • 「BeeHive」サンプル
  • 図8 ⁠BeeHive」サンプル

    図8 「BeeHive」サンプル

Expression Blendに収録されているサンプルですが,ビヘイビアーをフル活用してゲームを実現しています。ビヘイビアーで実現できることの参考になります。

カスタムコントロール

本プロジェクトへの変換

変換手順はExpression Blendのヘルプに記載されています。

連載の終わりに

SketchFlowとSilverlightをテーマにした本連載も今回で最後となります。

セカンドファクトリーでもSketchFlowの有用性を感じ,実案件で採用しています。この連載を通じて,皆さんの開発ワークフローを効率化するヒントとなるよう心がけましたが,いかがでしたでしょうか?実質SketchFlowはまだバージョン1であり,まだ物足りない部分もありますが,今後の進化に期待したいところです。折しも先日Expression Blend 4 Betaが公開されたばかりです。Team Foundation Serverとの連携や標準ビヘイビアーの強化,矢印などのシェイプパーツの追加などがされています。まだ英語版のみの公開ですが,そちらも是非チェックしてみてください。

著者プロフィール

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

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

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

URLhttp://www.2ndfactory.com/


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

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

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

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