"モダン" リストと "モダン" ライブラリのカスタマイズ

  • [アーティクル]

2016 年に、SharePoint Online チームは、より速く、直感的で応答性の高い、優れたユーザー エクスペリエンスを実現する "モダン" ドキュメント リストと "モダン" ライブラリをリリースしました。 "モダン" エクスペリエンスには多数の利点がありますので、ご使用を強くお勧めします。 現在のカスタマイズが "モダン" エクスペリエンスでまだ機能していない場合は、ユーザーが次のような素晴らしい機能強化によるメリットを享受できるように、カスタマイズを再検討する時期です。

  • "モダン" ドキュメント ライブラリには、OneDrive と同様のエクスペリエンスを提供する更新されたユーザー インターフェイスが用意されているため、新しいフォルダーの作成とブラウザーでのファイルのアップロードがより直感的に行えます。

  • 任意の画面表示で、スクロールしないで見ることができるエリアにドキュメントを追加するには、[一番上に固定] を選択します。

  • コピー機能は新しくありませんが、コピーと移動のジェスチャーは、情報アーキテクチャを表示し、その場で新しいフォルダーを作成できるようにするためのインテリジェントな機能を備えています。

  • 今後は多くのコピーを作成する必要はないかもしれません。 ドキュメント ライブラリには、SharePoint で使用している他のファイルを記憶するためのインテリジェントな機能もあります。そのため、複数のサイト間でファイルを複製することなく、他のライブラリから他のファイルをリンクとしてインポートすることができます。

  • 新しいドキュメント ライブラリを使用すると、別の管理画面を選択しなくても、メイン ページで直接ファイルをグループ化できます。 ドラッグで列のサイズを変更できるだけでなく、任意の列ヘッダーで並べ替え、フィルター処理、グループ化ができます。

  • モバイル ブラウザーには、デスクトップと同じ機能が備わっているため、マウス、キーボード、タッチ、スクリーン リーダーのいずれで操作しても、あらゆるユーザーにおける SharePoint の生産性が向上します。

  • 現在、メタデータは、情報パネルのメイン ビューから直接編集できます。 更新プログラムを適用するために複数の画面をクリックする必要はありません。

  • Office Online の統合により、情報パネルの上部に完全なドキュメントのプレビューを移動できます。 パネルには、最近のアクティビティ、ファイルへの更新、ファイルへの共有を受けたユーザーの履歴など、すべてのメタデータが提供されています。

この記事では、"モダン" ライブラリと "モダン" リストのエクスペリエンスに含まれている機能拡張オプションについて説明します。 ただし、"モダン" エクスペリエンスから提供される機能の詳細については、次のリソースを参照してください。

この記事の残りの部分では、新しいユーザー エクスペリエンスには "モダン"、従来のユーザー エクスペリエンスには "クラシック" を使用します。

重要

"クラシック" エクスペリエンスは廃止されていません。"クラシック" と "モダン" の両方が共存しています。

カスタマイズ オプションの概要

"モダン" リストと "モダン" ライブラリでサポートされているカスタマイズ オプションは、"クラシック" のリストとライブラリほど多くはありません。 この記事では、サポートされているオプションの詳細と例について説明します。 SharePoint チームは、今後、さらに多くのオプションをサポートするよう取り組んでいます。 以下の一覧は、"モダン" リストと "モダン" ライブラリでサポートされている機能の簡単な概要を示しています。

  • ユーザー カスタム アクションのサブセット
  • カスタム ブランディング
  • PowerApps と Flow の統合

次のカスタマイズは、現在 "モダン" リストと "モダン" ライブラリではサポートされていません。

  • JSLink に基づくフィールドのカスタマイズ (SharePoint Framework の拡張機能のメモを参照)
  • JSLink に基づくビューのカスタマイズ (SharePoint Framework の拡張機能のメモを参照)
  • AlternateCSSUrl Web プロパティを使用したカスタム CSS
  • ユーザー カスタム アクションによって埋め込まれたカスタム JavaScript (SharePoint Framework 拡張機能のメモを参照)
  • カスタム マスター ページ (今後、代替オプションを使用して、ブランド化がより広範囲にサポートされる)
  • InfoPath 経由のカスタマイズ
  • ダウンロード最小化戦略 (MDS)
  • SharePoint Server 発行機能

注:

2017 年 6 月、SharePoint Framework 拡張機能は、開発者向けプレビュー版になりました。 これらの SharePoint Framework 拡張機能を使用すると、カスタム コードでフィールドのレンダリングを制御したり、カスタム コードを実行するユーザー カスタム アクションを作成したりすることができます。 詳細については、「SharePoint Framework 拡張機能の概要」をご覧ください。

ユーザー カスタム アクション

"モダン" エクスペリエンスでは、特定のユーザー カスタム アクションを新しいユーザー インターフェイスで表示することができますが、"クラシック" モードでサポートされているすべてのユーザー アクション構成が "モダン" エクスペリエンスでサポートされているわけではありません。 次の表は、サポートされているカスタム アクションの場所と "モダン" UI でそれらが表示される方法について、大まかな概要を示しています。

ユーザー カスタム アクションの場所 "モダン" UI での表示
EditControlBlock はい、これらのエントリはカスタム メニュー アイテムとして表示されます。
CommandUI.Ribbon はい、これらのエントリはツールバー アイテムとして表示されます。
上記以外の場所 (例: scriptlink) 申し訳ありませんが、これらのユーザー カスタム アクションは機能しません。

注:

これらのカスタム アクションが "モダン" リストと "モダン" ライブラリに表示されるのは、"モダン" UI が有効になっている"クラシック" サイトにアクセスしているときのみになります。 NoScript オプションが有効になっており、ユーザー カスタム アクションを "モダン" サイトに追加することができないため、既定では、それらは "モダン" サイトには表示されません。 ただし、"モダン" サイトで NoScript を無効にすることで、"クラシック" サイトと "モダン" サイト全体で "モダン" リストと "モダン" ライブラリに対して同じ動作を実現できます。

EditControlBlock ユーザー カスタム アクション

EditControlBlock をカスタム アクションの場所として使用すると、コンテキスト メニューにカスタム リンクを追加できます。 次の PnP プロビジョニング XML は、2 つのカスタム エントリを作成します。

<pnp:ProvisioningTemplate ID="EditControlBlockSamples" Version="1" xmlns:pnp="http://schemas.dev.office.com/PnP/2015/12/ProvisioningSchema">
  <pnp:CustomActions>
    <pnp:SiteCustomActions>
      <pnp:CustomAction Name="CA_1" Description="ca 1" Location="EditControlBlock" RegistrationType="List" RegistrationId="101" Title="CA 1 Title" Sequence="3000" Url="https://contoso.azurewebsites.net/pages/index.aspx" Enabled="true"/>
      <pnp:CustomAction Name="CA_2" Description="ca 2" Location="EditControlBlock" RegistrationType="ContentType" RegistrationId="0x0101" Title="CA 2 Title" Sequence="4000" Url="https://contoso.azurewebsites.net/pages/index.aspx" Enabled="true"/>
    </pnp:SiteCustomActions>
  </pnp:CustomActions>
</pnp:ProvisioningTemplate>

PnP Core ライブラリまたは PnP PowerShell を使用して、この PnP プロビジョニング テンプレートをサイトに適用できます。 この記事では、PowerShell のアプローチを表示するようにしました。 まず、PnP PowerShell のモジュールをインストールします。 完了した後、PnP プロビジョニング XML をファイルに保存したら、PnP PowerShell の単純な 2 行だけを使用してテンプレートを適用できます。


# Connect to a previously created Modern Site
$cred = Get-Credential
Connect-PnPOnline -Url https://[tenant].sharepoint.com/sites/siteurl -Credentials $cred

# Apply the PnP provisioning template
Apply-PnPProvisioningTemplate -Path c:\customaction_modern_editcontrolblock.xml -Handlers CustomActions

注:

PnP PowerShell はオープン ソース ソリューションであり、アクティブなコミュニティでサポートが提供されています。 Microsoft からのオープン ソース ツールのサポート SLA はありません。

サイト内のドキュメント ライブラリの "モダン" 表示を更新すると、新しいエントリが表示されます。

メニューに表示されるカスタム EditControlBlock アクション

メニューに表示されるカスタム EditControlBlock アクション

注:

  • NoScript オプションを無効にした "モダン" チーム サイトでこれを試している場合は、PnP-PowerShell の 2017 年 4 月以降のバージョンを使用してください。 または、現在の開発バージョンを使用してください。
  • このサンプルを一覧に対して使用する場合は、RegistrationId 属性を 100 に設定してください。

CommandUI.Ribbon ユーザー カスタム アクション

"モダン" リストと "モダン" ライブラリのエクスペリエンスでツールバーを拡張する場合は、この PnP プロビジョニング XML のサンプルに示されているように CommandUI.Ribbon の場所を対象とするユーザー カスタム アクションを追加します。

<pnp:ProvisioningTemplate ID="CommandUIRibbonSamples" Version="1" xmlns:pnp="http://schemas.dev.office.com/PnP/2015/12/ProvisioningSchema">
  <pnp:CustomActions>
    <pnp:SiteCustomActions>
      <pnp:CustomAction Name="CA_4" Description="ca 4" Location="CommandUI.Ribbon" RegistrationType="List" RegistrationId="101" Title="CA 4 Title" Sequence="6000" Enabled="true">
        <pnp:CommandUIExtension>
          <CommandUIDefinitions>
            <CommandUIDefinition Location="Ribbon.Documents.Copies.Controls._children">
              <Button
                Id="Ribbon.Documents.Copies.OfficeDevPnPDownloadAll"
                Command="OfficeDevPnP.Cmd.DownloadAll"
                Image16by16="/_layouts/15/images/sharepointfoundation16.png"
                LabelText="Download All"
                Description="Download all files separately"
                ToolTipTitle="Download All"
                ToolTipDescription="Download all files separately"
                TemplateAlias="o1"
                Sequence="15"/>
            </CommandUIDefinition>
          </CommandUIDefinitions>
          <CommandUIHandlers>
            <CommandUIHandler
              Command="OfficeDevPnP.Cmd.DownloadAll"
              CommandAction="https://contoso.azurewebsites.net/pages/index.aspx" />
          </CommandUIHandlers>
        </pnp:CommandUIExtension>
      </pnp:CustomAction>
      <pnp:CustomAction Name="CA_6" Description="ca 6" Location="CommandUI.Ribbon" RegistrationType="ContentType" RegistrationId="0x0101" Title="CA 6 Title" Sequence="5000" Enabled="true">
        <pnp:CommandUIExtension>
            <CommandUIDefinitions>
              <CommandUIDefinition Location="Ribbon.Tabs._children">
                <Tab Id="Custom Tab" Title="Custom Tab" Description="Custom Tab">
                  <Scaling Id="Custom Tab.Scaling">
                    <MaxSize Id="Custom Group.Scaling.MaxSize" GroupId="Custom Group" Size="TwoLarge" />
                    <MaxSize Id="Custom Group 2.Scaling.MaxSize" GroupId="Custom Group 2" Size="OneLarge" />
                    <Scale Id="Custom Group.Scaling.Scale" GroupId="Custom Group" Size="TwoLarge" />
                    <Scale Id="Custom Group 2.Scaling.Scale" GroupId="Custom Group 2" Size="OneLarge" />
                  </Scaling>
                  <Groups Id="Custom Tab.Groups">
                    <Group Id="Custom Group 2" Title="Custom Group 2" Description="Custom Group 2" Sequence="7888" Template="Ribbon.Templates.OneLarge">
                      <Controls Id="Custom Group 2.Controls">
                        <Button Id="CustomButton3" LabelText="Custom Button 3" Image16by16="/_layouts/15/images/attach16.png" Image32by32="/_layouts/15/images/attach16.png" ToolTipTitle="Custom Button 3" ToolTipDescription="Custom Button 3" Command="CustomButton3.Command" TemplateAlias="c3" />
                      </Controls>
                    </Group>
                    <Group Id="Custom Group" Title="Custom Group 1" Description="Custom Group 1" Sequence="10000" Template="Ribbon.Templates.TwoLarge">
                      <Controls Id="Custom Group 1.Controls">
                        <Button Id="CustomButton1" LabelText="Custom Button 1" Image16by16="/_layouts/15/images/itslidelibrary.png" Image32by32="/_layouts/15/images/itslidelibrary.png" ToolTipTitle="Custom Button 1" ToolTipDescription="Custom Button 1" Command="CustomButton1.Command" TemplateAlias="c1" />
                        <Button Id="CustomButton2" LabelText="Custom Button 2" Image16by16="/_layouts/15/images/dldsln16.png" Image32by32="/_layouts/15/images/dldsln16.png" ToolTipTitle="Custom Button 2" ToolTipDescription="Custom Button 2" Command="CustomButton2.Command" TemplateAlias="c2" />
                      </Controls>
                    </Group>
                  </Groups>
                </Tab>
              </CommandUIDefinition>
              <CommandUIDefinition Location="Ribbon.Templates._children">
                <GroupTemplate Id="Ribbon.Templates.TwoLarge">
                  <Layout Title="TwoLarge" LayoutTitle="TwoLarge"> 
                    <Section Alignment="Top" Type="OneRow"> 
                      <Row> 
                        <ControlRef DisplayMode="Large" TemplateAlias="c1" /> 
                        <ControlRef DisplayMode="Large" TemplateAlias="c2" /> 
                      </Row> 
                    </Section> 
                  </Layout> 
                </GroupTemplate>
              </CommandUIDefinition>
              <CommandUIDefinition Location="Ribbon.Templates._children">
                <GroupTemplate Id="Ribbon.Templates.OneLarge">
                  <Layout Title="OneLarge" LayoutTitle="OneLarge"> 
                    <Section Alignment="Top" Type="OneRow"> 
                      <Row> 
                        <ControlRef DisplayMode="Large" TemplateAlias="c3" /> 
                      </Row> 
                    </Section> 
                  </Layout> 
                </GroupTemplate>
              </CommandUIDefinition>
            </CommandUIDefinitions>
            <CommandUIHandlers>
              <CommandUIHandler Command="CustomButton1.Command" CommandAction="https://contoso.azurewebsites.net/pages/index.aspx" />
              <CommandUIHandler Command="CustomButton2.Command" CommandAction="http://www.bing.com" />
              <CommandUIHandler Command="CustomButton3.Command" CommandAction="https://developer.microsoft.com/sharepoint" />
            </CommandUIHandlers>
        </pnp:CommandUIExtension>
      </pnp:CustomAction>
    </pnp:SiteCustomActions>
  </pnp:CustomActions>
</pnp:ProvisioningTemplate>

これらのユーザー カスタム アクションを追加すると、ツールバーに表示されます。 カスタム タブはドロップダウン メニューに変換されることにご注意ください。

ツールバーに表示されるカスタム アクション

ツールバーに表示されるカスタム アクション


注:

  • NoScript オプションを無効にした "モダン" チーム サイトでこれを試している場合は、PnP-PowerShell の 2017 年 4 月以降のバージョンを使用してください。 または、現在の開発バージョンを使用してください。
  • このサンプルを一覧に対して使用する場合は、RegistrationId 属性を 100 に設定し、CA_4 ユーザー カスタム アクションに次の XML を使用してください。
	<CommandUIDefinition Location="Ribbon.Templates._children">
	  <Button
	    Id="Ribbon.Templates.OfficeDevPnPDownloadAll"
	    Command="OfficeDevPnP.Cmd.DownloadAll"
	    Image16by16="/_layouts/15/images/sharepointfoundation16.png"
	    LabelText="Download All"
	    Description="Download all files separately"
	    ToolTipTitle="Download All"
	    ToolTipDescription="Download all files separately"
	    TemplateAlias="o1"
	    Sequence="15"/>
	</CommandUIDefinition>

ユーザー カスタム アクションの制限事項

モダン エクスペリエンスで機能する必要があるユーザー カスタム アクションを開発する際は、次の制限事項を考慮してください。

  • ユーザー カスタム アクションを表示する順序を完全に制御することはできません。ユーザー カスタム アクションは _api/web/Lists(guid'listid')/CustomActionElements がユーザー カスタム アクションを返す順序で追加されます。また、この API では現在、シーケンス属性は考慮されていません。 カスタム タブ内で定義されているボタンは、CommandUIDefinition xml 内に適切な順序で追加することにより、並べ替えることができます。 サンプルではボタン 3 が最初に表示されています。これは XML での順序によるものです。

  • 返されるユーザー カスタム アクション要素 xml に Tab 要素か Group 要素のどちらかが複数含まれている場合、Button 要素が存在すると、カスタム タブ内でユーザー カスタム アクションがグループ化されます。

  • コマンド アクションに JavaScript を含めることはできません。 たとえば、CommandAction="javascript:alert('My custom Action');" を使用すると、ユーザー カスタム アクションは表示されません。

  • ScriptLink プロパティまたは ScriptBlock プロパティを使用することはできません。これらのプロパティを使用できるのはユーザー カスタム アクションの場所 ScriptLink のみですが、この場所はサポートされていません。

  • イメージ マップ (例: Image16by16="/_layouts/15/1033/images/formatmap16x16.png?rev=33" Image16by16Left="-144" Image16by16Top="-107") は使用できません。個々のイメージを指定する必要があります。 また、有用なイメージは 16x16 のみであることにもご注意ください。

カスタム ブランディング

サイトでカスタム テーマを使用している場合は、このカスタム テーマは、次のサンプルで示されるように、"モダン" リストと "モダン" ライブラリのエクスペリエンス内で使用されます。

カスタム テーマに基づくカスタム ブランディングを使用したモダン リスト

カスタム テーマに基づくカスタム ブランディングを使用したモダン リスト

エンド ユーザー エクスペリエンスを構成する

"モダン" または "クラシック" のライブラリとリストのエクスペリエンスを使用するかどうかを制御するためのオプションは複数あります。 詳細については、「モダン リストとライブラリのエクスペリエンスをオプト アウトする」の記事を参照してください。

組み込みの自動検出によって、表示が自動的に "クラシック" に切り替えられるのはいつですか?

前のセクションで説明されている、サイト、Web、リストの範囲の上書きによってリストの "モダン" エクスペリエンスを無効にしていない限り、SharePoint は自動検出システムを使用して、リストの表示を自動的に "クラシック" に切り替えます。 "モダン" で (まだ) サポートされていない機能をリストが使用していることを SharePoint が検出した場合、この自動検出システムは自動的に "クラシック" 表示に切り替えます。

以下は、自動検出システムの一部として評価され、リストを "クラシック" モードで表示する設定です。

  • 要求されたリスト フォーム ページ上に、0 個または複数個の Web パーツがある場合。

  • (2017 年 7 月まで) Web の範囲内の機能 "メタデータ ナビゲーションとフィルター処理" が有効になっている場合。 Microsoft は、"モダン" リストと "モダン" ライブラリの管理されたメタデータのナビゲーション サポートを展開しています。

  • 使用できる Web パーツが XSLTListViewWebPart (リストを表示する既定の方法) であり、かつ次の場合。

    • Web パーツのプロパティに非標準 JSLink または XslLink 値のセットがある場合。
    • ダイアログにページが表示されている場合 (IsDlg=1)。
    • リストは、ドキュメント ライブラリ (101)、画像ライブラリ (109)、Web ページ ライブラリ (119)、汎用リスト (100) のいずれの種類にも基づいていません。 2017 年 8 月現在では、お知らせ (104) とリンク (103) は "モダン" UI を使用して表示します。
    • 表示するフィールドのいずれかで JSLink プロパティが設定されている場合。
    • 表示するフィールドが BCS 外部データ、位置情報、OutcomeChoice のいずれかの種類であるか、発行するフィールドが 画像、HTML、SummaryLinks のいずれかの種類である場合。
    • ScriptSrc プロパティが設定されている、リストの範囲のユーザー カスタム アクションがある場合。

  • 使用できる Web パーツが ListFormWebPart であり、

    • ダイアログにページが表示されている場合 (IsDlg=1)。
    • ドキュメント ライブラリの "新しい" フォーム ページである場合。
    • 表示するフィールドが、サポートされている次の種類のいずれでもない場合 (添付ファイル、TaxonomyField、ブール値、選択、通貨、日時、ファイル、参照、MultiChoice、MultiLine (バージョン管理を使用した追加が有効な場合を除く)、番号、テキスト、ユーザー、または URL)。

ライブラリ/リストを "モダン" または "クラシック" のどちらで表示するかを、プログラムによって検出する

前のセクションでは、自動検出のメカニズムの背後にある理論について説明しましたが、開発者にとっては、より簡単にライブラリ/リストの表示方法について理解する方法があります。 この情報を得るのは簡単で、CSOM または REST を使って取得できる PageRenderType ファイル プロパティの値を取得するだけです。 次のサンプルでは、まずリストを表示するページを読み込み、次に PageRenderType を取得する方法を示します。

CSOM のサンプル

using (var cc = new ClientContext(siteUrl))
{
    cc.Credentials = new SharePointOnlineCredentials(userName, password);
    
    // Load the AllItems.aspx file from the list
    File file = cc.Web.GetFileByServerRelativeUrl("/sites/dev/ECMTest/Forms/AllItems.aspx");
    cc.Load(file, f => f.PageRenderType);
    cc.ExecuteQuery();

    // Check page render type
    Console.WriteLine($"Status = {file.PageRenderType}");
}

注:

PageRenderType プロパティは、2017 年 1 月の CSOM リリース (16.1.6112.1200) で導入されました。


REST 要求

GET _api/web/getfilebyserverrelativeurl('/sites/dev/ECMTest/Forms/AllItems.aspx')/pageRenderType

REST の呼び出しは整数値を取得します。これについては、次の表で説明します。

値 理由
0 未定義 = 0、(表示モードを判別するための情報が不足している)
1 MultipeWePart
2 JSLinkCustomization
3 XslLinkCustomization
4 NoSPList
5 HasBusinessDataField
6 HasTaskOutcomeField
7 HasPublishingField
8 HasGeolocationField
9 HasCustomActionWithCode
10 HasMetadataNavFeature
11 SpecialViewType
12 ListTypeNoSupportForModernMode
13 AnonymousUser
14 ListSettingOff
15 SiteSettingOff
16 WebSettingOff
17 TenantSettingOff
18 CustomizedForm
19 DocLibNewForm
20 UnsupportedFieldTypeInForm
21 InvalidFieldTypeInForm
22 InvalidControModeInForm
23 CustomizedPage
24 ListTemplateNotSupported
100 モダン

その他の考慮事項

"モダン" リストと "モダン" ライブラリのエクスペリエンス用のその他のカスタマイズ オプションは、段階的に導入されます。 これらは、SharePoint Framework の追加機能のリリースと並行して行われます。 現在、正確なスケジュールをお知らせすることはできませんが、新しい機能がリリースされた場合は、"モダン" エクスペリエンスに関する記事を随時更新する予定です。

関連項目