SharePoint デザインマネージャースニペット

[アーティクル]
03/21/2023

重要

この拡張オプションは、従来の SharePoint エクスペリエンスにのみ使用できます。コミュニケーションサイトのような、SharePoint Online の最新エクスペリエンスではこのオプションを使用できません。従来の環境やこれらのブランディング手法を使用することはお勧めしません。

スニペットは、ナビゲーションバーや Web パーツなどの SharePoint コンポーネントまたはコントロールの HTML 表現です。デザインマネージャーでスニペットギャラリーを使用することにより、HTML のマスターページやページレイアウトに SharePoint の機能を簡単に追加できます。

スニペットおよびスニペットギャラリーの概要

マスターページを変換するか、ページレイアウトを作成すると、ページの HTML バージョンが作成されます。スニペットギャラリーを使用すると、SharePoint の特定の機能 (検索、ナビゲーション、デバイスチャネルパネルなど) を、マスターページまたはページレイアウトに関連付けられた HTML ファイルに簡単に追加できます。スニペットギャラリーはデザインマネージャー内のページであり、以下のことが可能です。

リボンで使用できる SharePoint コンポーネントから選択します。
そのコンポーネントのプロパティを構成します。
HTML コードスニペットをクリップボードにコピーします。そこからは、HTML ファイル内の適当な場所にスニペットを貼り付けることができます。

スニペットギャラリーでは、マスターページとページレイアウトのどちらを編集しているかに応じて、リボンにさまざまなオプションが表示されます。たとえば、ナビゲーションコントロールはマスターページに対してのみ表示され、Web パーツのゾーンとページフィールドコントロールはページレイアウトに対してのみ表示されます。また、ページレイアウトを編集する場合、使用できるページフィールドは、編集するページレイアウトのコンテンツタイプによって異なります。

スニペットを HTML ファイルに貼り付けた後は、スニペットで提供される HTML からデザインタイムプレビューが得られます。また、デザインマネージャーでサーバー側プレビューを使用して、実際のサイトでコントロールがどのように表示されるかを見ることもできます。デザインタイムプレビューには静的なサンプルデータを含めることができますが、サーバー側プレビューでは実際のデータを使用します (使用できる場合)。たとえば、用語セットからのナビゲーションリンクを描画するナビゲーションコントロールは、サーバー側プレビューでは用語を動的に表示しますが、デザインタイムプレビューではスニペットを作成した時点での用語の静的なスナップショットを使用します。ただし、多くの Web パーツを含む一部のスニペットでは、ライブデータはサーバー側プレビューでは使用できません。その場合は、サーバー側プレビューに [ プレビューを使用できません] と表示されることがあります。

注:

スニペットには HTML エディターでデザインタイムプレビューを提供する HTML マークアップが含まれますが、"プレビュー開始" コメントおよび "プレビュー終了" コメントに含まれる HTML マークアップは、デザインタイムプレビューのみに影響し、SharePoint によるそのスニペットの最終的なレンダリングには影響しないので、編集しないようにする必要があります。スニペットのスタイルを設定するには、通常、スニペットに適用される既定の SharePoint スタイルを識別してオーバーライドする必要があります。

スニペットギャラリーからスニペットを挿入する

スニペットギャラリーに表示されるオプションは、編集中のファイルによって異なります。たとえば、ページレイアウトが異なると、レイアウトで使用できるページフィールドのセットが異なります。そのため、スニペットギャラリーに移動するには、最初に編集するマスターページまたはページレイアウトを選択する必要があります。

スニペットを挿入するには

発行サイトに移動します。
ページの右上隅で、歯車の形の [設定] アイコンをクリックし、[ デザインマネージャー] をクリックします。
デザインマネージャーの左のナビゲーションウィンドウで、編集しているファイルの種類によって、[ マスターページの編集] または [ ページレイアウトの編集] をクリックします。
スニペットを追加するマスターページまたはページレイアウトの名前を選択します。
スニペットギャラリーを開くには、サーバー側プレビューの右上隅で、[ スニペット] をクリックします。
リボンの [ デザイン] タブで、ページに追加するスニペットを選択します。

スニペットを選択すると、スニペットギャラリーが更新されて、そのスニペットで使用できるプロパティ、および HTML マスターページまたはページレイアウトにコピーできる HTML コードスニペットがページに表示されるようになります。

注:

スニペットギャラリーのプレビューは廃止され、更新時に選択したスニペットのプレビューは表示されません。
スニペットギャラリーの右側の [ このコンポーネントについて] の下で、セクションヘッダーをクリックまたは選択して、プロパティのグループを展開するか、折りたたむかして、必要なカスタム設定を構成します。

スニペットの主要な目的にとって最も重要なプロパティは、先頭の [重要] セクションに表示されます。スニペットを使用するときは、これらの重要なプロパティを理解しておく必要があります。

注:

プロパティグリッドに AjaxDelta で終わるヘッダーがある場合、それらはダウンロード最小化戦略に関係のあるコントロールに適用されるものであり、デザインマネージャーで作成されるマスターページおよびページレイアウトではダウンロード最小化戦略は無効になっているので、これらのプロパティは無視する必要があります。
プロパティを構成した後、[更新] をクリックします。これによって、ページの左側の HTML スニペットが更新され、マークアップにカスタム設定が反映されます。いつでも [リセット] をクリックして、すべてのプロパティを既定の設定に戻すことができます。
スニペットギャラリーの左側で、[ HTML スニペット] の下の [ クリップボードにコピー] をクリックします。
HTML エディターで、コンピューター上のマップされたネットワークドライブを開き、スニペットを追加するマスターページまたはページレイアウトの HTML ファイルを開きます。
HTML ファイルの中の、マークアップを表示する場所にスニペットを貼り付けます。

各スニペットには、コンポーネントとサンプルデータの視覚的プレビューを提供する HTML が含まれています。このマークアップは、ライブサイトでのスニペットの表示方法ではなく、スニペットのデザイン時プレビューにのみ影響するため、!--PS> タグと !--PE タグ内<の読み取り専用プレビュー用にこの HTML を変更しないでください。><
スニペットのサーバー側プレビューを表示するには、HTML ファイルを保存して、変更を関連する ASP.NET ファイルに同期した後、デザインマネージャーでサーバー側プレビューの表示を更新します。

デザインタイムプレビューとは異なり、サーバー側プレビューでは SharePoint によってレンダリングされたコントロールが表示されます。

HTML スニペットのマークアップの概要

スニペットには 4 つの基本セクションが含まれます。

先頭のヘッダー
および< !--CS> タグ (カスタム ASP.NET スニペットを除きます。これは、
tag)
スニペットが!--MS> の開始タグと!--ME 終了タグで<囲まれている SharePoint マークアップ><
!--PS> の開始タグと!--PE 終了タグで<囲まれた HTML プレビュー><
!--CE> とを閉じた<フッタータグ

HTML プレビューを除くスニペットのすべてのセクションは、HTML コメントで囲まれて、ドキュメントオブジェクトモデル (DOM) および既存のスタイルと相互作用できないようになっています。スニペットは、コンポーネントの名前で開始し、その後に実際の ASP.NET マークアップおよびデザインタイムレンダリング用の HTML プレビューが含まれ、終了タグで終了します。 ASP.NET マークアップはコメント化されていますが、HTML ファイルが .master ファイルまたは .aspx ファイルに同期されると、SharePoint によってコメントタグが除去されて、このマークアップが使用されます。 ASP.NET についての知識がある場合は、スニペット内のこのマークアップをカスタマイズできます。

例として、編集モードパネルの既定のマークアップを次に示します。このパネルは、他のコンテンツやコントロールを条件付きで表示する単純なコンテナーです。


<div data-name="EditModePanelShowInEdit">
    <!--CS: Start Edit Mode Panel Snippet-->

SharePoint マークアップ


<!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
    <!--MS:<Publishing:EditModePanel runat="server" CssClass="edit-mode-panel">-->

HTML プレビュー


<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
        <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
        You should replace this div with content that renders based on your Edit Mode Panel Properties.
    
        </div>
        <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->


<!--ME:</Publishing:EditModePanel>-->
    <!--CE: End Edit Mode Panel Snippet-->
</div>

次に示すのは、トップナビゲーションスニペットの既定のマークアップです。このスニペットはもう少し複雑であり、複数の異なるコントロールが含まれ、一部は相互にネストしており、ナビゲーション用語のデータソース、委任コントロール、コンテンツプレースホルダーが含まれます。

注:

コンテンツプレースホルダーなどの一部のコントロールは、ページ上で視覚的な表現を必要としない要素なので、HTML プレビュー用のタグが空になっています。

ヘッダー


<div data-name="TopNavigationNoFlyoutWithStartNode">
<!--CS: Start Top Navigation Snippet-->    <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
    <!--MS:<Publishing:EditModePanel runat="server" CssClass="edit-mode-panel">-->

SharePoint マークアップ


<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<SharePoint:AjaxDelta ID="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation ms-dialogHidden" runat="server">-->

HTML プレビュー


<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<!--PE: End of READ-ONLY PREVIEW-->

SharePoint マークアップ


<!--MS:<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">-->

HTML プレビュー

<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<span style="display:none">
<table cellpadding="4" cellspacing="0" style="font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow">
<tr><td nowrap="nowrap">
<span style="font-weight:bold">PortalSiteMapDataSource</span> - topSiteMap</td></tr><tr><td></td></tr></table></span>
<!--PE: End of READ-ONLY PREVIEW-->

SharePoint マークアップ


<!--MS:<Template_Controls>-->
<!--MS:<asp:SiteMapDataSource ShowStartingNode="True" SiteMapProvider="SPNavigationProvider" ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002">-->

SharePoint マークアップ


<!--ME:</asp:SiteMapDataSource>-->
<!--ME:</Template_Controls>-->
<!--ME:</SharePoint:DelegateControl>--><a name="startNavigation"></a>

SharePoint マークアップ


<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server">-->
<!--MS:<SharePoint:AspMenu ID="TopNavigationMenu" runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="&amp;#60;%$Resources:wss,navigation_accesskey%&amp;#62;" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="2" AdjustForShowStartingNode="false" MaximumDynamicDisplayLevels="0" SkipLinkText="">-->

HTML プレビュー


<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/menu-21.css" />
<div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox">
<ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static">
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" title="Default Publishing Site" href="/sites/PubSite/Pages/default.aspx" accesskey="1">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Default Publishing Site</span></span></a></li></ul></div>
<!--PE: End of READ-ONLY PREVIEW-->

SharePoint マークアップ


<!--ME:</SharePoint:AspMenu>-->
<!--ME:</asp:ContentPlaceHolder>-->

HTML プレビュー


<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<!--PE: End of READ-ONLY PREVIEW-->

SharePoint マークアップ


<!--ME:</SharePoint:AjaxDelta>-->

<!--CE: End Top Navigation Snippet-->
</div>

マークアップの種類

ここでは、スニペットに含まれるマークアップの種類を詳細に示します。

SharePoint 名前空間登録 SPM ("SharePoint マークアップ") は、SharePoint 名前空間を登録する行を示します。


<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->

コメント CS および CE ("コメント開始" および "コメント終了") は、マークアップの行の解析に役立ちます。

<!--CS: Start Top Navigation Snippet-->
…
<!--CE: End Top Navigation Snippet-->

スニペット MS および ME ("マークアップ開始" および "マークアップ終了") は、SharePoint コントロールまたはスニペットの開始と終了を示します。リボンや前記のトップナビゲーションコントロールなどの一部のスニペットには、単一のスニペット内にネストされた複数のコントロールが含まれます。


<!--MS:<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">-->
…
<!--ME:</SharePoint:DelegateControl>--><a name="startNavigation"></a>

<!--MS:<Template_Controls>-->
…
<!--ME:</Template_Controls>-->

<!--MS:<asp:SiteMapDataSource ShowStartingNode="True" SiteMapProvider="SPNavigationProvider" ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002">-->
…
<!--ME:</asp:SiteMapDataSource>-->

プレビューブロック PS および PE ("プレビュー開始" および "プレビュー終了") は、編集してはならない HTML コードのセクションを囲みます。これらのプレビューセクションは、そのスニペットが挿入している SharePoint コントロールのスナップショットです。プレビューを使用すると、クライアント側の HTML エディターで、HTML ファイルに関してより有意義な作業を行うことができます。しかし、プレビュー内でコンテンツやスタイルを変更しても、SharePoint が最終的に使用する .master ファイルに対して持続する効果はありません。スニペットのスタイルを設定するには、SharePoint スタイルを特定して、独自のカスタム CSS で上書きする必要があります。


<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><span style="display:none"><table cellpadding="4" cellspacing="0" style="font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow"><tr><td nowrap="nowrap"><span style="font-weight:bold">PortalSiteMapDataSource</span> - topSiteMap</td></tr><tr><td></td></tr></table></span><!--PE: End of READ-ONLY PREVIEW-->

<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/menu-21.css" /><div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox"><ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" title="Default Publishing Site" href="/sites/PubSite/Pages/default.aspx" accesskey="1"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Default Publishing Site</span></span></a></li></ul></div><!--PE: End of READ-ONLY PREVIEW-->

SharePoint デザインマネージャースニペット

スニペットおよびスニペットギャラリーの概要

スニペットギャラリーからスニペットを挿入する

スニペットを挿入するには

HTML スニペットのマークアップの概要

ヘッダー

SharePoint マークアップ

HTML プレビュー

フッター

ヘッダー

SharePoint マークアップ

HTML プレビュー

SharePoint マークアップ

HTML プレビュー

SharePoint マークアップ

SharePoint マークアップ

SharePoint マークアップ

HTML プレビュー

SharePoint マークアップ

HTML プレビュー

SharePoint マークアップ

フッター

マークアップの種類

関連項目

その他のリソース

SharePoint デザイン マネージャー スニペット

スニペットおよびスニペット ギャラリーの概要

スニペット ギャラリーからスニペットを挿入する

スニペットを挿入するには

HTML スニペットのマークアップの概要

ヘッダー

SharePoint マークアップ

HTML プレビュー

フッター

ヘッダー

SharePoint マークアップ

HTML プレビュー

SharePoint マークアップ

HTML プレビュー

SharePoint マークアップ

SharePoint マークアップ

SharePoint マークアップ

HTML プレビュー

SharePoint マークアップ

HTML プレビュー

SharePoint マークアップ

フッター

マークアップの種類

関連項目

その他のリソース

SharePoint デザインマネージャースニペット

スニペットおよびスニペットギャラリーの概要

スニペットギャラリーからスニペットを挿入する