次の方法で共有

SharePoint においてデバイス チャネル パネルのスニペットを追加する

  • [アーティクル]

デバイス チャネル パネルは、マスター ページまたはページ レイアウトに追加できるスニペットであり、作成するチャネルごとにどんなコンテンツをレンダリングするかを制御できます。 デバイス チャネル パネルの主な目的は、単一のページ レイアウトからチャネルに応じて異なるページ フィールドを選択的に表示することです。

デバイス チャネル パネル スニペットの概要

デバイス チャネル パネルは、マスター ページまたはページ レイアウトに追加して、作成する各チャネルでレンダリングされるコンテンツを制御できるコントロールです。 デバイス チャネル パネルは、1 つ以上のチャネルを指定するコンテナーです。ページのレンダリング時に 1 つ以上のチャネルがアクティブな場合は、デバイス チャネル パネルのすべてのコンテンツもレンダリングされます。 デバイス チャネル パネルは、CSS ファイルや .js ファイルへのリンクなど、ほぼすべての種類のコンテンツを含むことができます。 特定のチャネルに特定のコンテンツを含める簡単な方法です。

デバイス チャネル パネルを使用する最も一般的なシナリオは、特定のチャネルのページ レイアウトの一部を選択的に含める場合です。 たとえば、長いあいさつ文と短いあいさつ文の個別のテキスト フィールドを含むページ レイアウトがあるとします。 [デバイス チャネル パネル] 内にページ フィールドを配置すると、短いあいさつ文を電話にのみ表示し、長いあいさつ文をデスクトップにのみ表示できます。 デバイス チャネル パネルのコンテンツは、含まれていないチャネルには表示されません。実際、コンテンツはまったくレンダリングされないため、バイトがネットワークを通過できなくなります。 このため、デバイス チャネル パネルは特定のチャネルのページの太さを減らすのに役立つため、デバイス チャネル パネルを使用すると、CSS クラス Display:None を使用するよりも、特定のチャネルにコンテンツを表示する方が優れた方法です。

デバイス チャネル パネルをマスター ページで使用することもできます。 たとえば、2 つの異なるデバイス (または 2 つの異なるブラウザー) への対応が可能なマスター ページをほとんど変更せずに使用している場合、デバイス チャネル パネルを使用して、いずれかのデバイスに特定のマスター ページのコンテンツを保持することができます。

デバイス チャネル パネルの使用に関しては、2 つの制限があります。

  • 表示テンプレート: 表示テンプレートはクライアント側でレンダリングされ、デバイス チャネル パネルはサーバー側で実行されるので、表示テンプレート内でデバイス チャネル テンプレートを使用することはできません。 代わりに、ページ レイアウトのデバイス チャネル パネル内で 2 つの異なるコンテンツ検索 Web パーツを使用するか、JavaScript 変数を使用して表示テンプレート自体内で必要な動作をトリガーする必要があります。
  • Web パーツ ゾーン デバイス チャネル パネル内に Web パーツ ゾーンを挿入することはできません。 作成者がページに Web パーツを追加できるようにする必要があり、モバイル デバイスに対するページの負荷が問題にならない場合は、リッチ テキスト エディター ページ フィールドをデバイス チャネル パネルに追加し、そこに Web パーツを追加するように作成者に指示します。 Web パーツはデバイス チャネル パネルに直接 (Web パーツ領域なしで) 追加できます。

デバイス チャネル パネル スニペットの挿入

どのようなスニペットでも同じですが、デバイス チャネル派熱スニペットもスニペット ギャラリーから追加します。 スニペット ギャラリーに移動するには、最初に編集するマスター ページまたはページ レイアウトを選択する必要があります。

デバイス チャネル パネル スニペットを挿入する方法

  1. 発行サイトに移動します。

  2. ページの右上隅で、歯車の形の [設定] アイコンをクリックし、[ デザイン マネージャー] をクリックします。

  3. デザイン マネージャーの左のナビゲーション ウィンドウで、編集しているファイルの種類によって、[ マスター ページの編集] または [ ページ レイアウトの編集] をクリックします。

  4. スニペットを追加するマスター ページまたはページ レイアウトの名前を選択します。

  5. スニペット ギャラリーを開くには、サーバー側プレビューの右上隅で、[ スニペット] をクリックします。

  6. リボンの [ デザイン] タブで、[ デバイス チャネル パネル] を選択します。

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

    [ 重要] という名前のセクションには、この特定のスニペットの動作にとって重要であるプロパティが含まれます。 デバイス チャネル パネルの場合は、 IncludedChannels プロパティが最も重要です。 このプロパティには、このデバイス チャネル パネルに含まれるコンテンツを表示する各デバイス チャネルのエイリアスを入力します。 複数のエイリアスを入力する場合は、コンマで区切ります。

    注:

    [デバイス チャネル] の一覧でチャネルのエイリアスを編集する場合は、デザイン ファイルでそのエイリアスが出現するすべての場所を手作業で探して更新する必要があります。これには、そのエイリアスを使用しているすべてのデバイス チャネル パネルの IncludedChannels プロパティの更新も含まれます。

  8. 他のプロパティを構成した後、[ 更新] をクリックします。 これによって、ページの左側の HTML スニペットが更新され、マークアップにカスタム設定が反映されます。 いつでも [リセット] をクリックして、すべてのプロパティを既定の設定に戻すことができます。

  9. スニペット ギャラリーの左側で、[ HTML スニペット] の下の [ クリップボードにコピー] をクリックします。

  10. HTML エディターで、コンピューター上のマップされたネットワーク ドライブを開き、スニペットを追加するマスター ページまたはページ レイアウトの HTML ファイルを開きます。

    詳細については、「 方法: ネットワーク ドライブを SharePoint マスター ページ ギャラリーにマップする」を参照してください。

  11. HTML ファイルの中の、マークアップを表示する場所にスニペットを貼り付けます。

    ページ レイアウトにスニペットを追加している場合は、 PlaceHolderMain の内部にスニペットを貼り付けてください。

  12. class="DefaultContentBlock" の <div> を独自のコンテンツに置き換えます。

    通常、デバイス チャネル パネルをページ レイアウトに追加している場合は、パネルの内部にページ フィールドをコピーすることによって <div> を置き換えます。

  13. ページを保存し、デザイン マネージャーでサーバー側プレビューを更新して、デバイス チャネル パネルが意図したとおりに表示されることを確認します。

    異なるチャネルでパネルをプレビューするには、クエリ文字列パラメーターを URL に追加できます。 たとえば、サーバー側プレビューの任意のページの URL にクエリ文字列変数 "DeviceChannel=YourChannelAlias" を追加できます。

スニペット マークアップの理解

デバイス チャネル パネル スニペットの最も重要な 2 つの部分は、 IncludedChannels プロパティと <div> where です class="DefaultContentBlock"。 既定では、 IncludedChannels プロパティは空です。 プロパティ グリッドの [ 重要] セクションに、そのパネルにコンテンツを表示するデバイス チャネルのエイリアスをコンマで区切って入力する必要があります。

注:

[デバイス チャネル] の一覧でエイリアスを変更した場合は、マークアップでそのエイリアスが出現するすべての場所でそのエイリアスを変更する必要もあります。これには、そのエイリアスを使用しているすべてのデバイス チャネル パネルの IncludedChannels プロパティ内も含まれます。

場所class="DefaultContentBlock"は<div>、含まれているチャネルに表示する特定のコンテンツに置き換える必要があります。 デバイス チャネル パネルは、CSS ファイルや .js ファイルへのリンクなど、ほぼすべての種類のコンテンツを含むことができます。 デバイス チャネル パネルを使用する最も一般的なシナリオは、特定のチャネルに対してページ レイアウトの特定のページ フィールドを含めることです。 この場合は、デバイス チャネル パネルの内部で <div> が配置される場所にページ フィールド マークアップをコピーします。

<div data-name="DeviceChannelPanel">
    <!--CS: Start Device Channel Panel 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:DeviceChannelPanel runat="server" IncludedChannels="MyPhoneChannel, MyTabletChannel">-->
        <!--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 Device Channel Panel Properties.
        </div>
        <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
    <!--ME:</Publishing:DeviceChannelPanel>-->
    <!--CE: End Device Channel Panel Snippet-->
</div>

関連項目