既存の SharePoint サイトとページ領域のブランド化の更新
既存の SharePoint サイトとサイト コレクションのブランド化を更新したり、SharePoint ページの領域をカスタマイズしたりできます。 たとえば、サイトの新しいバージョンを更新する際に、そうした操作を実行できます。
重要
この拡張オプションは、従来の SharePoint エクスペリエンスにのみ使用できます。 コミュニケーション サイトのような、SharePoint Online の最新エクスペリエンスではこのオプションを使用できません。
既存のサイトとサブサイトのブランド化の更新
GitHub 上の Office 365 Developer Patterns and Practices プロジェクトにある Branding.Refresh サンプルには、適用されたブランド化を検証して更新するために、OfficeDevPnP.Core ライブラリを使用して既存のサイトとサブサイトの反復処理を実行する方法が示されています。 このサンプルには、サイトのブランド化を更新する方法が示されていますが、サイトの一覧に新しいライブラリを展開する、プロビジョニング中に展開されたカスタム アクションを更新するなど他の操作を行うために同じ概念を使用できます。 同じ処理を使用して、既存のサイトを新しいバージョンに移行できます。
この操作には、次の 2 つの手順が関係しています。
- 更新するサイトを取得する。
- サイト ブランド化を更新する。
更新するサイトを取得する
最初に、更新するサイトとサブサイトのリストを取得します。 このサンプルには検索機能を使用してそれを実行する方法が示されていますが、サイト ディレクトリから直接読み込んだり、管理者がリストを指定可能な管理 UI を備えたりする他の選択肢もあります。 次の例では、検索機能を使用してリストを生成する方法を示します。
// Get a list of sites. Search is one way to get this list, an alternative can be a site directory.
List<SiteEntity> sites = cc.Web.SiteSearchScopedByUrl("https://bertonline.sharepoint.com");
// Generic settings (apply changes on all webs or just root web).
bool applyChangesToAllWebs = true;
// Optionally further refine the list of returned site collections.
var filteredSites = from p in sites
where p.Url.Contains("13003")
select p;
List<SiteEntity> sitesAndSubSites = new List<SiteEntity>();
if (applyChangesToAllWebs)
{
// You want to update all sites, so the list of sites is extended to all subsites.
foreach (SiteEntity site in filteredSites)
{
sitesAndSubSites.Add(new SiteEntity() { Url = site.Url,
Title = site.Title,
Template = site.Template });
GetSubSites(cc, site.Url, ref sitesAndSubSites);
}
sites = sitesAndSubSites;
}
GetSubSites の呼び出しは再帰的なので、サブサイト ツリーをフェッチします。 ツリーをフェッチしたら、続行する前に返される値が正しいことを確認してください。
ブランド化を更新する
処理するサイトを選択した後、OfficeDevPnP.Core メソッドを使用してサイトを操作できます。 このサンプルでは、サイトのブランド化の方法が示されていますが、同じ方法であらゆる種類の変更を処理できます。
このサンプルでは、Web プロパティ バッグを使用して、現在の設定についての情報を格納するパターンが使用されています。 このコードは最初に Web プロパティ バッグ値を読み取り、次にそれぞれの値に適切なアクションを実行します。
// Verify that you have a property bag entry.
string themeName = cc.Web.GetPropertyBagValueString(BRANDING_THEME, "");
if (!String.IsNullOrEmpty(themeName))
{
// If no theme property bag entry, assume no theme has been applied.
if (themeName.Equals(currentThemeName, StringComparison.InvariantCultureIgnoreCase))
{
// The applied theme matches to the theme you want to update.
int? brandingVersion = cc.Web.GetPropertyBagValueInt(BRANDING_VERSION, 0);
if (brandingVersion < currentBrandingVersion)
{
DeployTheme(cc, currentThemeName);
// Set the web propertybag entries
cc.Web.SetPropertyBagValue(BRANDING_THEME, currentThemeName);
cc.Web.SetPropertyBagValue(BRANDING_VERSION, currentBrandingVersion);
}
}
else
{
if (forceBranding)
{
DeployTheme(cc, currentThemeName);
// Set the web propertybag entries.
cc.Web.SetPropertyBagValue(BRANDING_THEME, currentThemeName);
cc.Web.SetPropertyBagValue(BRANDING_VERSION, currentBrandingVersion);
}
}
}
次にテーマを更新するコードは簡単で、OfficeDevPnP.Core メソッドに基づいています。
string themeRoot = Path.Combine(AppRootPath, String.Format(@"Themes\{0}", themeName));
string spColorFile = Path.Combine(themeRoot, string.Format("{0}.spcolor", themeName));
string spFontFile = Path.Combine(themeRoot, string.Format("{0}.spfont", themeName));
string backgroundFile = Path.Combine(themeRoot, string.Format("{0}bg.jpg", themeName));
string logoFile = Path.Combine(themeRoot, string.Format("{0}logo.png", themeName));
if (IsThisASubSite(cc.Url))
{
// Retrieve the context of the root site of the site collection.
using (ClientContext ccParent = new ClientContext(GetRootSite(cc.Url)))
{
ccParent.Credentials = cc.Credentials;
cc.Web.DeployThemeToSubWeb(ccParent.Web, themeName, spColorFile, spFontFile, backgroundFile, "");
cc.Web.SetThemeToSubWeb(ccParent.Web, themeName);
}
}
else
{
cc.Web.DeployThemeToWeb(themeName, spColorFile, spFontFile, backgroundFile, "");
cc.Web.SetThemeToWeb(themeName);
}
SharePoint ページ領域のカスタマイズ
SharePoint ページの領域をカスタマイズすることが目的の場合、対象ページの領域と関連付けられているファイル上でリモート プロビジョニングとカスタムのカスケード スタイル シート (CSS) を組み合わせて使用できます。 その場合、SharePoint ページのさまざまな領域とどの SharePoint ファイルが関連付けられているかを最初に把握しておく必要があります。
表 1. SharePoint ページ領域と関連ファイル
| ページ領域 | 関連ファイル | 詳細情報 |
|---|---|---|
| リボン | 任意の既定のマスター ページ。 対応する CSS:
|
[コンテンツにフォーカスを移動] ボタンを使用して、非表示にすることができます。 |
| スイート ナビゲーション | 任意の既定のマスター ページ。 | [コンテンツにフォーカスを移動] ボタンを使用して、非表示にすることができます。 |
| スイート リンク | [コンテンツにフォーカスを移動] ボタンを使用して、非表示にすることができます。 | |
| [ようこそ] メニュー | *。マスター | [コンテンツにフォーカスを移動] ボタンを使用して、非表示にすることができます。 |
| [設定] メニューまたはギア | *。マスター | |
| ヘルプ | *。マスター | |
| リボンのコンテキスト タブ | 任意の既定のマスター ページ。 | 例については、以下をご覧ください。 |
| クイック アクセス ツールバー | *。マスター | [コンテンツにフォーカスを移動] ボタンを使用して、非表示にすることができます。 |
| サイト ロゴ | *。マスター 対応する CSS: .ms-sitelcon-img |
|
| トップ ナビゲーション | ナビゲーション CSOM/JSOM *。マスター 対応する CSS (編集モードではありません):
|
|
| ページ タイトル | 対応する CSS (編集モード):
|
|
| 検索ボックス | Nav CSOM/JSOM *.master 対応する CSS:
|
|
| 左ナビゲーション | Nav CSOM/JSOM *.master | 詳細については、次のトピックを参照してください。 |
| ツリー ビュー | *。マスター | 詳細については、「組み込みのツリービュー ナビゲーターをカスタマイズする方法」を参照してください。 |
| ページ コンテンツ | ページ レイアウト/コンテンツ ページ Web パーツ ゾーン/Web パーツCSS (Web パーツ ゾーンと Web パーツ):
|
詳細については、「SharePoint でページ レイアウトを作成する」を参照してください |
ページのカスタマイズ領域に関連するサンプルについては、GitHub 上の Office 365 Developer Patterns and Practices プロジェクトで、次を参照してください。
既定の SharePoint マスター ページで必要となる「最小」コンテンツ プレースホルダー
SharePoint .master ページではコンテンツ プレースホルダーの使用が必要になります。 コンテンツ プレースホルダーは、SharePoint ページがページ ライフサイクルをサポートするために必要な基本的なコンテンツと構造化要素をレンダリングします。
表 2. SharePoint マスター ページに最低限必要なコンテンツ プレースホルダー
| コンテンツ プレースホルダー | 保持するコンテンツの対象 |
|---|---|
| PlaceHolderAdditionalPageHead | ページの \<head\> セクションの追加項目。 |
| PlaceHolderBodyAreaClass | ページ ヘッダーの追加スタイル。 |
| PlaceHolderBodyLeftBorder | ページ本文の左罫線要素。 |
| PlaceHolderBodyRightBorder | ページ本文の右罫線要素。 |
| PlaceHolderCalendarNavigator | 予定表がページに表示される際に予定表のナビゲーションのための日付の選択。 |
| PlaceHolderFormDigest | 「フォーム ダイジェスト」セキュリティ コントロール。 |
| PlaceHolderGlobalNavigation | グローバル ナビゲーション階層リスト (トップ ナビゲーション)。 |
| PlaceHolderGlobalNavigationSiteMap | グローバル ナビゲーションのサイト マップ (トップ ナビゲーション)。 |
| PlaceHolderHorizontalNav | ページのトップ ナビゲーション メニュー (トップ ナビゲーション)。 |
| PlaceHolderLeftActions | 左下部ナビゲーション領域 (左ナビゲーション)。 |
| PlaceHolderLeftNavBar | 左ナビゲーション領域 (左ナビゲーション)。 |
| PlaceHolderLeftNavBarDataSource | 左ナビゲーション メニューのデータ ソース (左ナビゲーション)。 |
| PlaceHolderLeftNavBarTop | 左上部ナビゲーション領域 (左ナビゲーション)。 |
| PlaceHolderMain | ページのメイン コンテンツ (ページ コンテンツ)。 |
| PlaceHolderMiniConsole | ページ レベルのコマンド (エンタープライズ Wiki ページにおけるページ編集、履歴、被リンクなど)。 |
| PlaceHolderNavSpacer | 左ナビゲーション領域の幅 (左ナビゲーション)。 |
| PlaceHolderPageDescription | ページ コンテンツの説明。 |
| PlaceHolderPageImage | ページの左上隅のページ アイコン (リボン)。 |
| PlaceHolderPageTitle | ブラウザー ページのタイトル バーに表示されるページ タイトル (\<title\>) (ページ タイトル)。 |
| PlaceHolderPageTitleInTitle | 階層リストの直下に表示されるページ タイトル (ページ タイトル)。 |
| PlaceHolderQuickLaunchBottom | サイド リンク バー ナビゲーションの下部 (トップ ナビゲーション)。 |
| PlaceHolderQuickLaunchTop | サイド リンク バー ナビゲーションの上部 (トップ ナビゲーション)。 |
| PlaceHolderSearchArea | 検索ボックス コントロールが表示される領域 (検索ボックス)。 |
| PlaceHolderSiteName | サイトの名前 (スイート ナビゲーション)。 |
| PlaceHolderTitleAreaClass | ページのタイトル領域 (スイート ナビゲーション)。 |
| PlaceHolderTitleAreaSeparator | タイトル領域のシャドー (スイート ナビゲーション)。 |
| PlaceHolderTitleBreadCrumb | タイトル階層リンクのコンテンツ領域。 |
| PlaceHolderTitleLeftBorder | タイトル領域の左罫線 (スイート ナビゲーション)。 |
| PlaceHolderTitleRightMargin | タイトル領域の左余白 (スイート ナビゲーション)。 |
| PlaceHolderTopNavBar | トップ ナビゲーション領域 (トップ ナビゲーション)。 |
| PlaceHolderUtilities | ページ下部に表示する必要のあるその他のコンテンツ (ページ コンテンツ)。 |
| SPNavigation | ナビゲーション関連の操作が含まれます。 |
| WSSDesignConsole | ページが編集モードの場合のページ編集コントロール。 |
表 2 にリストされているいずれかのコンテンツ プレースホルダーを SharePoint .master ページから削除すると、SharePoint によってエラーがスローされます。コンテンツ プレースホルダーを非表示状態で追加できます。そのようにすると、エンド ユーザーからは対象コンテンツが見えなくなります。 表 2 にリストされているいずれかのコンテンツ プレースホルダーを SharePoint .master ページから削除すると、SharePoint によってエラーがスローされます。
そのようにすると、エンド ユーザーからは対象コンテンツが見えなくなります。 詳しくは、「 Windows SharePoint Services の既定のマスタ ページ」をご覧ください (この記事では、SharePoint Services 3 の機能について取り上げられていますが、内容が当てはまります)。また、「 コンテンツ プレースホルダー コントロールを操作する」もご覧ください。
既定の SharePoint マスター ページ (seattle.master および oslo.master など) には、SharePoint が必要とする以上に多くのコンテンツ プレースホルダーが含まれています。 たとえば、これらのマスター ページには <SharePoint:Themes runat="server"> とコントロールと <SharePoint.CssRegistration runat="server"> コントロールが入っています。
Themes コントロールと CssRegistration コントロールのどちらも、ページ ライフサイクルの間に実行されます。 リモート プロビジョニング パターンを使用すると、カスタム アクションを使用することによって、カスタム CSS を登録するためのサーバー コントロールを追加できます。
表示されないコンテンツ プレースホルダーも想定どおりに作動しますが、それらのプレースホルダーによって生成されるコンテンツはブラウザーが認識する HTML ソースから省略されます。 Visible="false" に設定されているコンテンツ プレースホルダーは非表示になります。
重要
seattle.master や oslo.master など、すぐに使用できる .master ページにあるカスタム マスター ページ内に、カスタム プレースホルダーを作成しないでください。 致命的な例外が発生します。
SharePoint Online スイート ナビゲーションのコントロール
SharePoint Online では、トップ ナビゲーションをレンダリングするスイート ナビゲーション コントロールの新しいマスター ページ マークアップが導入されました。 スイート ナビゲーション コントロールの既定のマークアップは、サイトがイントラネットか一般向けかによって異なります。 スイート ナビゲーション コントロールの詳細について、またマスター ページに追加できるイントラネットと一般向けサイトの両方のコード サンプルについては、「SharePoint Online スイート ナビゲーションのコントロール」を参照してください。
CSOM による SharePoint ページ領域のカスタマイズ
通常、UserCustomAction を使用して、リンクやその他の要素を追加または削除することをお勧めします。 これは、CustomAction 要素を使用する SharePoint のバリアントの 1 つです。完全信頼コード モデルを使い慣れている場合、機能フレームワークの一部として認識するかもしれません。 CustomAction 要素と機能フレームワーク プロビジョニング パターンは、クライアント側オブジェクト モデル (CSOM) ではサポートされていませんが、CustomAction 要素で使用できる同じロケーションの識別子を CSOM コードで使用できます。
<CustomAction
RequiredAdmin = "Delegated | Farm | Machine"
ControlAssembly = "Text"
ControlClass = "Text"
ControlSrc = "Text"
Description = "Text"
FeatureId = "Text"
GroupId = "Text"
Id = "Text"
ImageUrl = "Text"
Location = "Text"
RegistrationId = "Text"
RegistrationType = "Text"
RequireSiteAdministrator = "TRUE" | "FALSE"
Rights = "Text"
RootWebOnly = "TRUE" | "FALSE"
ScriptSrc = "Text"
ScriptBlock = "Text"
Sequence = "Integer"
ShowInLists = "TRUE" | "FALSE"
ShowInReadOnlyContentTypes = "TRUE" | "FALSE"
ShowInSealedContentTypes = "TRUE" | "FALSE"
Title = "Text"
UIVersion = "Integer">
</CustomAction>
SharePoint リボンのカスタマイズ
リボンをカスタマイズする場合、サーバーがレンダリングする HTML は、カスタム スタイルに割り当てるクラス名に割り当てられます。 この機能を使用するには、スタイル ライブラリに移動し、リボンに追加する各スタイルの新しい CSS ファイルを作成します。 リボンの 2 つのセクションにカスタム スタイルを追加できます。
- [ページ要素] セクションの場合:
span.ms-rteElement-{{YOUR_OWN_DEFINED_NAME}}または、スタイル H1、H2、H3、H4 を使用することもできます。これらで、スタイルの適用先テキストを囲みます。 - [テキスト スタイル] セクションの場合:
.ms-rteEStyle-{{YOUR_OWN_DEFINED_NAME}}
次に、CSS クラス定義で、以下の行を追加します。
-ms-name:"The name visual in the ribbon for your style";
これで、カスタム .css ファイルにおけるカスタム CSS クラスの詳細を定義する作業は終わりです。
Web パーツ ページにおけるスイート ナビゲーションのカスタマイズ
SharePoint では、UI に、ページ タイルに基づいた最新の外観が備わっています。 たとえば、既定の SharePoint ページにライブ タイルが既定で表示されます。 トップ ナビゲーションは、ユーザーが簡単にソーシャル コンテンツや OneDrive for Business を表示したり、アクセスしたりできるようにします。 CSS と JavaScript の組み合わせを使用して、これらの領域の外観をカスタマイズできます。
Web パーツ ページを作成した後、スクリプト エディター Web パーツを使用可能な Web パーツ ゾーンに追加します。 この Web パーツを使用して、ページに JavaScript を追加できます。 JavaScript コードを、ElementId でトップ ナビゲーション バーを識別するスクリプト エディター Web パーツに追加できます。また、可視性プロパティを非表示に設定することで、それを非表示にできます。
[設定] メニューまたはギアのカスタマイズ
次のコード例に示されているように、 UserCustomAction クラスとプロパティ バッグ エントリを使用して、SharePoint サイトの設定メニューをカスタマイズできます。
public void AddCustomActions(ClientContext clientContext)
{
// Add a site settings link if it doesn't already exist.
if (!CustomActionAlreadyExists(clientContext, "Sample_CustomSiteSetting"))
{
// Add a site settings link.
UserCustomAction siteSettingLink = clientContext.Web.UserCustomActions.Add();
siteSettingLink.Group = "SiteTasks";
siteSettingLink.Location = "Microsoft.SharePoint.SiteSettings";
siteSettingLink.Name = "Sample_CustomSiteSetting";
siteSettingLink.Sequence = 1000;
siteSettingLink.Url = string.Format(DeployManager.appUrl, clientContext.Url);
siteSettingLink.Title = "Modify Site Metadata";
siteSettingLink.Update();
clientContext.ExecuteQuery();
}
// Add a site actions link, if it doesn't already exist.
if (!CustomActionAlreadyExists(clientContext, "Sample_CustomAction"))
{
UserCustomAction siteAction = clientContext.Web.UserCustomActions.Add();
siteAction.Group = "SiteActions";
siteAction.Location = "Microsoft.SharePoint.StandardMenu";
siteAction.Name = "Sample_CustomAction";
siteAction.Sequence = 1000;
siteAction.Url = string.Format(DeployManager.appUrl, clientContext.Url); ;
siteAction.Title = "Modify Site Metadata";
siteAction.Update();
clientContext.ExecuteQuery();
}
}
ツリー ビューのカスタマイズ
ツリー ビューの幅を変更するには、.master ページのツリー タグの周囲にタグを追加 <div> し、スタイル width 属性を持つ CSS クラスを に <div>割り当てます。 *.css ファイルに次のスタイル定義を追加することで、サイド リンク バー ナビゲーションの幅を増やすことができます。
.ms-nav {
width: 220 px;
}
ページ コンテンツのカスタマイズ
ページの内容をカスタマイズするための要件は、ページに記載されている内容によって異なります。 [サイトの操作] メニューのカスタマイズに関しては、UserCustomAction オブジェクトを使用して、Web パーツにブランド化をプロビジョニングできます。
発行サイトを作成する場合は、基本について「SharePoint でページ レイアウトを作成する」を参照してください。 ページ レイアウトは、CSOM の ContentTypeId クラスの可用性に依存します。 CSOM で使用できないその他のメンバーについては、一時的な問題回避として ContentTypeId で動作する Windows Communication Foundation (WCF) サービスを使用できます。