Outlook アドインの React 版が突然デバッグできなくなって嵌った件

はじめに

つい先日まで普通に動かすことができていたはずの React を利用した Outlook アドインが、翌日から突然デバッグできなくなってしまった件について、調べたことをまとめました。

開発環境

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

事象

docs に記載の流れに従い、yo office でプロジェクトを作成。 プロジェクトの種類は「Office Add-in Task Pane project using React framework」を選択。 プロジェクト作成完了後、何もコードを変えずに npm start を実行。 これで、嵌る前日(2023年11月20日)までは特に問題なく動作していた記憶があるのに、翌日新規で環境を作って同じようにプロジェクトを作ってみたら「Sideloading done.」と表示されているのに、Outlook上にはアドインが表示されなくなってしまいました。

SharePoint Framework v1.15 の変更点

2022年6月21日に SharePoint Framework v1.15 がリリースされました。 この記事では v1.15 の変更点について、ダイジェスト的にまとめたいと思います。 元ネタは以下のリリースノートになりますので、詳しく見たい方はリリースノートを参照してください。 SharePoint Framework v1.15 のリリース ノート | Microsoft Docs

新機能

v1.15 で追加された機能の一覧です。

SharePoint モダンサイト用リダイレクト Web パーツを公開しました

はじめに

SharePoint のモダンサイトで使える、リダイレクト Web パーツを GitHub に公開しました。 ソースコードをそのまま公開しているので、興味ある方は是非中身を確認してみてください。 全然コードは書いてないので SharePoint Framework で開発した Web パーツのサンプルとしてちょうど良いかと思います。 この記事ではソースコードの中身の話ではなく、リダイレクト Web パーツのインストールの仕方と使い方について解説したいと思います。

インストール

リダイレクト Web パーツのパッケージファイル(RedirectWebPart.sppkg)をここからダウンロードし、インストール先テナントのアプリカタログサイトにアップロードしてください。 続いて、リダイレクト Web パーツを使用したいサイトにて、アプリの追加からリダイレクト Web パーツを追加します。 サイトコンテンツの一覧上に「Redirect Web Part」が表示されればインストール完了です。

Web パーツプロジェクト生成時の「Minimal」と「No framework」の違い

はじめに

SharePoint Framework で Web パーツプロジェクトを作成する際に指定するテンプレートの選択肢には SharePoint Framework V1.14 時点で「Minimal」「No framework」「React」の 3 種類があります。 React はその名の通り React のライブラリを組み込んだプロジェクトが出来上がるのですが、Minimal と No framework の違いが分からないので調べてみました。

Microsoft 365 Virtual Marathon 2022 に登壇しました

毎年恒例のグローバルイベントである Microsoft 365 Virtual Marathon 2022 の日本語トラックに今回も登壇させていただきました。 今回の内容は、これからの発展が期待される Viva Connections のアプリ開発に関する入門的な内容にしました。 まだまだ Viva Connections 自体がマイナーなものなので、それのアプリ開発となるとコアなファンしか興味が無いんじゃないかというくらいにマイナーな世界になっています。 SharePoint Framework による開発ですら、日本ではほとんど浸透していないのではないかという感じですから。。。   とはいえ、Office Development MVP としてはこれは外せないネタなので、視聴者が少なくなることを覚悟の上で実施させていただきました。 案の定、視聴者は少なかったですが、視聴いただいた方々には Viva Connections 拡張機能ということでどんなことができそうかというところや、開発の流れというのはご理解いただけたのではないかと思います。 ご参加いただいた皆様、ありがとうございました！   これからも細々とではございますが、SharePoint 開発、Viva 開発、Teams 開発などなど、Microsoft 365 の開発ネタについて情報発信していきたいと思いますので、引き続きよろしくお願いいたします。   当日のスライドとデモ動画を公開しましたので、参考にしていただければと。 セッションスライド https://www.slideshare.net/HiroakiOikawa/viva-connections セッション内で流したデモ動画に解説テロップを加えたものです。 https://youtu.be/hrR8op9nCuI こちらのページには日本語トラックのその他セッションのスライドが集められています。 Microsoft 365 Virtual Marathon 2022 Japanese Track - 資料一覧 - connpass

PnP Provisioning でクラシックサイトのマスターページとページレイアウトを SPO に展開する方法

はじめに

PnP Provisioning を使って、クラシックサイトのマスターページとページレイアウトを SharePoint Online サイトに展開する方法を調査しました。 想像していたのとは違う形になってしまったので、展開方法を残しておきたいと思います。 なお、PnP Provisioning は日々進化しているオープンソースのライブラリのため、ここでの検証結果が未来永劫有効なものではないということをご了承ください。 2022年5月6日時点のコードで検証しています。

普通にテンプレート化してもダメ

Get-PnPSiteTemplate コマンドレットで PnP サイトテンプレートを作成すればマスターページもページレイアウトもテンプレートに含まれるだろうと思っていたのですが、それだけではうまく行きませんでした。 試したことは、Get-PnPSiteTemplate コマンドレットで .pnp 形式のファイルを出力させ、これを Invoke-PnPSiteTemplate コマンドレットで展開する方法です。 .pnp 形式のテンプレートは無事作成することができ、.pnp ファイルの拡張子を .zip に変更し解凍することでマスターページファイル(.master)が含まれていることも確認したのですが、この方法では .pnp ファイルにページレイアウトが含まれませんでした。 試しに Invoke-PnPSiteTemplate コマンドレットを実行するも、マスターページファイルは展開されるもののマスターページとしては認識されず・・・ そしてもちろんページレイアウトも展開されませんでした。 色々オプションを付けてもうまく行かなかったため、この方法は諦めました。

Teams のアプリバーにポータルサイトを開くアプリを追加する方法

はじめに

Teams のアプリバーにポータルサイトを開くアプリを追加する方法として、Viva Connections アプリを追加する方法があります。 しかし、この方法ではテナントで唯一無二の存在である SharePoint ホームサイトを開くことしかできません。 国ごとにポータルサイトが分かれている会社やグループ企業で単一テナントを使っていて各社のポータルサイトが分かれている場合、Viva Connections アプリを追加する方法では各社のポータルサイトを直接開くことができないため、ニーズを満たすことができないということになります。 この問題を解決する方法を紹介します。

Teams のアプリバーにポータルサイトを開くアプリを追加する

Teams のアプリバーには Microsoft の Teams アプリストアのアプリだけでなく、組織のアプリカタログのアプリを追加することができます。 組織のアプリカタログには独自のアプリを追加することができるため、結果的に Teams のアプリバーには組織独自のアプリが追加できるということになります。 下図は、組織のアプリカタログに追加した会社のポータルサイトを開くためのアプリをアプリバーに追加した状態です。 アプリバーに追加されたアイコンをクリックすることで Teams の中にポータルサイトを開くことができます。 Teams のタブとしてポータルサイトを追加することもできますが、アプリバーに追加した方がより簡単にポータルサイトを開くことができ便利かと思います。 結果的に、Viva Connections アプリを追加するのと同じ効果(アイコンをクリックしたらポータルサイトが開く)が得られることになります。

SharePoint Framework による Viva Connections アプリの開発

2021年12月に開催した、Japan M365 Dev User Group で登壇した際に使用したスライド、Slide Shareにはアップしていましたがここで紹介していなかったので、かなり遅くなってしまいましたが紹介を。 SharePoint Framework v1.13 にて、Viva Connections のアプリを開発できるようになりました。 開発は SharePoint Framework と、ACE (Adaptive Card Extension) にて行います。 上記の実装手順と、実際に Viva Connections のアプリとして SharePoint や Teams に展開する手順をまとめています。 SharePoint Framework v1.14 においても Viva Connections 周りは色々とアップデートが入っていますが、今後も続々と機能追加がされていくと思いますので、追いかけていきたいと思います。 https://www.slideshare.net/HiroakiOikawa/sharepoint-framework-viva-connections-251240179

SharePoint Framework v1.14 の変更点

2022年2月14日に SharePoint Framework v1.14 がリリースされました。 Announcing SharePoint Framework 1.14 – with updates for Viva Connections, Microsoft Teams and SharePoint - Microsoft 365 Developer Blog この記事では v1.14 の変更点について、ダイジェスト的にまとめたいと思います。 元ネタは以下のリリースノートになりますので、詳しく見たい方はリリースノートを参照してください。 SharePoint Framework v1.14 のリリース ノート | Microsoft Docs

SharePoint Framework v1.13 の変更点

2021年10月21日に SharePoint Framework v1.13 がリリースされました。 この記事では v1.13 の変更点についてまとめたいと思います。 元ネタは以下のリリースノートになります。 SharePoint Framework v1.13 のリリース ノート これまでのリリースノートでは各変更点を詳しく説明する資料があったのですが、今回はそういったものが無いのでリリースノートに書いてあること以上のことは現時点では書けません。 追々自分で検証して確認していきたいと思います。 なお、SharePoint Framework v1.13 に対応した Docker イメージは Docker Hub からダウンロード可能ですが、お勧めはこの記事で紹介している Visual Studio Code Remote Container を使用した方法なので、こちらから Dockerfile をダウンロードして Remote Container で環境作っていただければと思います。