SharePoint アドインのクライアント Web パーツをモダンページに配置してみた

はじめに

別記事で SharePoint アドインが SharePoint Online でも使えることを記載しましたが、そうやって開発したクライアント Web パーツをモダンページに配置するとどうなるのか確認してみました。 SharePoint アドインのクライアント Web パーツはモダンページが登場する前からあった技術なので、レスポンシブが前提のモダンページにうまくはまってくれるのか、そこが最も気になっていた部分です。 参考： SharePoint Online で SharePoint アドイン（プロバイダーホスト型）を使用する

クライアント Web パーツとは

クライアント Web パーツというのは、SharePoint アドインを開発する際に SharePoint アドイン本体の Web アプリケーション部分を SharePoint のページ上に表示するために使用する Web パーツで、SharePoint ページ上では HTML の iFrame としてレンダリングされます。 iFrame の中に、Web アプリケーション部分が表示されることになります。

SharePoint Online で SharePoint アドイン（プロバイダーホスト型）を使用する

はじめに

SharePoint Server 2013 で導入された SharePoint に機能を追加する仕組みとして、プロバイダーホスト型の高信頼性 SharePoint アドイン（以降「SharePoint アドイン」と表記）というものがあります。 SharePoint アドインは、もともと SharePoint アプリと呼ばれていたので、SharePoint アプリとして覚えている方もいらっしゃるかもしれません。 この SharePoint アドインですが、少々レガシーな仕組みかもしれませんが、SharePoint Online でもきちんと動作することが確認できました。 ただし、オンプレ環境で動作させる場合と展開する方法が少々異なるので、展開の仕方をまとめました。

ライブラリの変更通知を 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 に適用されているページレイアウトです。 ページヘッダーとページタイトルが表示されない状態になります。