ライブラリの変更通知を Web パーツで受信する

はじめに

SharePoint Framework v1.10 で実装されたライブラリの変更通知を受信する機能を試してみました。

ライブラリの変更通知受信機能とは

指定したライブラリでファイルが登録、更新、削除された際に、その変更通知を受け取ることができるようになる機能です。 SharePoint Framework で開発する Web パーツやアプリケーションカスタマイザーで変更通知を受け取ることができます。 なお、SharePoint Framework v1.10 では、ドキュメントライブラリ系（ドキュメント、サイトのページ、メディアなど）の変更通知のみ対応しており、リストの変更通知を受信することはできません。 また、変更通知として受け取れる情報は、ライブラリが変更されたという情報だけで、何が変更されたのかといった情報はセキュリティ観点から取得することができなくなっています。 なので、必要に応じて変更通知の受信をトリガーに REST や spHttpClient でアイテムを取りに行く処理を実装する必要があります。 変更通知受信機能の詳細は、Docs を参照してください。

ページプレースホルダーの事前領域確保の効果

はじめに

SharePoint Framework v1.10 で実装されたプレースホルダーの事前領域確保の効果を確認してみました。

ページプレースホルダーとは

SharePoint Framework 拡張機能であるアプリケーションカスタマイザーのページプレースホルダーを使用することで、すべてのモダンページに共通のヘッダーとフッターを追加することができます。 ですが、ページプレースホルダーはモダンページのレンダリングの順序において比較的遅めにレンダリングされるため、SharePoint 標準のヘッダーとコンテンツの領域が表示された後に、SharePoint 標準ヘッダーの下にページプレースホルダーによるヘッダーが挿入される動きが目で見て分かってしまいます。 SharePoint Framework v1.10 では、このちょっとカッコ悪い動きを改善するため、ページプレースホルダーの事前領域確保の設定ができるようになりました。 ページプレースホルダーの詳細は、Docs を参照してください。

効果

事前領域確保の有無の違いが分かるように両方で動画を撮ってコマ送りにして比べてみました。 SharePoint 標準のヘッダーの下に青色のブロックがありますが、こちらがページプレースホルダーのヘッダーの部分、下部の灰色のブロックがフッターの部分になります。 上の動画が事前領域確保無し、下の動画が事前領域確保有りです。 事前領域確保無し 事前領域確保有り 比べてみると効果は一目瞭然。 事前領域確保無しの方は、ページのタイトル部分がヘッダーの表示のタイミングで下にずれ込むのが分かります。 動画をコマ送りで見ると、ページプレースホルダーの事前領域確保をした場合、下図の通りブランクの領域（横線が入った部分）がページプレースホルダーの表示領域としてあらかじめ確保される動きになっていました。

SharePoint Framework Web パーツ開発 その２：ビルド&デバッグ

はじめに

この記事では、SharePoint Framework で作成した Web パーツをビルドおよびデバッグするための手順を説明します。 まだ SharePoint Framework で Web パーツを作成していない場合は、以下の記事を参考に Web パーツを作ってください。 SharePoint Framework Web パーツ開発 その１：プロジェクトの作成

ビルド手順

プロジェクトを開き docker を起動

※「SharePoint Framework Web パーツ開発 その１：プロジェクトの作成」の続きで作業を行う場合は、このステップは不要です。 Visual Studio Code を起動してメニューから ファイル > フォルダーを開く をクリックし、プロジェクトフォルダを開きます。 続いて、メニューから 表示 > ターミナル をクリックし、PowerShell のターミナルを開きます。 ターミナルに、 Docker を起動するためのコマンドを入力し実行します。

SharePoint Framework Web パーツ開発 その１：プロジェクトの作成

はじめに

SharePoint Framework による Web パーツの開発手順を説明します。 説明の題材として、SharePoint リストから URL 列の値を取得して一覧で表示する、クラシック UI でいうところのリンクリストのような Web パーツを開発していきたいと思います。 事前に Docker による SharePoint Framework 開発環境が準備できているところからの話になりますので、環境がない方は、まずは以下の記事を見て環境構築をしてください。 ・開発環境を構築するためにホストとなる PC で行う手順 ・Docker イメージを準備する手順

SharePoint REST サンプル集

最終更新日：2020/09/22

はじめに

SharePoint オンプレ、オンラインで使える REST のサンプルを思いついた時にメモ代わりにこの記事へ記載していきます。 SharePoint REST の文法の詳細については、Docs を参照してください。 バージョンは 2013 ですが、壁面に貼るリアルな壁紙もあったりするので、是非プロジェクトルームの目に付くところへどうぞｗ SharePoint 2013 REST Syntax また、対象が SharePoint Online であれば、SharePoint REST ではなく、Microsoft Graph REST API を使う方法もあります。 Graph REST API で SharePoint にアクセスする方法についても、Docs に詳細の記載があるので参考にしてください。 SharePoint REST を使用するか、Graph REST API を使用するかの線引きは、SharePoint にアクセス可能なアクセストークンを既に持っているかどうか。 例えば、SharePoint ページに配置されるスクリプト内から Call するのであれば、SharePoint REST API を使う方が簡単です。 このサンプル集では、SharePoint REST API を取り扱います。

SharePoint サイトの各種設定を手軽に変更する「SP Editor」

はじめに

Chrome ブラウザの拡張機能として、SP Editor という万能ツールが提供されています。 SP Editor を使うことで、PnP PowerShell を使わなくてもページレイアウトの変更ができたり、スクリプトを書かなくてもサイトやリストの設定を即座に変更することができるようになります。 色々試すにはとても重宝するツールになりそうなので、ちょっと試してみました。 ちなみに、この拡張機能は先日リリースされた Chromium 版 Microsoft Edge でも動作しました。 Edge にインストールするためには、[他のストアからの拡張機能を許可します] をオンにして、Chrome ウェブストアから拡張機能をインストールする必要があります。

SharePoint Framework v1.10 の変更点

2020年1月7日に SharePoint Framework v1.10 がリリースされました。 この記事では v1.10 の変更点について気になるところだけ抜粋して記載します。 詳細は以下のリリースノートを確認してください。 SharePoint Framework v1.10 release notes

Teams Personal Apps 開発への対応

• SharePoint Framework で、Teams の個人用アプリの開発が行えるようになりました。
• 個人用アプリは、チームやチャネルを横断して個人視点で利用するアプリの事を指します。
• 参考サイト：docs

リストの更新通知のサブスクライブ

• ドキュメントライブラリに格納されたファイルが更新されると、任意のメソッドがコールバックさせることができる機能が正式リリースとなりました。
• 参考サイト：docs

Application Customizer の事前領域確保

• Application Customizer で使用する領域を事前に確保することで、Application Customizer のロードに時間がかかっても画面の表示乱れが起きなくなります。
• 参考サイト：docs

Office アドイン開発への対応 (dev preview)

• SharePoint Framework で、 Office アドインの開発が行えるようになりました。 ただし、このリリースは開発者プレビューの段階です。
• 参考サイト：docs

Microsoft Search 拡張機能開発への対応 (dev preview)

• Microsoft Search の検索クエリをカスタマイズするために使用する拡張機能の開発が行えるようになりました。 ただし、このリリースは開発者プレビュー段階です。
• 参考サイト：docs

Teams コンテキストへのアクセス手段の変更

• これまで Teams コンテキストにアクセスするには、this.context.microsoftTeams  プロパティを使用していましたが、これが廃止になりました。 代わりに、this.context.sdks.microsoftTeams  を使用します。

TypeScript のバージョン変更

• TypeScript のバージョンが v3.3 になりました。

  [AdSense-B]

モダンページのページレイアウトの種類と変更方法

はじめに

モダンページには複数の種類 (ページレイアウト) があり、それぞれページの特徴が異なります。 ページレイアウトは、いくつかの方法で切り替えることができるのですが、この記事ではページレイアウトの種類と PnP PowerShell を使用した切り替え方法をまとめています。 今後も新しいページレイアウトが追加された際には記事をアップデートしていきたいと思います。

ページレイアウトの種類

2019年12月時点では、以下の3つのページレイアウトが用意されています。 なお、今回のサンプルはコミュニティサイトとして作成したサイトをベースにしているので、サイドリンクバーが表示されていません。

Home

モダンサイトを作成した際に Home.aspx に適用されているページレイアウトです。 ページヘッダーとページタイトルが表示されない状態になります。

モダンサイトのテンプレート展開などを実現する「PnP PowerShell」

PnP PowerShell とは

モダンサイトやリストの自動展開や各種設定を SharePoint 管理コンソールよりも簡単に実施できるようにするためのコマンドレットを多数備えた、PowerShell コマンドライブラリです。 SharePoint Online だけでなく SharePoint オンプレミスに対しても使用することができます。 詳細は docs を参照してください。

どんなことができるの？

PnP PowerShell を使うことで、例えば次のようなことができるようになります。

モダンサイトのテンプレート展開

モダンサイトはテンプレート化することができませんが、PnP PowerShell のプロビジョニングテンプレートを使用することで、予め定めたリストやライブラリを追加したり、ドキュメントを事前にアップロードしてサイトを展開するというようなことができるようになります。 旧来のサイトテンプレートと全く同じではありませんが、サイトテンプレートよりも細かいことまで含めてできるようになります。

SPO のモダン対応を促進する「SharePoint Modernization Scanner」

SharePoint Modernization Scanner とは

SharePoint Modernization Scanner は、SharePoint Online サイトのモダン化を進めるために、SharePoint Online サイトをスキャンしてモダンに切り替えられていないサイトを抽出するツールです。 PnP コミュニティにより維持管理されており、GitHub からダウンロードして無償で使用することができます。 また、詳細な説明資料はマイクロソフトの Docs に掲載されており、Docs に最新モジュールへのリンクも掲載されています。 SharePoint Modernization Scanner は随時アップデートがされており、ドキュメントもそれに合わせて更新されているので、使用する際には常に Docs を確認して最新の情報を参照するようにしてください。 このブログでも、ツールの紹介だけを行い詳細な使い方については割愛しています。