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

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

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

ビヘイビアーの制作

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

図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)
        {
            // 省略
        }
    }
}

著者プロフィール

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

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

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

URLhttp://www.2ndfactory.com/


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

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

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

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