弊社で Office 365 や SharePoint のナレッジを提供している「オフィスアイ ラーニング ポータル」は従来クラシックサイトで構成していました。

現在これをモダン化すべく SharePoint ハブを使ってサイト構造を粛々と作り変えている最中です。これからサイトを再構築しようと考えている組織も少なくないと思います。そんな方の参考になれば。

今回はカスタム リストをサイトページとして再構築するという話をしましょう。

カスタム リストからサイト ページヘ

SharePoint Online 上でこれまで カスタム リストとしてナレッジを蓄積しているものがあり、これをモダン サイト化すべく、サイトページへと切り替えていっています。

Office アプリケーションに関する Tips 集から手を付けています。こうしたナレッジは Wikiページは発行ページで作成しておくこともできたのですが、こうしたページは記事がたまっていくと一覧性が悪かった。そのため一覧性を重視するべく、カスタムリストで作っていたわけです。複数行テキスト(リッチテキスト) 列を使ってました。これをモダンサイト上のサイトページ(実際にはニュース)に切り替えていっています。

特にツールは使わずに手動で対応中。数がそれほどまだ多くなかったこと。また、ついでに内容を確認して必要があれば情報をアップデートする必要があることが理由です。

ちなみに今回モダン化するにあたり、メインサイト内にこのリストを作成したいたのですが、これをサイトとして分離しました。具体的にはコミュケーションサイトとして新たにサイトを作成してハブに関連付けています。モダンサイトではサブサイトは使いません。特に SharePointハブはサブサイト構成を前提としていません。そのため、他のコンテンツに関しても同一サイトにあったリストをサイトとして切り出したり、サブサイトにしていたところを新たにコミュニケーションサイトとして作り直してハブに関連付けたりしてます。

さて、今回のトピックスに戻りましょう。リストをサイトページに作り直したことで、どういった変化があったのか?

従来の仕組み 

クラシックサイトでは下図のようにカスタムリストでナレッジを提供していました。見た目だけはモダンモードにしていますが、もともとはクラシックなカスタムリストを使っていたわけです。

カスタムリストは手軽ではあるのですが、難点としては、リンクを掲載したり、動画を追加したり、全体的なデザインの体裁をとるといったことに、それなりに手間がかかるうえ、手間をかけた割に見栄えが今一つしっくりこない。

またどの程度閲覧されたのかわからないという問題もあります。もちろん、検索 サービス API を使えばアイテムごとのクリック数というのは取得できるのは周知のところだと思いますが、コンテンツを書き溜めていくことに注力したく、そんな手間をかけていられません。

また新着情報を伝えるのが手軽ではありません。リンクをメールで送るという方法しかなく、ユーザーの目を引くには「タイトル勝負」といったところもあります。

サイトページとして内容を再構築

新しいサイトにサイトページとして各Tipsを再構築してみたのが下図です(まだ、すべてを移し替えられてはしませんが)。

最新コンテンツをすぐに確認してもらえるように、単なるサイトページではなくニュース記事として投稿しています。そのためニュースWebパーツやモバイルでも最新コンテンツが確認できるようになりました。改善されたポイントをピックアップしてみましょう。

作り手の観点

• 各コンテンツごとに閲覧数が確認できる
• リストとは異なりページに Webパーツが配置できるので見栄えのするページ作成がリストよりも楽にできる(メンテナンス性がよい)
• ページのコピー作成ができる
• メール送信がすぐできる
• 「いいね」などの反応が確認できる
• コメント機能によりユーザーとコミュニケーションが取れる

閲覧者の観点

• リストよりも画面の幅が広くみやすい
• ビジュアルを提供することで内容をイメージしやすくなった
• レスポンシブデザインになったのでモバイルからも参照しやすい
• 「いいね」やコメント機能によりフィードバックがしやすい

また閲覧数をもとに「強調表示されたコンテンツ」Webパーツを利用すれば、「人気がある Tips 」を手軽に提供することもできます。

蓄積されていくニュースを分類する方法については昨日のブログ記事を参照してください。

本記事がモダンサイト化の参考になれば幸いです。

SharePointモダンサイトではWikiページに代わり、サイトべージを使って様々な情報ページを作成します。ページが増えてくると、各ページをカテゴリごとに分類して表示したくなるでしょう。そもそも Wikiページのころとは異なり、「サイト内に複数の Wikiページライブラリを作成して分類する」というアプローチがサイトページでは使えません。サイトページは各サイトの「サイトのページ」ライブラリ、1箇所に作成されるためです。ですから、このライブラリ内でいかに仕分けていくか、がポイントです。

分類方法

サイトページではヘッダー領域に「タイトルの上のテキスト」を設定できるようになっています。これをページの分類に利用できます。もちろん、「サイトのページ」ライブラリにカスタム列を追加することもできます。ただし、この方法は実際に試しに使ってみましたが、案外、設定が手間でページ作成後に分類を指定するのを忘れがちです。その点、この「タイトルの上のテキスト」はページ作成の一環としてそう忘れることなく指定できるように思います。

このようにして作成したページ群を一覧表示するために、「サイトのページ」ライブラリのビューをうまく調整(カスタマイズ)して、ページの一覧を見やすく設定し、同時に「トピックスのヘッダー」列を表示するようにします。この列が先ほどの「タイトルの上のテキスト」です。この列を使えばフィルター条件にも使えるうえ、グループ化もできます。例えば次のように一覧表示します。既定の「すべてのページ」をもとに「カテゴリ別」という名前のビューを作成して調整しています。

Webパーツ接続機能を使ってプレビューする

この「サイトのページ」のビューをもっと使い勝手良くするために、次のようなサイトページを作りました。

左側に「ドキュメント ライブラリ」Webパーツを配置し、「サイトのページ」ライブラリを指定します。右側に「埋め込み」Webパーツを配置。そして埋め込みWebパーツを左側に配置したドキュメント ライブラリ Webパーツに接続します。

埋め込みタグの側には次のような Iframeタグを書いています。幅や高さは適宜調整してみてください。

<iframe src='[$FileRef]' height=400 width=300 />

詳しい手順は次のビデオ(音声なし)を参照してください。

Teams にタブとして追加してみる

せっかくですから、このページをTeamsにタブとして追加してみましょう。Teams 内でももちろんきちんと動作することが分かります。

SharePoint Online のモダンなカスタム リストでは標準のリストフォームを PowerApps を使ってカスタマイズできます。ちなみに、リストフォームのカスタマイズではなく、PowerApps のアプリからデータソースとして SharePoint リストを利用する場合とは話が異なるので注意してください。あくまでも、リストフォームのカスタマイズです。

カスタム リストフォームの削除に関して、気になる挙動があるため情報共有しておきます。なお、管理者の方でないとあまりピンと来ないかもしれません。

SharePoint リストフォームの削除手順

リストフォームは次の手順で削除します。

当該リストやサイトを削除したらどうなる?

ところで、上記の手順を実施せずにリストやサイトを削除したらどうなるでしょうか? これが問題なのです。上記の手順を踏まえず、リストやサイトを削除すると当然 PowerApps アプリ自体は使えなくなるのですが、PowerAppsの管理センターから確認すると、一覧に残っているのです。一見、わからないのですが、よくよく作成先のURLを確認すると既に削除済みのリストやサイトに紐づいていたアプリであることがわかるという状態です。

下記の図がPowerApps管理センターで、赤枠の部分に "SharePoint Form" とあるのがリストフォームをカスタマイズした際に生成されたアプリです。

リストやサイトを削除すれば、自動的に PowerApps アプリも削除されると思っていたのですが、ちょっとした落とし穴です。しかも、PoweAppsの管理センターからはリソースの確認はできますが削除はできません。管理者がアプリを削除するには PowerShellを使う必要がありますし、PowerShellを使った削除などの管理には PowerApps の Plan 2 が必要です。

ユーザーに対して特に影響はありませんが、管理者サイドからするとアプリ一覧に今後使うことのない "ゴミ" とも言える PowerAppsアプリ(厳密には SharePoint Form)がずっと残り続けるため、一覧を確認する際にはこれらの情報を省いておく必要がありそうです。なお PowerShellを使っても当該リストが削除されているかどうかはわかりません。SharePoint管理センターからもどのリストが PowerApps でカスタマイズされているかはわかりません。これも厄介な点です。

1票にご協力を

日本マイクロソフト株式会社のサポートにサポート依頼をして、本件は連絡済みですが、現時点ではリストやサイト削除時に一緒にアプリも完全削除してくれる動作ではないとのこと。サポートの方からも下記のURLに本社の開発チーム向けに改善リクエストを上げていただきました。本機能の実装に賛同いただける方は1票を投じていただければと思います。※どなたでも投票可能です。

Delete SharePoint customized form from PowerApps admin center.

We can use PowerApps to customize the SharePoint list form, but we can not delete customized forms in the PowerApps Admin Center. We need to delete them from SharePoint. Customized form will remain on PowerApps If we deleted the SharePoint list. It is causing trouble in management because there is n...

SharePoint リスト フォームは PowerApps でカスタマイズできるようになっています。

どんなものができるかということですが、過去に公開した記事や Twitter に投稿した内容を含め、いくつか例がたまってきたので並べてみます。一部は作り方を載せていますが、掲載していないものもありますが。

[PowerApps] 事例 - SharePointリストで管理する受講者履歴

弊社では定期的に Office 365 および SharePoint 関連の研修を行っていますが、受講する方が過去にどういったコースを受講していただいたかなどを確認するために、「受講履歴」を Shar...

#SharePoint カスタム リストに #PowerApps を使って簡易的なグラフ(Chart)を組み込む。 pic.twitter.com/6s8pXQyQTu

— Ai Hirano(Yamasaki) (@ai_yamasaki) March 8, 2019

#SharePoint リストの多言語対応。English, Japanese の 2つの列を用意し、English 列の内容を #MicrosoftFlow と Microsoft Translator で自動翻訳。リストフォームを #PowerApps でカスタマイズし各国語で切り替えられるようにする。ついでに読み上げてみる。 pic.twitter.com/qhjkALmaaR

— Ai Hirano(Yamasaki) (@ai_yamasaki) March 7, 2019

#SharePoint リストとの #BingMap 連携をした #PowerApps によるカスタム フォーム例。よくある例なのですが、知らない方もいるかなぁと一応投稿します。Bing Map 連携するにはBING Mapのライセンスが必要です。デモでは Developer 向けのキーを使っています。 pic.twitter.com/W4h6lkt3iM

— Ai Hirano(Yamasaki) (@ai_yamasaki) March 10, 2019

SharePoint のモダンサイトではカスタム テーマを作成できるようになっています。

作成したテーマはテナント全体で共有する設定であるため、テーマの登録は SharePoint Online の管理者である必要があります。

が、登録してしまえば、サイトの所有者やデザイン権限を持っいるユーザーはサイトごとに好きなテーマを適用できます。

詳しくは下記のURLを参照してください。

SharePoint サイトのテーマ

試しにいくつかカスタム テーマを作成して適用してみました。テーマは "和" 。和の色味でいくつかしっとりしたデザインにしてみました。少しでも参考になれば。

おまけで宣伝

サイトのデザイン、カスタマイズなどを扱っている研修コースは下記のリンク先を参照してください。

「オフィスアイ オリジナル研修」 SharePoint Online モダン ポータルサイトの設計・デザイン・展開 ワークショップ

ちなみに、弊社のオフィスアイ ラーニング ポータルでは上記で紹介した各デザインの JSONスキーマを公開しています(For Developerプランのみ)。