画像を撮影して、ぺたぺたエクセルに張り付けてコメント書いて報告書…とかは超絶面倒な作業。どうせなら楽にしたい
これを解決するアプリをPowerAppsで作ってみる。

「パワポやエクセルと同じような感覚でアプリ作れるよ！」という触れ込みのPowerAppsだけど、そんなに簡単に作れるかな、ということ含めて試してた＆備忘録としてまとめた。

大まかな手順はこんな感じ。

計画
SharePointに画像保存用のライブラリーの作成
PowerAppsで作成#1
Flow作成
PowerAppsで作成#2

#1.計画

やりたいことをまとめてみる。

・画像を携帯で撮影して、コメントを入れて投稿する、ってのをアプリ上で完結したい。
・複数メンバーが投稿する前提なので、だれが投稿したかわかるようにしたい

・・・ってことは、コメントを入力できることと、投稿ユーザーの取得が必須。

・画像は一覧で見えるようにしたい
・1レコードに画像は1枚でいい。複数枚は今回はやらない。

・・・一覧で見たいので、ライブラリ。画像＋属性一覧を見たいので、ドキュメントライブラリではなく、画像ライブラリをつかう。

#2.SharePointでライブラリーを作成する

カスタムリストで作成する方法、ライブラリーでやる方法もある。今回は、画像ライブラリーを使うことにした。
コメントはタイトル列を使い、投稿者表示用の列を用意する。

1.任意のSharePointサイトを開いて、アプリの追加→画像ライブラリ。
2.列の追加で、[Comment]列（1行テキスト)を追加。
2.列の追加で、[Sender]列（ユーザー）を追加。
3.ビューで、commnet列とsender列を表示。

#3.PowerAppsで作成1

まずは、アプリの画面を作っていく。
トップ画面＆コメント入力用の画面（screen1）と
画像を撮影する画面（screen2)を作成する。

PowerAppsを開いて、新規→空のアプリの、携帯電話レイアウトを選択。

###3-1Screen1（初期画面＆コメント追加＆画像アップロード用の画面）を作る

領域	挿入する対象	補足
アプリ画面名表示(Label1)	テキスト/ラベル	Text="カメラアプリ"
ユーザー情報(Label2)	テキスト/ラベル	text=User().Email
コメント入力するテキストボックス(textInput1)	テキスト/テキスト入力	Default="コメント入力"
カメラで撮影した画像を表示領域する領域(image1)	メディア/画像	後述※
Screen2へ移動するボタン(icon1)	アイコン/追加/任意のアイコン	後述※
投稿するボタン(icon2)	アイコン/追加/任意のアイコン	PowerAppsで作成2で記載

挿入→各パーツでどんどん置いてく＆サイズ変える。

各種パーツは、パワポ同様に配置していく。
アプリ名は、ユーザーに入力させないし、固定の内容が出ればいい。なので、[ラベル]を使う。フォントや背景などのプロパティは、パワポと同じように設定できる。
ユーザー情報は、ユーザーに入力させたいのでラベルを使う。ユーザー情報を自動で取得するのだけど、エクセルと同じように関数で処理する。実行中のユーザーを取得する関数[User().Email]を使う。

3.アイコン、画像表示領域とそれぞれ置いていく。

アイコン、メディア→画像を置いていく。

出来姿はこんなレイアウト。実際展開するときは調整するけど、今回はこれで進めてみる。

###3-2Screen2（画像撮影用の画面）を作る

新しい画面→[空]とやると、新しい空っぽのスクリーン（screen2）が作成される。

領域	挿入する対象	補足
アプリ画面を表示する(Label3)	ラベル	Text="撮影する"
カメラを表示す領域(Camera1)	メディア/カメラ	streamsrate=100
Screen1に戻るボタン(icon3)	アイコン/追加/任意のアイコン	OnSelect=Navigate(Screen1)
撮影ボタン(Circle1)	アイコン/追加/任意のアイコン	OnSelect=Set(appPhoto,camera1);Navigate(Screen1)

パーツを配置していく。
ラベル、カメラ、ボタン2つを配置。

ボタンを配置したら、各アクションを設定していく。

「ボタンを押したら〇〇する」という処理にはプロパティ[Onselect]に関数で処理させる。
Onselectに[Navigate(screen1)]と関数を入れれば、「ボタンを押したらscreen1に画面切り替え」という処理を設定できる。戻るボタンであるicon3、OnSelectはこれを設定。
カメラを使うときのお約束で、プロパティ[StreamRate]を設定する必要がある。今回は何も気にせずCamera1のStreamRateに100を入れる。

撮影ボタンを押したら、写真を一時的に保持して、これでいいか？を確認したいし、コメントも入れたい。想定している動作は「カメラで撮影した写真を一時的に保持して」「スクリーン１に移動して、そこでコメント入れる」。これも、関数で処理する。
ボタンを押したら、一時的に保持するには[Set]関数を使う。OnSelectに[Set(appPhoto,camera1)]とすれば、ボタンをおしたらカメラ１の画像をappPhoto（という変数）に一時的に保持する処理がつくれる。
ついでに、スクリーン1に戻る処理もくっつけたい。その場合は、[;]でつなげられる。OnSelectにとすれば、ボタンを押したら社員を一時的に保持して、screen1に移動する処理を設定できる。

Set(appPhoto,camera1);navigate(screen1)

###3-3screen1を再度編集する

領域	挿入する対象	補足
アプリ画面名表示	テキスト/ラベル	Text="カメラアプリ"
ユーザー情報	テキスト/ラベル	text=User().Email
コメント入力するテキストボックス	テキスト/テキスト入力	Default="コメント入力"
カメラで撮影した画像を表示領域する領域	メディア/画像	Image=appPhoto
Screen2へ移動するボタン	アイコン/追加/任意のアイコン	OnSelect=Navigate(screen2)
投稿するボタン	アイコン/追加/任意のアイコン	PowerAppsで作成2で記載

太字が編集する箇所。

Icon2(Screen2へ移動するボタン）は、さっきのScree1に移動するボタンを同じ。移動先をscreen2にしたいので、OnSelectにNavigate(Screen2)を設定。
カメラで撮影した画像を表示する領域はScreen2で撮影して一保存している画像を表示したい。変数appPhotoに格納しているデータを表示したい、のでImage1の、プロパティimageに、[appPhoto]を設定する。

###3-4エラーがないか確認

ここまでやってら、画面右上の再生ボタンからテストする。。
screen1と2の切り替えがうまくいくか、screen2で撮影した画像がscreen1で表示されるか確認する。

もし何かしらエラーがある場合は、画面右上の[アプリのチェック]にエラー表示である赤いマークがつく。下の画像はエラーがある状態で、image1の領域の左上にも赤いマークがついているので、それを参考に修正する。
この図では、imageの変数が、[appPhoto]ではなく[appPhot]になっている（変数が正しくない）

後編に続く