Microsoft AJAX Libraryでドラッグ＆ドロップ対応のWebページを作成する / DevX

はじめに

　ページの外観と操作性をユーザーが自分でパーソナライズできるようにする機能は、Webアプリケーションに追加できる便利な機能の1つです。ページのパーツの位置をユーザーが自分の好みで変更したいと思うこともよくあります。Webサイトを開いて、そのページのセクション、画像、テキスト、その他の「パーツ」を自分の好きなように移動できる状況を想像してみてください。AtlasなどのAJAXテクノロジーを使えば、これをすぐに実現できます。

　もちろん、ASP.NET 2.0では、WebPartsフレームワークを使って同じようなことができます。ただ、Atlasを使えば、WebPartsのような機能をもっと簡単にページに組み込むことができます。

　この記事では、Webページのパーツを「移動可能」にする方法を解説します。ユーザーはさまざまなパーツをドラッグ＆ドロップ操作で配置し直せるようになります。その上、このようにしてパーソナライズしたページをASP.NET 2.0のプロファイルサービスでユーザーごとに保存できます。

アプリケーションの作成

　Visual Studio 2005を使用して新しいAtlasアプリケーションを作成し、「C:DragandDrop」と名前を付けます。「default.aspx」ページの分離コードに切り替えます。

　まず、<atlas:ScriptManager>コントロールのEnablePartialRendering属性をtrueに設定します。これによって、ページの部分更新が可能になります。

<atlas:ScriptManager ID="ScriptManager1" runat="server"
    EnablePartialRendering="true" />

　次に、このページに<atlas:UpdatePanel>コントロールを追加し、このコントロール内に<ContentTemplate>要素を追加します。この<ContentTemplate>要素にPanelコントロールを追加し、その境界線スタイルと大きさを設定します。これを行うには次のようにコードを追加します。

<atlas:ScriptManager ID="ScriptManager1" runat="server"
   EnablePartialRendering="true" />
   <div>
    <atlas:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Panel ID="Panel1" runat="server"
               BorderStyle="Solid"
               Height="198px"
               Width="194px">
            </asp:Panel>
        </ContentTemplate>
    </atlas:UpdatePanel>

　これで<atlas:UpdatePanel>コントロールにPanelコントロールが埋め込まれたので、ここにコンテンツを追加します。テキストを追加することも、CalendarやImageMapなど別のコントロールを追加することもできます。この例では時計を追加して、選択したタイムゾーンの時刻を表示させることにします。ClockLink.comに、Webページに簡単に埋め込むことのできる洗練された時計が揃っています。これらの時計は、ページを再ロードしなくても、このページのクライアント側で（毎秒）自動的に更新されます。ニュージーランドの時刻を表示する時計を追加することにします。以下のコードのようにスクリプトを挿入するだけでこの時計を埋め込むことができます。

<atlas:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Panel ID="Panel1" runat="server"
           BorderStyle="Solid"
           Height="198px"
           Width="194px">

            <script rc="http://www.clocklink.com/embed.js">
            </script>

            <strong>Current Time in New Zealand</strong>

            <script type="text/javascript"
              language="JavaScript">
              obj = new Object;
              obj.clockfile = "0010-Red.swf";
              obj.TimeZone = "NZT";
              obj.width = 200;
              obj.height = 200;
              obj.wmode = "transparent";
              showClock(obj);
            </script>

        </asp:Panel>
    </ContentTemplate>
</atlas:UpdatePanel>

　この時点で［F5］キーを押すと、このページがどのように表示されるか確認できます。図1は、Panelコントロール内に時計が表示されている状態です。

図1　「Default.aspx」ページにクライアント側で毎秒更新される時計を表示した様子

　アプリケーションの実行を終了します。次に、この時計が埋め込まれているPanelコントロールを移動可能にします。そのためには<atlas:DragOverlayExtender>コントロールを使います。<atlas:DragOverlayExtender>コントロールを、別のコントロールを拡張してフローティングコントロールに変えます。フローティング状態になったコントロールはWebページの好きな場所にドラッグ＆ドロップできるようになります。

　<atlas:DragOverlayExtender>コントロールを追加し、これに<atlas:DragOverlayProperties>コントロールを追加して、そのTargetControlID属性を「Panel1」に設定します。また、これのEnabledプロパティも忘れずにtrueに設定します。

<atlas:ScriptManager ID="ScriptManager1" runat="server"
                     EnablePartialRendering="true" />
<atlas:DragOverlayExtender ID="DragOverlayExtender1"
                           runat="server">
    <atlas:DragOverlayProperties TargetControlID="Panel1"
                                 Enabled="true"/>
</atlas:DragOverlayExtender>

　［F5］キーを押してこのアプリケーションをテストします。ページの好きな場所に時計をドラッグできるようになりました。ただし、マウスを離すと時計は必ず元の場所に戻ってしまいます。これは、ページのレンダリング領域外にはコントロールをドロップできず、今の状態ではこのページにはPanelコントロール以外何もないためです。このページの<body>要素に、以下のように属性を追加すると、この問題を解決できます。

<body style="height: 100%;">

　［F5］キーを押してこのアプリケーションをもう一度テストします。今度は、時計をドラッグしてページ全体のPanelコントロール内の好きな場所にドロップできるようになっています（図2を参照）。

図2　同じ時計をページ内の別の場所にドラッグ＆ドロップした結果

ページのパーソナライズ

　ページ内でコントロールをドラッグ＆ドロップできるようになりましたが、アプリケーションを再起動すると、移動したコントロールは元の場所に戻ってしまいます。実際に使用するアプリケーションならば、ページの設定を記憶できるようにしたいはずです。そのためには、ASP.NET 2.0のプロファイルサービスを使用します。

　ASP.NET 2.0のプロファイルサービスを使用するには、いくつか操作が必要です。まず、「Web.config」ファイルに以下のコードを追加して、このアプリケーションにプロファイルプロパティを1つ追加します。

<system.web>
  <profile>
    <properties>
      <add name="Panel1Loc" type="System.String" />
    </properties>
  </profile>

　次に、「Web.config」ファイルの<profileService>要素のコメント化を解除して、Atlasがプロファイルサービスをサーバー側で使用できるようにします。プロファイルサービスの属性を次のように設定します。

<profileService enabled="true"
                setProperties="Panel1Loc"
                getProperties="Panel1Loc" />

　これによって、Panel1Locという名前のプロファイルプロパティの読み取りと書き込みが可能になります。

　次に、<atlas:DragOverlayProperties>コントロールにProfileProperty属性を追加し、値を「Panel1Loc」とします。これによって、このコントロールが拡張するPanelコントロールの位置を、Panel1Locという名前のプロファイルプロパティに保存できるようになります。

<atlas:DragOverlayExtender ID="DragOverlayExtender1"
                           runat="server">
    <atlas:DragOverlayProperties TargetControlID="Panel1"
               Enabled="true" ProfileProperty="Panel1Loc" />
</atlas:DragOverlayExtender>

　最後に、<atlas:ProfileScriptService>コントロールを追加し、そのAutoSave属性をtrueに設定します。これによって、Panelコントロールをドラッグ＆ドロップするたびに、新しい位置がプロファイルプロパティに自動的に保存されます。

<atlas:ScriptManager ID="ScriptManager1" runat="server"
                     EnablePartialRendering="true" />
<atlas:ProfileScriptService ID="ProfileScriptService1"
                        runat="server" AutoSave="true" />

　これで完了です。［F5］キーを押してこのアプリケーションをテストします。時計を別の場所にドラッグ＆ドロップします。アプリケーションの実行を終了してから再起動すると、時計は移動した場所に表示されます。

データベースの確認

　時計の位置情報が実際に保存されていることを確認してみましょう。プロジェクトの「App_Data」フォルダを最新の状態に更新します（図3を参照）。新しく「ASPNETDB.MDF」というデータベースが作成されていることが分かります。ASP.NETによって、このデータベースにアプリケーション関連データが保存されます。

図3　ページ上の各要素の位置データが保存されるASPNETDB.MDFデータベース

　この「ASPNETDB.MDF」ファイルをダブルクリックします。サーバーエクスプローラでテーブル項目を展開し、「aspnet_Profile」テーブルを右クリックしてから［Show Table Data］をクリックします。このテーブルの先頭の行に、プロファイルプロパティの値が表示されます（図4を参照）。

図4　プロファイルプロパティの値が含まれる行

著者注

　この例では既定のWindows認証を使用しているため、自分のWindowsログインがユーザー名（別途「aspnet_Users」テーブルに保存される）として使用されます。プロファイルサービスはフォーム認証とも連動し、認証済みユーザーと匿名ユーザーに対応します。

複数パネルの追加

　ここまでは1つのPanelコントロールのみを見てきました。今度は、Panelコントロールをもう1つ追加して、日本の現在時刻を表示させてみます。次のように追加と変更を行います。

　ページに新しい<atlas:UpdatePanel>コントロール（UpdatePanel2）を追加し、これにもう1つのPanelコントロール（Panel2）を追加します（今度は時計に日本の時刻を表示させます）。

<atlas:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
       ...
       ...
    </ContentTemplate>
</atlas:UpdatePanel>
<atlas:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
        <asp:Panel ID="Panel2" runat="server"
                   BorderStyle="Solid"
                   Height="198px" Width="194px">

            <script
               src="http://www.clocklink.com/embed.js">
            </script>

            <strong>Current Time in Japan</strong>

            <script type="text/javascript"
                    language="JavaScript">
                obj = new Object;
                obj.clockfile = "0008-Yellow.swf";
                obj.TimeZone = "JST";
                obj.width = 200;
                obj.height = 200;
                obj.wmode = "transparent";
                showClock(obj);
            </script>
        </asp:Panel>
    </ContentTemplate>
</atlas:UpdatePanel>

　<atlas:DragOverlayExtender>に新しい<atlas:DragOverlayProperties>コントロールを追加して、2つ目のPanelコントロールを拡張します。

<atlas:DragOverlayExtender ID="DragOverlayExtender1"
                           runat="server">
    <atlas:DragOverlayProperties TargetControlID="Panel1"
               Enabled="true" ProfileProperty="Panel1Loc" />
    <atlas:DragOverlayProperties TargetControlID="Panel2"
               Enabled="true" ProfileProperty="Panel2Loc" />
</atlas:DragOverlayExtender>

　「Web.config」で、Panel2Locという名前の新しいプロファイルプロパティを追加します。

<profile>
    <properties>
        <add name="Panel1Loc" type="System.String" />
        <add name="Panel2Loc" type="System.String" />
    </properties>
</profile>

　最後に、setProperties属性とgetProperties属性を変更してPanel2Locプロファイルプロパティも対象にします。

<profileService enabled="true"
                setProperties="Panel1Loc;Panel2Loc"
                getProperties="Panel1Loc;Panel2Loc" />

　［F5］キーを押してこのアプリケーションをテストします。2つの時計をドラッグ＆ドロップできるようになり、ページをロードし直しても2つの時計の位置は保持されます（図5を参照）。

図5　2つのPanelコントロールをドラッグ＆ドロップできる

DragPanelExtenderコントロールを使ったドラッグ＆ドロップ

　Webページのドラッグ＆ドロップ操作には、<atlas:DragOverlayExtender>コントロールを使う方法以外に、Atlas Control Toolkitに付属のDragPanelExtenderコントロールを使う方法もあります。DragPanelExtenderコントロールは基本的には<atlas:DragOverlayExtender>コントロールとよく似ていますが、ドラッグされたコントロールの位置情報を保持する機能が組み込まれていない点が異なります。

　DragPanelExtenderコントロールの動作を見るために、ページ（Default2.aspx）に新しいWebフォームを追加します。このフォームの分離コードに切り替え、以下のコードを記述します。

<atlas:ScriptManager ID="ScriptManager1" runat="server">
</atlas:ScriptManager>

<asp:Panel ID="Panel1" runat="server" Width="125px"
           BorderStyle="Double">
    <asp:Panel ID="Panel2" runat="server" Height="1px"
               Width="100%" BorderStyle="Double"
               BackColor="White">
        <div style="text-align: center">Drag Me</div>
    </asp:Panel>
    <center>
        <asp:Panel ID="Panel3" runat="server"
                   Height="50px" Width="125px">
            <asp:Image ID="Image1" runat="server"
                       Height="318px" Width="475px"
                       ImageUrl="~/Fish.jpg" />
        </asp:Panel>
    </center>
</asp:Panel>

　このコードには以下のものが含まれます。

<atlas:ScriptManager>コントロール
1つのPanelコントロール（Panel1）内に埋め込まれた2つのPanelコントロール（Panel2とPanel3）
Panel2内の<div>要素（文字列「Drag Me」が含まれる）
Panel3内の画像「Fish.jpg」（この画像をプロジェクトに追加することが必要）

　DragPanelExtenderコントロールでは、ドラッグできるようにするPanelコントロール（この場合はPanel2）と、これに対応して移動できるようにするPanelコントロール（この場合はPanel1）を指定できます。以下のコードをページに追加してこれを指定します。

<cc1:DragPanelExtender ID="DragPanelExtender1" runat="server">
    <cc1:DragPanelProperties
       DragHandleID="Panel2"
       TargetControlID="Panel1" />
</cc1:DragPanelExtender>

　これによって、ユーザーはPanel2をドラッグできるようになり、対応するPanel1がこれと一緒に移動するようになります。これで完了です。［F5］キーを押してこのアプリケーションをテストします。文字列「Drag Me」が含まれているパネルをドラッグすると、画像が含まれているパネルも移動します（図6を参照）。

図6　DragPanelExtenderコントロールを使うと、パネルを別のパネル内に入れることで、パネルが移動可能であることをより明確にユーザーに示すことができる

ドラッグアイコンへの変更

　よく見ると、「Drag Me」パネルにマウスを置いてもマウスカーソルが移動ハンドル（4方向矢印のアイコン）に変わらないことに気付くでしょう。これではパネルが移動可能であることがユーザーに伝わらず、UIデザインとして望ましくありません。マウスカーソルを変更するには、カスケードスタイルシート（CSS）を追加する必要があります。

　CSSスタイルシートをプロジェクトに追加します（ソリューションエクスプローラでプロジェクト名を右クリックしてから［Add New Item］をクリックし、［Style Sheet］をクリックします）。既定の名前「StyleSheet.css」を使用します。このスタイルシートに以下の設定を追加します。

.dragIcon {
    width:100%;
    height:21px;
    background-color:#FFF;
    text-align:center;
    cursor:move;
    font-weight:bold;
}

　「Default2.aspx」のソースビューに戻り、新しく追加したスタイルシートにリンクさせるために、以下のように要素を追加します。

<head runat="server">
    <title>Untitled Page</title>
    <link href="StyleSheet.css"
          rel="stylesheet" type="text/css" />
</head>

　「Drag Me」パネルの上にマウスが移動したときにこれを示すために、<div>要素のクラス属性を次のように設定します。

<asp:Panel ID="Panel2" runat="server" Height="1px"
           Width="100%" BorderStyle="Double"
           BackColor="White">
    <div class="dragIcon" style="text-align: center">
        Drag Me</div>
</asp:Panel>

　［F5］キーを押してこのアプリケーションをもう一度テストします。マウスを「Drag Me」パネルの上に移動すると、マウスカーソルは移動ハンドルに変わります（図7を参照）。

図7　マウスカーソルを移動ハンドルに変更して、パネルが移動可能であることを視覚的に示す

　この記事では、Atlasを使ってWebページにドラッグ＆ドロップ機能を簡単に実装する方法を解説しました。<atlas:DragOverlayExtender>コントロールを使うと、Panelコントロールを拡張できるほか、他のWebサーバーコントロールも拡張できます。また、Atlas Control Toolkitに付属のDragPanelExtenderコントロールを使ってPanelコントロールを移動可能にする方法も紹介しました。最後に、コントロールの既定のマウスカーソルを移動ハンドルに変更して、コントロールが移動可能であることを視覚的に示す方法も説明しました。

著者紹介

Wei-Meng Lee（Wei-Meng Lee）

Microsoft MVP受賞者。Microsoft社の最新テクノロジー実地研修を専門とするDeveloper Learning Solutions社を創設。.NETとワイヤレステクノロジーの開発者、指導者として知られる。
国際的なカンファレンスでたびたび講演し、.NET、XML、ワイヤレステクノロジーに関する著書、共著書多数。.NETからMac OS Xに至るまで広範な分野について執筆している。著書に『.NET Compact Framework Pocket Guide』（Oreilly&Associates Inc、2005年5月）、『ASP.NET 2.0: A Developer’s Notebook』（Oreilly&Associates Inc、2005年6月）、『Programming Sudoku』（Apress刊、2006年3月）など。ブログ「Wei-Meng Lee’s Blog」を開設している。