【備忘録】PowerAppsで画像を撮影して、SharePointの画像ライブラリーに格納する前編

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

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


大まかな手順はこんな感じ。
1. 計画
2. SharePointに画像保存用のライブラリーの作成
3. PowerAppsで作成#1
4. Flow作成
5. PowerAppsで作成#2

#1.計画

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

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

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


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

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



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

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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/7562d21b-54e4-902a-5d7f-b9efd040591f.png)


#3.PowerAppsで作成1

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


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


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


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


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


1. 各種パーツは、パワポ同様に配置していく。
アプリ名は、ユーザーに入力させないし、固定の内容が出ればいい。なので、[ラベル]を使う。フォントや背景などのプロパティは、パワポと同じように設定できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/dbff3b62-508b-6a16-c5d0-e3daa737702a.png)


2. ユーザー情報は、ユーザーに入力させたいのでラベルを使う。ユーザー情報を自動で取得するのだけど、エクセルと同じように関数で処理する。実行中のユーザーを取得する関数[User().Email]を使う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/24929227-b35f-d5ff-1931-78612352ba4d.png)


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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/4bb2710a-38aa-0f50-b73b-580866ac4c34.png)


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

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

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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/31bb66d5-ec94-8303-b231-6de4ca333074.png)



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

- 「ボタンを押したら〇〇する」という処理にはプロパティ[Onselect]に関数で処理させる。
Onselectに[Navigate(screen1)]と関数を入れれば、「ボタンを押したらscreen1に画面切り替え」という処理を設定できる。戻るボタンであるicon3、OnSelectはこれを設定。

- カメラを使うときのお約束で、プロパティ[StreamRate]を設定する必要がある。今回は何も気にせずCamera1のStreamRateに100を入れる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/5250a797-c6b6-8458-64a3-0d0312920b01.png)


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

- ついでに、スクリーン1に戻る処理もくっつけたい。その場合は、[;]でつなげられる。OnSelectにとすれば、ボタンを押したら社員を一時的に保持して、screen1に移動する処理を設定できる。



     Set(appPhoto,camera1);navigate(screen1)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/caf44202-3723-bed2-931b-39afb7f113f9.png)

###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]を設定する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/3e284e0f-c95f-ca86-61cd-4ef15f27f0d5.png)



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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/90a0ee53-96b6-82fa-8f81-ee063fee5955.png)



[後編](https://qiita.com/hisssa0102/items/1525eeae819c4d68df75)に続く