はじめに
ページの外観と操作性をユーザーが自分でパーソナライズできるようにする機能は、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コントロール内に時計が表示されている状態です。
アプリケーションの実行を終了します。次に、この時計が埋め込まれている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を参照）。
