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

重要

この拡張オプションは、従来の SharePoint エクスペリエンスに のみ 使用できます。This extensibility option is only available for classic SharePoint experiences. コミュニケーション サイトのような、SharePoint Online の最新エクスペリエンスではこのオプションを使用できません。You cannot use this option with modern experiences in SharePoint Online, like with communication sites. 今後、従来の環境やこれらのブランディング手法を使用することはお勧めしません。We do not recommend using classic experience or these branding techniques anymore.

スニペットとは、ナビゲーション バーや Web パーツといった SharePoint のコンポーネントまたはコントロールを HTML で表現したものです。デザイン マネージャーでスニペット ギャラリーを使用することにより、HTML のマスター ページやページ レイアウトに SharePoint の機能を簡単に追加できます。A snippet is an HTML representation of a SharePoint component or control such as a navigation bar or a web part. By using the Snippet Gallery in Design Manager, you can quickly add SharePoint functionality to your HTML master page or page layout.

マスター ページを変換するか、ページ レイアウトを作成すると、ページの HTML バージョンが作成されます。スニペット ギャラリーを使用すると、SharePoint の特定の機能 (検索、ナビゲーション、デバイス チャネル パネルなど) を、マスター ページまたはページ レイアウトに関連付けられた HTML ファイルに簡単に追加できます。スニペット ギャラリーはデザイン マネージャー内のページであり、以下のことが可能です。After you convert a master page or create a page layout, you have an HTML version of that page. With the Snippet Gallery, you can quickly add specific SharePoint functionality, such as search or navigation or device channel panels, to the HTML file associated with your master page or page layout. The Snippet Gallery is a page in Design Manager where you can:

  • リボンで使用できる SharePoint コンポーネントから選択します。Choose a SharePoint component from those available on the ribbon.

  • そのコンポーネントのプロパティを構成します。Configure the properties for that component.

  • HTML コード スニペットをクリップボードにコピーします。そこからは、HTML ファイル内の適当な場所にスニペットを貼り付けることができます。Copy the HTML code snippet to the Clipboard so that you can paste the snippet at the location you want in the HTML file.

スニペット ギャラリーのリボンには、マスター ページまたはページ レイアウトのどちらを編集しているかにより、異なるオプションが表示されます。たとえば、ナビゲーション コントロールはマスター ページに対してのみ表示され、Web パーツ領域とページ フィールド コントロールはページ レイアウトに対してのみ表示されます。また、ページ レイアウトを編集しているときに使用できるページ フィールドは、編集しているページ レイアウトのコンテンツ タイプに依存します。The Snippet Gallery displays different options on the ribbon, depending on whether you're editing a master page or page layout—for example, navigation controls are displayed only for master pages, and web part zones and page field controls are displayed only for page layouts. Also, when you are editing a page layout, the page fields that are available depend on the content type of the page layout that you're editing.

スニペットを HTML ファイルに貼り付けた後は、スニペットで提供される HTML からデザインタイム プレビューが得られます。また、デザイン マネージャーでサーバー側プレビューを使用して、実際のサイトでコントロールがどのように表示されるかを見ることもできます。デザインタイム プレビューには静的なサンプル データを含めることができますが、サーバー側プレビューでは実際のデータを使用します (使用できる場合)。たとえば、用語セットからのナビゲーション リンクを描画するナビゲーション コントロールは、サーバー側プレビューでは用語を動的に表示しますが、デザインタイム プレビューではスニペットを作成した時点での用語の静的なスナップショットを使用します。ただし、多くの Web パーツを含む一部のスニペットでは、サーバー側プレビューで実際のデータを使用できません。その場合は、サーバー側プレビューに [プレビューを使用できません] と表示されることがあります。After you paste a snippet into your HTML file, you get a design-time preview from the HTML provided in the snippet. You can also use the server-side preview in Design Manager to see how the control will appear on the live site. The design-time preview may include static sample data, but the server-side preview uses live data, if available. For example, a navigation control that draws navigation links from a term set will display those terms dynamically in the server-side preview, but the design-time preview will have a static snapshot of the terms at the time you created the snippet. Live data is not available in the server-side preview for some snippets, however, including many web parts. In this case, the server-side preview may say Preview Not Available.

注意

スニペットには HTML エディターでデザインタイム プレビューを提供する HTML マークアップが含まれますが、"プレビュー開始" コメントおよび "プレビュー終了" コメントに含まれる HTML マークアップは、デザインタイム プレビューのみに影響し、SharePoint によるそのスニペットの最終的なレンダリングには影響しないので、編集しないようにする必要があります。スニペットのスタイルを設定するには、通常、スニペットに適用される既定の SharePoint スタイルを識別してオーバーライドする必要があります。A snippet contains HTML markup that gives you a design-time preview in your HTML editor, but the HTML markup contained in "start preview" and "end preview" comments should not be edited because it affects only the design-time preview, not how SharePoint ultimately renders that snippet. Instead, to style your snippet, you typically have to identify and override the default SharePoint styles that are applied to the snippet.

スニペット ギャラリーに表示されるオプションは、編集中のファイルによって異なります。たとえば、ページ レイアウトが異なると、レイアウトで使用できるページ フィールドのセットが異なります。そのため、スニペット ギャラリーに移動するには、最初に編集するマスター ページまたはページ レイアウトを選択する必要があります。The Snippet Gallery displays different options depending on the file that you're editing. For example, different page layouts have different sets of page fields available to them. For this reason, to navigate to the Snippet Gallery, you must first select a master page or page layout to edit.

スニペットを挿入するにはTo insert a snippet

  1. 発行サイトに移動します。Browse to your publishing site.

  2. ページの右上隅で、歯車の形の [設定] アイコンをクリックし、[ デザイン マネージャー] をクリックします。In the upper-right corner of the page, choose the Settings gear, and then choose Design Manager.

  3. デザイン マネージャーの左のナビゲーション ウィンドウで、編集しているファイルの種類によって、[ マスター ページの編集] または [ ページ レイアウトの編集] をクリックします。In Design Manager, in the left navigation pane, choose Edit Master Pages or Edit Page Layouts, depending on what type of file you're editing.

  4. スニペットを追加するマスター ページまたはページ レイアウトの名前を選択します。Select the name of the master page or page layout that you want to add snippets to.

  5. スニペット ギャラリーを開くには、サーバー側プレビューの右上隅で、[ スニペット] をクリックします。To open the Snippet Gallery, choose Snippets in the upper-right corner of the server-side preview.

  6. リボンの [ デザイン] タブで、ページに追加するスニペットを選択します。On the ribbon, on the Design tab, choose the snippet that you want to add to your page.

    スニペットを選択すると、スニペット ギャラリーが更新されて、そのスニペットで使用できるプロパティ、および HTML マスター ページまたはページ レイアウトにコピーできる HTML コード スニペットがページに表示されるようになります。When you select a snippet, the Snippet Gallery refreshes so that the page shows you the properties available for that snippet and the HTML code snippet that you can copy into your HTML master page or page layout.

    注意

    スニペットギャラリーのプレビューは廃止され、更新時に選択したスニペットのプレビューは表示されません。The Snippet Gallery preview is deprecated and does not show a preview of the selected snippet upon refresh.

  7. スニペット ギャラリーの右側の [ このコンポーネントについて] の下で、セクション ヘッダーをクリックまたは選択して、プロパティのグループを展開するか、折りたたむかして、必要なカスタム設定を構成します。On the right side of the Snippet Gallery, under About this Component, click or select section headers to expand or collapse groups of properties, and then configure any custom settings that you want.

    スニペットの主要な目的にとって最も重要なプロパティは、先頭の [重要] セクションに表示されます。スニペットを使用するときは、これらの重要なプロパティを理解しておく必要があります。The properties that are most important for the core purpose of the snippet appear in the top section named Important. These are the key properties that you have to understand when using a snippet.

    注意

    プロパティ グリッドに AjaxDelta で終わるヘッダーがある場合、それらはダウンロード最小化戦略に関係のあるコントロールに適用されるものであり、デザイン マネージャーで作成されるマスター ページおよびページ レイアウトではダウンロード最小化戦略は無効になっているので、これらのプロパティは無視する必要があります。If the property grid has a header that ends with AjaxDelta, you should ignore those properties because they apply to the controls related to the Minimal Download Strategy, which is disabled for master pages and page layouts created through Design Manager.

  8. プロパティを構成した後、[ 更新] をクリックします。これによって、ページの左側の HTML スニペットが更新され、マークアップにカスタム設定が反映されます。いつでも [ リセット] をクリックして、すべてのプロパティを既定の設定に戻すことができます。After you configure any properties, choose Update. This updates the HTML snippet on the left side of the page, so that the markup reflects your custom settings. You can always choose Reset to return all properties to their default settings.

  9. スニペット ギャラリーの左側で、[ HTML スニペット] の下の [ クリップボードにコピー] をクリックします。On the left side of the Snippet Gallery, under HTML Snippet, choose Copy to Clipboard.

  10. HTML エディターで、コンピューター上のマップされたネットワーク ドライブを開き、スニペットを追加するマスター ページまたはページ レイアウトの HTML ファイルを開きます。In your HTML editor, open the mapped network drive on your computer, and then open the HTML file for the master page or page layout that you're adding the snippet to.

  11. HTML ファイルの中の、マークアップを表示する場所にスニペットを貼り付けます。In the HTML file, paste the snippet where you want the markup to appear.

    各スニペットには、コンポーネントとサンプル データの視覚的プレビューを提供する HTML が含まれます。 <!--PS> タグおよび <!--PE> タグの内部の読み取り専用プレビューに対するこの HTML は、変更しないでください。このマークアップは、スニペットのデザインタイム プレビューにのみ影響し、実際のサイトでのスニペットの表示には影響しません。Each snippet contains HTML that provides a visual preview of the component and sample data. You shouldn't modify this HTML for the read-only preview inside the <!--PS> and <!--PE> tags because this markup affects only the design-time preview of the snippet, not how the snippet will appear on the live site.

  12. スニペットのサーバー側プレビューを表示するには、HTML ファイルを保存して、変更を関連する ASP.NET ファイルに同期した後、デザイン マネージャーでサーバー側プレビューの表示を更新します。To see the server-side preview of the snippet, save the HTML file to sync the changes to the associated ASP.NET file, and then refresh the server-side preview in Design Manager.

    デザインタイム プレビューとは異なり、サーバー側プレビューでは SharePoint によってレンダリングされたコントロールが表示されます。Unlike the design-time preview, the server-side preview shows the control as rendered by SharePoint.

HTML スニペットのマークアップの概要Understand the markup in an HTML snippet

スニペットには 4 つの基本セクションが含まれます。A snippet contains four basic sections:

  • ヘッダー は、

    および <!--CS> タグで開始します (カスタム ASP.NET スニペットは例外で、
    タグにラップされません)Header with starting
    and <!--CS> tags (except custom ASP.NET snippets, which are not wrapped in a
    tag)

  • SharePoint マークアップ は、スニペットが <!--MS> 開始タグと <!--ME> 終了タグで囲まれていますSharePoint markup where snippets are enclosed in <!--MS> start and <!--ME> end tags

  • HTML プレビュー は、 <!--PS> 開始タグと <!--PE> 終了タグで囲まれていますHTML preview enclosed in <!--PS> start and <!--PE> end tags

  • フッター は、 <!--CE> および