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

[アーティクル]
03/08/2010

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

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 サイトに対してマスタページ宣言を作成するための一般的な手順とコード例を示したものです。

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

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

次のコード (セクション 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. --%>

セクション 1 b に示すとおり、ユーザーコントロール (.ascx ファイル) を controltemplates ディレクトリに追加します。

セクション 1b. カスタムコントロールの宣言
```
<%@ Register TagPrefix="MyCustomNav" TagName="Navigation" Src="~/_controltemplates/MyCustNav.ascx" %>
<%@ Register TagPrefix="MyCustomFooter" TagName="Footer" Src="~/_controltemplates/MyCustFooter.ascx" %>
```
ヘッダーセクションには、簡易リンク <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"/>
    
    <%--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" />    
    
    <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server" />
  </head>
```

以下のコードをコピーして追加します。本文セクションは、[サイトの操作] メニューを含む本文、ログオンコントロール、公開コンソールコントロール、ナビゲーションコントロール、およびレイアウトで定義されるメインコンテンツプレースホルダやコンテンツエリアで構成されています。

注意

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

セクション 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>

以下のコードをコピーして追加します。通常、このセクションは表示されませんが、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 パーツまたはフィールドを使用してこれらのレイアウトを設計する方法を示しています。レイアウトには、両方のタイプのコントロールを組み合わせて含めることもできます。

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

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

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

注意

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

セクション 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" %>

次のコード例 (セクション 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" />

ページレイアウトを保存します。

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

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

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

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

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

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

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

注意

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

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

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
<!-- REORG: Shared Among All Base Types. -->
<Field ID="{CC295F9D-D301-44bb-8929-F56BB9085E59}" 
Name="PageTopLeftContent" 
SourceID="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://schemas.microsoft.com/sharepoint/">
    <ElementManifests>
        <ElementManifest Location="Customfields.xml"/>
    </ElementManifests>
</Feature>

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

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://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="https://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 との統合をオフにするには、次の手順に従ってください。

サイトのサーバーの全体管理に移動します。
[アプリケーション管理] を選択して [アプリケーションセキュリティ] の [認証プロバイダ] をクリックします。
[既定のゾーン] をクリックして [設定] ページをクリックし、[クライアントを有効にする] に対して [いいえ] をクリックします。

まとめ

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

追加情報

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

サイトコレクションで使用するサーバーにマスタページを作成して保存する方法に関する記述
マスタページでの CSS オプションに関する記述
Web コンテンツ管理対応の SharePoint サイトのカスタマイズとブランディング (パート 1/3): Web コンテンツ管理および既定の機能についての記述
Web コンテンツ管理対応の SharePoint サイトをカスタマイズしブランド設定する (パート 2/3): WCM を拡張するに関する記述
コンテンツタイプを機能として開発することに関する記述
発行ページレイアウトの作成に関する記述
SharePoint 2007 コンテンツタイプビューアに関する記述
サイトの列とコンテンツタイプの作成に関する記述
SharePoint 2007 WCM フィールド管理に関する記述

著者について

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

追加情報

著者について

その他のリソース

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

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

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

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

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

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

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

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

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

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

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