SPFx、Office Web アドイン開発でありがちな Node.js のバージョンが環境ごとに異なる場合の開発環境の工夫(チーム開発前提)

はじめに

SPFx や Office Web アドイン、Azure Functions を行ったり来たりする開発をしていると、Node.js のバージョン違いで思わぬところに引っかかることがあります。

この記事は個人開発ではなくチーム開発を前提に、Node.js のバージョンをプロジェクト単位で揃えやすくするために、最近落ち着いたやり方をまとめたものです。

以前は Remote Containers を推奨していました

以前は、Remote Containers(Dev Containers)をよく使っていました。

チーム開発だと、環境差異が出ると面倒なので「まず揃える」ための手段としては理にかなっていると思っていました。

ただし、実際に使ってみると別の問題が見えてきました

一方で、実運用していく中で次のような点が気になり始めました。

読了時間: 2分

新しいOutlookのイベントチャームのアイコン名

イベントチャームとは

新しいOutlookに実装されている予定のタイトル左横で指定できるアイコンのことをイベントチャームというようです。 これが正式名かどうかは分からないのですが、調べている限りそういう感じの言い方がされているので、この記事でもイベントチャームと称します。

読了時間: 1分

Azure環境を自動的に構築するBicepが超便利!

はじめに

OutlookアドインやSharePoint Frameworkのパーツなどの開発をしていると、Azure Functionsやストレージを使うことが良くあります。 これまではその度に環境をゼロベースで構築していたのですが、そんな労力を削減してくれる便利な機能がAzureには備わっています。 それが、Bicepというものなのですが、これが非常に便利なので触りだけ紹介です。 公式情報はこちらにあるので、詳細知りたい方はどうぞ。 https://learn.microsoft.com/ja-jp/azure/azure-resource-manager/bicep/overview?tabs=bicep

Bicepとは?

Bicepは、Azureリソースをデプロイするための宣言型構文を使用した専用言語です。 これにより、リソースの一貫したデプロイを可能にし、コードを再利用することで様々な環境を再現性を持って繰り返し素早く構築することができるようになります。

使い方

まずはBicepの本体となるファイルを作成します。 Bicepファイルの作成はVSCodeを使うと便利です。 例としてストレージアカウントを自動作成するBicepファイルを記載します。 このコードでは、dataStorageAccountというストレージアカウントを作って、そのストレージアカウントのBlobにConfigという名前のコンテナを作成します。 また、リージョンに関してはパラメータで受け取るようにしています。

// パラメータ
@description('リソースのロケーション')
param location string
// ストレージアカウント
resource dataStorage 'Microsoft.Storage/storageAccounts@2023-05-01' = {
name: 'dataStorageAccount'
location: location
sku: {
name: dataStorageSku
}
kind: 'StorageV2'
properties: {
dnsEndpointType: 'Standard'
publicNetworkAccess: 'Enabled'
supportsHttpsTrafficOnly: true
minimumTlsVersion: 'TLS1\_2'
}
}
// Blobの設定
resource dataStorageBlobServices 'Microsoft.Storage/storageAccounts/blobServices@2023-05-01' = {
name: 'default'
parent: dataStorage
properties: {
containerDeleteRetentionPolicy: {
enabled: true
days: 7
}
deleteRetentionPolicy: {
allowPermanentDelete: false
enabled: true
days: 7
}
}
}
// Configコンテナの作成
resource dataStorageBlobServicesContainer 'Microsoft.Storage/storageAccounts/blobServices/containers@2023-05-01' = {
parent: dataStorageBlobServices
name: 'config'
properties: {
immutableStorageWithVersioning: {
enabled: false
}
defaultEncryptionScope: '$account-encryption-key'
denyEncryptionScopeOverride: false
publicAccess: 'None'
}
}

上記の内容を拡張子「.bicep」のファイルとして保存することで、Bicepファイルが作成できます。 今回は「test.bicep」として保存します。

読了時間: 1分

Graph API で定期予定の一連の予定を取得する

はじめに

Microsoft Graph API で、Outlook 予定表に登録した定期予定について、その定期予定の一連の予定を取得する方法についてのメモです。

calendarView で seriesMasterId でのクエリが使えなくなった!?

少なくとも2024年のころは以下のクエリで定期予定の一連の予定を取得することができてました。

https://graph.microsoft.com/v1.0/users/メールアドレス/calendarView?startDateTime=開始日時&endDateTime=$終了日時&filter=seriesMasterId eq シリーズマスターのID

ところが2025年に入ってからかもう少し経ってからか、上記クエリが結果を返さなくなりました・・・ 特段そのような変更のアナウンスは無かった気はするのですが、2025年2月時点でも上記クエリでは期待した結果は得られない状態になっています。

代替案

他にやり方がないものかとネットを調べていたら、昔の情報ですが困った時の stack overflow に良いものがありました。 https://stackoverflow.com/questions/51676962/microsoft-graph-filter-calendarview-by-seriesmasterid

読了時間: 1分

Graph API の transitiveMembers の制限を調べてみた

はじめに

Microsoft Graph API で、セキュリティグループなどのグループのメンバーを推移的に取得する(ネストされたグループのメンバーまで取得する)方法として、transitiveMembers を利用する方法があります。

この一見便利そうな API ですが、実は困った制限があるそうで、その動きを押さえておこうと思って調べてみました。

題材となるセキュリティグループ

この記事では以下のセキュリティグループを使って検証をしています。 下図赤枠の通り、メンバー数は2001名で、このグループの下に500名のメンバーを含むセキュリティグループが2つと、直接のメンバーが1001人います。

読了時間: 1分

ネストされたアプリ認証はOutlook.comではサポート対象外?

この記事は私の検証結果をもとにして書いています。 公式情報を元にしている訳ではないですので、その点はご了承ください。

Outlook.comに読み込んだアドインでネストされたアプリ認証はサポート対象外とdocsに書かれているのですが、色々試している限りは2024年11月時点ではちょっと違うみたい?

読了時間: 1分

SharePoint Online のカスタムスクリプトの許可設定が24時間ごとにクリアされる(MC714186)

はじめに

2024年2月9日にメッセージセンターにて発信され、その後、2024年3月26日3月28日に更新された「MC714186 One Drive と SharePoint のカスタム スクリプト設定を削除する」の内容についてのまとめです。 Message center - Microsoft 365 管理センター(テナントの管理権限のある方しかアクセスできません)

時系列別仕様変更内容の整理

メッセージセンターの内容とM365サポートから頂いた内容を元に整理しました。

2024年3月4月上旬

①今回の仕様変更の適用を2024年11月中旬5月上旬まで遅らせるためのPowerShellコマンドの追加 今回の仕様変更の適用を遅らせるための以下のPowerShellコマンドが追加されます。 Set-SPOTenant DelayDenyAddAndCustomizePagesEnforcement $True このコマンドを実行することで、2024年3月4月下旬から5月上旬までに適用される以下②③の仕様変更がテナントに適用されるタイミングを2024年5月上旬11月中旬まで遅らせることができます。

読了時間: 1分

Outlookのカスタムアドインの追加

はじめに

Outlookアドインの開発を行っていると、ある程度開発が進んだ段階で、開発で使用しているユーザー以外がアクセスする場合の試験など行うことになると思いますが、そうなるとカスタムアドインをOutlookに手動で登録する必要が出てきます。

この登録方法についてまとめました。

カスタムアドイン追加の流れ

Outlookデスクトップクライアントを起動し、[ファイル]メニューをクリック。 [アカウント情報]パネルが開くので、[アドインの管理]ボタンをクリック。

読了時間: 1分

Outlook アドインのマニフェストファイルのWebApplicationInfoのルール

はじめに

Outlook アドインの開発がローカル環境で一区切りついたので、テスト環境にデプロイするためにマニフェストファイルを変更したら、ドツボにはまってしまった件についてまとめてみました。

開発環境

OS:Hyper-V上のWindows 11 23H2 Visual Studio Code:1.84.2 Node.JS:20.10.0 Outlook:Microsoft 365 Apps for enterprise

事象

ローカルでの開発時は、マニフェストファイルの SourceLocation タグで指定する URL はデフォルトで以下になっています。 https://localhost:3000/taskpane.html

読了時間: 1分