たまには、バリッと開発寄りの記事を書きます。

SharePoint Framework を使うとモダンサイトはもちろん、クラシックな SharePoint サイトでもクライアント サイド実行の Webパーツを独自に作成できます。

この Framework は現在はSharePoint Framework 1.7 (2018年11月リリース)が最新で、もうすぐ v 1.8 がリリースされるところまで来ています。v 1.7で追加された目玉機能の一つがプレビュー機能ではあるものの、"SharePoint Framework for Teams Tabs" のサポートです。

SharePoint Webパーツを Teams のタブとしても利用できるようにするというもの。

作り方の大まかな流れは次の通りです。

1. Yeomanジェネレータ実行時に --plusbeta オプションを指定してスキャッフォルディングする
2. Teams フォルダーが生成される
3. 通常通り Webパーツコードを記述していく
4. Gulp bundle --ship および Gulp package-solution --ship を実行する
5. Teams フォルダー内のファイルを Zip 化し、Teams 側へアップロード
6. アプリをタブとして追加

では、分かりにくいであろうところを少し補足していきましょう。

まず Yeoman ジェネレータですが、v1.5 から --plusbeta オプションが追加されました。このオプションを追加することでプレビュー段階の機能を試せるようになっています。Teams タブとして利用するにはこの --plusbeta オプションが必要です。

>yo @microsoft/sharepoing --plusbeta

ソリューションパッケージを Ship モードで作成すると下図の通り Teams フォルダー内に manifest.json と Teams内で使用する既定のアイコンが2つ用意されます。

このフォルダー内のファイルを手動で単純に ZIP化します。

これをTeamsのチーム所有者が下記の場所からアップロードするだけです。

アップロードが終わると、アプリ一覧に SPFx アプリが表示されます。

あとは、SharePoint サイト上で Webパーツが動作し、同じものがTeams内でも動作することを確認してみましょう。ちなみに、デモのアプリはカレント SharePoint サイト内のライブラリ一覧を取得するようにしています。Teams 内で動作させているように見えるこのアプリですが、実体となるコードは SharePoint側でホストされることになるため、同一サイトを利用しているTeamsのチーム上でも同じ結果が得られます。

SharePoint のモダンサイトでは RSS Webパーツを利用したくても、コネクターとして提供されているうえに、Office 365 グループに接続されていることが前提になってしまっています。コミュニケーション サイトを前提にポータルを作るとなると、Office 365 グループ接続はしないでしょうし、仮に Office 365 グループに接続されていたとしても、このコネクター自体、あまり使い勝手がよくありません。

実際に同様のご質問を、以前、研修時にも頂きました。

さて、今のところ最善策として取り得る選択肢の一つは SharePoint Framework を使って独自に Web パーツを作るかということですが、これもいきなりはハードルが高い。そこで手軽に利用することを考えると PowerApps アプリとしてページに埋め込んでしまうというのも一つの手です。

実際に作成してみているのが下記のページです。PowerApps の公式 Blog の RSS フィード("https://powerapps.microsoft.com/en-us/blog/feed/")を読み込んでいます(細かい話ですが、"New!" アイコンは発行日が今日から一週間以内かどうか簡単な判定式を書いて表示しています。基本的な手順だけではアイコンまでは表示できないのでご注意を)。

ちなみにSharePoint Framework に関しては React コントロールを使った Webパーツの紹介およびソースコードが最近実施された SharePoint Developer Community (PnP) の Community Demo でも公開されています。

PowerApps アプリの作成

大まかな手順は次の通りです。

1. 空の携帯電話レイアウトからキャンバス アプリを作成
2. データソースとして RSS コネクターを追加しておく
3. OnStart もしくはメインスクリーンの OnVisible に次の式を指定
   ClearCollect(feeds,RSS.ListFeedItems("https://powerapps.microsoft.com/en-us/blog/feed/"))
4. ギャラリーコントロールを配置し Items プロパティに feeds コレクションを設定
5. 画面上部にHtmlテキスト コントロールを配置し、Galleryで選択したアイテムの Summary 部分を表示

もちろん、細かい微調整はするのですが、大体は上記のような感じで作成します。さらに言えば、SharePoint リストの RSS フィードは利用できませんので注意しましょう。そもそも、SharePoint リストなら、PowerApps から SharePoint コネクターを使えばリストデータは取得できるため RSS フィードは利用する必要がありません。

音声はありませんが、手順をビデオにしているので参考になれば幸いです。

弊社では、定期的にSharePointの検索に関する研修を実施しているのですが、そこで最近気づいた新機能をメモしておきます。

エンタープライズ検索センターでは検索結果のページがカスタマイズできます。このページに配置してある「検索結果Webパーツ」の設定にいつの間にか次のオプションが追加されています。

• ユーザーに次の検索結果の個別のブロックも表示する : 個別の OneDrive

スクリーンショットは次の通りです。既定ではこの設定はオフ。

そこでオンにしてみました。すると確かに OneDrive から取得したファイルがブロックで表示されます。

ちなみに、SharePointの検索機能はアクセス権限を見ていますので、ログインしているユーザーに閲覧権限がなければ表示されませんのでご安心を。「あのファイル、どこに格納したっけな? SharePoint サイト、それとも OneDrive だったか、、」というときに一括検索できるのは便利ですね。

現在、モダンサイトベースの検索機能が提供されており、非常に高速に結果を得られるのですが、難点はまだカスタマイズができないことです。そのため、今のところ部分的にはクラシックな検索ページも必要になるので、こうしたオプションは知っていると便利だと思います。

[オフィスアイ株式会社] 

SharePoint の検索に関して下記のコースを定期的に実施しています。

• SharePoint Online ユーザー向け : Microsoft SharePoint エンタープライズ検索の基本的な仕組みと カスタマイズ(速習) 
• オンプレミスの SharePoint 管理者向け : Microsoft SharePoint エンタープライズ検索の構成とカスタマイズ基礎

従来の SharePoint サイトでは、同一サイトにあるリストやライブラリを「リストビューWebパーツ」として WikiページやWebパーツページに配置できました。

モダンサイトの場合は、「埋め込み」Webパーツを使うことで簡単に実現できます。といっても、当然ユーザーは当該サイトに対して最低限「閲覧」アクセス許可レベルは必要となるので注意してください。

手順は次の通りです(音声あり)。

この機能を使う際のコツはリストやライブラリが「モダンモード」になっていること。下図の通り、クラシックとなっているとうまく動きません。

そもそもこの機能は Teams 内でタブとして任意のライブラリやリストを追加するときとほぼ同じ理屈で動いているようです。

完全に自分の備忘録として書きます。

*********************************************

SharePoint Framework 開発ではNode.js を使い、ローカルのWebサーバーを立ち上げ Workbench ページを使ってデバッグ実行などするわけですが、このとき https エンドポイントを使うため証明書が必要。そのため 開発者用証明書をインストールするために次のコマンドを実行します。

>gulp trust-dev-cert

これでインストールがすんなりできるのですが、アンインストールしたいことも在るわけです。たとえば、私の場合は、SPFx の開発をおととしから行っていますが、Chromeの仕様が変わり証明書を変えなくてはいけなくなった。関連情報は下記に書かれています。

SharePoint Framework の既知の問題とよくあるご質問

そこで、実行するのが次のコマンド

>gulp untrust-dev-cert

と上記リンクに書かれているのですが、なんだかうまくいかない。エラーになってしまう。

一般的な証明書と同じくユーザー証明書としてインストールされたのかなと MMCを立ち上げて確認するもない。で、探したところ下記のパスにありました。

<ユーザープロファイル>\.gcb-serve-data

ここに、gcb-serve.cer と gcb-serve.key がある。

ということで、このディレクトリ (gcb-serve-data)を削除して再び gulp trust-dev-cert を実行。

[参考] https://sharepoint.stackexchange.com/questions/206389/cannot-test-spfx-webparts-on-my-sharepoint-tenancy/206399#206399