SharePoint 2010 Server リボンのカスタマイズと展開

  • [アーティクル]

SharePoint 2010 Server リボンを構成するコンポーネントについて説明し、リボンをカスタマイズする 2 つのシナリオを示しながらリボンのカスタマイズ方法を説明します。

最終更新日: 2011年1月19日

適用対象: Business Connectivity Services | Office 2010 | Open XML | SharePoint Designer 2010 | SharePoint Foundation 2010 | SharePoint Online | SharePoint Server 2010 | Visual Studio

この記事の内容
SharePoint 2010 Server リボンの概要
SharePoint 2010 Server リボンのアーキテクチャ
SharePoint 2010 Server リボンのカスタマイズ
SharePoint 2010 の組み込みの Server リボン コンポーネントのカスタマイズ
カスタム SharePoint 2010 Server リボン コンポーネントの作成
カスタム SharePoint 2010 Server リボン開発のヒント
まとめ
その他の技術情報

提供元:  Andrew Connell、Critical Path Training, LLC(英語)

目次

  • SharePoint 2010 Server リボンの概要

  • SharePoint 2010 Server リボンのアーキテクチャ

  • SharePoint 2010 Server リボンのカスタマイズ

  • SharePoint 2010 の組み込みの Server リボン コンポーネントのカスタマイズ

  • カスタム SharePoint 2010 Server リボン コンポーネントの作成

  • カスタム SharePoint 2010 Server リボン開発のヒント

  • まとめ

  • その他の技術情報

クリックしてコードを取得  この記事に付随するコードは、「MSDN Sample - Customizing and Extending the SharePoint 2010 Server Ribbon(英語)」でダウンロードできます。

SharePoint 2010 Server リボンの概要

2007 Microsoft Office system のリリースに伴い、Microsoft は、リボンと呼ばれる新しいユーザー インターフェイス構造を導入し、以前のアプリケーション ドロップダウン メニューおよびツール バーはリボンによって置き換えられました。ある種のアプリケーション (Microsoft Word など) ではコマンドが多すぎてユーザーが必要な機能を見つけるのに支障があることを示す多数の調査結果を受けて、リボンは誕生しました。

リボンの背景にあるのは、従来よりも結果を重視したインターフェイスがリボンによって提供されるという前提です。ユーザーは自らの操作に意識を集中し、コマンドは特定の時点で実行できる操作に関するものだけが提示されます。たとえば、明らかにテキストの入力中であってイメージや表を選択していないユーザーには、ドキュメント内の表やイメージを操作するコマンドを提示しても無意味です。ただし、[挿入] タブを使用すれば、表または画像を容易に追加できます。表または画像を選択している場合に限り、新しいコマンド構造が表示されます。表または画像のフォーカスが失われると、これらのコマンドは表示されなくなります。

2007 Microsoft Office system では、リボンが Microsoft Word、Microsoft Excel、および Microsoft PowerPoint に実装されました。Microsoft はこの範囲を拡大し、リボンをすべての Microsoft Office 2010 アプリケーション (Microsoft OneNote 2010、Microsoft Access 2010、Microsoft InfoPath 2010 など) に追加しました。

Microsoft Office クライアントの場合と同様、SharePoint ユーザーも、作業を完了するコントロールを見つけるのに同じような支障を感じていました。コマンドは、[サイトの操作] メニューから管理用 Web パーツ、またはリストの [制御ブロックの編集] (ECB) メニューまで、ページのあちこちに散らばって存在していました。図 1 に、Windows SharePoint Services 3.0 サイトでユーザーが使用できるすべてのメニューを示します。

図 1. Windows SharePoint Services 3.0 のメニューとコマンド

Windows SharePoint Services サイト メニュー

Microsoft SharePoint 2010 になって、Microsoft は、ユーザーが Microsoft Office クライアントのコマンドの多さに対して認識していたのと同じ課題を解決するために Server リボンを SharePoint に追加しました。すべてのコマンドとメニュー項目は、SharePoint のメイン ワークスペースからリボンに移され、リボンはピンで留めるような形でブラウザー ウィンドウの最上部に配置されています。2007 Microsoft Office system や、リボンを実装したその他のアプリケーションのユーザーには、SharePoint リボンが Office クライアントのものに非常に類似しているので、その調整が非常に容易なことがわかります。SharePoint リボンは、外観、しくみ、および動作が Office リボンに似ており、同じコントロールを持ちます。Office リボンと SharePoint Server リボンの唯一の違いは、そのテクノロジに関連した部分にあります。たとえば、Web (シン クライアント) 環境での各種フォントの表示は、デスクトップ (シック クライアント) 環境の場合ほど容易ではありません。

SharePoint 2010 リボンは、Office クライアント リボンと同様のアーキテクチャ上に構築されています。Microsoft は、このアーキテクチャを使用して SharePoint 2010 の既定のリボンを実装しています。このアーキテクチャでは、サードパーティの開発者が SharePoint に含まれている既存のリボン コンポーネントをカスタマイズおよび拡張したり、コマンド構造を作成したりすることもできます。

この記事では、リボンがどのように構築されているかを理解できるように、SharePoint Server リボンのコンポーネントについて説明します。続いて、開発者がリボンをカスタマイズおよび拡張できる方法を説明して示します。「SharePoint Foundation 2010 の全般的な参照情報」には、リボンの説明に特化したセクションや、さまざまなカスタマイズのチュートリアルが用意されています。リボンをカスタマイズする際には、この記事と合わせて「SharePoint Foundation 2010 General Reference」(特にセクション「SharePoint Foundation のサーバー リボン」) も参照することをお勧めします。

SharePoint 2010 Server リボンのアーキテクチャ

既定のリボンは、SharePoint によって構築されており、主要なインストールの一部である 1 つのファイルに基づいています。このファイルは、パス {SharePoint Root}\TEMPLATE\GLOBAL\XML\CMDUI.XML にあるグローバル サイト定義の一部になっています。このファイルには、SharePoint Foundation 2010 のリボン コンポーネント ([参照]、[ページ]、[リスト]、[ライブラリ]、[ドキュメント] タブなど) の定義が含まれています。

CMDUI.xml ファイルには、重要な Server リボン コンポーネントのすべてが含まれていますが、これはリボンに対する追加のカスタマイズの実装方法とは異なります。リボンに対する追加の変更の実装には、SharePoint フィーチャーが使用されます。たとえば、Microsoft SharePoint Server 2010 には、エンタープライズ コンテンツ管理、Forms Services、ビジネス インテリジェンスなど、リボンの変更を必要とする多数の要素が含まれています。こうした変更は、すべて SharePoint フィーチャーを使用して実装されます。また、SharePoint 開発者は、後の「カスタム SharePoint 2010 Server リボン コンポーネントの作成」で説明するフィーチャーを使用してリボンをカスタマイズすることもできます。

SharePoint 2010 では、フィーチャー スキーマ (特に <CustomAction /> 要素) があらゆるリボン カスタマイズの手段になるように拡張されています。こうした拡張を行うには、Location 属性を CommandUI.Ribbon に設定し、<CommandUIExtension /> 子要素を追加します。SharePoint 2010 SDK では、Server リボン XML の概要が説明されています。

後続のセクションでは、リボンの重要な 2 つの部分について説明します。それらは、ビジュアル面を構成するコンポーネント群と、リボン内のコントロールの 1 つがクリックされたときに実行されるコードです。

SharePoint 2010 Server リボンのコンポーネント

SharePoint 2010 Server リボンには、図 2 に示すように、さまざまなコンポーネントがあります。

図 2. SharePoint 2010 Server リボンのコンポーネント

SharePoint 2010 サーバー リボン コンポーネント

図中の引き出し線の番号は、以下に示す特定のコンポーネントを指しています。

  1. タブ

  2. グループ

  3. コントロール

  4. 操作別タブ グループ

以降のいくつかのセクションでは、これらのコンポーネントとその使用法を簡単に説明します。

SharePoint 2010 Server リボンのタブ

タブは、Server リボンの基礎になります。各タブには、1 つ以上のグループと、類似した機能群が含まれています。たとえば、図 2 で選択中の [ページ] タブには、現在のページの操作に関連する機能群が含まれています。

SharePoint 2010 Server リボン上の操作別タブ グループ

操作別タブ グループは、現在のコンテキスト (ページなど) に対してグローバルでない機能を提供するために使用されます。操作別タブ グループは、特定の条件を満たす場合に限り表示され、1 つ以上のタブを含んでいます。

たとえば、図 2 のリボンには、[ライブラリ ツール] 操作別タブ グループが表示されています。この操作別タブ グループは、ドキュメント ライブラリ内でのみ、または、この場合のようにドキュメント ライブラリに関連付けられた現在のページ上のリスト ビュー Web パーツが選択されている場合にのみ表示されます。

操作別タブ グループでは、機能やメニューの選択肢が使用できない場合にはユーザーに表示されず、適用できる場合には表示されます。操作別タブ グループの他の例として、Wiki ページを編集するときに表示される [編集ツール] 操作別タブ グループや、編集モードで画像が選択されているときに表示される [図ツール] 操作別タブ グループがあります。

SharePoint 2010 Server リボン上のグループ

このリボン内のすべてのタブには、1 つ以上のグループが含まれています。グループは、類似の機能を持つコントロール群の関連付けに使用されます。それぞれのグループには、グループのレイアウトとグループの表示方法をリボンのスケールに基づいて定義するテンプレートが関連付けられています。リボンのスケールとは、コントロールが多すぎてリボンに表示しきれない状況 (たとえば、ブラウザーが最大化によって全画面表示になっておらず、ウィンドウ化された状態にある場合) かどうかに言及したものです。

SharePoint 2010 Server リボン上のグループ テンプレート

グループ テンプレートは、グループ内のコントロールのさまざまなレイアウト オプションを定義するのに使用されます。Microsoft は、CMDUI.xml ファイル内に 29 のグループ テンプレートを用意しています (これらを見つけるには、このファイルの最後にある <RibbonTemplates /> という要素を検索します)。

SharePoint 2010 Server リボン上のコントロール

リボンは、ユーザーが選択またはクリックする対象がないと成立しません。コントロールは、リボン内に存在するアイテムのうちユーザーが操作できるものです。コントロールは、グループ内に存在します。グループには、ボタン、トグル ボタン、チェック ボックス、テキスト ボックスをはじめとする多くのコントロールが含まれます。使用できるすべてのコントロールの一覧については、「Server リボンのアーキテクチャ」を参照してください。

それぞれのコントロール定義には、そのコントロールがクリックまたは選択されたときの処理をリボン インフラストラクチャに指示する Command 属性が含まれます。

SharePoint 2010 の Server リボン コマンド

Server リボンでは、ユーザーによるクリックまたは選択の動作をコマンドによって処理します。Windows Presentation Foundation または Microsoft Silverlight 4 でのコマンド処理インフラストラクチャのしくみに習熟していると、Server リボン コマンド処理インフラストラクチャとの類似性がわかります。それぞれのコマンドには名前が付いています。この名前は、コントロールで参照されます。本質的に、コマンドに含まれる非常に重要な情報は次の 2 つです。

  • 現在のコマンドの使用可否  たとえば、[削除] コマンドは、ドキュメント ライブラリ内、またはドキュメントが選択されている場合にのみ使用できます。

  • 実行されるコード  たとえば、[削除] コマンドでは、SharePoint 2010 のクライアント側オブジェクト モデルを使用して、リストからアイテムを削除し、ドキュメントが削除されたという通知を表示して、ページ上のリスト ビュー Web パーツを最新の情報に更新します。

コマンド処理インフラストラクチャのしくみについては、「Server リボンのアーキテクチャ」を参照してください。

Server リボンのコマンドは、ECMAScript (JavaScript、JScript) を使用して記述されます。コマンドは、次の 2 つの方法で実装できます。

  • コマンド UI ハンドラーの使用

  • ページ コンポーネントの使用

これら 2 つのオプションについては以降のセクションで説明し、各オプションの利点と欠点もいくつか紹介します。一般に、単純で比較的コードの量が少ないコマンドには、コマンド UI ハンドラーのオプションが適しています。一方、かなり複雑で大量の JavaScript を実装する必要があるコマンドには、ページ コンポーネントが適しています。後述のサンプル ドキュメント ライブラリで使用されているリボン カスタマイズの例では、それぞれの技法を使用してまったく同じ操作を実行する方法を示します。

コマンド UI ハンドラーを使用した Server リボン コマンドの実装

コマンド UI ハンドラーは、宣言型マークアップと JavaScript を併用して実装されています。その定義は、リボンのカスタマイズが (<CommandUIExtension /> 要素を使用して) <CommandUIHandler /> で定義されるのと同じフィーチャー要素マニフェストで行われます。この要素には、次の 3 つの属性が含まれます。

  • Command  コマンドの名前です。コントロールから参照されます。

  • CommandAction  コマンド呼び出し時に実行される JavaScript です。

  • EnabledScript  コマンドが使用できるかどうかを確認するために、Server リボン コマンド インフラストラクチャによって呼び出される JavaScript です。このスクリプトは、ブール値を返します。コマンドが使用できる場合は TRUE を、使用できない場合は FALSE を返します。コマンドが使用できない場合、リボン インフラストラクチャは、リボン内のそのコマンドに灰色のマスクを適用し、ユーザーが選択してもそのコマンドを呼び出しません。

コマンド UI ハンドラーを使用する利点

通常は、コマンド UI ハンドラーのほうが大部分の開発者にとって記述と管理が容易です。コマンド UI ハンドラーは宣言的に定義されるため、リボン フレームワークでは、参照側のコントロールがそのコマンドを必要とする任意のページへのスクリプトの追加を処理します。

コマンド UI ハンドラーを使用する欠点

コマンド UI ハンドラーの欠点の 1 つは、大量のカスタム JavaScript が含まれていると、管理、トラブルシューティング、およびデバッグが困難になる場合があることです。また、コマンド UI ハンドラーは、インライン スクリプトによるブロック時にすべてのページに追加されるため、ブラウザーによる取得ができず、毎回ダウンロードしてページ全体の重みを追加する必要があります。

ページ コンポーネントを使用した Server リボン コマンドの実装

コマンド UI ハンドラーを使用する代わりに、ページ コンポーネントを使用できます。ページ コンポーネントは、外部スクリプト ライブラリ (.js) ファイルで定義される JavaScript オブジェクトです。このオブジェクトは、Server リボン コマンド インフラストラクチャに初期化の方法、処理できるコマンド、特定のコマンドの使用可否を指定するいくつかのプロパティやメソッドを実装し、ページ コンポーネントがフォーカスを得たり失ったりした場合に応答を返すこともできます。

このスクリプト ファイルは、リボン カスタマイズが表示されるのと同じページに追加する必要があります。この操作には、さまざまな方法があります。その 1 つは、SharePoint 2010 の新しい <CustomAction ScriptSrc="" /> 機能を使用して、フィーチャーのスコープに応じてサイト、サイト コレクション、Web アプリケーション、またはファーム内のすべてのページにライブラリを追加することです。別の方法は、カスタム アプリケーションまたはサイト ページ (.aspx) 内のマネージ コード、カスタム ユーザー コントロール (.ascx)、あるいはカスタム サーバー コントロールからスクリプトを追加することです。次のコード例は、ページ コンポーネントを Web パーツ内のページに追加します。

private void LoadAndActivateRibbonContextualTab() {
  SPRibbon ribbon = SPRibbon.GetCurrent(this.Page);
  // Ensure ribbon exists.
  if (ribbon != null) {
    // Load dependencies if not already on the page.
    ScriptLink.RegisterScriptAfterUI(this.Page, "SP.Ribbon.js", false, true);

    // Load and activate contextual tab.
    ribbon.MakeTabAvailable("Ribbon.PropertyChangerTab");
    ribbon.MakeContextualGroupInitiallyVisible("Ribbon.WebPartContextualTabGroup", string.Empty);
  }
}

ページ コンポーネントを使用する利点

すべての JavaScript は外部スクリプト ライブラリ内に存在するので、ページ コンポーネントは、管理、トラブルシューティング、およびデバッグがコマンド UI ハンドラーよりもずっと容易に行えます (Microsoft Visual Studio 2010 のスクリプト デバッガーでは、ブレークポイントの設定やライブラリへのアタッチができます)。また、外部のライブラリなので、ブラウザーによってキャッシュでき、ページ上で参照されるたびに要求せずに済みます。

ページ コンポーネントでは、コマンドをより詳細に制御することもできます。これは、フォーカスのやりとりを有効または無効にしたり、そのそれぞれの場合についてイベントを処理したりできるからです。

さらに、ページ コンポーネントは外部ライブラリなので、1 つのページ コンポーネントで複数のコントロールに対するコマンドを処理でき、その結果、さまざまなリボン カスタマイズで再利用が行えます。

ページ コンポーネントを使用する欠点

コマンド UI ハンドラーを使用する場合と比較すると、ページ コンポーネントを使用する場合の欠点の 1 つは、ページ コンポーネントが相当な量のスクリプトを必要とすることです。これは主に、開発者がページ上のスクリプト オブジェクトの構築、登録、および初期化を行うためです。また、オブジェクト指向の JavaScript 技法に習熟していない開発者は、こうした作業を少し困難に感じる場合があります。

ページ コンポーネントを使用する場合の別の欠点は、そうしたコンポーネントはリボン コマンド構造では処理されないので、何とかしてページに追加する必要があることです。

SharePoint 2010 Server リボンのカスタマイズ

SharePoint Server リボンをカスタマイズする開発者には、2 つの方法が用意されています。カスタマイズは、宣言的な方法とプログラムによる方法のどちらでも適用できます。宣言的な方法は、既にこの記事で説明したように、フィーチャー (具体的には <CommandUIExtensions /> 子要素を持つ <CustomAction /> 要素) を使用して実現されます。

プログラムによる方法では、宣言的な構造を文字列として Server リボン オブジェクトに追加する必要があります。この記事の残り部分では、宣言的な方法に注目します。その技法は、プログラムによる方法にも適用できるからです。SharePoint 2010 SDK には、プログラムを使用したリボンのカスタマイズに関するチュートリアル「[チュートリアル] 操作別タブでカスタム Web パーツを作成する」が含まれています。

SharePoint 2010 の組み込みの Server リボン コンポーネントのカスタマイズ

開発者は、次の 3 つの方法でリボンをカスタマイズできます。

  • リボンにコンポーネント (タブ、操作別タブ グループ、グループ、およびコントロール) を追加する

  • リボン内の既存のコンポーネントを変更する

  • リボンから既存のコンポーネントを削除する

3 つの方法は、すべて宣言的に実行できます。「Server リボン XML」には、さまざまな要素が示されています。また、「Server リボンの宣言型カスタマイズ」には、一般的な 3 つのコンポーネントをリボンに追加する方法が示されています。

タブ、グループ、コントロールなど、コンポーネントの変更や削除は、同じスキーマ要素を使用してほとんど同じ方法で行えます。要素の変更は、その ID を複製してコンテンツを置き換えるだけであり、Microsoft ASP.NET 2.0 のマスター ページにおけるコンテンツ プレースホルダーのしくみによく似ています。削除についても、コンテナーが空になる点以外は、変更と同じです。詳細については、「Server リボンの宣言型カスタマイズ」を参照してください。

カスタム SharePoint 2010 Server リボン コンポーネントの作成

次の 2 つのセクションでは、SharePoint 2010 Server リボンのカスタマイズ方法を説明します。どちらのチュートリアルでも、各種の技法を使用し、それぞれのコンポーネントを詳しく説明します。双方のチュートリアルのサンプル コードについては、「MSDN Sample - Customizing and Extending the SharePoint 2010 Server Ribbon(英語)」を参照してください。このサンプル コードでは、SharePoint Foundation 2010 のサイト コレクションのみが必要です。

最初のサンプル WebPartRibbonContextualTab (図 3 を参照) では、以下のようなリボンのカスタマイズを使用するカスタム Web パーツの作成方法を説明します。

  • 操作別タブ グループ

  • カスタム タブ

  • カスタム グループ

  • コマンド UI ハンドラー

  • Web パーツがページ上にある場合にのみ操作別タブ グループをアクティブ化します。

  • リボンでのボタンのクリック時にサーバー側のポストバックをトリガーして処理します。

図 3. 操作別タブ グループを持つ Web パーツ

コンテキスト タブ グループを持つ Web パーツ

図 4 に示す 2 番目のサンプル、ApplyDocumentPrefixRibbon では、次のカスタマイズと技法の実装方法を説明します。

  • 既存のリボン タブ内のカスタム グループ

  • さまざまなレイアウト オプションを持つカスタム グループ テンプレート

  • 同じ操作を実行する 2 つのカスタム コマンド (1 つはコマンド UI ハンドラーで実装されたもの、もう 1 つはカスタム ページ コンポーネントを実装したもの)

    • これらのコマンドは、ライブラリ内の 1 つ以上のドキュメントが選択されない限り無効です。

    • クリック時に、コマンドによってダイアログ ボックスを開き、選択されているドキュメントを渡して、ユーザーの入力に基づいて処理を実行します。

    • ダイアログ ボックスの処理が完了すると、ダイアログ ボックスは閉じられ、コマンドによって通知メッセージの表示と (ページ全体ではなく) リスト ビュー Web パーツの更新が行われます。

  • ページ コンポーネントを条件付きで読み込むカスタム サーバー コントロール

図 4. ページ コンポーネントを持つカスタム グループ

ページ コンポーネントを持つカスタム グループ

注意

サンプル コードでは、読みやすさのために一部のマークアップが省略されています。完全なコードについては、「MSDN Sample - Customizing and Extending the SharePoint 2010 Server Ribbon(英語)」を参照してください。

[方法] Web パーツに対応した操作別タブの作成とポストバックの活用

この例では、Web パーツがページに追加されると、図 3 に示した操作別タブが表示されます。このタブには、いくつかのボタンを備えた 2 つのグループが含まれています。最初のグループにあるボタンは、既定のテンプレートの 1 つをどのように使用するかを示すだけのものです。これに対し、[Write to Web Part via PostBack] ボタンは、ポストバックを発行します。Web パーツには、このボタンがポストバックを発行したかどうかを確認し、発行した場合は Web パーツのコンテンツにテキストを追加するコードが含まれています。

手順 1: Web パーツを作成する

最初の手順は、Web パーツの作成です。新しい Microsoft Visual Studio 2010 の SharePoint 開発者ツールを使用して、SharePoint プロジェクトを作成し、Web パーツの SharePoint プロジェクト アイテムをプロジェクトに追加します。CreateChildControls メソッドは、2 つの処理を実行します。それらは、次のコードに示すように、Web パーツへのテキストの書き込みと、特定のポストバック イベントの発生時にそのイベントを処理するメソッドの呼び出しです。

public class RibbonizedWebPart : WebPart {
  private string POSTBACK_EVENT = "RibbonizedWebPartPostback";

  protected override void CreateChildControls() {
    this.Controls.Add(
      new LiteralControl(
        "<em>Ribbonized Web Part contents go here</em>"
      )
    );

    // Handle postback from ribbon. 
    HandleRibbonPostback();
  }
}

次に、ポストバック イベントを処理するメソッドを作成します。そのイベントが指定されたポストバック イベントである場合、このメソッドは、以下のコードに示すように、Web パーツのコンテンツに追加のテキストを書き込みます。

private void HandleRibbonPostback() {
  if (this.Page.Request["__EVENTTARGET"] == POSTBACK_EVENT) {
    this.Controls.Add(
      new LiteralControl(
        "<p>Responding to postback event from ribbon.</p>"
      )
    );
  }
}

最後の手順は、カスタム操作別タブをページに追加するコードの実装です。この処理は、Web パーツのライフ サイクルの OnPreRender フェーズで行われます。ここでは、Server リボンへの参照を取得し、スクリプトの依存関係がページ上に読み込み済みであることを確認する必要があります。さらに、操作別タブを表示するために、Ribbon.PropertyChangerTab の ID を持つ操作別タブを使用可能にすると共に、Ribbon.WebPartContextualTabGroup の ID を持つ操作別タブをページの読み込み時に使用可能にするようにリボンに指示します (次のコードを参照してください)。

protected override void OnPreRender(EventArgs e) {
  LoadAndActivateRibbonContextualTab();
  base.OnPreRender(e);
}

private void LoadAndActivateRibbonContextualTab() {
  SPRibbon ribbon = SPRibbon.GetCurrent(this.Page);
  // Ensure ribbon exists.
  if (ribbon != null) {
    // Load dependencies if not already on the page.
    ScriptLink.RegisterScriptAfterUI(this.Page, 
      "SP.Ribbon.js", false, true);

    // Load and activate contextual tab.
    ribbon.MakeTabAvailable("Ribbon.PropertyChangerTab");
    ribbon.MakeContextualGroupInitiallyVisible(
      "Ribbon.WebPartContextualTabGroup", string.Empty);
  }
}

手順 2: Server リボン コンポーネントのカスタマイズを作成する

Web パーツの作成が済むと、次の手順は、Server リボン コンポーネントのカスタマイズの作成です。そのためには、操作別タブ グループ、2 つのグループを持つタブ、およびいくつかのコントロールを作成します。

Microsoft Visual Studio 2010 の SharePoint 開発者ツールには、リボンをカスタマイズするための SharePoint プロジェクト アイテム テンプレートが含まれていません。ただし、汎用の SharePoint プロジェクト アイテム [空の要素] にリボンのカスタマイズを含めることができるので、これを新たにプロジェクトに追加します。

手順 2.1: 重要なリボン マークアップを要素に追加する

次のマークアップをプロジェクトの新しい [要素] SharePoint プロジェクト アイテムの element.xml ファイルに追加します。

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="WebPartContextualTabs" Location="CommandUI.Ribbon">
    <CommandUIExtension>
      <CommandUIDefinitions />
      <CommandUIHandlers />
    </CommandUIExtension>
  </CustomAction>
</Elements>

このコードは、SharePoint に次のことを伝えるものです。

  • 要素マニフェストには、あらゆる場所のリボンに適用されるリボンのカスタマイズが含まれていること (<CustomAction Location="CommandUI.Ribbon" />)。Location 属性には、5 つのオプションがあります。その他のものは、開発者がリスト ビュー Web パーツの提示の際または表示中にカスタマイズが表示されるように指定したり、アイテムのフォームの新規作成や編集を行ったりできるようにするものです。また、RegistrationType と RegistrationId を使用すると、開発者はカスタマイズを表示する対象をより詳細に指定できます。たとえば、その対象を特定のコンテンツ タイプに設定することもできます。すべてのオプションについては、「Server リボン XML」を参照してください。

  • リボンのカスタマイズのための基本的な構造も含まれていること。

手順 2.2: 新しい操作別タブ グループを追加する

次に、操作別タブ グループを作成する以下のマークアップを追加します。

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="WebPartContextualTabs" Location="CommandUI.Ribbon">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition 
                Location="Ribbon.ContextualTabs._children">
          <ContextualGroup Id="Ribbon.WebPartContextualTabGroup"
                ContextualGroupId="WebPartContextualTab"
                Title="Ribbonized Web Part Tools"
                Sequence="150"
                Color="Green"
                Command="WebPartContextualTab.OnEnableContextualTab">
          </ContextualGroup>
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers />
    </CommandUIExtension>
  </CustomAction>
</Elements>

<CommandUIDefinition> Location 属性は、以下のコンテンツ (1 つ以上の <ContextualGroup /> 要素) をリボンの操作別タブに追加するようにリボンに指示します。

<ContextualGroup /> 要素は、新しいグループを定義します。また、Web パーツのコードによってページの読み込み時に最初に表示するようにリボンに指示した操作別グループの名前に一致する Id 属性を持ちます。

Sequence 属性は、他の操作別グループが存在する場合にこの操作別グループの順序を SharePoint に指示します。SharePoint 操作別グループには、100 (100 は [編集ツール] 操作別グループに対応しています) から始まって 100 ずつ増加するシーケンスが与えられます。そのため、ここで作成した操作別グループは、[編集ツール] グループが存在する場合は 2 番目に、そうでない場合は最初に表示されることになります。他の操作別グループの名前とシーケンスを調べる方法については、後のセクション「カスタム SharePoint 2010 Server リボン開発のヒント」を参照してください。

Command 属性は、このグループをコマンド名と関連付けます。場合によっては、このタブ グループの選択時にスクリプトを実行することが有効です。ただし、ここでは、操作別グループをアクティブにするタイミングをリボンに伝えるためにこのコマンドが使用されています。この処理を実装しなかった場合は、ユーザーが何かをクリックするとリボンによってカスタム グループが非表示になります。

手順 2.3: 操作別タブ グループにタブを追加する

操作別タブ グループの作成が済むと、次のマークアップを追加して、新しいタブの追加と最大サイズ レイアウトのグループ テンプレートの定義を行います。

<CommandUIDefinitions>
  <CommandUIDefinition Location="Ribbon.ContextualTabs._children">
    <ContextualGroup Id="Ribbon.WebPartContextualTabGroup" ... >
      <Tab Id="Ribbon.PropertyChangerTab" 
           Title="Tools" Sequence="501">
        <Scaling Id="Ribbon.PropertyChangerTab.Scaling">
          <MaxSize Id="Ribbon.PropertyChangerTab.MaxSize"
             GroupId="Ribbon.PropertyChangerTab.PropertyGroup"
             Size="LargeLarge" />
          <MaxSize Id="Ribbon.PropertyChangerTab.MaxSize" ... />
        </Scaling>
      </Tab>
    </ContextualGroup>
  </CommandUIDefinition>
</CommandUIDefinitions>

<MaxSize /> 要素に関するこのスニペットには、注意する点が 2 つあります。ここでは、後で (GroupId 属性によって) 定義するグループと、テンプレートに定義されているレイアウト オプション LargeLarge を (Size 属性によって) 関連付けます。

手順 2.4: タブにグループを追加する

ここでは、次のマークアップを追加することで、新しいタブにグループを追加します。

<CommandUIDefinitions>
  <CommandUIDefinition Location="Ribbon.ContextualTabs._children">
    <ContextualGroup Id="Ribbon.WebPartContextualTabGroup" ... >
      <Tab Id="Ribbon.PropertyChangerTab" ... >
        <Scaling Id="Ribbon.PropertyChangerTab.Scaling" ... >
        </Scaling>
        <Groups Id="Ribbon.PropertyChangerTab.Groups">
          <Group Id="Ribbon.PropertyChangerTab.PropertyGroup" ... >
            ...
          </Group>
          <Group Id="Ribbon.PropertyChangerTab.PostBackGroup"
                 Title="PostBack" Sequence="25"
                 Template="Ribbon.Templates.Flexible2">
          </Group>
        </Groups>
      </Tab>
    </ContextualGroup>
  </CommandUIDefinition>
</CommandUIDefinitions>

このサンプルには 2 つのグループが存在しますが、2 番目のグループのみをこのコード リストに示しています。これらのグループは、前に追加した <MaxSize GroupId="" /> 要素に一致する Id 属性を持つことに注意してください。

また、これらのグループが Ribbon.Templates.Flexible2 という名前のテンプレートを使用している点にも注意します。このテンプレートは、組み込みの CMDUI.xml リボン宣言に含まれています。リボンのカスタマイズ フィーチャー内でカスタム グループを定義する場合は、用意されているグループ テンプレートの 1 つを使用せずに、開発者が独自のグループ テンプレートを作成することを Microsoft では推奨しています。その理由は、SharePoint がすべてのページ要求に対してリボンの全体を読み込むわけではなく、現在のコンテキストで必要な部分のみを読み込むからです。このことは、グループ テンプレートにも当てはまります。そのため、開発者が組み込みのグループ テンプレートに頼っている場合は、現在のページに対してそのテンプレートが読み込まれず、リボンのカスタマイズが表示されない可能性があります。

このサンプルのカスタマイズの場合は、Web パーツの一部であること、Web パーツが Web パーツ ページ上になければならないことから、このテンプレートは [ページ] タブ (このタブはあらゆる Web パーツ ページ上にあります) の一部なので読み込まれることになるという仮定が成立します。

他のテンプレートの名前を探す方法については、後の「カスタム SharePoint 2010 Server リボン開発のヒント」を参照してください。

手順 2.5: グループにコントロールを追加する

リボンのカスタマイズのビジュアル パーツを定義する最後の手順は、グループへのコントロールの追加です。以下のマークアップを 2 番目のグループに追加します (最初のグループへのボタンの追加については、「MSDN Sample - Customizing and Extending the SharePoint 2010 Server Ribbon(英語)」を参照してください)。

<CommandUIDefinitions>
  <CommandUIDefinition Location="Ribbon.ContextualTabs._children">
    <ContextualGroup Id="Ribbon.WebPartContextualTabGroup" ... >
      <Tab Id="Ribbon.PropertyChangerTab" ... >
        <Scaling Id="Ribbon.PropertyChangerTab.Scaling" ... >
        </Scaling>
        <Groups Id="Ribbon.PropertyChangerTab.Groups">
          <Group Id="Ribbon.PropertyChangerTab.PropertyGroup" ... >
            ...
          </Group>
          <Group Id="Ribbon.PropertyChangerTab.PostBackGroup" ... >
            <Controls Id="Ribbon.PropertyChangerTab.PropertyGroup.Controls">
              <Button Id="Ribbon.PropertyChangerTab.PropertyGroup.GeneralDialogButton"
                      LabelText="Write to Web Part"
                      Command="WebPartContextualTabs.OnPostback"
                      TemplateAlias="o1"
                      Sequence="15"
                      Image16by16="/_layouts/Images/WebPartRibbonContextualTab/16x16Placeholder.png"
                      Image32by32="/_layouts/Images/WebPartRibbonContextualTab/32x32Placeholder.png" />
            </Controls>
          </Group>
        </Groups>
      </Tab>
    </ContextualGroup>
  </CommandUIDefinition>
</CommandUIDefinitions>

このマークアップは、新しいボタン コントロールを Write to Web Part というラベルでグループに追加します。このボタンがクリックされると、Command="" がトリガーされます。TemplateAlias 属性は、定義されたグループ テンプレートのどの位置にこのボタンを配置するかを Server リボンに指示します。最後に、異なる状態にあるリボン アイコンを表示するために 2 つのイメージ属性がレイアウトで使用されています。これらのイメージは、サーバー上の任意のイメージを指すことができます。この場合は、プロジェクトに追加されたイメージを参照しています。

手順 3: Server リボン コマンドを作成する

最後の手順は、リボン コンポーネントで参照されていた 2 つのコマンドの定義です。次のマークアップを要素マニフェストに追加します。

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="WebPartContextualTabs" Location="CommandUI.Ribbon">
    <CommandUIExtension>
      <CommandUIDefinitions>
        ...
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler Command="WebPartContextualTab.OnEnableContextualTab"
          CommandAction=""
          EnabledScript="return true;" />
        <CommandUIHandler Command="WebPartContextualTabs.OnPostback"
          CommandAction="javascript:__doPostBack('RibbonizedWebPartPostback','');" />
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction>
</Elements>

最初の <CommandUIHandler /> には、操作別タブ グループに関連付けられたコマンドがあります。前述のように、このコマンドは、アクティブ化のタイミングを Server リボンに知らせる以外には何も処理を行いません。リボンに表示された状態を維持する場合は、該当する EnabledScript 属性が常に TRUE を返します。そのため、ページ上にある操作別タブ グループは、Web パーツがページ上にある場合は Web パーツによって操作別タブ グループのアクティブ化が処理されるので、決して表示されなくなることはありません。

2 番目の <CommandUIHandler /> は、ボタン コントロールに関連付けられています。このボタンがクリックされると、RibbonizedWebPartPostBack というイベント名によってポストバックが発行されます。先ほどの Web パーツのコードでは、この名前のイベント名をリッスンし、その発生を確認すると Web パーツにテキストを追加していました。

手順 4: 展開してテストする

すべての変更を保存した後で、カスタム Web パーツを展開します。それには、Visual Studio 2010 で F5 キーを押すか、または [デバッグ] メニューの [デバッグ開始] をクリックします。

最初のページの読み込み時には、図 5 に示すように、操作別タブは表示されません。

図 5. デバッグ サイトのホーム ページ (操作別タブ グループなし)

コンテキスト タグを持たないデバッグ サイトのホーム ページ

ここで、[ページ] タブ、[編集] の順にクリックして、ページを編集モードにします。Web パーツをページの既定の場所に挿入します。ページの再読み込みが行われると、図 6 に示すように、操作別タブと Web パーツが表示されます。

図 6. 表示された操作別タブと Web パーツ

コンテキスト タブと Web パーツが表示される

カスタム操作別タブ グループの [ツール] タブをクリックして、ポストバックのテストを行い、適切なボタンをクリックします。ページが最新の情報に更新され、図 7 に示すように、Web パーツに追加のテキストが表示されるはずです。

図 7. リボンからのポストバックに反応した Web パーツ

リボンからのポストバックに応答する Web パーツ

また、ページ上に 第 2 の操作別タブ グループが表示されます。これは、ページがまだ編集モードにあり、シーケンスが編集ツールのものより大きな値である 150 に設定されていたためです。ページが編集モードを抜けると、このカスタム操作別グループは最初の位置に表示されるはずです。

チュートリアル: ボタンをドキュメント タブに追加して条件付きで有効にする

このチュートリアルのサンプルでは、ボタンを備えた新しいグループを既存のリボンに追加する方法を示します。プロジェクトを展開すると、[ドキュメント] タブに新しいグループが登録されます。このタブは、[ライブラリ ツール] 操作別タブ グループに含まれています。この操作別タブ グループは、ユーザーがドキュメントを操作しているか、ドキュメント ライブラリ内にいえる場合に限り表示されます。図 8 に、リボンを持たないチーム サイトのホーム ページを示しますが、Shared ドキュメント ライブラリが選択されると、図 9 に示すように、操作別タブ グループはカスタマイズされた状態で表示されます。

図 8. チーム サイトのホーム ページ (ドキュメント ライブラリが選択されていない状態)

ドキュメント ライブラリが選択されていないチーム サイト ページ

図 9. チーム サイトのホーム ページ (ドキュメント ライブラリが選択された状態)

ドキュメント ライブラリが選択されているチーム サイト ページ

最初は、3 つのボタンのうち 2 つが有効になっていません。1 つ以上のドキュメントが選択されて初めて、これらのボタンに関連付けられているコマンドが有効になります (図 10 を参照してください)。

図 10. ドキュメントが選択されて有効になったリボン ボタン

ドキュメントの選択時に有効になるリボンの各ボタン

後の 2 つのボタン、[Apply Prefix w/ CommandUI Handler] と [Apply Prefix w/ Page Component] は、クリック時にまったく同じ処理を行います。ただし、それぞれの名前が示すように、一方はコマンド UI ハンドラーを使用し、他方はカスタム ページ コンポーネントを使用しています。これらのボタンは、クリックされると、ページ上で選択されているすべてのドキュメントのリストを収集し、それらを新しいダイアログ ボックスに渡します (図 11 を参照してください)。このダイアログ ボックスにより、ユーザーは選択されているドキュメントすべての名前にプレフィックスを追加できます。

図 11. リボンのカスタマイズから生成されたカスタム ダイアログ ボックス

リボンのカスタマイズから呼び出された [ユーザー設定] ダイアログ ボックス

このダイアログ ボックスは、[Set Prefix] ボタンのクリック時に、すべてのドキュメントの名前を更新したうえで閉じられます。ダイアログ ボックスが [Set Prefix] ボタンと [Cancel] ボタンのどちらのクリックによって閉じられたかに応じて、コマンドは通知メッセージを発行し、ページ上のリスト ビュー Web パーツを最新の情報に更新して、リストの内容を更新します。

手順 1: Server リボン コンポーネントのカスタマイズを作成する

最初の手順は、Microsoft Visual Studio 2010 の SharePoint 開発者ツールを使用して新しい空の SharePoint プロジェクトを作成することです。プロジェクトを作成したら、リボンのカスタマイズが含まれることになるプロジェクトに新しい [空の要素] プロジェクト アイテムを追加します。

手順 1.1: 重要なリボン マークアップを要素に追加する

要素マニフェスト内に、次のマークアップを追加します。

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="Ribbon.Documents.ApplyDocumentPrefix" Location="CommandUI.Ribbon">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition Location="Ribbon.Documents.Groups._children">
          <Group Id="Ribbon.Documents.ApplyDocumentPrefix"
                 Title="Document Naming Tools"
                 Description="Document Naming Tools Description"
                 Sequence="25"
                 Template="Ribbon.Templates.MsdnTemplate">
          </Group>
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers />
    </CommandUIExtension>
  </CustomAction>
</Elements>

このコードは、[ドキュメント] タブの [Document Naming Tools] というグループ コレクション (<CommandUIDefinition Location="Ribbon.Documents.Groups._children"> で指定されています) に新しいグループを追加します。このグループのシーケンスは 25 になっています。組み込みの SharePoint 2010 Server リボン内にあるグループのシーケンスは、10 から始まり 10 ずつ増加します。つまり、ここで定義されているカスタム グループは、3 番目の位置に表示されることになります。

また、このグループは、既存のグループ テンプレートのいずれも使用せず、代わりにカスタム グループ テンプレートを使用します。

手順 1.2: カスタム グループ テンプレートを追加する

リボンにカスタム グループを追加するために、次のマークアップを追加します。

<CommandUIExtension>
  <CommandUIDefinitions>
    <CommandUIDefinition Location="Ribbon.Documents.Groups._children">
      <Group Id="Ribbon.Documents.ApplyDocumentPrefix" ... > 
        ...
      </Group>
    </CommandUIDefinition>
    <CommandUIDefinition Location="Ribbon.Templates._children">
      <GroupTemplate Id="Ribbon.Templates.MsdnTemplate">
        <Layout Title="MsdnHorizontal">
          <Section Type="OneRow">
            <Row>
              <ControlRef DisplayMode="Large" TemplateAlias="o1" />
              <ControlRef DisplayMode="Large" TemplateAlias="o2" />
              <ControlRef DisplayMode="Large" TemplateAlias="o3" />
            </Row>
          </Section>
        </Layout>
        <Layout Title="MsdnVertical">
          <Section Type="ThreeRow">
            <Row><ControlRef DisplayMode="Medium" TemplateAlias="o1" /></Row>
            <Row><ControlRef DisplayMode="Medium" TemplateAlias="o2" /></Row>
            <Row><ControlRef DisplayMode="Medium" TemplateAlias="o3" /></Row>
          </Section>
        </Layout>
       <Layout Title="MsdnVerticalTextOnly">
          <Section Type="ThreeRow">
            <Row><ControlRef DisplayMode="Menu" TemplateAlias="o1" /></Row>
            <Row><ControlRef DisplayMode="Menu" TemplateAlias="o2" /></Row>
            <Row><ControlRef DisplayMode="Menu" TemplateAlias="o3" /></Row>
          </Section>
        </Layout>
      </GroupTemplate>
    </CommandUIDefinition>
  <CommandUIDefinitions>
  <CommandUIHandlers />
</CommandUIExtension>

この Ribbon.Templates.MsdnTemplate というテンプレートには、3 種類のレイアウトが含まれています。それぞれの <Layout /> は Title 属性を持ちます。この属性は <MaxSize /> 要素または <Scale /> 要素で参照されます。この属性は、どのテンプレートをレイアウトに使用するかをリボンに指示します。それぞれの <Layout /> 要素は、Type 属性を使用してグループの表示方法を定義する <Section /> を持ちます。この表示方法は、グループの表示に 1 つ、2 つ、または 3 つの行、あるいは区切り線を使用するという 4 つのオプションのいずれかになります。詳細については、「Section 要素」を参照してください。

<Section /> には、レイアウト内のそれぞれの行を定義する 1 つ以上の <Row /> 要素が含まれています。これらの <Row /> 要素には、コントロール用のプレースホルダーの働きをする <ControlRef /> 要素が含まれています。DisplayMode 属性は、単純にテキスト ラベル、大きいアイコン、小さいアイコン、または ControlRef 要素のスキーマで定義されたその他の選択肢の 1 つを使用して、コントロールの表示方法をリボンに指示します。TemplateAlias 属性は、特定のコントロール配置を呼び出すために使用されます。コントロールをグループに追加すると、それぞれのコントロールの TemplateAlias 属性がこれらの TemplateAlias 属性の 1 つに一致し、コントロールの厳密な配置場所が指定されます。

ここで、次のマークアップを追加して、定義されたテンプレート内にあるレイアウトの 1 つを使用してグループを表示する方法をリボンに指示します。

<CommandUIExtension>
  <CommandUIDefinitions>
    <CommandUIDefinition Location="Ribbon.Documents.Groups._children">
      <Group Id="Ribbon.Documents.ApplyDocumentPrefix" ... >
        ...
      </Group>
    </CommandUIDefinition>
    <CommandUIDefinition Location="Ribbon.Documents.Scaling._children">
      <MaxSize Id="Ribbon.Documents.Scaling.ApplyDocumentPrefix.MaxSize"
               GroupId="Ribbon.Documents.ApplyDocumentPrefix"
               Size="MsdnVertical"
               Sequence="15" />
    </CommandUIDefinition>
    <CommandUIDefinition Location="Ribbon.Templates._children">
      <GroupTemplate Id="Ribbon.Templates.MsdnTemplate">
        ...
      </GroupTemplate>
    </CommandUIDefinition>
  </CommandUIDefinitions>
  <CommandUIHandlers />
</CommandUIExtension>

図 12、13、および 14 は、<MaxSize Size="" /> 属性を別のレイアウト オプションに変更するだけでグループの表示を変えられることを示しています。

図 12. MsdnHorizontal レイアウトの使用

MsdnHorizontal レイアウトの使用

図 13. MsdnVertical レイアウトの使用

MsdnVertical レイアウトの使用

図 14. MsdnVerticalTextOnly レイアウトの使用

MsdnVerticalTextOnly レイアウトの使用

手順 1.3: リボン グループにコントロールを追加する

次に、以下のマークアップを要素マニフェスト ファイルに追加して、グループにいくつかのボタンを追加します。

<CommandUIExtension>
  <CommandUIDefinitions>
    <CommandUIDefinition Location="Ribbon.Documents.Groups._children">
      <Group Id="Ribbon.Documents.ApplyDocumentPrefix" ... > 
        <Controls Id="Ribbon.Documents.ApplyDocumentPrefix.Controls">
          <Button Id="Ribbon.Documents.ApplyDocumentPrefix.CustomHelpButton"
                  LabelText="Apply Document Prefix Help"
                  TemplateAlias="o1"
                  Sequence="15"
                  Image16by16="/_layouts/Images/ApplyDocumentPrefixRibbon/16x16Placeholder.png"
                  Image32by32="/_layouts/Images/ApplyDocumentPrefixRibbon/32x32Placeholder.png"
                  Command="ApplyDocumentPrefix.OnGetHelpApplyDocPrefix" />
          <Button Id="Ribbon.Documents.ApplyDocumentPrefix.CustomApplyPrefixButton"
                  LabelText="Apply Prefix w/ CommandUI Handler"
                  TemplateAlias="o2"
                  Sequence="17"
                  Image16by16="/_layouts/Images/ApplyDocumentPrefixRibbon/16x16Placeholder.png"
                  Image32by32="/_layouts/Images/ApplyDocumentPrefixRibbon/32x32Placeholder.png"
                  Command="ApplyDocumentPrefix.OnApplyDocPrefixUIHandler" />
          <Button Id="Ribbon.Documents.ApplyDocumentPrefix.CustomPageComponentButton"
                  LabelText="Apply Prefix w/ Page Component"
                  TemplateAlias="o3"
                  Sequence="19"
                  Image16by16="/_layouts/Images/ApplyDocumentPrefixRibbon/16x16Placeholder.png"
                  Image32by32="/_layouts/Images/ApplyDocumentPrefixRibbon/32x32Placeholder.png"
                  Command="ApplyDocumentPrefix.OnApplyDocPrefixPageComponent" />
        </Controls>
      </Group>
    </CommandUIDefinition>
  </CommandUIDefinitions>
  <CommandUIHandlers />
</CommandUIExtension>

それぞれのボタンには、独自のコマンドが関連付けられています。リボンのカスタマイズのビジュアル パーツが完成したら、次の手順は、ボタンが使用可能になるタイミングとクリック時の動作の双方を処理するコマンドの作成です。この作業は、コマンド UI ハンドラーまたはページ コンポーネントを使用して行えます。続く 2 つの手順では、それぞれの方法を示します。

手順 2: Server リボンのコマンド UI ハンドラーを作成する

コマンド UI ハンドラーは、リボンの視覚的なカスタマイズが含まれているのと同じ要素マニフェスト ファイル内で定義されます。最初のコマンド UI ハンドラーを作成するために、次のマークアップを追加します。

<CommandUIHandlers>
  <CommandUIHandler Command="ApplyDocumentPrefix.OnGetHelpApplyDocPrefix"
      CommandAction="javascript:
        var dialogOptions = {
          url: '/_layouts/ApplyDocumentPrefixRibbon/DocPrefixHelp.aspx',
          title: 'Apply Document Prefix Help',
          allowMaximize: true,
          showClose: true,
          width:500,
          height:400
        };
        SP.UI.ModalDialog.showModalDialog(dialogOptions); " />
</CommandUIHandlers>

このコマンドは、Command 属性を使用して最初のボタンに関連付けられています。CommandAction 属性は、SharePoint 2010 のダイアログ ボックス フレームワークを使用してダイアログ ボックスを開く、いくつかの JavaScript を実行します。このフレームワークは後で作成するカスタム アプリケーション ページを参照します。

続いて、2 番目のボタンに関連付けられる別のコマンド UI ハンドラーを追加します。次のマークアップに示すように、このハンドラーによる処理のほうがかなり多くなっています。

<CommandUIHandlers>
  <CommandUIHandler Command="ApplyDocumentPrefix.OnGetHelpApplyDocPrefix" ... />
  <CommandUIHandler Command="ApplyDocumentPrefix.OnApplyDocPrefixUIHandler"
      CommandAction="javascript:
        function dialogCallback(dialogResult, returnValue){
          SP.UI.Notify.addNotification(returnValue);
          SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
        }
      
        var selectedItems = SP.ListOperation.Selection.getSelectedItems();
        var selectedItemIds = '';
        var selectedItemIndex;
        for (selectedItemIndex in selectedItems){
          selectedItemIds += '|' + selectedItems[selectedItemIndex].id;
        }
       
        var dialogOptions = {
          url: '/_layouts/ApplyDocumentPrefixRibbon/DocPrefixPrompt.aspx?selectedItems='
          +selectedItemIds +'&amp;ListId=' +SP.ListOperation.Selection.getSelectedList(),
          title: 'Set Document Prefix',
          allowMaximize: false,
          showClose: false,
          width:500,
          height:400,
          dialogReturnValueCallback: dialogCallback
        };
        
        SP.UI.ModalDialog.showModalDialog(dialogOptions);"
      EnabledScript="javascript:
        function checkIsEnabled(){
          // Check items selected.
          var selectedItems = SP.ListOperation.Selection.getSelectedItems();
          var count = CountDictionary(selectedItems);
          return (count > 0);
        }; 
                      
        checkIsEnabled();"
    />
</CommandUIHandlers>

このコードは少し複雑になっています。最初に、ダイアログ ボックスが閉じられたときにコールバックとして使用される新しい JavaScript 関数を作成しています。この関数は、小さな黄色のメッセージがページの右側から滑り込んでくる形でブラウザーに通知を表示したうえで、ページ上のリスト ビュー Web パーツを最新の情報に更新します。

次に、この関数は、現在のページで選択されているドキュメントの区切りリストを作成します。最後に、新しいアプリケーション ページを開くための新しいダイアログ ボックスを作成し、選択されている項目を渡します。ダイアログ ボックスを閉じると、以前に定義した dialogCallback メソッドが呼び出されます。

他にこのコードで重要なのは、EnabledScript 属性です。この属性は、コマンドが使用できる場合にはブール値 TRUE を、使用できない場合には FALSE を返します。この判断を行うために、ページ上で何かが選択されていないかを確認しています。選択されていない場合、コマンド、つまりこのボタンは無効になります。

手順 3: Server リボンのページ コンポーネントを作成する

コマンド UI ハンドラーで定義されたコマンドを使用するボタンが 1 つリボン内にできあがったので、今度は他のコマンドを処理するページ コンポーネントを作成します。そのためには、新しい JavaScript ファイルを Visual Studio プロジェクトに、できれば {SharePoint Root}/TEMPLATE/LAYOUT/{ProjectName} ディレクトリにマップされたフォルダー内にあるものに追加します。これにより、すべてのサイトで使用されるフロントエンド Web サーバー上にあるライブラリのインスタンスが 1 つしか存在しないことが保証されます。

手順 3.1: ページ コンポーネント オブジェクトを宣言する

プロジェクトへのファイルの追加が完了したら、次のスクリプトを追加して、このライブラリに含まれることになる JavaScript オブジェクトと、ページ コンポーネントのインスタンスを作成してクライアント側のリボン マネージャーに追加するいくつかのコンストラクターおよび初期化メソッドを宣言します。

// Register the page component object.
Type.registerNamespace('ApplyDocumentPrefix');

// Helper methods to set up and initialize the page component.
ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent = function ApplyDocumentPrefix_PageComponent() {
  ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.initializeBase(this);
}

ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.initialize = function () {
  ExecuteOrDelayUntilScriptLoaded(Function.createDelegate(null, 
  ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.initializePageComponent), 'SP.Ribbon.js');
}

ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.initializePageComponent = function () {
  var ribbonPageManager = SP.Ribbon.PageManager.get_instance();
  if (ribbonPageManager !== null) {
    ribbonPageManager.addPageComponent(ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.instance);
  }
}

手順 3.2: ページ コンポーネント オブジェクトのプロトタイプと初期化メソッドを作成する

ここでは、オブジェクト プロトタイプと重要な初期化メソッドを記述した次のスクリプトを追加します。その名が示すように、このメソッドは、コマンドの一覧を作成してオブジェクト内の特定の関数にマップするいくつかの配列を作成することで、オブジェクトの初期化を行います。

// Page component object.
ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.prototype = {

  init: function ApplyDocumentPrefix_PageComponento$init() {
    // Array of commands that can be handled that are associated with handler methods.
    this.handledCommands = new Object;
    this.handledCommands['ApplyDocumentPrefix.OnApplyDocPrefixPageComponent'] = 
    this.onApplyDocPrefixPageComponent;

    // Array of commands that can be handled that are associated with canHandler methods.
    this.canHandledCommands = new Object;
    this.canHandledCommands['ApplyDocumentPrefix.OnApplyDocPrefixPageComponent'] = 
    this.onApplyDocPrefixPageComponent_canExecute;

    // Array of commands.
    this.commandList = ['ApplyDocumentPrefix.OnApplyDocPrefixPageComponent'];
  },
  getId: function ApplyDocumentPrefixPageComponent_PageComponent$getId() {
    return "ApplyDocumentPrefixPageComponent";
  },  ...
}

配列内のコマンドの名前は、リボンのカスタマイズのビジュアル コンポーネントを定義した際に追加した <Button Command="" /> 属性の値に一致しています。

手順 3.3: このページ コンポーネントが処理するコマンドとコマンド処理のタイミングおよび方法をリボン マネージャーに通知するメソッドを追加する

次に、クライアント側のリボン マネージャーに使用可能なコマンド、またその処理方法とタイミングを指示する 4 つのメソッドを追加します (以下のコードを参照してください)。

ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.prototype = {
  ...
  getFocusedCommands: function ApplyDocumentPrefixPageComponent_PageComponent$getFocusedCommands() {
    return [];
  },

  getGlobalCommands: function ApplyDocumentPrefixPageComponent_PageComponent$getGlobalCommands() {
    return this.commandList;
  },

  canHandleCommand: function 
  ApplyDocumentPrefixPageComponent_PageComponent$canHandleCommand(commandID) {
    var canHandle = this.handledCommands[commandID];
    if (canHandle)
      return this.canHandledCommands[commandID]();
    else
      return false;
  },

  handleCommand: function 
  ApplyDocumentPrefixPageComponent_PageComponent$handleCommand(commandID, 
  properties, sequence) {
    return this.handledCommands[commandID](commandID, properties, sequence);
  },
  ...
}

canHandleCommand メソッドは、コマンドの使用可否をリボン マネージャーに伝えるという点で、コマンド UI ハンドラーの EnabledScript 属性と同じ役割を果たします。以前のスニペットにあったこのメソッドでは、オブジェクトの初期化子で作成された配列を使用して、オブジェクト内の特定のメソッドを呼び出しています。handleCommand にも、コマンド UI ハンドラーの CommandAction 属性と同じ働きをするという点で類似性があります。また、このメソッドは、指定されたコマンド向けの別のメソッドを指すために配列を使用しています。

手順 3.4: 特定のコマンド メソッドを追加する

次の手順では、オブジェクトの初期化子で定義したメソッドのうち、コマンドが使用できるかどうか (onApplyDocPrefixPageComponent_canExecute)、またコマンドの実行時に何が起こるか (onApplyDocPrefixPageComponent) を判断するために呼び出されるメソッドを追加します。

ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.prototype = {
  ...
  onApplyDocPrefixPageComponent: function () {
    var selectedItems = SP.ListOperation.Selection.getSelectedItems();
    var selectedItemIds = '';
    var selectedItemIndex;
    for (selectedItemIndex in selectedItems) {
      selectedItemIds += '|' + selectedItems[selectedItemIndex].id;
    }

    var dialogOptions = {
      url: '/_layouts/ApplyDocumentPrefixRibbon/DocPrefixPrompt.aspx?selectedItems=' + 
      selectedItemIds + '&ListId=' + SP.ListOperation.Selection.getSelectedList(),
      title: 'Set Document Prefix',
      allowMaximize: false,
      showClose: false,
      width: 500,
      height: 400,
      dialogReturnValueCallback: PageComponentCallback
    };

    SP.UI.ModalDialog.showModalDialog(dialogOptions);
  },

  onApplyDocPrefixPageComponent_canExecute: function () {
    var selectedItems = SP.ListOperation.Selection.getSelectedItems();
    var count = CountDictionary(selectedItems);
    return (count > 0);
  }
  ...
}
function PageComponentCallback(dialogResult, returnValue) {
  SP.UI.Notify.addNotification(returnValue);
  SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
}

手順 3.5: オブジェクトの登録、初期化、通知を行う最後のスクリプトを追加する

ページ コンポーネント オブジェクトが完成したら、最後の手順は、コンポーネントをページに登録して作成し、このスクリプトがその読み込みの終了を待っていたものが読み込まれて初期化されたことをクライアント側のリボンに知らせることです。この処理は、次のコードに示されています。

ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.prototype = {
  ...
}
ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.registerClass
('ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent', 
CUI.Page.PageComponent);
ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.instance = 
new ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent();
ApplyDocumentPrefix.ApplyDocumentPrefixPageComponent.initialize();
SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs("ApplyDocumentPrefix.UI.js");

この時点で、ページ コンポーネントは作成が完了し、ページに追加できるようになりました。

手順 4: Server リボン ページ コンポーネントのローダーを作成する

次に、ページ コンポーネントをページに追加する必要があります。このサンプルでは、カスタム サーバー コントロールを使用してこの作業を行っています。新しい Empty Element SharePoint プロジェクト アイテムをプロジェクトに追加します。次のマークアップでは、<Control /> 要素を使用して新しい委任コントロールを登録しています。

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
  <Control Id="AdditionalPageHead"
           ControlClass="MSDN.SharePoint.Samples.ApplyDocumentPrefix.PageComponentScriptLoader"
           ControlAssembly="$SharePoint.Project.AssemblyFullName$" />
</Elements>

ここでは、サーバー コントロール PageComponentScriptLoader を現在のサイト内のすべてのページに対する AdditionalPageHead コンテンツ プレースホルダーに (つまりフィーチャーのスコープには無関係に) 追加します。今度は、新しいコード ファイルを SharePoint プロジェクト アイテムに追加し、サーバー コントロールを実装する次のコードを追加します。

public class PageComponentScriptLoader : WebControl {
  protected override void OnPreRender(EventArgs e) {
    SPRibbon ribbon = SPRibbon.GetCurrent(this.Page);

    // Ensure ribbon exists and current list is a document library 
    // (otherwise, no need for extra ecmascript load).
    if (ribbon != null && SPContext.Current.List is SPDocumentLibrary) {
      // Load dependencies if not already on the page.
      ScriptLink.RegisterScriptAfterUI(this.Page, "SP.Ribbon.js", false, true);

      // Load page component.
.      ScriptLink.RegisterScriptAfterUI(this.Page, "ApplyDocumentPrefixRibbon/ApplyDocumentPrefix.UI.js", false, true);
    }

    base.OnPreRender(e);
  }
}

このコードでは、最初に Server リボンへの参照を取得しています。ユーザーがドキュメント ライブラリに関する作業をしている場合は、開発スクリプトがページ上にあることをまず確認したうえで、ページ コンポーネントを登録します。

ここでの最後の手順は、サイトの web.config ファイルへの <SafeControl /> エントリの追加です。[空の要素] SharePoint プロジェクト アイテムは、<SafeControl /> エントリの追加を自動的には行いませんが、そのための手段は提供しています。Visual Studio 2010 の [ソリューション エクスプローラー] で、[空の要素] を選択します。プロパティ ウィンドウで、[…] ビルダー ボタンをクリックします (図 15 を参照してください)。

図 15. Visual Studio 2010 における SharePoint 開発ツールを使用した安全なコントロール エントリの手動での追加

安全なコントロール エントリの手動での追加

[安全なコントロール エントリ] ダイアログ ボックスで、新しいエントリを追加し、名前空間が以前に作成したサーバー コントロールの名前空間に一致していることを確認します。

図 16. [安全なコントロール エントリ] ダイアログ ボックス

[安全なコントロール エントリ] ダイアログ ボックス

手順 5: カスタム ダイアログ ボックスを作成する

最後の手順は、カスタム リボン コマンドによって呼び出され、この作業の大半を実行するダイアログ ボックスの作成です。新たに [アプリケーション ページ] という SharePoint プロジェクト アイテムを Visual Studio プロジェクトに追加します。

手順 5.1: ダイアログ ボックスのビジュアル パーツ (.aspx) の実装

この場合は、ダイアログ ボックスで SharePoint 管理フォームのユーザー コントロールをいくつか使用しているので、次のコードに示すように、いくつかの参照が必要になります。

<%@ Register TagPrefix="wssuc" TagName="InputFormSection" 
Src="~/_controltemplates/InputFormSection.ascx" %>
<%@ Register TagPrefix="wssuc" TagName="InputFormControl" 
src="~/_controltemplates/InputFormControl.ascx" %>
<%@ Register TagPrefix="wssuc" TagName="ButtonSection" 
Src="~/_controltemplates/ButtonSection.ascx" %>

PlaceHolderMain コンテンツ プレースホルダーで、次のマークアップを追加します。このマークアップは、選択されているすべてのドキュメントのリストを表示する ASP.NET の DataList コントロールを備えたフォームを作成します。

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
  <table border="0" cellspacing="0" cellpadding="0" width="100%">
    <tr>
      <td>
        <wssuc:InputFormSection runat="server" 
                                Title="Selected Documents" 
                                Description="The following documents have been selected 
                                to have the specified prefix added to their titles.">
          <Template_InputFormControls>
                        <tr>
                          <td>
                            <asp:DataList ID="SelectedDocumentsDataList" runat="server"
                            RepeatColumns="2" CellPadding="2" CellSpacing="5">
                  <ItemTemplate><li><%# DataBinder.Eval(Container.DataItem, 
                  "File.Name").ToString()%></li></ItemTemplate>
                </asp:DataList>
                          </td>
                        </tr>
                  </Template_InputFormControls>
        </wssuc:InputFormSection>

        <wssuc:InputFormSection runat="server" 
                                Title="Document Prefix" 
                                Description="Prefix to add to the selected document 
                                titles.">
          <Template_InputFormControls>
            <wssuc:InputFormControl LabelText="Prefix to add to the selected documents:"
            runat="server">
              <Template_control>
                <asp:TextBox ID="DocumentPrefixTextBox" runat="server" />
              </Template_control>
            </wssuc:InputFormControl>
                  </Template_InputFormControls>
        </wssuc:InputFormSection>

        <wssuc:ButtonSection runat="server" ShowStandardCancelButton="FALSE" 
        TopButtons="TRUE">
          <Template_Buttons>
            <asp:Button ID="SetPrefixButton" class="ms-ButtonHeightWidth" runat="server" 
            Text="Set Prefix" OnClick="OnClickSetPrefixButton" />
            <asp:Button ID="CancelButton" class="ms-ButtonHeightWidth" runat="server" 
            Text="Cancel" OnClientClick=
            "SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,
            'Assignment of prefix cancelled.'); return false;" />
          </Template_Buttons>
        </wssuc:ButtonSection>
      </td>
    </tr>
  </table>

</asp:Content>

手順 5.2: ビジネス ロジックを分離コード (.aspx.cs) に実装する

このアプリケーション ページの分離コードの内容は、単純明快です。このコードでは、以下の処理を実行する必要があります。

  • QueryString で渡されるすべての選択済みドキュメントのリストを取得します。

  • QueryString で渡されるドキュメントを含むリストへの参照を取得します。

  • ASP.NET の DataList コントロールに対する選択済みドキュメントのコレクションのバインドによって選択されるアイテムを表示します。

  • クリック時にすべての選択済みアイテムのファイル名を更新します。

  • 最後に、ダイアログ ボックスを閉じる PlaceHolderAdditionalPageHead コンテンツ プレースホルダーに JavaScript を記述して、結果を呼び出し側ページに送信します。

次のコードをアプリケーション ページの分離コード ファイルに追加します。

public partial class DocPrefixPrompt : LayoutsPageBase {
  List<SPListItem> _selectedListItems = new List<SPListItem>();

  protected override void OnLoad(EventArgs e) {
    // Get all the selected documents.
    SPList selectedDocumentLibrary = 
        SPContext.Current.Web.Lists[new Guid(
                  Request.QueryString["ListId"]
        )];
    string[] selectedItems = 
      Request.QueryString["selectedItems"].ToString().Split('|');

    for (int index = 1; index < selectedItems.Length; index++) {
      _selectedListItems.Add(
        selectedDocumentLibrary.GetItemById(
          int.Parse(selectedItems[index]))
      );
    }

    // Bind to the repeater.
    SelectedDocumentsDataList.DataSource = _selectedListItems;
    SelectedDocumentsDataList.DataBind();
  }

  protected void OnClickSetPrefixButton(object sender, EventArgs e) {
    foreach (SPListItem listItem in _selectedListItems) {
      listItem["Name"] = 
        DocumentPrefixTextBox.Text + " " + listItem.File.Name;
      listItem.Update();
    }

    CloseDialogOnSuccess();
  }
  private void CloseDialogOnSuccess() {
    ContentPlaceHolder pageHead = this.Master.FindControl("PlaceHolderAdditionalPageHead") as ContentPlaceHolder;
    if (pageHead != null)
      pageHead.Controls.Add(
        new LiteralControl("
<script language='javascript'>
ExecuteOrDelayUntilScriptLoaded(closeDialog,'sp.js');
function closeDialog(){
  SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 'Prefix assigned to selected documents.');
}
</script>"));
  }
}

手順 6: カスタム Web パーツを展開してテストする

すべての変更を保存した後で、カスタム Web パーツを展開します。それには、Visual Studio 2010 で F5 キーを押すか、または [デバッグ] メニューの [デバッグ開始] をクリックします。

チーム サイトの最初のページが開いたら、共有ドキュメント ライブラリをクリックします。リボンの [ドキュメント] タブをクリックすると、図 9 に示したように、リボンのカスタマイズが表示されるはずです。ドキュメントを選択すると、図 10 に示したように、カスタム グループ内のすべてのボタンが有効になります。2 つの [Apply Prefix […]] ボタンの一方をクリックすると、図 11 に示したダイアログ ボックスが表示されます。

ユーザーが [Set Prefix] ボタンをクリックすると、ダイアログ ボックスは選択されているファイル名を更新したうえで閉じられます。その後、コマンドは、変更が適用されたことを通知するメッセージを発行し、リスト ビュー Web パーツを最新の情報に更新します。

カスタム SharePoint 2010 Server リボン開発のヒント

SharePoint 2010 Server リボンをカスタマイズする際に、開発者は多様な変更を加えることができます。使用できるコントロール、再利用できるテンプレート、変更または追加先にできるグループやタブにはさまざまなものがあります。幸いにして、リボンの大部分は、宣言的に作成されているか、またはページ コンポーネントの場合は、コンパイルされたコードに比べると理解しやすいスクリプト ファイルに記述されています。つまり、開発者は、SharePoint のインストール後に大量のコード サンプルを参照できるわけです。

重要なのは、どこに目をつけるか、これらのサンプルをどのように見つけるかです。基本の Server リボンとすべてのリボンの宣言は、グローバル サイト定義内の SharePoint Root}\TEMPLATE\GLOBAL\XML\CMDUI.XML ファイル内にあります。SharePoint Server 2010 のエンタープライズ コンテンツ管理などによって行われた追加の変更は、通常、さまざまなフィーチャー内で見つかります。単純にすべての *.xml ファイルで <CommandUIExtension> 要素を検索すると、このリボン拡張機能を含むすべてのフィーチャーのリストが表示されます。

以降のセクションは、リボンのカスタマイズ時によくあるいくつかのシナリオで開発者に正しい方向を示すのに役立ちます。

タブ、グループ、およびコントロールの名前とシーケンスの検索

よくある作業として、新しいタブの作成、タブへのグループの追加、既存コントロールの変更が挙げられます。最初の手順は、タブの ID または名前を見つけることです。SharePoint 2010 SDK には、すべてのタブとその場所のリストが含まれています。詳細については、「既定のサーバー リボンのカスタマイズの場所」を参照してください。タブにはわかりやすい名前が付いているので、どの名前がどのタブを指しているかは明らかです。このページには、すべてのグループの名前とそうしたグループ内にあるコントロールの名前のリストも含まれています。不足している情報は、シーケンスとテンプレート エイリアスのみです。

シーケンスやテンプレート エイリアスを見つけ出すには、CMDUI.xml ファイルを開いて、SDK に記されている関連タブ、グループ、またはコントロール ID を検索します。これにより、コントロールに関するどんな質問に対しても回答を示す関連エントリが見つかります。

常にクリーンなページ要求を取得する: ブラウザー キャッシュの消去

リボンをカスタマイズする際、開発者が JavaScript を記述し、イメージを参照することは確実です。JavaScript およびイメージの量とリボンのカスタマイズは、アプリケーションの複雑さに依存します。

SharePoint 2010 UI をリファクタリングしてリボンを開発する際に Microsoft が注目した点の 1 つは、ページの重さ、つまりページ上に必要なすべての要素の合計サイズをできるだけ制限することでした。そのために、SharePoint では、CSS ファイルと JavaScript ライブラリのキャッシュをブラウザー内で積極的に行います。これにより、それ以降に要求されるファイル数が減少するため、ページの読み込み時間がかなり短縮されます。

これはユーザーにとっては大きな利点ですが、開発者にとっては問題となる可能性もあります。ブラウザーが最新のスクリプトやカスタマイズをダウンロードしないため、デバッグ セッションごとに行われる変更が反映されないことがあります。よい方法は、ソリューションの展開後にその読み込みの終了を待つ間は、Internet Explorer の開発者ツール バーを使用することです。

図 17. IE キャッシュの作成とすべてのファイルの強制的なダウンロード

IE キャッシュの消去とファイル ダウンロードの強制

Internet Explorer の開発者ツール バーは、スクリプト ファイルを参照する手段も提供します。ブラウザーが最新バージョンのカスタム スクリプト ファイルをダウンロード済みであることを確認するには、[スクリプト] タブをクリックし、ページによって読み込まれたスクリプト ファイルを選択します。リストに表示されていない外部スクリプト ファイルは、ページに追加されていません。図 18 に、以前のサンプルのページ コンポーネントに関する外部スクリプト ファイルを選択してその内容を表示しているようすを示します。

図 18. IE Developer Toolbar によるスクリプトのデバッグ

IE の [開発者] ツール バーを利用したスクリプトのデバッグ

まとめ

この記事では、Microsoft SharePoint 2010 Server リボンを構成するコア コンポーネントについて説明しました。続いて、異なるカスタマイズ技法を使用する 2 つのサンプル リボン変更の方法を示しました。また、コマンド UI ハンドラーとページ コンポーネントという異なるコマンド実装オプションをどんな場合に検討するかに関するガイダンスを示し、リボンのカスタマイズを開発するためのヒントをいくつか紹介しました。

その他の技術情報

詳細については、以下のリソースを参照してください。