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

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

連載も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で少しずつ準備を始めていくことが重要と言えるでしょう。

ビヘイビアーの制作

それでは、前回まで作成したサンプルから、ユーザー操作をビヘイビアーとして作成する手順を例に解説していきます。

図2 プランニング画面
図2 プランニング画面

SketchFlowサンプルの中の画面の1つであるプランニング画面では、アクティビティの項目をDay1~3のタイムラインの中に目盛りに合わせて配置するイメージです。このドラッグ&ドロップは、Expression Blend標準の「MouseDragElementBehavior」ビヘイビアーでは、領域内の目盛りに合わせた(最小移動単位を指定した)ドラッグ&ドロップができません。そこで、タイムライン内で、目盛りに合わせてオブジェクトをドラッグ&ドロップできるビヘイビアーを作成します。

図3 ⁠ファイル」メニュー
図3 「ファイル」メニュー
図4 ⁠新しいアイテム」ウィンドウ
図4 「新しいアイテム」ウィンドウ

図3「ファイル」メニュー>「新しいアイテム」を選択すると、図4「新しいアイテム」ウィンドウが表示されます。ここで「ビヘイビアー」を選択し、⁠名前」を"TimelineDragBehavior.cs"と入力してビヘイビアー定義ファイルを作成します。

サンプルでは以下リスト1のように記述します。省略部分はサンプルソースをご覧ください。

リスト1 TimelineDragBehavior.cs
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Interactivity;

namespace TravelPlannerScreens
{
    public class TimelineDragBehavior : Behavior<FrameworkElement>
    {
        // 吸着単位
        private double moveUnit = 0;
        // マウスダウン位置
        private Point mouseDownPoint;
        // ドラッグ開始のエレメント位置
        private Point dragStartElementPoint;
        // ドラッグ中フラグ
        private bool mouseIsDragging = false;

        /// <summary>
        /// 吸着単位
        /// </summary>
        public double MoveUnit
        {
            get { return this.moveUnit; }
            set { this.moveUnit = value; }
        }

        protected override void OnAttached()
        {
            base.OnAttached();

            // Behavior がオブジェクトにアタッチされた時に実行したいコードを挿入します。
            this.AssociatedObject.MouseLeftButtonDown += new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonDown);
            this.AssociatedObject.MouseLeftButtonUp += new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonUp);
            this.AssociatedObject.MouseMove += new MouseEventHandler(AssociatedObject_MouseMove);
        }

        protected override void OnDetaching()
        {
            base.OnDetaching();

            // Behavior がオブジェクトから削除された時に実行したいコードを挿入します。
            this.AssociatedObject.MouseLeftButtonDown -= new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonDown);
            this.AssociatedObject.MouseLeftButtonUp -= new MouseButtonEventHandler(AssociatedObject_MouseLeftButtonUp);
            this.AssociatedObject.MouseMove -= new MouseEventHandler(AssociatedObject_MouseMove);
        }

        // マウスダウンイベントハンドラ
        void AssociatedObject_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            // 省略
        }

        // マウスアップイベントハンドラ
        void AssociatedObject_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            // 省略
        }

        // マウスムーブイベントハンドラ
        void AssociatedObject_MouseMove(object sender, MouseEventArgs e)
        {
            // 省略
        }
    }
}

ここでポイントとなるのが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との連携や標準ビヘイビアーの強化、矢印などのシェイプパーツの追加などがされています。まだ英語版のみの公開ですが、そちらも是非チェックしてみてください。

おすすめ記事

記事・ニュース一覧