Microsoft Lists｜朝日新聞テックフェスのお客様受付のために作成したツール

2024年12月14日 00:00

CTO室の針生です。朝日新聞社CTO室は、24年11月に、朝日新聞テックフェス2024というイベントを開催しました。＜こちら＞

今回は、このイベントでお客様が来場された際の受付に使用した、Microsoft Listsの話をしたいと思います。
（本稿は朝日新聞社の2024年Qiitaアドベントカレンダーの投稿です）

はじめに

CTO室が開催する初めてのイベントだったので、開催直前まで担当者は様々な対応に明け暮れていました。お客様受付をどうするかという話になったのはイベント開催の１週間ほど前。他の作業も立て込んでいる中、あまり手数をかけずにお客様をお待たせしないような仕組みを考える事になりました。

コンセプト

仕組みを考える上で、以下のコンセプトにしました。

２名の受付担当者が同時に編集できる
アクセス権限は必要な方に絞る
受付では「未受付」、「受付済」、「退出済」のステータス管理をする
イベント参加者＋登壇者で約６０名の情報にすぐにアクセスできる
- お客様のお名前（必須）
- 所属情報（任意）

受付担当者はいずれもMicrosoft 365 E3ライセンスが付与されているため、Microsoft Listsで実現できるだろうと考えました。

用意したデータ

朝日新聞のアンケートツールで、イベント参加を希望されるお客様には必要な情報を入力していただいています。
ここではデータの中身をダミーに書き換えていますが、以下のようなカンマ区切りのcsvデータです。お名前以外は任意入力としていたので、未入力の場合もあります。

項番,お名前（姓）,お名前（名）,お名前（ふりがな）（せい）,お名前（ふりがな）（めい）,会社名／学校名,部署名／学部名,役職
1,朝日,太郎,あさひ,たろう,朝日新聞社,CTO室,シニアマネージャー
2,朝日,花子,あさひ,はなこ,アサヒシンブンシャ,システム部,課長
3,あさひ,じろう,あさひ,じろう,あさひしんぶんしゃ,開発部,係長
4,あさひ,つぎこ,あさひ,つぎこ,,,
5,テスト,アサヒ,てすと,あさひ,毎朝新聞社,IT推進部,
6,テス,トアサヒ,てす,とあさひ,,,
7,ダミー,タロウ,だみー,たろう,,,
8,あのに,ますこ,あのに,ますこ,朝方新聞社,AI部,

ツールの作成手順

リストを作成する

Microsoft Listsを開き、「新しいリスト」をクリックします。

リストを作成する画面に遷移しますので、データソースを選択します。今回は、「CSVから」を選択します。

CSVデータのアップロード方法を聞かれます。「ファイルのアップロード」またはOneDriveのファイル一覧から、用意したcsvファイルを選択します。

データの中身を確認されますので、アップロードするcsvが正しい事を確認して「次へ」をクリックします。以降はcsvは使用しませんので、不要であればローカルからは削除しておきます。

「名前」、「説明」、「保存先」に任意の値を入れ、「作成」をクリックします。

リストが作成できました。

必要なカラムを追加する

受付用のカラムを新たに作成します。「列の追加」から、「選択肢」をクリックし、「次へ」をクリックします。今回はステータス管理を「未受付」、「受付済」、「退出済」の３つで行うため「選択肢」にしています。ステータスが２つであれば、「はい／いいえ」の方が良いです。

「名前」、「説明」、「選択肢」、「規定値」に任意の値を入力し、「保存」をクリックします。

なお、規定値に入れた値が反映されるのは新規登録するレコードからで、既存のレコードでは新規作成したカラムは空白になってしまいます。そこで、今回は一括で規定値と同じ「未受付」を設定します。

「タイトル」の左にある「チェックボックス」をクリックし、データを全量選択します。続いて、ツールバーの「編集」をクリックします。

編集画面が表示されます。今回は「ステータス」を「未受付」として「保存」をクリックします。

一括で「未受付」が登録されます。もしレコード数が多すぎて一度で全レコードを選択しきれない場合は、「ステータス」が空欄のレコードを表示するようにフィルタリングして、一括変更を必要な回数実施してください。

受付用のビューを作成する

このままではステータス変更をスムーズにできないので、「ビューの追加」をクリックして、受付用のビューを作成します。

「ビュー名」に任意の表示前を入れ、「表示方法」を「ボード」にします。ボードの整理は、「選択肢」や「はい／いいえ」で作成したカラムが選べますので、今回作成した「ステータス」を選択します。「可視性」は、他のユーザーにも使ってもらうために「これをパブリックビューにする」にチェックをつけます。

受付ビューが作成されました。

使い勝手を良くする▶表示する情報を整理する

ここから、使い勝手を考えて見栄えを整えていきます。
未割り当てのアイテムは不要なので、三点リーダー「…」をクリックし、「非表示」を選択します。

「未割り当てのアイテム」が非表示になりました。続いて、「受付ビュー」をクリックして、「カードのカスタマイズ」を選択します。

カードに表示される情報を選択するため、「カードデザイナー」をクリックします。

表示したい情報にだけチェックをつけて「保存」します。今回は、「タイトル」と「列名をラベルとして表示する」のチェックボックスを外して、「会社名／学校名」にチェックを付けました。

３点リーダー「…」から、表示順序を変更する事も可能です。ただし、カードデザイナーモードでは１行に２コンテンツを表示する等のカスタマイズは執筆時点ではできません。

「詳細モード」を選択する事で、より細かいカスタマイズをjson形式で指定する事も可能です。

詳細モードでフリガナを１行目に、名前を２行目に、会社名を３行目に記載する場合は以下のような記述になります。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/board-formatting.schema.json",
  "hideSelection": false,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container sp-card-container-noPadding"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer sp-card-subContainer-borderRadius"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "flexDirection": "row"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$field_3]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content"
                },
                "txtContent": "=if ([$field_3] == '', '–', [$field_3])"
              },
              {
                "elmType": "div",
                "style": {
                  "width": "8px"
                }
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$field_4]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content"
                },
                "txtContent": "=if ([$field_4] == '', '–', [$field_4])"
              }
            ],
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "flexDirection": "row"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$field_2]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content",
                  "role": "heading",
                  "aria-level": "3"
                },
                "txtContent": "=if ([$field_1] == '', '–', [$field_1])"
              },
              {
                "elmType": "div",
                "style": {
                  "width": "8px"
                }
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$field_3]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content"
                },
                "txtContent": "=if ([$field_2] == '', '–', [$field_2])"
              }
            ],
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "flexDirection": "row"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$field_5]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content"
                },
                "txtContent": "=if ([$field_5] == '', '–', [$field_5])"
              }
            ],
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            }
          }
        ]
      }
    ]
  }
}