※この記事は以前に書いた記事「SharePoint Framework Web パーツ開発 その１：プロジェクトの作成」を Docker 環境構築に依存しない形で書き直した記事です。 SharePoint Framework による Web パーツの開発手順を説明します。 説明の題材として、SharePoint リストから URL 列の値を取得して一覧で表示する、クラシック UI でいうところのリンクリストのような Web パーツを開発していきたいと思います。 既にSharePoint Framework 開発環境が準備できている前提での話になりますので、環境がまだ無い方は以下の記事を参考に環境構築をしてください。
SharePoint Framework 開発環境に Docker を利用することによる利点は数多くありますが、プロジェクト作成後に Docker を使うための事前作業を行う必要がありました。 この事前作業が SharePoint Framework のバージョンによって異なったりするため、かなり骨の折れる作業でした。 ここまで手間をかけてまで Docker を使う必要があるのか・・・と悩んだりもしましたが、ここにきて良い解決策が見つかりました！ それが今回紹介する Visual Studio Code の拡張機能である「Remote- Containers」です。 この拡張機能を使うことで Docker を使うための煩わしい事前作業を無くすことができるため、Docker を使った SharePoint Framework 開発環境がこれまでよりも簡単に構築できるようになります。 より手軽に Docker の恩恵が受けられるようになるので、複数人開発や複数環境向けの開発を行っている場合は、ぜひこの拡張機能を利用してみてください。 この記事では、Remote - Containers と Docker を使った SharePoint Framework 開発環境構築の手順を説明します。
SharePoint Framework で以前作ったアプリを最新の SharePoint Framework 開発環境で bundle しようとしたところエラーが出て bundle が失敗しました。 上記のように以前作ったアプリを最新バージョンに対応させるということは度々発生すると思うので、基本的なバージョンアップ方法について docs をもとに試してみました。 docs SharePoint Framework のパッケージの更新
もともと SPFx v1.10.0 で実装していた Web パーツを SPFx v1.12.1 環境で「gulp bundle –ship」したところ、以下のエラーが発生しました。
モダンサイトのサイトテンプレート機能により、サイトの構造をテンプレート化して横展開することが可能となります。 このサイトテンプレート機能の使い方を複数回に分けて紹介します。
今回は作成済みのサイトからサイトテンプレートを作成する方法を記載します。
既存のサイトからサイトテンプレートを作成するには、まず初めにサイトスクリプトを作成します。 サイトスクリプトは PowerShell の「Get-SPOSiteScriptFromWeb」コマンドレットを使用することで、既存サイトから自動作成することができます。
Connect-SPOService -Url [SharePoint 管理センターの URL]
# サイトスクリプトファイルを自動作成
# IncludedListsパラメータにはサイトスクリプトに含めたいリストの URL を指定
$template = Get-SPOSiteScriptFromWeb `
-WebUrl [テンプレートサイトのURL] `
-IncludeBranding `
-IncludeTheme `
-IncludeRegionalSettings `
-IncludeSiteExternalSharingCapability `
-IncludeLinksToExportedItems `
-IncludedLists ("Shared Documents", "Lists/List", "SitePages")
$template | Out-File [サイトスクリプトファイルのフルパス.xml]
上記コマンドでサイトスクリプトを作成後、以下のコマンドでサイトテンプレートにサイトスクリプトを登録します。
2021年4月28日に SharePoint Framework v1.12.1 がリリースされました。 この記事では v1.12.1 の変更点について気になるところだけ抜粋して記載します。 詳細は以下のリリースノートを確認してください。 SharePoint Framework v1.12.1 release notes なお、SharePoint Framework v1.12.1 に対応した Docker イメージは Docker Hub からダウンロード可能です。
2021年4月27日開催の Microsoft 365 Virtual Marathon 2021 に登壇いたしました。 セッションでは、SharePoint で必要不可欠なサイトテンプレートの機能について話をしました。 詳細は以下にセッションスライドをアップしておりますので、そちらをご確認ください。
Microsoft 365 Virtual Marathon 2021 - SharePoint サイトの自動作成あれこれ from Hiroaki Oikawa
モダンサイトのサイトテンプレート機能により、サイトの構造をテンプレート化して横展開することが可能となります。 このサイトテンプレート機能の使い方を複数回に分けて紹介します。
今回はサイトテンプレートの作成と登録ということで、サイトテンプレートの作り方などを記載します。
サイトスクリプトは、サイトの設定やリストの設定に関する定義情報です。 このサイトスクリプトを複数組み合わせて、ひとつのセットにしたものをサイトテンプレートと呼びます。 サイトスクリプトの実体は JSON データです。 JSON データとして定義情報を書き、これをサイトテンプレートとしてまとめて、サイトテンプレート単位でサイトに適用します。 前の記事でサイトテンプレートを適用する流れを記載しましたが、その際に使ったサイトスクリプトはこちらになります。
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/site-design-script-actions.schema.json",
"actions": [
{
"verb": "createSPList",
"listName": "サイトスクリプトで作成したリスト",
"templateType": 100,
"subactions": [
{
"verb": "setDescription",
"description": "サイトスクリプトで作成したリストです。"
},
{
"verb": "addSPField",
"id": "4c35f233-238a-473b-8b68-a13805631932",
"fieldType": "Note",
"displayName": "本文",
"internalName": "Body",
"isRequired": false,
"addToDefaultView": false
},
{
"verb": "addSPField",
"id": "c97e1afa-f634-4c74-8fbd-977b1c994078",
"fieldType": "DateTime",
"displayName": "有効期限",
"internalName": "ExpireDate",
"isRequired": false,
"addToDefaultView": false
}
]
}
]
}
※ docs にもサイトスクリプトのサンプルが掲載されています。 サイトスクリプトの記述の仕方は docs に記載があるので詳細は割愛します。
サイトデザインを作成する場合、サイトテンプレート ID を指定する必要があります。 ところがこのサイトテンプレート ID が特にどこにも一覧化されておらず指定する値が分かりづらいため、プログラムを作って調べてみました。 調べるためのサンプルコードと現時点のサイトテンプレート ID の一覧をまとめました。
CSOM を使って、サイトテンプレート ID を取得するコートは以下の通りです。
using System;
using System.IO;
using Microsoft.SharePoint.Client;
using OfficeDevPnP.Core;
namespace EnumSPTemplate
{
class Program
{
static void Main(string[] args)
{
try
{
var file = new StreamWriter(args[1]);
var auth = new AuthenticationManager();
using (var context = auth.GetWebLoginClientContext(args[0]))
{
var templates = context.Site.GetWebTemplates(1041, 15);
context.Load(templates);
context.ExecuteQuery();
file.WriteLine("ID\tDisplayCategory\tTitle\tName\tDescription\tIsRootWebOnly\tIsSubWebOnly\tIsHidden");
foreach (var item in templates)
{
file.WriteLine("{0}\t{1}\t{2}\t{3}\t{4}\t{5}\t{6}\t{7}",
item.Id, item.DisplayCategory, item.Title, item.Name, item.Description, item.IsRootWebOnly, item.IsSubWebOnly, item.IsHidden);
}
file.Close();
}
}
catch (Exception ex)
{
Console.WriteLine(ex);
}
}
}
}
今後追加される可能性もありますが、現時点のサイトテンプレート ID の一覧は以下の通りとなります。
モダンサイトのサイトテンプレート機能により、サイトの構造をテンプレート化して横展開することが可能となります。 このサイトテンプレート機能の使い方を複数回に分けて紹介します。
サイトテンプレートは、docs に記載がある通り、クラシックサイトのサイトテンプレートに似たモダンサイト用の機能です。 サイトテンプレートには、サイトに適用するテーマや自動生成するリスト等を含めることができ、新規サイト作成時や作成済みのサイトに対して適用することができます。 サイトテンプレートは複数のサイトスクリプトで構成されています。 サイトスクリプトは、JSON で記述する定義情報で、この中にテーマやリストの情報を含めることができます。 サイトテンプレートを適用すると、サイトテンプレートに紐づく全てのサイトスクリプトが実行されて、サイトのテーマの変更やリストの追加が行われます。 サイトスクリプトは、既存のサイトやリストを元に作成することができるため、既存サイトと同じ構成のサイトを作成するといったこともできるようになります。 サイトテンプレートを使用することでモダンサイトをテンプレート化して複製するようなことが可能になりますが、サイトテンプレートを使ってできることは現時点では限定的なため、クラシックサイトのサイトテンプレートやリストテンプレートと比べると機能的には劣ります。 それでも、モダンサイトのテンプレート化が全くできないという状態よりはだいぶ良いと思うので活用していきたいところです。 なお、「サイトテンプレート」は以前「サイトデザイン」と呼ばれていました。 そのため、マイクロソフトの公式ドキュメントでは一部「サイトデザイン」と記載されている箇所があります。 また、サイトテンプレートを取り扱う PowerShell コマンドレットも「サイトデザイン」時代の名残があります。
SharePoint Framework v1.9.1 で GA となったライブラリコンポーネントの開発について、docs を参考に docker 環境で実際に開発をしてみました。
ライブラリコンポーネントは、SharePoint Framework で開発されたコードを複数のプロジェクトで共有するための仕組みです。 あらかじめライブラリコンポーネントとして開発しておいたパッケージファイルをアプリカタログにアップすることで、SharePoint Framework で開発された他のコンポーネントから参照することが可能となります。
docker で SharePoint Framework の開発環境を構築している場合の手順を含めながら、ライブラリコンポーネントを開発し参照する流れを記載します。