HTML5 アプリケーションをビルドする

  • [アーティクル]

SharePoint リストに HTML5 のドラッグ アンド ドロップを追加する

Andrey Markeev

コード サンプルのダウンロード

Microsoft SharePoint は長い歴史と多くの機能を持つエンタープライズ プラットフォームです。このため、Web テクノロジの新たなトレンドにすばやく対応できないこともあります。SharePoint は、エンタープライズ環境での幅広い採用と多くの機能の提供に多大な努力を行っているにもかかわらず、HTML5 や CSS3 などのような没入型の魅力的な UI という点では、最新の CMS 製品に遅れを取っています。

個人的には、新しく魅力的なテクノロジは HTML5 だけではないと思いますが、HTML5 には確かに多くの実用的なメリットがあります。使いやすく、便利で、機能が豊富であり、さらに程度の差はあれ、すべてのモダン ブラウザー (モバイル デバイスのブラウザーを含む) でサポートされています。さらに、HTML5 と JavaScript は Windows のデスクトップ プログラミングでも主要テクノロジになりつつあります。

そのため、SharePoint のポータルを使いやすくするためにも、HTML5 はまさに活用に値するものです。SharePoint のインターフェイスの向上は、ビジネス ユーザーが迅速かつ的確に作業を行うのに非常に役立ちます。　

残念ながら、SharePoint には組み込みの HTML5 サポートはありませんが、大きな柔軟性を備えています。今回の記事では、SharePoint に HTML5 のドラッグ アンド ドロップを容易に追加できることを説明し、図 1 に示すように標準インターフェイスを非常に使いやすくできることを示します。

Drag and Drop in SharePoint
図 1 SharePoint での ドラッグ アンド ドロップ

これを実装するには、SharePoint の重要な構成要素の 1 つであり、よく使われる SharePoint のツールの 1 つでもある XsltListViewWebPart とその XSL 変換 (MSDN ライブラリのページ bit.ly/wZVSFx 参照、英語) を使います。

カスタム Web パーツを使用しない理由

実装という点では SharePoint は幅広い可能性を提供しているため、最適な実装を選択することがきわめて重要です。

HTML5 のドラッグ アンド ドロップという課題については、ドラッグ アンド ドロップを主にデータの管理に使うことを考えると、SharePoint 開発者の多くはおそらくカスタム Web パーツの構築を選ぶでしょう。カスタム Web パーツは、この場合、通常の ASP.NET コントロールのように動作します。データは標準の SharePoint リストに保存され、オブジェクト モデルまたは SPDataSource コントロールを使って取得し、ASCX マークアップと ASP.NET コントロールを使ってレンダリングされます。

シンプルで明快で簡単です。しかし、これが最善の選択でしょうか。

2 年前ならそう思っていました。今なら、XsltListViewWebPart をカスタマイズし、その XSL 変換を使うことを考えます。心変わりの理由は何でしょう。

SharePoint 2010 からは、ほぼすべての種類のリスト ビュー (唯一の例外はカレンダー) がこの Web パーツを使って表示されています。考えてみてください。これらすべてのデータ型、すべてのビューとスタイルとリストの種類、多種多様なデータが XsltListViewWebPart とその XSL 変換を使ってレンダリングされているのです。これは柔軟で強力なツールです。

リスト データを表示するために HTML5 マークアップをいくつかレンダリングするカスタム Web パーツを作成することになれば、こうした組み込み機能すべてを失います。私の経験によれば、これは大きな損失です。一方、カスタム Web パーツは、通常、標準 XsltListViewWebPart の半分にも満たない機能も実装できずに終わってしまうものです。これについても例外を見たことはありません。

したがって、類似のカスタム Web パーツを作成しようとして、おそらく柔軟性も機能もより低いものに終わってしまうのでなく、既存の機能を再利用しようと考えたわけです。

実際、XsltListViewWebPart は非常に多くの有用な機能を備えています。SharePoint Designer に統合されており、あらゆる Web パーツの接続をサポートし、すべての SharePoint データ型を適切に表示します。グループ化、小計、ページング、アイテム コンテキスト メニュー、インライン編集、アイテムの選択、プレゼンス インジケーターなどもサポートします。コンテキスト リボン インターフェイス、並べ替えとフィルター処理の UI の提供、基本的なビューのスタイルの提供などもサポートします。要するに、XsltListViewWebPart は非常に多くの有用な機能を備えており、一方、これらの機能をカスタム Web パーツを使って再実装するのは非常に困難です。

XsltListViewWebPart

XsltListViewWebPart は開発者向けに多くの統合ポイントを用意しています。プログラミング インターフェイス、CAML インターフェイス、もちろん、XSL 変換とパラメーター バインドがその例です。また、これらのオブジェクトとプロパティのすべてには、クライアント オブジェクト モデルによる表現もあり、XsltListViewWebPart に JavaScript や Silverlight からアクセスできることも忘れてはなりません。

このように、XsltListViewWebPart は非常に強力なツールです。確かに、これらすべての SharePoint 固有の XML (または XSLT) は最初は少々扱いにくく感じますが、ちょっとしたコツを伝授しますので、この XML を解き明かすヒントにしてください。

シナリオ

実装を詳しく説明する前に、全体シナリオを示します。

今回は、HTML5 のドラッグ アンド ドロップを SharePoint のリスト ビューに追加し、ユーザーがあるリストから別のリストにセルをドラッグできるようにします。この例では Tasks リストと Executors リストを使い、プロジェクト マネージャーが担当者を対応するタスク リストにドラッグすることで、タスクの割り当てや再割り当てを簡単に行えるようにしています。

HTML5 にはドラッグ アンド ドロップ用にいくつか新しい属性が導入されましたが、最も重要なのは "draggable" 属性です。またドラッグ アンド ドロップの過程でのさまざまな段階を扱う、多くのイベントもあります。これらのイベントのハンドラー関数は "ondragstart" や "ondragend" など、対応する属性を使ってアタッチできます。詳細については、World Wide Web Consortium (W3C) HTML5 標準仕様ドラフト、7.6 (bit.ly/lNL0FO、英語) を参照してください。

今回の例では、あるリスト ビューのセルに XSLT を使って基本的な属性を追加する必要があり、おそらく (ドラッグによって運ばれる) データ値をアタッチするためのカスタム属性も追加する必要があります。最終的には、ハンドラー関数に対応する JavaScript コードを提供しなければなりません。

最初の手順

2 つのリストを作成します。標準タスク テンプレートから Tasks リストを作成します。またはカスタム リストを作成して、サイト内の必須列 [Assigned To] など、いくつか列を追加することもできます。2 つめのリストの "Executors" をカスタム リストとして作成し、[Executor] を [ユーザーまたはグループ] 型の列として追加し、それを必須、インデックス付きで、一意にします。

Executors リストはユーザー名のみを表示するため、標準の [タイトル] 列は実際には必須ではありません。この列を非表示にするには、[リストの設定] の [詳細設定] から [コンテンツ タイプの管理を許可] し、次に [アイテム] コンテンツ タイプで、[タイトル] 列をクリックし、この列を [非表示 (フォームに表示しない)] にします (図 2 参照)。

Making the Title Column Hidden in SharePoint List Settings
図 2 SharePoint のリストの設定で [タイトル] 列を非表示にする

これらのリストにサンプル データを入力し、ダッシュボード用に Web パーツ ページを作成して、Tasks リストを左に、Executors リストを右に並べて配置しました (図 3 参照)。

Adding the Lists to the SharePoint Dashboard
図 3 SharePoint ダッシュボードにリストを追加する

これでリストとデータの準備ができました。次に実際のドラッグ アンド ドロップ機能を実装します。

SharePoint Designer

Microsoft SharePoint Designer は SharePoint アプリケーションを迅速に開発するための無償ツールです。SharePoint 2010 は SharePoint 2007 と比べて大幅に機能が向上し、特に開発者にとって非常に有用になりました。SharePoint Designer の GUI を使って非常に複雑な XSLT コードを生成し、そのコードをコピーして Visual Studio のプロジェクトに貼り付けることができます。入力ミスが発生したり、十分なドキュメントが用意されていない XML や XSLT を手動で記述する必要はありません。この方法は実際の業務上のプロジェクトでも頻繁に使用されますが、大幅に時間を節約できます。

SharePoint Designer を開き、先ほど作成したダッシュボードのページに移動します。[Assigned To] 列のセルを選択します (右クリックし、[選択]、[セル] の順にクリックします)。すると、ステータス バーにこのセルを表示している XSL テンプレートへのパス (およびこのテンプレート内の対応する HTML タグへのパス) が表示されます (図 4 参照)。

The Path to the Current XSL Template in SharePoint Designer
図 4 SharePoint Designer に表示される現在の XSL テンプレートへのパス

この情報は、セルのマークアップを変更するにはどの XSL テンプレートを上書きすべきかを判別するのに役立ちます。テンプレートのオリジナル コードは 14/TEMPLATE/LAYOUTS/XSL フォルダーにあります。このコードは、独自の XSLT ファイル内や、XsltListViewWebPart の <Xsl> タグ内で使用できます。

しかし今回の目標を実現するために、この巨大で複雑な XSLT ファイルを扱う必要はありません。SharePoint Designer の条件付き書式の機能を使うと、特定の条件に基づいて行やセルを特別な書式で強調表示できます。GUI を使って簡単に行えるため、この機能に特別なスキルは不要です。ただし、GUI の操作はすべて XSLT で実装されます。このように、SharePoint Designer はすぐに活用できるグラフィカルな XSLT ジェネレーターを備えています。さっそくこの機能を使います。

セルを 1 つ選択し、リボンから [条件付き書式] ボタンをクリックし、[列の書式設定] を選択します (図 5 参照)。

Setting Conditional Formatting in SharePoint Designer
図 5 SharePoint Designer で条件付き書式を設定する

次に、ID が 0 という、あまりあり得ない条件を作成します (図 6 参照)。

The Conditional Formatting Dialog in SharePoint Designer
図 6 SharePoint Designer の [条件付き書式] ダイアログ ボックス

次に [スタイルの設定] をクリックし、適当なスタイル ([文字飾り: 下線] など) を設定します。[OK] をクリックし、[コード ビュー] タブに切り替えると、生成されたコードが表示されます。当然、XsltListViewWebPart コントロールの <Xsl> タグの内部に含まれています。

XSL 変換

これで、[Assigned To] セルのマークアップを変更する準備が整いました。[Assigned To] 列が [Executors] をドラッグする場合の "データの受け取り手" になるため、"ondragover"、"ondragenter"、"ondragleave"、"ondrop" の各属性が必要です。これらは対応する JavaScript のイベント ハンドラー 関数を指します。

上述の SharePoint Designer によって生成されたコードは、次のシグネチャを持つ XSL テンプレートを含みます。

<xsl:template name="FieldRef_printTableCell_EcbAllowed.AssignedTo"
  match="FieldRef[@Name='AssignedTo']" mode="printTableCellEcbAllowed"
  ddwrt:dvt_mode="body" ddwrt:ghost="" xmlns:ddwrt2="urn:frontpage:internal">

XSL テンプレートは名前または条件で相互に呼び出せます。1 つ目の方法の呼び出しは "xsl:call-template" 要素を使って実行し、C# などで使われる関数呼び出しによく似ています。

2 つ目はより望ましく、ずっと柔軟な方法です。"xsl:apply-templates" 要素を使い、特定のテンプレート名を指定しないで、モードとパラメーターを指定します (XPath を使って選択するので、実際には多くの要素を含みます)。パラメーターの要素ごとに、対応するテンプレートが "match" 属性を使って照合されます。この方法は C# のオーバーロードに近い考え方といえるでしょう。

先のコードにあるように、Name 属性が "AssignedTo" の場合、このテンプレートは "FieldRef" 要素を照合します。また対応する xsl:apply-template 呼び出しの "mode" 属性は "printTableCellEcbAllowed" と等しくなる必要があります。したがってこのテンプレートは、事実上フィールドの値を表示する標準関数のオーバーロードです。このオーバーロードは [Assigned To] フィールドの値のみに合致します。

このテンプレートの内容を 図 7 に示します （見やすくなるように、一部コードを省略しています)。

図 7 XSL テンプレートの内容

<xsl:template match="FieldRef[@Name='AssignedTo']" mode="printTableCellEcbAllowed" ...>
  <xsl:param name="thisNode" select="."/>
  <xsl:param name="class" />
  <td>
    <xsl:attribute name="style">
      <!-- ... -->
    </xsl:attribute>
    <xsl:if test="@ClassInfo='Menu' or @ListItemMenu='TRUE'">
      <xsl:attribute name="height">100%</xsl:attribute>
      <xsl:attribute name="onmouseover">OnChildItem(this)</xsl:attribute>
    </xsl:if>
    <xsl:attribute name="class">
      <!-- ... -->
    </xsl:attribute>
    <xsl:apply-templates select="." mode="PrintFieldWithECB">
      <xsl:with-param name="thisNode" select="$thisNode"/>
    </xsl:apply-templates>
  </td>
</xsl:template>

このテンプレートは 2 つの xsl:param 要素、1 つの <td> 要素、いくつかの xsl:attribute 要素、1 つの xsl:apply-templates 要素を含むため、より低レベルのテンプレートの適用が必要となります。

ドラッグ アンド ドロップという目標を実現するには、下記のようにドラッグ アンド ドロップの属性を <td> 要素に追加します。

<td ondragover="return UserDragOver(event, this)" ondragenter=
  "return UserDragOver(event, this)" ondragleave=
  "UserDragLeave(event, this)" ondrop="UserDrop(event, this)">

ご覧のとおり、簡単です。

または、SharePoint 環境で jQuery を配置している場合、JavaScript のイベント ハンドラーを jQuery の .on メソッドを使ってアタッチする方法も考えられます。

[Assigned To] 列のマークアップの準備はできました (ハンドラーは後ほど記述します)。では、Executors リストをカスタマイズしましょう。

[デザイン ビュー] タブに戻り、[Executors] 列のセルを選択し、条件付き書式の方法を繰り返して、XSLT コードを生成します。次にドラッグ アンド ドロップが適切に開始されるように onstartdrag 属性を追加します (ここでは [ユーザーまたはグループ] のフィールド値がリンクとしてレンダリングされ、仕様により、リンクは既定で draggable 属性が "true" に設定されるため、draggable 属性は不要です)。

<td ondragstart="UserDragStart(event, this)">

うまくいっています。しかし、データの追跡はどうすればよいでしょう。どの Executor がドラッグされたかをどのように判別すればよいでしょう。おわかりのように、ログイン名、またはより望ましくは ID が必要です。TD 要素の中から ID を解析するのは、あまりに複雑になりすぎると考えます。

XSLT では [ユーザーまたはグループ] 型のどのフィールドに対してもユーザー ID を利用でき、簡単な XPath クエリで取得できます。

このクエリでは、現在の要素の値を指す必要があります。すべての標準 XsltListViewWebPart テンプレートでは、現在の要素は通常は $thisNode パラメーターで参照します。ユーザー ID を取得するには、[ユーザーまたはグループ] 列の名前と同じ名前の末尾に".id" を連結して、$thisNode パラメーターの属性を指します。

以下がそのクエリです。

<td ondragstart="UserDragStart(event, {$thisNode/Executor.id}, this)">

中かっこは XPath 式を属性値に含めるために使用しています。

マークアップの準備ができたので、すぐにこれを使うこともできますが、もう少し手をかけて再利用できるようにすることをお勧めします。

テンプレートを再利用可能にする

これらのテンプレートは特定の列名に密接に結び付いていて、特定のリストのみを対象にしています。しかしこれらのテンプレートを変更して、他の列名を含む他のリストにも再利用できるようにするのは実に簡単です。

まず、先に示したテンプレートのシグネチャを調べると次の属性があります。

match="FieldRef[@Name='AssignedTo']"

おわかりのとおり、これはテンプレートを [Assigned To] 列に結び付けています。このテンプレートを少し汎用化にするには、名前によるバインドを型によるバインドに置き換え、[ユーザーまたはグループ] のどの列にも適合するようにできます。ではやってみましょう。このコードを次に示します。

match="FieldRef[@Type='User']"

同様の変更を、FieldRef 要素が [Executor] フィールドの内部名と一致している、次のテンプレートにも行います。

[ユーザーまたはグループ] のどの列にも、どのリストにも対応する必要があるため、追加情報を JavaScript ハンドラーに渡す必要があります。ドラッグ アンド ドロップが行われると、Tasks リストの [Assigned To] 列の値を更新する必要があるため、列名とリストの GUID を知る必要があります。

前述のように、SharePoint の XSLT にはグローバルに利用可能な標準パラメーターがいくつかあります。$List はそのようなパラメーターの 1 つで、現在のリストの GUID を保存します。フィールドの内部名は対応する FieldRef 要素から容易に取得できます。

そこで、次のようにリストの GUID と列の内部名を UserDrop ハンドラーに渡します (見やすくするため、"ondragenter"、"ondragover"、"ondragleave" の各属性は省略しています)。

<td ... ondrop="UserDrop(event, this, '{$List}', '{./@Name}'">

"." は現在の FieldRef 要素 (以前にテンプレートで一致したもの) を指します。

次に、下記のコードを使って Executors リストの XSLT の id パラメーターの"Executor" 文字列を削除します。

<td ondragstart="UserDragStart(event, {$thisNode/@*[name()=
  concat(current()/@Name, '.id')]}, this)">

これで再利用可能なテンプレートが整ったので、ハンドラーを実装するため、対応する JavaScript コードを記述します。

JavaScript ハンドラーを記述する

これから 4 つのハンドラーを記述しますが、どれも基本的で、明確です。

通常、このコードを別の JavaScript ファイルに含めることをお勧めします。また、一般に Visual Studio の IntelliSense の機能を使って作成するのが優れた方法です。場合によっては、このコードを XSLT の内部に置き、ルートのテンプレート (match="/") を上書きするのが妥当なこともあります。これによって JavaScript コードの内部の XSLT 変数とパラメーターを使うことができ、また JavaScript ファイルの配置を懸念する必要はなくなります。

では、DragStart、DragEnter、DragOver、DragLeave、Drop の各ハンドラーのコードを見てみましょう。

UserDragStart ハンドラーではデータ転送の初期化を行う必要があります。つまり、下記のようにドラッグされたデータを、特別な HTML5 の DataTransfer オブジェクトに保存します。

function UserDragStart(e, id, element) {
  e.dataTransfer.effectAllowed = 'copy';
  e.dataTransfer.setData('Text', id + '|' + element.innerHTML);
}

転送されるデータはユーザーの ID だけではありません。また、データをドロップした後にページを最新の情報に更新する必要がないように、<td> 要素の中の HTML を追加します (詳細については 図 8 の UserDrop ハンドラー コードを参照してください)。

図 8 Drop イベント ハンドラー

function UserDrop(e, toElement, listGuid, columnName) {
  // Terminate the event processing
  if (e.stopPropagation)
      e.stopPropagation();
  // Prevent default browser action
  if (e.preventDefault)
      e.preventDefault();
  // Remove styles from the placeholder
  toElement.style.backgroundColor = '';
  //toElement.className = '';
  // iid attribute is attached to tr element by SharePoint
  // and contains ID of the current element
  var elementId = toElement.parentNode.getAttribute('iid').split(',')[1];
  // Transferred data
  var data = e.dataTransfer.getData('Text');
  var userId = data.split('|')[0];
  var userLinkHtml = data.split('|')[1];
  // Setting value of the field using SharePoint
  // EcmaScript Client Object Model
  var ctx = new SP.ClientContext.get_current();
  var list = ctx.get_web().get_lists().getById(listGuid);
  var item = list.getItemById(elementId);
  item.set_item(columnName, userId);
  item.update();
  // Asynchronous call
  ctx.executeQueryAsync(
    function () { toElement.innerHTML = userLinkHtml; },
    function (sender, args) { alert('Drag-and-drop failed.
      Message: ' + args.get_message()) }
    );
  return false;
}

この場合、DragEnter と DragOver イベントのハンドラーは同一なので、1 つの関数を使います。これらのイベントでは、ユーザーがデータをそこにドロップできることを示します。仕様によると、このためには event.preventDefault メソッド (使用できる場合) を呼び出し、false を返します。

ドラッグしたデータをドロップできることをユーザーに知らせるため、ドラッグ アンド ドロップのプレースホルダーにカスタム スタイルを適用しますが、それには DragEnter/DragOver ハンドラーがぴったりです。ここでは例を簡単にするためインラインの CSS スタイルを使いますが、実際のプロジェクトでは CSS クラスを使用することをお勧めします (図 9のコマンド ラインを参照してください)。

図 9 DragOver イベント ハンドラー と DragLeave イベント ハンドラー

function UserDragOver(e, toElement) {
  // Highlight the placeholder
  toElement.style.backgroundColor = '#efe';
  // toElement.className = 'userDragOver';
  // Denote the ability to drop
  if (e.preventDefault)
      e.preventDefault();
  e.dataTransfer.dropEffect = 'copy';
  return false;
}
function UserDragLeave(e, toElement) {
  // Remove styles
  toElement.style.backgroundColor = '';
  // toElement.className = '';

おわかりのように、DragLeave では先に適用したスタイルを削除する必要があります (図 9 参照)。

図 8 の Drop イベントでは 2 つの重要な動作を実行する必要があります。

  1. 変更を適用します。SharePoint EcmaScript のクライアント オブジェクト モデルを使い、転送されたユーザー ID を設定します。
  2. 現在のセル (TD) の内部 HTML コードを転送されたコードに置き換え、ページを最新の情報に更新しなくても変更が表示されるようにします。

これですべてのハンドラーを実装したので、JavaScript を配置します。これには、マスター ページをカスタマイズする、delegate コントロールを使う、Location を "ScriptLink" に設定したカスタム アクションを作成する、または先に説明したように、JavaScript を XSLT に追加するなど、さまざまな方法があります。

最も簡単なのは、SharePoint Designer を使って、マスター ページをカスタマイズする方法です。これには特別なスキルは不要です。しかし、開発者としては、JavaScript と XSLT のカスタマイズをまとめて、配置可能なソリューションを作成しようと考えるでしょう。ではこれをやってみましょう。

配置可能なソリューションをビルドする

顧客に提供してすぐに使えるソリューションを作成するには、いくつかの簡単な手順が必要です。

  1. Visual Studio を開き、[空の SharePoint プロジェクト] を作成します。[プロジェクトの設定] ダイアログ ボックスで [ファーム ソリューションとして配置する] を選択します。
  2. プロジェクトに [SharePoint " レイアウト" のマップされたフォルダーの追加] を行い、UserDragHandlers.js、UserDragProvider.xsl、UserDragConsumer.xsl という 3 つのファイルを新たに追加します。
  3. 先に作成した JavaScript コードと XSLT コード (SharePoint Designer で生成したもの) を対応するファイルに貼り付けます。
  4. [空の要素] プロジェクト アイテムを追加し、Elements.xml を開き、次のコードを貼り付けます。
            <CustomAction ScriptSrc="/_layouts/SPDragAndDrop/UserDragHandlers.js" Location="ScriptLink" Sequence="10" />
    これで JavaScript ファイルへのリンクがサイトのすべてのページに配置されます。
  5. 最後に、イベント レシーバーを Feature1 ([空の要素] プロジェクト アイテムを追加したときに自動作成) に追加し、FeatureActivated メソッドのコメントを解除し、次のコードを貼り付けます。
var web = properties.Feature.Parent as SPWeb;
        SPList list;
        SPView view;
        list = web.Lists["Tasks"];
        view = list.DefaultView;
        view.XslLink = "../SPDragAndDrop/UserDragConsumer.xsl";
        view.Update();
        list = web.Lists["Executors"];
        view = list.DefaultView;
        view.XslLink = "../SPDragAndDrop/UserDragProvider.xsl";
        view.Update();

これで終了です。お疲れさまでした。ご覧のとおり、簡単です。作成した Tasks リストと Executors リストを使うソリューションをビルドして配置し、それぞれの既定のビューを含むダッシュボードを作成すると、そのダッシュボードでドラッグ アンド ドロップ機能を使えます。

ブラウザー サポート

現時点では Opera を除くすべての主要ブラウザーが HTML5 のドラッグ アンド ドロップをサポートしています。Internet Explorer 9.0.8112.16421、Chrome 16.0.912.75、Firefox 3.6.12 でテストを行いましたが、すべてこのソリューションに完全対応しています。これらのブラウザーの古いバージョンでも動く場合があると思います。Safari でも動くはずなのですが、本稿の執筆時点では HTML5 のドラッグ アンド ドロップの実装上のバグにより、このソリューションの想定どおりには動きませんでした。

今後の展望

今回のソリューションでは XSLT テンプレートにも JavaScript にもリスト固有のコードは含んでいません。GUID、名前、タイトルなどをハードコードしていません。したがって、今回の手法は他のリストやドキュメント ライブラリにもおそらく適用でき、ドラッグ アンド ドロップのサポートを他の [ユーザーまたはグループ] 型の列にも追加できます。これはちょっと便利です。

おわかりのとおり、他の型の列も同様にドラッグ可能にできるため、すべての SharePoint のリストのすべてのセルをドラッグ可能とするソリューションを作成可能です。ユーザーはダッシュボード ページのリストの間でセルをドラッグできるようになり、とても便利です。

行のドラッグ アンド ドロップを実装する場合は、興味深い課題に取り組むことになります。基本的には同様の方法ですが、適切なテンプレートを取得するため、行の条件付き書式を使用します。この方法はリストの要素のリンク、たとえば、順序の変更などに使えます。たとえば、クイック起動メニューの [ごみ箱] リンクをドラッグ アンド ドロップの受け取り手にすることが可能で、リストのアイテムを削除するために使える便利な方法になります。

他にも可能なことがたくさんあります。思い付いたら試してみてください。SharePoint のポータル画面がずっと使いやすくなります。

Andrey Markeev はロシアの Softline Group 社に勤務する SharePoint 開発者で、SharePoint Server の MVP です。Markeev は SharePoint StackExchange (bit.ly/w9e4NP、英語) の トップ 10 のエキスパートの 1 人で、多くの CodePlex のオープン ソース プロジェクトの作者であり、ブログやセミナーでも活躍しています。Twitter (twitter.com/amarkeev) で彼をフォローしてください。

この記事のレビューに協力してくれた技術スタッフの Michael Nemtsev と Brandon Satrom に心より感謝いたします。