【SharePoint】ドキュメントライブラリで既読・未読を管理する機能を実装する

今回の記事では、ドキュメントライブラリで簡易的な既読管理機能を実装する方法をお伝えします。
自分の既読・未読状態だけでなく、他人の既読・未読状態を確認することもできます。

実現したいこと
前提・準備
実装方法
まとめ

実現したいこと

完成イメージは下記の通りです。

実装する機能は下記の通りです。

自分が未読のファイルには、未読マーク（●印）が付く
「既読にする」ボタンを押すと未読マークが消え、行がグレーアウトされる
既読ユーザー列（ReadUser列）には既読人数が表示され、マウスホバーすると既読ユーザーも表示される

前提・準備

あらかじめドキュメントライブラリを作成し、テスト用に3つのフォルダを格納しています。

実装方法

実装には、列の書式設定機能 (JSON) の仕組みを利用していきます。

列の書式設定で SharePoint をカスタマイズする

SharePoint リストとライブラリに含まれるフィールドの表示方法をカスタマイズします。それには、フィールドがリストビューに組み込まれるときに表示する要素を記述し、それらの要素に適用するスタイルを記述する JSON オブジェクトを作成し...

実装の流れは下記の通りです。

既読ユーザー列の作成
既読ボタンの作成
未読マークの作成
グレーアウトの設定

1. 既読ユーザー列の作成

ドキュメントライブラリに既読ユーザー列を追加していきます。

まずは「列の追加」ボタンを押し、列の種類は「ユーザー」を指定して次に進みます。

次に、列の作成画面で下記の通り入力・保存して「ReadUser」列を作成します。

ReadUser列が追加されたことを確認し、列の設定 > この列の書式設定に進みます。

エディタ内の赤枠のJSONを削除し、代わりに画像下のJSON式を入力・保存します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "cursor": "pointer"
  },
  "attributes": {
    "class": "ms-fontColor-neutralPrimary sp-card-content"
  },
  "txtContent": "=toString(length(@currentField)) + '人の既読'",
  "customCardProps": {
    "openOnEvent": "hover",
    "directionalHint": "rightCenter",
    "isBeakVisible": true,
    "formatter": {
      "elmType": "div",
      "style": {
        "padding": "5px 20px",
        "flex-direction": "column"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "padding": "10px",
            "font-weight": "bold"
          },
          "txtContent": "=toString(length(@currentField)) + '人の既読'"
        },
        {
          "elmType": "div",
          "children": [
            {
              "forEach": "personIterator in @currentField",
              "elmType": "div",
              "style": {
                "margin": "5px 0px",
                "display": "flex",
                "align-items": "center"
              },
              "children": [
                {
                  "elmType": "img",
                  "style": {
                    "width": "32px",
                    "height": "32px",
                    "border-radius": "50%",
                    "margin-right": "5px"
                  },
                  "attributes": {
                    "src": "=getUserImage([$personIterator.email], 'S')",
                    "title": "[$personIterator.title]"
                  }
                },
                {
                  "elmType": "span",
                  "txtContent": "[$personIterator.title]"
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

上記JSONでは、下記の動きを実現するテキストラベルを設定しています。

ReadUser列に何人のユーザーが登録されているかを数え、「〇人の既読」と表示する
テキストラベルをマウスホバーした場合、登録されているユーザーの写真・名前をポップアップで表示する

これで既読ユーザー列の作成は完了です。

2. 既読ボタンの作成

次に既読ボタンを作成していきます。

まずは「列の追加」ボタンを押し、列の種類は「テキスト」を指定して次に進みます。

次に、列の作成画面で下記の通り入力・保存して「ReadButton」列を作成します（画像左）。
ReadButton列が追加されたことを確認し、「列の設定」 > 「この列の書式設定」に進みます（画像右）。

列の書式設定に進んだら、「詳細モード」を押します（画像左）。
エディタ内の赤枠のJSONを削除し（画像右）、代わりに画像下のJSON式を入力・保存します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "padding": "11px 0px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "height": "31px",
        "width": "100px",
        "border-radius": "16px",
        "display": "flex",
        "align-items": "center",
        "justify-content": "center",
        "border": "1px solid"
      },
      "attributes": {
        "class": "=if(indexOf([$ReadUser.email], @me) > -1, 'ms-borderColor-themePrimary ms-bgColor-white ms-fontColor-themePrimary', 'ms-borderColor-themePrimary ms-bgColor-themePrimary ms-fontColor-white')"
      },
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "ReadUser": "=if(indexOf([$ReadUser.email], @me) > -1, removeFrom([$ReadUser.email], @me), appendTo([$ReadUser.email], @me))"
        }
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "padding": "0px 4px"
          },
          "attributes": {
            "iconName": "=if(indexOf([$ReadUser.email], @me) > -1,'FilePDB','EntryView')"
          }
        },
        {
          "elmType": "div",
          "txtContent": "=if(indexOf([$ReadUser.email], @me) > -1,'未読に戻す','既読にする')"
        },
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "height": "31px",
            "width": "100px",
            "border-radius": "16px",
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "cursor": "pointer",
            "opacity": "0%"
          }
        }
      ]
    }
  ]
}

上記JSONでは、下記の動きを実現するボタンを設定しています。

「既読にする」ボタンを押した場合は、ReadUser列に自分が追加され、その後「未読に戻す」ボタンに変わる
「未読に戻す」ボタンを押した場合は、ReadUser列から自分が削除され、その後「既読にする」ボタンに変わる

3. 未読マークの作成

続いて、未読マーク（●印）を作成していきます。

まずは「列の追加」ボタンを押し、列の種類は「テキスト」を指定して次に進みます。

次に、列の作成画面で下記の通り入力・保存して「Unread」列を作成します（画像左）。
Unread列が追加されたことを確認し、「列の設定」 > 「この列の書式設定」に進みます（画像右）。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "=if(indexOf([$ReadUser.email], @me) > -1,'none','flex')",
    "height": "32px",
    "justify-content": "center",
    "align-items": "center"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "class": "ms-fontColor-themePrimary ms-fontSize-m",
        "iconName": "StatusCircleInner"
      }
    }
  ]
}

上記JSONでは、下記の動きを実現するアイコンを設定しています。

ReadUser列に自分のメールアドレスが入っていない場合は、未読と判断し未読マークを表示する
ReadUser列に自分のメールアドレスが入っている場合は、既読と判断し未読マークを非表示にする

ここまでで、既読ユーザー列・既読ボタン・未読マークが作成できました。

4. グレーアウトの設定

最後に、既読になったファイル行はグレーアウトさせるよう設定していきます。

まず、Unread列（どの列でも可）の「列の設定」 > 「この列の書式設定」に進みます（画像左）。
次に、「ビューの書式設定」タブに移動し、「条件付き書式」を選択します（画像右）。

「条件付き書式」メニューに入ったら、「3点リーダー（・・・）」 > 「ルールの編集」を選択します（画像左）。
「ルールの編集」メニューでは、まず上部の「IF」部分に条件を記載します（画像中央）。
あわせて「リストアイテムを表示」部分の塗りつぶし色を「薄い灰色」に設定します（画面右）。

上記設定により、下記の表示変更を実現できます。

ReadUser列に自分のメールアドレスが入っていない場合は、未読と判断し背景色を白にする
ReadUser列に自分のメールアドレスが入っている場合は、既読と判断し背景色をグレーにする

これで設定は完了です。お好みで列の並び順を変更すると、

下の画像のように、ドキュメントライブラリで既読管理ができるようになりました。

まとめ

SharePointのドキュメントライブラリで簡易的な既読管理機能を実装する方法をお伝えしました。
あくまで簡易的な実装なので、ご自身でエラーが発生しないかを確認しながらお使いいただければと思います。

列の書式設定機能 (JSON) を利用することで、機能・デザインの幅が大きく広がりますので、ぜひご活用ください。