Web コンテンツ管理サイト用に SharePoint Server 2007 ユーザー設定のマスタ ページとページ レイアウトを作成する方法

概要 : コード サンプルを挙げた手順に従って、最小限のマスタ ページに基づいたユーザー設定のマスタ ページと関連ページ レイアウトを作成する方法を学びます。

Avneesh Kaushik, Microsoft Global Services India (MGSI)

2007 年 9 月

適用対象 : Microsoft Office SharePoint Designer 2007、Microsoft Office SharePoint Server 2007

目次

  • Web コンテンツ管理、マスタ ページ、およびページ レイアウトの概要

  • マスタ ページのカスタマイズ

  • ユーザー設定のマスタ ページを作成する一般的な手順

  • ページ レイアウトのカスタマイズ

  • ユーザー設定のコンテンツ タイプと公開フィールドの使用

  • RichHtmlField コントロールによる HTML コンテンツの追加

  • マスタ ページとページレイアウトを機能としてサイト コレクションに展開する

  • Web コンテンツ管理サイトのパフォーマンスの最適化

  • プレゼンス インジケータの無効化

  • Microsoft Office system との統合をオフにする

  • まとめ

  • 追加情報

  • 著者について

Web コンテンツ管理、マスタ ページ、およびページ レイアウトの概要

Web コンテンツ管理 (WCM) サイトの重要な機能の 1 つは、その "外観"、つまりブランド化です。Microsoft Office SharePoint Server 2007 サイトのユーザー インターフェイス (UI) は、マスタ ページ、ページ レイアウト、イメージ、カスケード スタイル シートなど、いくつかの主要コンポーネントに依存しています。サイトを個性的な外観にして優れたユーザー エクスペリエンスを実現するには、Office SharePoint Server に即してこれらのコンポーネントを理解する必要があります。また、マスタ ページとレイアウトを適切にカスタマイズまたは設計する方法を理解することも有益です。これらは作成体験やサイト メンテナンス作業に影響するためです。この記事のコード サンプルは最小限のマスタ ページを基に作成されています。実際には Office SharePoint Server の展開に応じて高度なカスタマイズを追加することになります。

マスタ ページのカスタマイズ

マスタ ページをカスタマイズしてサイト コレクションに追加する方法はいくつもあります。Office SharePoint Server 2007 発行ポータル テンプレートのマスタ ページ ギャラリーには、いくつかのマスタ ページが用意されています。このマスタ ページは完全にカスタマイズすることも、このマスタ ページからユーザー設定のマスタ ページを作成して、サイト固有のブランドを作ることもできます。サイト コレクションのマスタ ページには、Web インターフェイスから直接、または Microsoft Office SharePoint Designer 2007 を使用して、新しいユーザー設定のマスタ ページを追加できます。また、Features 機能を使用して、サイト コレクションのマスタ ページ ギャラリーにユーザー設定のマスタ ページを追加することもできます。Office SharePoint Server 2007 では、特定の最小設定のプレースホルダとコントロールが機能するマスタ ページが必要です。これらのプレースホルダ要素とコントロール要素はタイトル、ブランド、ログオン機能、およびナビゲーションを含み、基本的な必須構造要素はページ範囲、区切り文字、境界線、コンソール、および説明のプレースホルダを含みます。必須プレースホルダの中には、検索機能や階層リンク機能など、表示がオプションのものもあります。

マスタ ページは、Office SharePoint Designer 2007 などのテキスト エディタや Web エディタ、または Microsoft Visual Studio 2005 などの統合開発環境 (IDE) を使用して作成できます。次のコード例は、ユーザー設定のマスタ ページを示しています。最小構成のマスタ ページに基づくユーザー設定のマスタ ページは、ビルトイン マスタ ページを変更せずに作成できます。ページを作成した後、サイト コレクションに追加します。サイト コレクションに追加されると、他のマスタ ページで使用できるようになります。必要に応じて、サイト全体に新しいマスタ ページを選択することも、ページごとに選択することもできます。Office SharePoint Server は、core.js、core.css、init.js などのクライアントに送信されるページにいくつかのファイルを追加します。これらのファイルの扱い方については、「[方法] SharePoint Server 2007 Web コンテンツ管理サイトのパフォーマンスを最適化する」で説明します。

カスケード レイアウト シートを含む、ユーザー設定のマスタ ページとページ レイアウトを作成して、作業環境に展開する方法はいくつかあります。どのアプローチも長所と短所があります。どのアプローチを選択するかで、これらのリソースを展開してバックアップする方法が変わります。たとえば、ユーザー設定のマスタ ページを Office SharePoint Designer を使用して開発し、それを Feature として展開することができます。以下のセクションでは、2 つのアプローチについて説明します。

アプローチ 1: SharePoint Designer を使用する

SharePoint Designer を使用してユーザー設定のマスタ ページを作成できますが、カスタマイズした後、これは SharePoint コンテンツ データベースの一部となります。複数の環境に対応するために、コンテンツ データベースが共有されている各フロントエンド Web サーバーで変更が自動的に反映されます。さらに、マスタ ページを変更するたびに、完全なチェックイン/チェックアウト プロセスを実行する必要があります。このアプローチはコントロール面が優れていますが、開発環境のパフォーマンスが低下することがあります。ただし、SharePoint Designer では Microsoft IntelliSense を利用できます。

アプローチ 2: Visual Studio またはテキスト エディタを使用する

IntelliSense を使用しないマスタ ページの開発は若干難しくなることがあります。ただし、Microsoft Visual Studio 2005 で開発するページは、機能 (次のセクションで説明します) として展開できます。 ページはディス上にあるため、テキスト エディタを使用して追加的に変更できます。別の環境間での変更の移動は、単純なコピー/貼り付け操作ですが、フロントエンド Web サーバーごとに繰り返す必要があり、自動化はされません。また、これらのページはカスタマイズされません。チェックインやチェックアウトなど、すべてのバージョン管理機能も利用できません。

ユーザー設定のマスタ ページを作成する一般的な手順

Office SharePoint Designer、Visual Studio、テキスト エディタのいずれを使用する場合でも、ユーザー設定のマスタ ページとページ レイアウトを作成する一般的な手順は同じです。以下は、典型的な WCM サイトに対してマスタ ページ宣言を作成するための一般的な手順とコード例を示したものです。

ユーザー設定のマスタ ページを作成するには、次の手順に従ってください。

  1. Office SharePoint Designer、Visual Studio、またはテキスト エディタを開きます。

  2. 次のコード (セクション 1a) をコピーしてマスタ ページの宣言部を作成します。次のコード例は、一般的な WCM サイトのマスタ ページ宣言部です。マスタページ レベルでユーザー設定ナビゲーション コントロールなどのカスタム コントロールが必要な場合は、この宣言部に宣言を追加する必要があります (セクション 1b を参照)。

    注意

    次のコード例は、オンライン表示の便宜上改行 を含みます。コードを実行する前に改行を削除する必要があります。

    セクション 1a. 宣言

    <%-- Identifies this page as a .master page written in Microsoft Visual C#, 
    and registers tag prefixes, namespaces, assemblies, and controls. --%>
    <%@ Master language="C#" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <%@ Import Namespace="Microsoft.SharePoint" %>
    <%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" 
    Assembly="Microsoft.SharePoint.Portal, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" 
    Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, 
    PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" 
    Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, 
    PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" 
    Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, 
    PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" 
    Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, 
    PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/Welcome.ascx" %>
    <%@ Register TagPrefix="wssuc" TagName="DesignModeConsole" src="~/_controltemplates/DesignModeConsole.ascx" %>
    <%@ Register TagPrefix="PublishingVariations" TagName="VariationsLabelMenu" src="~/_controltemplates/VariationsLabelMenu.ascx" %>
    <%@ Register Tagprefix="PublishingConsole" TagName="Console" src="~/_controltemplates/PublishingConsole.ascx" %>
    <%@ Register TagPrefix="PublishingSiteAction" TagName="SiteActionMenu" src="~/_controltemplates/PublishingActionMenu.ascx" %>
    <%-- Uses the Microsoft Office namespace and schema. --%>
    
  3. セクション 1 b に示すとおり、ユーザー コントロール (.ascx ファイル) を controltemplates ディレクトリに追加します。

    セクション 1b. カスタム コントロールの宣言

    <%@ Register TagPrefix="MyCustomNav" TagName="Navigation" Src="~/_controltemplates/MyCustNav.ascx" %>
    <%@ Register TagPrefix="MyCustomFooter" TagName="Footer" Src="~/_controltemplates/MyCustFooter.ascx" %>
    
  4. ヘッダー セクションには、簡易リンク <html> タグまたは <SharePoint:CssRegistration> タグを使用することでユーザー設定カスケード スタイル シートを追加できます。後者のアプローチでは、現在のサイトの URL を返す SPUrl の使用を選択できるため、いくつかの利点があります。コードをセクション 2 に追加します (必要な場合は, .css ファイルに名前を変更)。また、ユーザー設定 css ファイルがスタイル ライブラリにアップロードされることを確認します。core.css スタイルを上書きする方法の詳細については、 CSS Options with Master Pages を参照してください。

    注意

    次のコード例は、オンライン表示の便宜上改行 を含みます。コードを実行する前に改行を削除する必要があります。

    セクション 2. ヘッダー

    <html>
      <WebPartPages:SPWebPartManager runat="server"/>
      <SharePoint:RobotsMetaTag runat="server"/>
    
      <%-- The head section includes a content placeholder for the page title and links to CSS and ECMAScript (JScript, JavaScript) 
         files that run on the server. --%>
      <head runat="server">
        <asp:ContentPlaceHolder runat="server" id="head">
          <title>
            <asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server" />
          </title>
        </asp:ContentPlaceHolder>
        <Sharepoint:CssLink runat="server"/>
        <!-- Product Group Custom Styles -->
        <%--SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/PG/PG.css%>" runat="server"/--%>
        <link type="text/css" rel="stylesheet" href="/_layouts/1033/styles/PG/PG.css" />    
        <!-- End Product Group Custom Styles -->
        <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server" />
      </head>
    
    
  5. 以下のコードをコピーして追加します。本文セクションは、[サイトの操作] メニューを含む本文、ログオン コントロール、公開コンソール コントロール、ナビゲーション コントロール、およびレイアウトで定義されるメイン コンテンツ プレースホルダやコンテンツ エリアで構成されています。

    注意

    次のコード例は、オンライン表示の便宜上改行 を含みます。コードを実行する前に改行を削除する必要があります。

    セクション 3a. 本文

    <%-- When loading the body of the .master page, Office SharePoint Server 2007 also loads the SpBodyOnLoadWrapper class. This class handles .js calls 
       for the master page. --%>
      <body onload="javascript:_spBodyOnLoadWrapper();">
        <%-- The SPWebPartManager manages all of the Web part controls, functionality, and events that occur on a Web page. --%>
        <form id="Form1" runat="server" onsubmit="return _spFormOnSubmitWrapper();">
    
        <!-- Master DIV -->
        <div id="masterbody">
            <!-- Master Header -->
            <div id="MasterHeader">
                <div class="authoringRegion1">
                    <div class="sharepointLogin"><wssuc:Welcome id="explitLogout" runat="server"/></div>
                    <span class="siteActionMenu"><PublishingSiteAction:SiteActionMenu runat="server"/></span>
                    <PublishingWebControls:AuthoringContainer 
                       id="authoringcontrols" runat="server">
                          <PublishingConsole:Console runat="server" /> 
                    </PublishingWebControls:AuthoringContainer>
                </div>
            </div>
            <!-- Left Body for Navigation -->
            <div id="LeftNavBody"><asp:ContentPlaceHolder 
               id="PlaceHolderLeftNavBar" runat="server"/>
            </div>
            <div id="leftnavspacer"><!-- Spacer -->
            </div>
            <!-- Content Body -->
            <div id="StagingBody">            
                  <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server" />            
            </div>
            <!-- Footer Area -->
            <div id="Footer"></div>
        </div>
    
  6. 以下のコードをコピーして追加します。通常、このセクションは表示されませんが、Office SharePoint Server が適切に動作するために必要なプレースホルダで構成されています。<div> タグを display:none で使用して、パネルを使用する代わりにこのセクションを非表示にすることもできます。

    注意

    次のコード例は、オンライン表示の便宜上改行 を含みます。コードを実行する前に改行を削除する必要があります。

    セクション 3b. Office SharePoint Server で必要なプレースホルダの本文

    <%-- The PlaceHolderMain content placeholder defines where to place 
    the page content for all the content from the page layout. The page 
    layout can overwrite any content placeholder from the master page. 
    Example: The PlaceHolderLeftNavBar can overwrite the left navigation bar. --%>
    
            <asp:Panel visible="false" runat="server">
            <%-- These ContentPlaceHolders ensure all default Office SharePoint Server pages 
    render with this master page. If the system master page is set to 
    any default master page, the only content placeholders required are
     those that are overridden by your page layouts. --%>
                <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server"/>
                <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server"/>
                <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea"  runat="server"/>            
                <asp:ContentPlaceHolder ID="PlaceHolderPageImage" runat="server"/>
                <asp:ContentPlaceHolder ID="PlaceHolderBodyLeftBorder" runat="server"/>
                <asp:ContentPlaceHolder ID="PlaceHolderNavSpacer" runat="server"/>
                <asp:ContentPlaceHolder ID="PlaceHolderTitleLeftBorder" runat="server"/>
                <asp:ContentPlaceHolder ID="PlaceHolderTitleAreaSeparator" runat="server"/>
                <asp:ContentPlaceHolder ID="PlaceHolderMiniConsole" runat="server"/>
                <asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" runat ="server" />
                <asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat ="server"/>
                <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat ="server"/>
                <asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat ="server"/>
                <asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat ="server"/>
                <asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" runat="server"/>
             </asp:Panel>
        </form>
      </body>
    </html>    
    

これでユーザー設定のマスタ ページの作成手順は終了です。マスタ ページを保存して続行してください。

ページ レイアウトのカスタマイズ

ページ レイアウトは WCM サイト内のマスタ ページのメイン プレースホルダやコンテンツの外観を定義します。プレースホルダは必要なだけ設定でき、ASP.NET プレースホルダに適用される一般的なルールに従っていれば、プレースホルダの設計に制限はありません。Office SharePoint Server 公開フィールド コントロールと Web パーツはどような組み合わせでも使用できます。最も頻繁に使用されるコントロールは RichHtmlField 公開コントロールとコンテンツ エディタ Web パーツです。これらのコントロールと Web パーツを使用したレイアウトの設計が意味することを理解することが重要です。個人用設定 (ユーザーが表示する Web パーツを選択する、Web パーツをドラッグ アンド ドロップしてページの外観を変更するなどの機能) など、業務上の必要性がない限り、Web パーツではなくフィールドを常に使用することをお勧めします。これは、Web パーツのコンテンツ変更はバージョン管理されないため、ロールバックできず、校正されないためです (たとえば、コンテンツの作成者はテキストにスクリプトを追加できます)。Web パーツ ゾーンをレイアウトに追加して、作成者や閲覧者が Web パーツをドラッグすることでレイアウトの外観を一部変更可能にすることができます。Web パーツと比べると、公開フィールドは Office SharePoint Server の WCM システムによってバージョン管理され、簡単に比較したりロールバックすることができます。公開フィールドにはページとコンテンツの 2 種類があります。既存の公開フィールド コントロールをカスタマイズすることもできますが、必要に応じて baseField コントロールから派生させることによって公開フィールド コントロールを作成できます。 また、公開フィールドを設定して、フォントの設定やテーブルの追加をコントロールするなどの作成オプションを制限できます。

以下の 2 つのコード例は、コンテンツ エディタ Web パーツまたはフィールドを使用してこれらのレイアウトを設計する方法を示しています。レイアウトには、両方のタイプのコントロールを組み合わせて含めることもできます。

ページ レイアウトを設計するには、次の手順に従ってください。

  1. SharePoint Designer やテキスト エディタなどのエディタを開くか、Visual Studio を開きます。

  2. 次の一般的なヘッダー コードをコピーします。

    注意

    次のコード例は、オンライン表示の便宜上改行 を含みます。コードを実行する前に改行を削除する必要があります。

    セクション 4. 一般的なヘッダー

    <%@ Page language="C#"   Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,
    Microsoft.SharePoint.Publishing,Version=12.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" 
    Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, 
    PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" 
    Assembly="Microsoft.SharePoint, Version=12.0.0.0, 
    Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" 
    Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, 
    Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" 
    Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, 
    Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    
  3. 次のコード例 (セクション 5) の SharePoint RichHTMLField 公開コントロールに注目します。セクション 5 では、公開フィールドのみが使用されているため、個人用設定は許可されていません (これは対象ユーザーの設定を含みません)。セクション 5 のコードをコピーして追加してください。または Web パーツベースのレイアウトを作成して、コードをセクション 6 にコピーしてください。

    注意

    ページに追加するフィールドを収容できるユーザー設定のコンテンツ タイプを作成する必要があることを理解しておくことが非常に重要です。既定では、既定のページ コンテンツ タイプに基づくページに追加できるフィールドは 1 だけです。その他のタグはすべて書式設定に必要な簡易 HTML タグです。

    セクション 5. フィールド コントロールのみのレイアウト

    <asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
       <style type="text/css">
          .ms-pagetitleareaframe table, .ms-titleareaframe {background: none;   height: 10px;   overflow:hidden;}
          .ms-pagetitle, .ms-titlearea {display:none;}
       </style>
          PublishingWebControls:editmodepanel runat="server" id="editmodestyles">
             <!-- Styles for edit mode only.-->
          <SharePointWebControls:CssRegistration 
    name="<% $SPUrl:~sitecollection/Style Library/~language/Core  Styles/zz2_editMode.css %>"   runat="server"/>
       </PublishingWebControls:editmodepanel>
    </asp:Content>
    <asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
       <SharePointWebControls:FieldValue id="HomePageTitleInTitleArea" FieldName="Title" runat="server" />
    </asp:Content>
    <asp:Content ContentPlaceHolderID="PlaceHolderLeftNavBar" runat="server">
        <PublishingWebControls:RichHtmlField id="TopLeftContent" FieldName="PGPageTopLeftContent" runat="server"/>                                
    </asp:Content>
    <asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
        <SharePointWebControls:CssRegistration 
    name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/pageLayouts.css %>" runat="server"/>
        <table cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td valign="Top">
                    <div id="StageContent">
                    <table cellpadding="0" cellspacing="0" width="100%" border="0">
                        <tr>
                            <td colspan="2"> <div id="ContentPageTitleArea">
                                    <PublishingWebControls:RichHtmlField id="TopTitleContent" 
    FieldName="PGPageTopContent" runat="server"/>                                
                            </div> </td>
                        </tr>
                        <tr>
                            <td valign="top"> <div id="ContentMiddleArea">
                                    <PublishingWebControls:RichHtmlField id="LeftTitleContent"
     FieldName="PGPageBottomLeftContent" runat="server"/>
                                </div> </td>
                            <td valign="top"> <div id="ContentRightArea">
                                    <PublishingWebControls:RichHtmlField id="RightTitleContent" 
    
    
       FieldName="PGPageBottomRightContent" runat="server"/>
                                </div> </td>
                        </tr>
                        <tr>
                            <td colspan="2"><div id="ContentPageTitleArea">
                                    <PublishingWebControls:RichHtmlField id="BottomTitleContent" 
    
    
       FieldName="PGPageBottomContent" runat="server"/>
                                </div> </td>
                        </tr>
                    </table>
    
                    </div>
                </td>                    
            </tr>
         </table>
    
       <PublishingWebControls:editmodepanel runat="server" id="editmodepanel1">
          <!-- Add field controls here to bind custom metadata viewable and editable in edit mode only.-->
          <table cellpadding="10" cellspacing="0" align="center" class="editModePanel">
             <tr>
                <td><SharePointWebControls:TextField runat="server" id="TitleField" FieldName="Title"/></td>
             </tr>
          </table>
    
       </PublishingWebControls:editmodepanel>
    </asp:Content>
    <asp:Content ContentPlaceholderID="PlaceHolderTitleBreadcrumb" runat="server"/>
    <asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server" />
    <asp:Content ContentPlaceholderID="PlaceHolderNavSpacer" runat="server" />
    

    セクション 6. Web パーツ ゾーンのレイアウト (コンテンツ エディタ Web パーツは設計時または実行時にゾーンに追加できます)

    <asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
       <style type="text/css">
          .ms-pagetitleareaframe table, .ms-titleareaframe
          {
             background: none;height: 10px;overflow:hidden;
          }
          .ms-pagetitle, .ms-titlearea
          {
             display:none;
          }
       </style>
       <PublishingWebControls:editmodepanel runat="server" id="editmodestyles">
             <!-- Styles for edit mode only.-->
             <SharePointWebControls:CssRegistration 
    name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/zz2_editMode.css %>" runat="server"/>
       </PublishingWebControls:editmodepanel>
    </asp:Content>
    <asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
       <SharePointWebControls:FieldValue id="HomePageTitleInTitleArea" FieldName="Title" runat="server" />
    </asp:Content>
    <asp:Content ContentPlaceHolderID="PlaceHolderLeftNavBar" runat="server">
        <WebPartPages:WebPartZone runat="server" AllowPersonalization="false" ID="LeftNavZone" FrameType="None"
                                                        Title="LeftNavZone" Orientation="Vertical" />
    </asp:Content>
    <asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
        <SharePointWebControls:CssRegistration 
    name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/pageLayouts.css %>" runat="server"/>
        <table cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td valign="Top">
                    <div id="StageContent">
                    <table cellpadding="0" cellspacing="0" width="100%" border="0">
                        <tr>
                            <td colspan="2"> <div id="ContentPageTitleArea">
                                    <WebPartPages:WebPartZone runat="server" AllowPersonalization="false" 
    ID="PageTitleZone" FrameType="None"   Title="PageTitleZone" Orientation="Vertical" />
                                </div></td>
                        </tr>
                        <tr>
                            <td valign="top"> <div id="ContentMiddleArea">
                                    <WebPartPages:WebPartZone runat="server" AllowPersonalization="false" 
    ID="MiddleZone" FrameType="None" Title="MiddleZone" Orientation="Vertical" />
                                </div></td>
                            <td valign="top"> <div id="ContentRightArea">
                                    <WebPartPages:WebPartZone runat="server" AllowPersonalization="false" 
    ID="RightZone" FrameType="None" Title="RightZone" Orientation="Vertical" />
                                </div> </td>
                        </tr>
                        <tr>
                            <td colspan="2"> <div id="ContentPageTitleArea">
                                    <WebPartPages:WebPartZone runat="server" AllowPersonalization="false" 
    ID="BottomZone" FrameType="None" Title="BottomZone" Orientation="Vertical" />
                                </div> </td>
                        </tr>
                    </table>
    
                    </div>
                </td>                    
            </tr>
         </table>
    
       <PublishingWebControls:editmodepanel runat="server" id="editmodepanel1">
          <!-- Add field controls here to bind custom metadata viewable and editable in edit mode only.-->
          <table cellpadding="10" cellspacing="0" align="center" class="editModePanel">
             <tr><td><SharePointWebControls:TextField runat="server" id="TitleField" FieldName="Title"/></td></tr>
          </table>
    
       </PublishingWebControls:editmodepanel>
    </asp:Content>
    <asp:Content ContentPlaceholderID="PlaceHolderTitleBreadcrumb" runat="server"/>
    <asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server" />
    <asp:Content ContentPlaceholderID="PlaceHolderNavSpacer" runat="server" />
    
  4. ページ レイアウトを保存します。

図 1 は、前のマスタ ページとレイアウトを両方のケースでどのように構造化されているかを示しています。

図 1. マスタ ページとレイアウトのワイヤフレーム構造

マスタ ページとレイアウトのワイヤーフレーム構造

ユーザー設定のコンテンツ タイプと公開フィールドの使用

コンテンツ タイプとは何か、そしてどのようにカスタマイズするのかを理解することが重要です。フィールド コントロール (Office SharePoint Server のビルトイン タイプではない) の使用を計画している場合は、ユーザー設定のコンテンツ タイプを作成する必要があります。

コンテンツ タイプは、Office SharePoint Server のコンテンツを定義する一連の列です。用意された既定の列を使用するか、ユーザー設定のコンテンツ タイプのユーザー設定の列を作成できます。以下の場合、まず公開タイプ列のいずれかに基づいた新しいサイト列を作成します。公開列に基づいた列を作成した後、ページ コンテンツ タイプに基づいて新しいコンテンツ タイプを作成し、これに新しい列を追加できます。その後、今コンテンツ タイプをレイアウトで使用できます。

コンテンツ タイプに追加された各ユーザー設定の列は、レイアウト内で公開フィールドとして表示できます。前述のページ レイアウトについては、いくつかのユーザー設定の列とユーザー設定のタイプをサイト コレクションに追加する必要があります。次のコード例に示すように、機能を使用することで必須列とユーザー設定のコンテンツを前のレイアウト (フィールドのみの) 用にファイルに追加できます。または、同じものを SharePoint Designer または Web インターフェイスを介して手動で追加することもできます。

注意

次のコード例は、オンライン表示の便宜上改行 を含みます。コードを実行する前に改行を削除する必要があります。

セクション 8a. ユーザー設定のフィールドを追加するための Customfields.xml

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<!-- REORG: Shared Among All Base Types. -->
<Field ID="{CC295F9D-D301-44bb-8929-F56BB9085E59}" 
Name="PageTopLeftContent" 
SourceID="http://schemas.microsoft.com/sharepoint/v3" 
StaticName="HAPageTopLeftContent" Group="Custom Site Columns" 
Type="HTML" DisplayName="PageTopLeftContent" 
Required="FALSE" Sealed="TRUE" RichText="TRUE" RichTextMode="FullHtml"/>
<Field ID="{1F5EC9F7-97FD-4bee-8D4E-CB7A1B142FF3}" 
Name="PageBottomLeftContent" 
SourceID="http://schemas.microsoft.com/sharepoint/v3" 
StaticName="PageBottomLeftContent" Group="Custom Site Columns" 
Type="HTML" DisplayName="PageBottomLeftContent" 
Required="FALSE" Sealed="TRUE" 
RichText="TRUE" RichTextMode="FullHtml"/>
<Field ID="{682FB0A4-4C28-4128-9DE2-FE6B7F9E6D12}" 
Name="PageTopMiddleContent" 
SourceID="http://schemas.microsoft.com/sharepoint/v3" 
StaticName="PageTopMiddleContent" Group="Custom Site Columns" 
Type="HTML" DisplayName="HAPageTopMiddleContent" 
Required="FALSE" Sealed="TRUE" 
RichText="TRUE" RichTextMode="FullHtml"/>
<Field ID="{CC00E18B-9F1C-4732-B600-F83DBCECDD5D}" 
Name="PageBottomMiddleContent" 
SourceID="http://schemas.microsoft.com/sharepoint/v3" 
StaticName="PageBottomMiddleContent" Group="Custom Site Columns" 
Type="HTML" DisplayName="PageBottomMiddleContent" 
Required="FALSE" Sealed="TRUE" RichText="TRUE" RichTextMode="FullHtml"/>
   <Field ID="{EB024A2C-289D-464b-8354-110ACA14F518}" 
   Name="PageTopRightContent" 
   SourceID="http://schemas.microsoft.com/sharepoint/v3" 
   StaticName="PageTopRightContent" Group="Custom Site Columns" 
   Type="HTML" DisplayName="PageTopRightContent" Required="FALSE" 
   Sealed="TRUE" RichText="TRUE" RichTextMode="FullHtml"/>
   <Field ID="{39B61F26-FC77-4123-B244-1985DC216DED}" 
   Name="PageBottomRightContent" 
   SourceID="http://schemas.microsoft.com/sharepoint/v3" 
   StaticName="PageBottomRightContent" Group="Custom Site Columns" 
   Type="HTML" DisplayName="PageBottomRightContent" Required="FALSE" 
   Sealed="TRUE" RichText="TRUE" RichTextMode="FullHtml"/>
   <Field ID="{EF1AFA93-78C7-4678-AB64-517D9A2091F2}" 
   Name="PageTopContent" 
   SourceID="http://schemas.microsoft.com/sharepoint/v3" 
   StaticName="PageTopContent" Group="Custom Site Columns" Type="HTML" 
   DisplayName="PageTopContent" Required="FALSE" Sealed="TRUE" 
   RichText="TRUE" RichTextMode="FullHtml"/>
   <Field ID="{764E8753-4A3F-4f79-89F1-3942A6B9171D}" 
   Name="PageBottomContent" 
   SourceID="http://schemas.microsoft.com/sharepoint/v3" 
   StaticName="PageBottomContent" Group="Custom Site Columns" 
   Type="HTML" DisplayName="PageBottomContent" Required="FALSE" 
   Sealed="TRUE" RichText="TRUE" RichTextMode="FullHtml"/>
    <!-- End DC Fields. -->
</Elements>

セクション 8b. ユーザー設定のフィールドを追加するための Feature.xml

<?xml version="1.0" encoding="utf-8"?>
<Feature  Id="BBCDD530-0159-4a4a-AB0A-54DDA9E05CDE"
          Title="Custom Column Definitions"
          Description="Provides Custom column definitions for a site collection."
          Version="12.0.0.0"
          Hidden="FALSE"
          Scope="Site"
          DefaultResourceFile="core"          
          xmlns="http://schemas.microsoft.com/sharepoint/">
    <ElementManifests>
        <ElementManifest Location="Customfields.xml"/>
    </ElementManifests>
</Feature>

セクション 9a. ユーザー設定のコンテンツ タイプを追加するための CustomContenttype.xml

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <ContentType ID="0x01010900EAE1B229763B4408940D3ED34CF408BF" 
    Name="Custom Page" Group="Custom Page Content Type" 
    Description="Designed to facilitate the storage of publishing 
    information." Version="0">
        <FieldRefs>
      <FieldRef ID="{CC295F9D-D301-44bb-8929-F56BB9085E59}" Name="PageTopLeftContent"  />
         <FieldRef ID="{1F5EC9F7-97FD-4bee-8D4E-CB7A1B142FF3}" Name="PageBottomLeftContent"  />
         <FieldRef ID="{682FB0A4-4C28-4128-9DE2-FE6B7F9E6D12}" Name="PageTopMiddleContent"  />
         <FieldRef ID="{CC00E18B-9F1C-4732-B600-F83DBCECDD5D}" Name="PageBottomMiddleContent" />
         <FieldRef ID="{EB024A2C-289D-464b-8354-110ACA14F518}" Name="PageTopRightContent"  />
         <FieldRef ID="{39B61F26-FC77-4123-B244-1985DC216DED}" Name="PageBottomRightContent"  />
         <FieldRef ID="{EF1AFA93-78C7-4678-AB64-517D9A2091F2}" Name="PageTopContent"  />
         <FieldRef ID="{764E8753-4A3F-4f79-89F1-3942A6B9171D}" Name="PageBottomContent" />
        </FieldRefs>
    </ContentType>
</Elements>

セクション 9b. ユーザー定義のコンテンツを追加するための features.xml

<?xml version="1.0" encoding="utf-8"?>
<Feature  Id="CE9ECBE9-6D9D-424a-B92A-5199DB457516"
          Title="Custom Content Type Definitions"
          Description="Provides Custom content type definitions for a site collection."
          Version="12.0.0.0"
          Scope="Site"
          Hidden="FALSE"
          DefaultResourceFile="core"
          xmlns="http://schemas.microsoft.com/sharepoint/">
    <ElementManifests>
        <ElementManifest Location="CustomContentType.xml" />
    </ElementManifests>
   <ActivationDependencies>
      <!-- Installz the site columns that hold Hawaiian data -->
      <ActivationDependency FeatureId="BBCDD530-0159-4a4a-AB0A-54DDA9E05CDE"/>
   </ActivationDependencies>
</Feature>

RichHtmlField コントロールによる HTML コンテンツの追加

上記のサンプル レイアウトでは RichHtmlField コントロールが使用されています。このフィールド コントロールは、最もよく使われているコントロールの 1 つであり、HTML コンテンツは公開ページに追加できます。この HTML エディタのフィールド コントロールは、ユーザー設定スタイル、編集制約、再利用可能なコンテンツ サポート、およびアセット ピッカー (ドキュメントとイメージを選択してページのコンテンツに挿入) の使用など、特殊な機能を提供しています。

次のコード例は、RichHtmlField コントロールをページ レイアウトに追加するために使用する構文を示します。

<PublishingWebControls:RichHtmlField id="ArticleAbstract" FieldName="ArticleAbstract" 
          AllowExternalUrls="false" 
          AllowFonts="true" 
          AllowReusableContent="false" 
          AllowHeadings="false"
          AllowHyperlinks="false"
          AllowImages="false"
          AllowLists="false"
          AllowTables="false"
          AllowTextMarkup="false" 
          AllowHTMLSourceEditing="false"
          DisalbeBasicFormattingButtons="false"
          runat="server"/>

図 2. 公開フィールド

発行フィールド

表 1. 公開フィールドの属性

属性

説明

AllowExternalUrls

リンクまたはイメージ内で参照できるのは、現在のサイト コレクション内の URL のみです。

AllowFonts

コンテンツは Font タグを含むことができます。

AllowReusableContent

コンテンツは、集中リストに保存された再利用可能なコンテンツ フラグメントを含むことができます。

AllowHeadings

コンテンツは、固定見出しタグ (例: H1、H2) を含むことができます。

AllowTextMarkup

コンテンツは、太字、斜体、下線付きテキストを含むことができます。

AllowImages

コンテンツはイメージを含むことができます。

AllowLists

コンテンツは、番号付きリストまたは箇条書きを含むことができます。

AllowTables

コンテンツは、<table>、<tr>、<td> などのテーブル関連タグを含むことができます。

AllowHyperlinks

コンテンツはその他の URL へのリンクを含むことができます。

AllowHtmlSourceEditing

false に設定した場合、HTML エディタは HTML ソース編集モードへの切り替えが無効化されます。

DisableBasicFormattingButtons

true に設定された場合、ほとんどの基本書式設定ボタンが無効化されます。

マスタ ページとページレイアウトを機能としてサイト コレクションに展開する

マスタ ページ、ページ レイアウト、およびユーザー設定コンテンツ タイプは、機能として作成して、サイト コレクションに追加できます。その後、あらゆるビルトイン マスタ ページに関してサイト コレクションで使用できるようになります。

注意

マスター ページとレイアウトを機能としてサイトに追加する方法の詳細な手順は、サイト コレクションで使用するためにサーバーにマスター ページを作成して保存する方法に関する記述を参照してください。

Web コンテンツ管理サイトのパフォーマンスの最適化

パフォーマンスに影響するマスタ ページとページ レイアウトの設計中には、用意するべきその他のオプションがいくつかあります。Office SharePoint Server によって自動的にページ ペイロードに追加されるファイルの中には、core.js (圧縮解除時最大 250 KB、圧縮時最大 57 KB compressed) を含むものがあります。 ユーザー設定コントロールを適切にコード化し、ビュー状態などの機能は必要な場合にのみ有効化することは極めて重要です。これらについては、[方法] SharePoint Server 2007 Web コンテンツ管理サイトのパフォーマンスを最適化するに関する記述でより詳しく説明します。

プレゼンス インジケータの無効化

Office SharePoint Server 2007 にはプレゼンス インジケータを無効にする方法を説明した Microsoft ナレッジ ベース記事はありますが、これは Office SharePoint Server のリリースされたバージョンについては有効ではありません。init.js ファイルに関数呼び出しをコメントして ProcessImn() JavaScript 関数を無効にすることはできますが、このオプションはサポートされていないため、関数を無効化することは避ける必要があります。プレゼンス インジケータの無効にするもう 1 つの方法は、使用している .js ファイルに、何も実行しない ProcessImn() 関数の実装を追加することです。ProcessImn() 関数は必ずページの一番下に定義してください。これは JavaScript コードではスクリプトの後半で定義された関数インスタンスを使用し、前半の定義は無視するためです。

Microsoft Office system との統合をオフにする

また、Office system クライアントの統合をオフにすることもできます。

Microsoft Office system との統合をオフにするには、次の手順に従ってください。

  1. サイトのサーバーの全体管理に移動します。

  2. [アプリケーション管理] を選択して [アプリケーション セキュリティ] の [認証プロバイダ] をクリックします。

  3. [既定のゾーン] をクリックして [設定] ページをクリックし、[クライアントを有効にする] に対して [いいえ] をクリックします。

まとめ

ユニークなユーザー エクスペリエンスを実現するユーザー設定のマスタ ページとページ レイアウトは、さまざまな方法でカスタマイズして作成できます。Office SharePoint Server 2007 をでは全工程が極めて簡単です。ここでほんの少しの手間で拡張ユーザー インターフェイスのカスタマイズを行うことができます。ただし、注意が必要な問題はいくつかあります。マスタ ページとページ レイアウトを開発するアプローチは多数ありますが、同様にこれらを展開するアプローチも多数あります。これらのアプローチのほとんどはどのようにでも組み合わせることができます。本記事の目的は、マスタ ページとページ レイアウトの開発に必要な作業に関する認識を高めること、そして WCM サイト全体への影響を示すことです。そのため、WCM インターネット用サイトの開発中に、この活動に時間を割き、デュー デリジェンスを適用することができます。

追加情報

WCN サイトに対するユーザー設定のマスタ ページとページ レイアウトの作成方法の詳細は、次の情報を参照してください。

著者について

Avneesh Kaushik は Microsoft Global Services India (MGSI) のシニア コンサルタントであり、IW/Collaboration サービス ラインを担当しています。ハワイ航空の WCM サイトの設計と開発に携わっています。