操作別タブでカスタム Web パーツを作成する

[アーティクル]
06/15/2015

最終更新日: 2011年2月4日

適用対象: SharePoint Foundation 2010

この記事の内容
SharePoint プロジェクトの作成
Web パーツの実装
ページコンポーネントの作成
カスタマイズの展開

このトピックでは、Microsoft SharePoint Foundation の Server リボンで操作別タブを開くカスタム Web パーツを作成する方法について説明します。

前提条件

Microsoft SharePoint Foundation 2010

Microsoft Visual Studio 2010 の SharePoint 開発者ツール

SharePoint プロジェクトの作成

Web パーツとリボンのカスタマイズを行うには、まず、空の SharePoint プロジェクトを作成します。

SharePoint プロジェクトを作成するには

Visual Studio 2010 を起動します。
[ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。
[プロジェクトの種類] で、[C#] の [空の SharePoint プロジェクト] を選択します。
プロジェクト名として「ContextualTabWebPart」と入力し、[OK] をクリックします。
SharePoint カスタマイズウィザードで [ファームソリューションとして配置する] を選択し、[完了] をクリックします。

Web パーツの実装

次に、Web パーツを実装します。

Web パーツを実装するには

ソリューションエクスプローラーで [参照] を右クリックし、[参照の追加] を選択します。
[参照の追加] ダイアログボックスで [.NET] タブを選択し、[Microsoft.Web.CommandUI.dll] を選択します。[OK] をクリックします。
ソリューションエクスプローラーで [ContextualTabWebPart] プロジェクトを右クリックし、[追加] をポイントし、[新しいアイテム] を選択します。
[新しいアイテムの追加] ダイアログボックスで [Web パーツ] を選択します。名前として「ContextualTabWebPart」と入力します。
Web パーツが追加され、ContextualTabWebPart.cs ファイルが表示されたら、以下のステートメントを追加します。
```
using System.Xml;
using Microsoft.Web.CommandUI;
```
次に、以下のコードに示すように、IWebPartPageComponentProvider インターフェイスを実装します。これについては後で作業します。
```
public class ContextualTabWebPart : WebPart, IWebPartPageComponentProvider
```
次に、リボン XML 用のグローバル文字列変数を 2 つ作成します。この 2 つの変数は、操作別タブとグループテンプレートを定義します。リボン XML の詳細については、「Server リボン XML」を参照してください。

contextualTab 文字列で、ContextualGroup 要素を確認します。この要素は、以下の Tab 要素を操作別タブとして定義します。Color 属性は、タブがレンダリングされるときにタブの色を定義します。Id と ContextualGroupId は、グループ内で一意の識別子です。Sequence 属性は、操作別タブがどこにレンダリングされるかを定義します。以下のコードは 2 つのグローバル文字列変数を実装します。

private string contextualTab = @"
   <ContextualGroup Color=""Magenta"" 
     Command=""CustomContextualTab.EnableContextualGroup"" 
     Id=""Ribbon.CustomContextualTabGroup"" 
     Title=""Custom Contextual Tab Group"" 
     Sequence=""502"" 
     ContextualGroupId=""CustomContextualTabGroup"">
          <Tab 
              Id=""Ribbon.CustomTabExample"" 
              Title=""My Custom Tab"" 
              Description=""This holds my custom commands!"" 
              Command=""CustomContextualTab.EnableCustomTab"" 
              Sequence=""501"">
            <Scaling
              Id=""Ribbon.CustomTabExample.Scaling"">
              <MaxSize
                Id=""Ribbon.CustomTabExample.MaxSize"" 
                GroupId=""Ribbon.CustomTabExample.CustomGroupExample"" 
                Size=""OneLargeTwoMedium""/>
              <Scale 
                Id=""Ribbon.CustomTabExample.Scaling.CustomTabScaling""
                GroupId=""Ribbon.CustomTabExample.CustomGroupExample"" 
                Size=""OneLargeTwoMedium"" />
            </Scaling>
            <Groups Id=""Ribbon.CustomTabExample.Groups"">
              <Group 
                Id=""Ribbon.CustomTabExample.CustomGroupExample"" 
                Description=""This is a custom group!"" 
                Title=""Custom Group"" 
                Command=""CustomContextualTab.EnableCustomGroup"" 
                Sequence=""52"" 
                Template=""Ribbon.Templates.CustomTemplateExample"">
                <Controls 
                  Id=""Ribbon.CustomTabExample.CustomGroupExample.Controls"">
                  <Button 
                    Id=""Ribbon.CustomTabExample.CustomGroupExample.HelloWorld"" 
                    Command=""CustomContextualTab.HelloWorldCommand"" 
                    Sequence=""15"" 
                    Description=""Says hello to the World!"" 
                    LabelText=""Hello, World!"" 
                    TemplateAlias=""cust1""/>
                  <Button 
                    Id=""Ribbon.CustomTabExample.CustomGroupExample.GoodbyeWorld"" 
                    Command=""CustomContextualTab.GoodbyeWorldCommand"" 
                    Sequence=""17"" 
                    Description=""Says good-bye to the World!"" 
                    LabelText=""Good-bye, World!"" 
                    TemplateAlias=""cust2""/>
                </Controls>
              </Group>
            </Groups>
          </Tab>
   </ContextualGroup>";
 
        private string contextualTabTemplate = @"
          <GroupTemplate Id=""Ribbon.Templates.CustomTemplateExample"">
            <Layout 
              Title=""OneLargeTwoMedium"" LayoutTitle=""OneLargeTwoMedium"">
              <Section Alignment=""Top"" Type=""OneRow"">
                <Row>
                  <ControlRef DisplayMode=""Large"" TemplateAlias=""cust1"" />
                </Row>
              </Section>
              <Section Alignment=""Top"" Type=""TwoRow"">
                <Row>
                  <ControlRef DisplayMode=""Medium"" TemplateAlias=""cust2"" />
                </Row>
                <Row>
                  <ControlRef DisplayMode=""Medium"" TemplateAlias=""cust3"" />
                </Row>
              </Section>
            </Layout>
          </GroupTemplate>";

DelayScript という名前の新しい文字列プロパティを作成します。DelayScript には、カスタムページコンポーネントを追加し登録する ECMAScript (JavaScript、JScript) が含まれます。このトピックでは後ほどカスタムページコンポーネントを作成します。_addCustomPageComponent メソッドはカスタムページコンポーネントを作成して、ページマネージャーにそれを追加します。すべての Web パーツがページコンポーネントを持っており、カスタムページコンポーネントオブジェクトを作成するときは Web パーツのページコンポーネント ID を使用します。これは、操作に応じてカスタムのリボンタブに切り替えられるように、Web パーツをページコンポーネントに関連付けるのに必要です。_registerCustomPageComponent メソッドは、ページが読み込まれたとき JavaScript ファイルを登録します。

以下のコードは DelayScript を実装します。

        public string DelayScript 
        {
            get
            {
                string webPartPageComponentId = SPRibbon.GetWebPartPageComponentId(this);
                return @"
<script type=""text/javascript"">
//<![CDATA[
 
            function _addCustomPageComponent()
            {
                var _customPageComponent = new ContextualTabWebPart.CustomPageComponent('" + webPartPageComponentId + @"');
                SP.Ribbon.PageManager.get_instance().addPageComponent(_customPageComponent);
            }
 
            function _registerCustomPageComponent()
            {
                SP.SOD.registerSod(""CustomContextualTabPageComponent.js"", ""\/_layouts\/CustomContextualTabPageComponent.js"");
                SP.SOD.executeFunc(""CustomContextualTabPageComponent.js"", ""ContextualWebPart.CustomPageComponent"", _addCustomPageComponent);
            }
            SP.SOD.executeOrDelayUntilScriptLoaded(_registerCustomPageComponent, ""sp.ribbon.js"");
//]]>
</script>";
            }
        }

AddContextualTab という名前の新しい関数を作成します。AddContextualTab メソッド内に、リボンに操作別タブとカスタムテンプレートを登録するコードを挿入します。RegisterDataExtension(XmlNode, String) メソッドを、リボン拡張機能を登録するために使用します。RegisterDataExtension(XmlNode, String) は、渡された XML を読み込む対象をリボンに対して指定します。CMDUI.xml の ContextualTabs および Templates 要素の ID を使用します。

以下のコードは AddContextualTab メソッドを実装します。

        private void AddContextualTab()
        {
 
            // Get the current instance of the ribbon on the page.
            Microsoft.Web.CommandUI.Ribbon ribbon = SPRibbon.GetCurrent(this.Page);
 
            // Prepare an XmlDocument object used to load the ribbon extensions.
            XmlDocument ribbonExtensions = new XmlDocument();
 
            // Load the contextual tab XML and register the ribbon extension.
            ribbonExtensions.LoadXml(this.contextualTab);
            ribbon.RegisterDataExtension(ribbonExtensions.FirstChild, "Ribbon.ContextualTabs._children");
 
            // Load the custom templates and register the ribbon extension.
            ribbonExtensions.LoadXml(this.contextualTabTemplate);
            ribbon.RegisterDataExtension(ribbonExtensions.FirstChild, "Ribbon.Templates._children");
        }

次に、IWebPartPageComponentProvider インターフェイスの WebPartContextualInfo プロパティを実装する必要があります。インターフェイスを実装するには、[IWebPartPageComponentProvider] を右クリックし、[インターフェイスの実装]、[インターフェイスを明示的に実装] の順に選択します。

このインターフェイスは、リボンに、Web パーツがいつ選択されたか、どのコンテキストグループとタブを表示するかを知らせます。コンテキストグループを追加するとき、ユーザーはそれに対してコンテキストグループ、VisibilityContext、および Command の ID を送ります。ID は、リボン XML の ContextualGroup 要素の Id プロパティにマップされます。VisibilityContext はコントロールのグループの表示と非表示を切り替えるために使用されます。Command パラメーターは、リボン XML の ContextualGroup 要素の Command にマップされます。また、リボン XML で定義されたタブを追加します。そのためには、タブの Id および VisibilityContext パラメーターを渡します。WebPartContextualInfo のための以下のコードを挿入します。

        public WebPartContextualInfo WebPartContextualInfo
        {
            get 
            {
                WebPartContextualInfo info = new WebPartContextualInfo();
                WebPartRibbonContextualGroup contextualGroup = new WebPartRibbonContextualGroup();
                WebPartRibbonTab ribbonTab = new WebPartRibbonTab();
 
                // Create the contextual group object and initialize its values.
                contextualGroup.Id = "Ribbon.CustomContextualTabGroup";
                contextualGroup.Command = "CustomContextualTab.EnableContextualGroup";
                contextualGroup.VisibilityContext = "CustomContextualTab.CustomVisibilityContext";
 
                // Create the tab object and initialize its values.
                ribbonTab.Id = "Ribbon.CustomTabExample";
                ribbonTab.VisibilityContext = "CustomContextualTab.CustomVisibilityContext";
 
                // Add the contextual group and tab to the WebPartContextualInfo.
                info.ContextualGroups.Add(contextualGroup);
                info.Tabs.Add(ribbonTab);
                info.PageComponentId = SPRibbon.GetWebPartPageComponentId(this);
 
                return info;
            }
        }

次に、OnPreRender メソッドを実装します。これにより、ページにレンダリングされる前に、リボンに要素を追加することができます。OnPreRender 内部で AddContextualTab メソッドを呼び出して、DelayScript を ClientScriptManager に登録します。

以下のコードは OnPreRender メソッドを実装します。
```
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
 
            this.AddContextualTab();
 
            ClientScriptManager clientScript = this.Page.ClientScript;
            clientScript.RegisterClientScriptBlock(this.GetType(), "ContextualTabWebPart", this.DelayScript);
 
        }
```
これで Web パーツは完成しました。次に、ページコンポーネントを作成します。

ページコンポーネントの作成

ページコンポーネントは Server リボンを操作するための JavaScript オブジェクトです。ページコンポーネントの詳細なチュートリアルについては、「Server リボンのページコンポーネントを開発する」を参照してください。ページコンポーネントを適切に操作するには、モジュールを使用して、それを %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\\TEMPLATES\LAYOUTS ディレクトリに展開する必要があります。これにより、リボンのコマンドが有効になり、リボン XML で定義したコマンドに応答するようになります。

ページコンポーネントを追加して定義するには

ソリューションエクスプローラーで [ContextualTabWebPart] プロジェクトを右クリックし、[追加] をポイントし、[新しいアイテム] を選択します。
[新しいアイテムの追加] ダイアログボックスで [モジュール] テンプレートを選択し、[名前] として「CustomContextualTabPageComponent」と入力します。[追加] をクリックします。
追加された既定のファイルは不要です。ソリューションエクスプローラーで Elements.xml と Sample.txt を削除します。
次に、JavaScript ファイルを追加する必要があります。[CustomContextualTabPageComponent] を右クリックし、[追加] をポイントし、[新しいアイテム] を選択します。
[インストールされているテンプレート] リストの [Visual C#] の下で [Web] を選択します。[Jscript ファイル] を種類として選択し、名前として「CustomContextualTabPageComponent」と入力します。

展開場所を設定し、ファイルが _layouts ディレクトリに展開されるようにします。それには、ソリューションエクスプローラーで CustomContextualTabPageComponent.js を選択します。[プロパティ] ウィンドウで、[展開の種類] をルートファイルに設定します。[配置場所] プロパティを開いて、[パス] プロパティに「TEMPLATE\LAYOUTS」と入力します。

以下のコードを CustomContextualTabPageComponent.js ファイルに追加して、カスタムページコンポーネントを実装します。

Type.registerNamespace('ContextualTabWebPart');
 
var _webPartPageComponentId;
ContextualTabWebPart.CustomPageComponent = function ContextualTabWebPart_CustomPageComponent(webPartPcId) {
    this._webPartPageComponentId = webPartPcId;
    ContextualTabWebPart.CustomPageComponent.initializeBase(this);
}
ContextualTabWebPart.CustomPageComponent.prototype = {
 
    init: function ContextualTabWebPart_CustomPageComponent$init() {  },
 
    getFocusedCommands: function ContextualTabWebPart_CustomPageComponent$getFocusedCommands() {
        return ['CustomContextualTab.EnableCustomTab', 'CustomContextualTab.EnableCustomGroup', 'CustomContextualTab.HelloWorldCommand', 'CustomContextualTab.GoodbyeWorldCommand'];
    },
 
    getGlobalCommands: function ContextualTabWebPart_CustomPageComponent$getGlobalCommands() {
        return [];
    },
 
    isFocusable: function ContextualTabWebPart_CustomPageComponent$isFocusable() {
        return true;
    },
    
    canHandleCommand: function ContextualTabWebPart_CustomPageComponent$canHandleCommand(commandId) {
        // Contextual Tab commands
        if ((commandId === 'CustomContextualTab.EnableCustomTab') || (commandId === 'CustomContextualTab.EnableCustomGroup') || (commandId === 'CustomContextualTab.HelloWorldCommand') || (commandId === 'CustomContextualTab.GoodbyeWorldCommand')) {
            return true;
        }
    },
 
    handleCommand: function ContextualTabWebPart_CustomPageComponent$handleCommand(commandId, properties, sequence) {
 
        if (commandId === 'CustomContextualTab.HelloWorldCommand') {
            alert('Hello, world!');
        }
        if (commandId === 'CustomContextualTab.GoodbyeWorldCommand') {
            alert('Good-bye, world!');
        }
    },
 
    getId: function ContextualTabWebPart_CustomPageComponent$getId() {
        return this._webPartPageComponentId;
    }
}
 
 
ContextualTabWebPart.CustomPageComponent.registerClass('ContextualTabWebPart.CustomPageComponent', CUI.Page.PageComponent);
SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs("CustomContextualTabPageComponent.js");

カスタマイズの展開

プロジェクトは Visual Studio 2010 の SharePoint 開発者ツールによって自動的に展開されます。アプリケーションプールは、展開プロセスの一環として自動的にリセットされます。

Web パーツを展開するには

F5 キーを押します。Visual Studio 2010 の SharePoint 開発者ツールによって、Web パーツと JavaScript ファイルが自動的にビルドおよび展開されます。
ユーザーのサイトに移動します。
[編集] ボタンをクリックします。
[挿入] タブの、[Web パーツ] ボタンをクリックします。
[カテゴリ] で、[Custom] を選択します。
Web パーツのリストで [ContextualTabWebPart] を選択し、[追加] をクリックします。
Web パーツがページに追加されたら、ContextualTabWebPart Web パーツをクリックします。
[Custom Contextual Tab Group] タブが表示されたことを確認してください。

次の方法で共有

操作別タブでカスタム Web パーツを作成する

前提条件

SharePoint プロジェクトの作成

SharePoint プロジェクトを作成するには

Web パーツの実装

Web パーツを実装するには

ページコンポーネントの作成

ページコンポーネントを追加して定義するには

カスタマイズの展開

Web パーツを展開するには

関連項目

概念

その他のリソース

次の方法で共有

操作別タブでカスタム Web パーツを作成する

前提条件

SharePoint プロジェクトの作成

SharePoint プロジェクトを作成するには

Web パーツの実装

Web パーツを実装するには

ページ コンポーネントの作成

ページ コンポーネントを追加して定義するには

カスタマイズの展開

Web パーツを展開するには

関連項目

概念

その他のリソース

ページコンポーネントの作成

ページコンポーネントを追加して定義するには