Office 365 SPFx コードスニペット 開発とプログラミング

Visual Studio Code Remote - Containers と Docker による SharePoint Framework 開発環境構築

はじめに

SharePoint Framework 開発環境に Docker を利用することによる利点は数多くありますが、プロジェクト作成後に Docker を使うための事前作業を行う必要がありました。 この事前作業が SharePoint Framework のバージョンによって異なったりするため、かなり骨の折れる作業でした。 ここまで手間をかけてまで Docker を使う必要があるのか・・・と悩んだりもしましたが、ここにきて良い解決策が見つかりました！ それが今回紹介する Visual Studio Code の拡張機能である「Remote- Containers」です。 この拡張機能を使うことで Docker を使うための煩わしい事前作業を無くすことができるため、Docker を使った SharePoint Framework 開発環境がこれまでよりも簡単に構築できるようになります。 より手軽に Docker の恩恵が受けられるようになるので、複数人開発や複数環境向けの開発を行っている場合は、ぜひこの拡張機能を利用してみてください。 この記事では、Remote - Containers と Docker を使った SharePoint Framework 開発環境構築の手順を説明します。

読了時間: 4分
Office 365 SharePoint SPFx 開発とプログラミング

SharePoint Framework の各種パッケージを最新化する

はじめに

SharePoint Framework で以前作ったアプリを最新の SharePoint Framework 開発環境で bundle しようとしたところエラーが出て bundle が失敗しました。 上記のように以前作ったアプリを最新バージョンに対応させるということは度々発生すると思うので、基本的なバージョンアップ方法について docs をもとに試してみました。 docs SharePoint Framework のパッケージの更新

bundle 時に発生したエラー

もともと SPFx v1.10.0 で実装していた Web パーツを SPFx v1.12.1 環境で「gulp bundle –ship」したところ、以下のエラーが発生しました。

読了時間: 3分
Office 365 SharePoint 開発とプログラミング

SharePoint Framework v1.12.1 の変更点

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 からダウンロード可能です。

読了時間: 1分
Office 365 勉強会・イベントなど 開発とプログラミング

Microsoft 365 Virtual Marathon 2021 に登壇いたしました

2021年4月27日開催の Microsoft 365 Virtual Marathon 2021 に登壇いたしました。 セッションでは、SharePoint で必要不可欠なサイトテンプレートの機能について話をしました。 詳細は以下にセッションスライドをアップしておりますので、そちらをご確認ください。

Microsoft 365 Virtual Marathon 2021 - SharePoint サイトの自動作成あれこれ from Hiroaki Oikawa

読了時間: 1分
Office 365 SharePoint 開発とプログラミング

サイトテンプレートによるモダンサイトのテンプレート化とサイト作成 その２：サイトテンプレートの作成と登録

はじめに

モダンサイトのサイトテンプレート機能により、サイトの構造をテンプレート化して横展開することが可能となります。 このサイトテンプレート機能の使い方を複数回に分けて紹介します。

今回はサイトテンプレートの作成と登録ということで、サイトテンプレートの作り方などを記載します。

サイトテンプレートとサイトスクリプトの正体

サイトスクリプトは、サイトの設定やリストの設定に関する定義情報です。 このサイトスクリプトを複数組み合わせて、ひとつのセットにしたものをサイトテンプレートと呼びます。 サイトスクリプトの実体は 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 に記載があるので詳細は割愛します。

読了時間: 2分
Office 365 SharePoint コードスニペット 開発とプログラミング

サイトテンプレートの種類を表す「サイトテンプレート ID」

はじめに

サイトデザインを作成する場合、サイトテンプレート ID を指定する必要があります。 ところがこのサイトテンプレート 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 の一覧

今後追加される可能性もありますが、現時点のサイトテンプレート ID の一覧は以下の通りとなります。

読了時間: 4分
Office 365 SharePoint 開発とプログラミング

サイトテンプレートによるモダンサイトのテンプレート化とサイト作成 その１：サイトテンプレートとサイトスクリプト

はじめに

モダンサイトのサイトテンプレート機能により、サイトの構造をテンプレート化して横展開することが可能となります。 このサイトテンプレート機能の使い方を複数回に分けて紹介します。

サイトテンプレート、サイトスクリプトとは

サイトテンプレートは、docs に記載がある通り、クラシックサイトのサイトテンプレートに似たモダンサイト用の機能です。 サイトテンプレートには、サイトに適用するテーマや自動生成するリスト等を含めることができ、新規サイト作成時や作成済みのサイトに対して適用することができます。 サイトテンプレートは複数のサイトスクリプトで構成されています。 サイトスクリプトは、JSON で記述する定義情報で、この中にテーマやリストの情報を含めることができます。 サイトテンプレートを適用すると、サイトテンプレートに紐づく全てのサイトスクリプトが実行されて、サイトのテーマの変更やリストの追加が行われます。 サイトスクリプトは、既存のサイトやリストを元に作成することができるため、既存サイトと同じ構成のサイトを作成するといったこともできるようになります。 サイトテンプレートを使用することでモダンサイトをテンプレート化して複製するようなことが可能になりますが、サイトテンプレートを使ってできることは現時点では限定的なため、クラシックサイトのサイトテンプレートやリストテンプレートと比べると機能的には劣ります。 それでも、モダンサイトのテンプレート化が全くできないという状態よりはだいぶ良いと思うので活用していきたいところです。 なお、「サイトテンプレート」は以前「サイトデザイン」と呼ばれていました。 そのため、マイクロソフトの公式ドキュメントでは一部「サイトデザイン」と記載されている箇所があります。 また、サイトテンプレートを取り扱う PowerShell コマンドレットも「サイトデザイン」時代の名残があります。

読了時間: 1分
Office 365 SharePoint SPFx 開発とプログラミング

SharePoint Framework ライブラリコンポーネントの開発

はじめに

SharePoint Framework v1.9.1 で GA となったライブラリコンポーネントの開発について、docs を参考に docker 環境で実際に開発をしてみました。

ライブラリコンポーネントとは

ライブラリコンポーネントは、SharePoint Framework で開発されたコードを複数のプロジェクトで共有するための仕組みです。 あらかじめライブラリコンポーネントとして開発しておいたパッケージファイルをアプリカタログにアップすることで、SharePoint Framework で開発された他のコンポーネントから参照することが可能となります。

ライブラリコンポーネントの開発

docker で SharePoint Framework の開発環境を構築している場合の手順を含めながら、ライブラリコンポーネントを開発し参照する流れを記載します。

読了時間: 3分
Office 365 SharePoint SPFx コードスニペット 開発とプログラミング

SharePoint Framework での SharePoint REST API 呼び出し (async/await 編)

はじめに

別記事にて、 SharePoint Framework の SPHttpClient による SharePoint REST API 呼び出しで Promise を使った場合のパターンについて記事を書きましたが、今度は Promise を使わず、TypeScript の async/await を使ったパターンについて書きたいと思います。

async/await を使った SharePoint REST API 呼び出しのサンプル

GET 処理

概ね以下のようなコードになるかと思います。 ちなみにこの例は、指定のリストの指定のアイテム ID のアイテムについて列を指定してデータを取得するものとなります。

読了時間: 2分