PowerApps│感謝を送り合う社内SNSアプリの作り方 ①設計とリスト準備

こんにちは、あんこ先生です。

今回から数回に分けて、部署内で感謝を送り合う社内SNSアプリ、いわゆる「サンクスアプリ」をモダンコントロールで作っていきます。

「ありがとう」って、口では言えても形に残らないんですよね。

だから、送った感謝がタイムラインに流れて、いいねやコメントが付いて、月末には「今月いちばんありがとうを送った人」まで分かる。

そんなアプリを、SharePointリストだけをデータの置き場にして作ります。

初回のゴールは、アプリ全体の設計を決めて、土台になるSharePointリストをExcelインポートで一気に作るところまでです。

列を1つずつマウスで作るのは大変なので、Excelからまとめて流し込んでしまいましょう。

この記事で作るもの
・アプリ全体の設計(画面とデータの流れ)
・SharePointリスト3つ(Posts / Likes / Comments)
・部署メンバーを送信先候補にするための App.OnStart の下ごしらえ

先に前提を置いておきます

作り始める前に、必要な環境をまとめておきますね。

途中で「あれが無い」と止まらないように、最初に確認しておくのがいちばんラクです。

ひとことメモ:必要な環境
・Microsoft 365(SharePoint / Power Apps が使える)
・部署のメンバーが入った Microsoft 365 グループ
・Excel(リストのインポートに使用)
・スマホでの利用を前提にした縦長レイアウト

このアプリは、30名程度の部署内で使うことを想定しています。

人数が少ないので、委任やパフォーマンスにそこまで神経質にならなくても動きます。

そのぶん、作りをシンプルに寄せていきますね。

要するに、3つのリストだけで動きます

先にいちばん大事なところを図にしました。

このアプリ、機能はいくつもありますが、データをためる場所はたったの3つです。

ポイントは、いいねを「送った数・受け取った数」の持ち方です。

ユーザーごとにカウント用リストを別に作って、送るたびに数字を足すとしたくなります。

でも、それはやりません。

なぜなら送信先登録者Posts を数えれば、送った数も受け取った数も、累計もランキングも全部出せるからです。

数える場所を1つにしておくと、あとで数字がズレる事故が減りますよ。

3つのリストの中身を決める

では、それぞれのリストに何を持たせるか決めていきましょう。

内部名(数式から呼ぶときの本当の名前)が大事なので、そこも一緒に載せておきますね。

Posts(投稿本体)

感謝の投稿そのものをためるリストです。

内部名用途
PostID1行テキスト投稿を識別するキー(GUIDを入れる)
Body複数行テキスト感謝メッセージ本文
ToUserユーザーまたはグループ送信先
Tags選択肢(複数選択)#助かりました などのタグ
Imageイメージ添付画像(1枚)
LikeCount数値いいね数
CommentCount数値コメント数

投稿者と投稿日時は、SharePointが自動で記録してくれる 登録者登録日時 をそのまま使います。

わざわざ列を足さなくていいので、ここはSharePointに甘えましょう。

ここが個人的に一番おもしろい:いいね数をPostsに持たせる理由
「誰がいいねしたか」は Likes リストに1行ずつ記録します。

なら、いいね数も Likes を数えれば出せそうですよね。

それでも、Postsに LikeCount という数値列をわざわざ用意します。

理由は表示の速さです。

タイムラインは投稿がずらっと並ぶ画面なので、1行ごとに「この投稿のいいねを Likes から数えて…」とやると、行の数だけ集計が走ってどんどん重くなります。

そこで、投稿側に数を持っておいて、いいねするたびに ±1 する形にします。

「毎回数える」より「持っておいて足し引きする」ほうが、一覧表示ではぐっと軽いんですね。

コメント数(CommentCount)も同じ考え方です。

Likes(いいね)

「誰がどの投稿にいいねしたか」を1行ずつ記録します。

内部名用途
PostID1行テキストどの投稿へのいいねか

驚くほどシンプルですよね。

「誰が」の部分は、さっきと同じで 登録者 が自動で入るので、列を足す必要がありません。

PostID登録者 の組み合わせを見れば、「この人がこの投稿にいいね済みか」が分かります。

Comments(コメント)

投稿へのコメントをためます。

内部名用途
PostID1行テキストどの投稿へのコメントか
CommentID1行テキストコメントを識別するキー
CommentBody複数行テキストコメント本文

こちらも PostID でどの投稿にひもづくかを持たせて、コメント者と日時は自動記録の列に任せます。

リストはExcelインポートでまとめて作る

さて、いよいよリストを作ります。

列をマウスで1つずつ作るのは骨が折れるので、Excelからインポートしましょう。

なぜPnP PowerShellを使わないの?
SharePointを操作する方法として PnP PowerShell という強力なツールもあります。

ただ、初めての人にはコマンド環境の準備がなかなかハードルが高いです。

さらに、テナントの設定によっては、そもそも使えないこともあります。

その点、Excelからのインポートなら追加の準備がいらず、誰でも試せます

なので、この記事ではExcelインポートで進めますね。

例によって、そのまま使えるファイルを用意しました。

1つのExcelファイルに、シートを分けて3リストぶんを入れてあります。

各シートはテーブルになっているので、そのままインポートできます。

手順はこうです。

SharePointで「サイトのコンテンツ」→「新規」→「リスト」→「Excelから」を選び、このファイルをアップロードします。

すると、取り込むテーブルを選ぶ画面が出るので、作りたいリストのシートを指定してください。

これを3回くり返して、Posts / Likes / Comments の3つのリストを作ります。

インポート後に手を入れる4つのポイント

Excelインポートは手軽なのですが、そのままだと足りない部分があります。

インポートが終わったら、次の4つを手で直しましょう。

① Title列のダミーを消して、必須を外す

SharePointのリストには、はじめから Title(タイトル)という列があって、しかも必須になっています。

このアプリでは Title を使わないのですが、必須のままだと登録でつまずきます。

そこで用意したExcelには、Title列にわざとダミーの文字(dummy)を入れてあります。

こうしておくと、必須チェックに引っかからずにインポートが通るんですね。

インポートが終わったら、ダミーが入ったサンプル行を削除して、Title列の設定で「この列に情報を含める必要がある」を「いいえ」に変えておきましょう。(※必須になっていない場合は不要です)

ここが落とし穴:Titleは消せない
Title列そのものは、SharePointの標準列なので削除できません。

なので「消す」のではなく「必須を外して、使わない」という運用にします。

ダミーデータは、必須を通り抜けるための一時的なおまじないだと思ってください。

② ユーザー列(ToUser)を追加する


感謝の送信先を入れる ToUser 列は、Excelインポートでは作れません。

Postsリストの「列の追加」から、種類を「ユーザーまたはグループ」にして手で足してください。

内部名は ToUser にそろえておくと、あとの数式がそのまま使えます。

③ イメージ列(Image)を追加する

投稿画像を入れる Image 列も同じく、種類を「イメージ」にして手で追加します。

内部名は Image にしておきましょう。

④ 選択肢列(Tags)を複数選択で追加する

タグの Tags 列は、種類を「選択肢」にして追加します。

このときその他のオプションにある「複数の選択を許可する」を必ずオンにしてください。

ここが落とし穴:選択肢の複数選択は後から変えられない
タグは「#助かりました」と「#ナイス頑張」を同時に付けたいので、複数選択にします。

SharePointの選択肢列は、単一選択で作ったあとから複数選択へ変更できません。

作り直しになってしまうので、最初から複数選択で作るのが安全です。

選択肢の中身は、部署で実際に使いたい文言(助かりました/ナイス頑張/さすがです など)にしておきましょう。

内部名の付け方でつまずきたくない人は、SharePointリストの列名の付け方もあわせてどうぞ。

送信先を「部署メンバー」から選べるようにする

最後に、Power Apps側の下ごしらえをひとつだけ。

このアプリでは、感謝の送信先を部署メンバーの一覧から選ぶようにします。

そのために、部署が入った Microsoft 365 グループのメンバーを、アプリ起動時に取得しておきます。

使うのは Office365グループ コネクタと Office365ユーザー コネクタです。

App の OnStart に入れるコードがこちら。

#初期設定
#部署メンバーの情報を、SharePointのユーザー列が受け取れる形に変換する
#グループIDは自分の部署グループのものに置き換える
Set(glbTemp,
    ForAll(Office365グループ.ListGroupMembers("グループIDをここに").value,
        {
            '@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",
            Claims: "i:0#.f|membership|" & Lower(Coalesce(mail, userPrincipalName)),
            DisplayName: displayName,
            Email: Coalesce(mail, userPrincipalName),
            JobTitle: jobTitle
        }
    )
);

#一覧表示用のプロフィール画像を足しておく
#Departmentは今回使わないので空にしておく(拡張したくなったとき用の席)
Set(glbMembers,
    AddColumns(glbTemp,
        Picture, IfError(Office365ユーザー.UserPhotoV2(ThisRecord.Email), Blank()),
        Department, Blank()
    )
)

ちょっと長いので、何をしているか噛み砕きますね。

前半の glbTemp は、グループのメンバーを「ユーザー列にそのまま書き込める形」に整えています。

これが地味に大事なところです。

ここが個人的に一番おもしろい:取ってきた情報は、そのままでは書き込めない
Office365グループ コネクタが返すメンバー情報は、そのままでは ToUser(ユーザー列)に書き込めません。

SharePointのユーザー列が求める形と、コネクタが返す形が違うからです。

そこで ‘@odata.type’ でユーザー型を名乗らせて、Claims(ログインIDのようなもの)・DisplayNameEmail を、ユーザー列が受け取れる形に組み直しています。

「取ってきた情報を、書き込める形に翻訳している」とイメージするとしっくりきますよ。

実はこのユーザー列、書き込むときにもちょっとしたクセがあります。

そこは投稿画面を作る回で、じっくり解説しますね。

後半の glbMembers は、そこに2つの列を足したものです。

Picture は、メンバーのプロフィール画像です。

これはマイページやランキング画面のアバター表示で使います

ここでまとめて取っておけば、画面ごとにコネクタを呼ばずに済むので、動きも軽くなりますよ。

もう一方の Department は、今回のアプリでは使わないので Blank()(空)にしています。

「部署ごとにランキングを分けたい」のように機能を足したくなったとき、ここに部署名を入れれば広げられる、という余白ですね。

使わないなら消してしまってもかまいませんが、席だけ用意しておく形にしました。

ここが落とし穴:編集中は OnStart が動かない
App.OnStart は、アプリを編集している最中には自動で実行されません。

そのため、書いたばかりの glbMembers は空っぽのままで、送信先ドロップダウンに何も出ないことがあります。

そんなときは、ツリービューでApp(いちばん上)を選んで、右クリックから「OnStartの実行」を押してください。

これで変数に中身が入って、正しく表示されるようになります。

「コードは合っているのに何も出ない」というときは、まずここを疑ってみましょう。

ユーザー列への書き込みは、やり方がいくつかあります。

もっと深掘りしたい人は、様々なアプローチでユーザー列に書き込む方法の記事もどうぞ。

グループコネクタそのものの使い方は、Office365ユーザー&グループコネクタの使い方にまとめてあります。

まとめ

初回はここまでにしましょう。

・このアプリは Posts / Likes / Comments の3リストだけで動く。いいね数とコメント数はPostsに持たせて、一覧表示を軽くする。
・リストはExcel1ファイル(シート分割)からインポートする。ユーザー列・イメージ列・選択肢列は後から手で足し、Title列はダミーで通して必須を外す。
・送信先は部署メンバーから選べるよう、App.OnStart で glbMembers を用意する。取ってきた情報は、ユーザー列が受け取れる形に翻訳しておく。

次の一手として、次回はいよいよ画面を作ります。

投稿がずらっと並ぶ「タイムライン画面」を、高さが伸び縮みするギャラリーで組んでいきますね。

ギャラリーの基本をおさらいしたい人は、すぐできるギャラリーコントロールの使い方と活用事例を先に読んでおくと、次回がスムーズですよ。

それでは、次の記事でお会いしましょう。

ABOUT US
七草あんこ
非IT系中間管理職やってます。社命によりoffice365を主軸とした業務改善プロジェクトメンバーに任命されたことでPowerAppsと出会えました。いまではビジネス・プライベートを問わず、欠かせないツールになっています。導入初期やアプリ作成時に遭遇した諸問題の解決法とサンプルアプリの作り方を紹介していきます。主にTwitterで情報収集しているので不明点など呟いているとお邪魔するかもしれません。