カメラ画像取得アプリお試し(工場、実験施設など屋外でのタブレット利用のための検討)

## はじめに
工場内、試験施設などでデジタルデータを扱うためにタブレットが使われることがあるが、
事務所以外でデジタルデータを見たり、データをインプットするだけでは
実際の利用者に対してメリットが感じにくいと思われた。

**「屋外からでも不具合や確認などのレポートが作成出来る」**
ということがユーザーに対し、使ってもらうためのキーの機能になるのでは？と考え、その初期段階としてカメラ画像を取り込み、その内容を保管する機能をPowerApps＋PowerAutomateで試作した。

### 作成手順
参考に記載の参考資料に従って作業をしたので基本についてはそちらを参照いただきたいが、特に参考資料に記載のない部分や、作業中つまずいたところなどについて記載する。
ただし個々のOffice365(Microsoft365）の環境次第で若干の差異があるかもしれないことはご了承ください。

> 注意　本資料は2022年09月の情報で作成しています。その後のアップデートなどで方法が変わる場合があるので留意してください。

### ①Office365にログイン、Power Automateを起動
左肩の9つの点（アプリ起動ツール）をクリックして、アプリにPower Automateがあれば選択。
なければ、すべてのアプリをクリックし、選択する。
![挿絵1-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/c97fdacc-834c-f909-2fb5-a47493a388f9.png)

### ②Office365にログイン、Power Automateを起動 その２
作成をクリック、”自動化したクラウドフロー“をクリック
![挿絵2-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/c95f3970-36a7-7a55-7fc1-20c5edaa2af7.png)

### ③フローの名称を付与
![挿絵3-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/8967e22e-a6b9-8175-ea1f-6e690a881eb0.png)

### ④トリガーの検索でPowerAppsが探せないので仮に、別のトリガーで作成する。
以下の例ではひとまずすべてのトリガーから探している。
(この場合、⑤以降で消すのでどのトリガーでもよい）
![挿絵4-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/06090c92-2583-230b-7fd9-b58ecb12ee7f.png)

### ⑤仮に付与したトリガーを削除し、空にした状態でトリガーを検索
![挿絵5-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/3222cb70-e8b2-a0a8-70a4-aae6c2f45775.png)

### ⑥新しいステップをクリックし、ステップを追加する。
![挿絵6-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/380fcc17-4b57-de8f-3a93-390e06eaf0dc.png)

### ⑦組み込みタブを選び、データ操作を選択、“作成”をクリック
![挿絵7-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/876553ec-aa81-b8b4-17ec-e0d0bf865fa8.png)

### ⑧出来上がった“作成”ステップの名称を変更
![挿絵8-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/a8cdc682-9b19-447f-bd80-a4026e7fec69.png)


### ⑨入力欄を選択、下図左のポップアップしたメニューから“PowerAppsで確認”をクリック
![挿絵9-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/b9a6f94b-78d6-ff65-2b10-66c575a7b6f9.png)

### ⑩新しいステップをクリック、OneDrive for Businessを選択
![挿絵10-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/a9d90ee9-fd9b-abb5-7721-9f56d23e9d62.png)

### ⑪ファイルの作成を選択
![挿絵11-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/139d6db9-b9fa-65bb-2921-cc9502adbe98.png)

### ⑫以下のように設定し、PowerAutomateを保管する。
・フォルダーのパス：OneDrive内の任意のパス
・ファイル名：png拡張子の任意のファイル名
・ファイルコンテンツ： @{base64ToBinary(replace(replace(outputs('arg_photo_base64'),'data:image/png;base64,',''),'"',''))}
![挿絵12-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/3db2d815-966d-22c4-ef90-5329ba58ab57.png)

### ⑬PowerAppsアプリの作成
PowerAppsを起動、空のアプリを作成します。
![挿絵13-1-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/b681778b-14ef-3fb9-94fe-5ea4ab2ef2a4.png)

空のキャンパスアプリを作成、アプリ名を入力して、形式を選択し、作成します。
![挿絵13-2-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/842a4f3a-2c5c-ee97-938e-755ec847c614.png)

空のアプリを作成し、最初のスクリーン（Screen1）で「挿入」→「メディア」→「カメラ」を選択し、スクリーン全体にCameraオブジェクト（Camera1）を設定。
#### 図はスマホアプリですがタブレットでも同じことができます。
![挿絵13-3-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/08d726ce-df01-7a3b-d98a-9cfb1162f410.png)

Camera1のOnSelectプロパティに「Navigate(Screen2,ScreenTransition.None);Set(tmpimg,Camera1.Photo)」と設定。
※アプリを使いたい端末にリアとフロントなどカメラが複数ある場合は、カメラオブジェクトのCameraプロパティを0,1,2…と変更することで撮影時に使用するカメラを切り替えることができます。
![挿絵13-4-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/46bde1c1-1d9b-d32e-6964-4cf6acbc40c8.png)

「新しい画面」→「空」を選択し、２つ目のスクリーン（Screen2）を作成。
Screen2で「挿入」→「メディア」→「画像」を選択し、スクリーン全体にImageオブジェクト（Image1）を設定。
Image1のImageプロパティに「tmpimg」と設定。
![挿絵13-5-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/3bef2ee6-4867-5f67-c415-672690f43a84.png)

Screen2で「挿入」→ 「入力」→ 「ボタン」を選択し、任意の位置にButtonオブジェクト（Button1）配置。
Textプロパティに「"Retake"」、OnSelectプロパティに
「Navigate(Screen1,ScreenTransition.None)」と設定。
![挿絵13-6-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/52f76ff8-e1af-7abb-3cdd-7c41aabc580a.png)

Screen2で「挿入」→ 「入力」→ 「ボタン」を選択し、任意の位置に２つ目のButtonオブジェクト（Button2）配置し、Textプロパティに「"Save"」を設定。
![挿絵13-7-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/370bbdee-b67b-1b72-a5bc-fef5c19e9780.png)

Button2を選択した状態で左ツールボックスの「Power Automate」選択する。
![挿絵13-8-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/1de9f4da-f8e6-5bef-cd42-ea46ab987eda.png)

先程作成したフローを選択する。
![挿絵13-9-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/19b61554-8c9b-bc8c-25fe-fb44b99f6022.png)

Button2の詳細設定でOnSelectに   “(フロー名).Run(< Image1のImageプロパティの名称 >) ”
この場合　“Photo_test.Run(tmpimg)”

名前を付けてPowerAppsアプリを保存したらPowerAppsは完成です。
![挿絵13-10-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/1a51b505-136a-d1d5-7e33-0f7ebb9c50ad.png)

## 利用イメージ
ノートPCでの試行なのでタブレットの場合、操作性が若干違う可能性があります。

### ①カメラの画像が表示されるのでこれで良ければ画像をタップ（PCの場合マウスクリック）
![挿絵101-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/eb253bab-4a16-aad1-4ba7-88b4d9ce0d1b.png)

### ②別スクリーンが立ち上がり、画像が表示される、OKならSave、再度取り直す場合はRetake/Saveをタップ（PCの場合はクリック）
![挿絵102-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/6e795ad9-1bdb-8981-6afb-2364d5a1801a.png)

### ③指定のOneDriveフォルダーに保管される。
この例では名前指定なので、最新のものだけ保管されている
（前にとったものを残すには修正が必要）
![挿絵103-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/42561ba8-6f1e-5f4b-d4af-c72796243d4a.png)

### ④OneDriveから画像が見れる。
![挿絵105-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/032f3b54-f73c-6421-2ab2-24ab33e9ed14.png)


## 追加項目
タブレットでのチェック結果、そのままでは背面カメラが使えないので以下の機能を追加
ラジオボタンでカメラを切り替える
　①ラジオボタンを追加する
　　　下図のように挿入ー入力ーラジオで追加できる。
![挿絵111-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/5139811f-8b17-d05f-4dcd-da51aa1167a5.png)

　②ラジオボタンを設定する。
　　　ラジオボタンを選択した状態で“Items”を選択（Microsoftの資料では「項目」とあるが
　　　試した環境上では“Items”) RadioSample>[0,1]へ変更し、0か１を選択できるようにする。
　　　（カメラが2つある場合,0,1でフロント/リアのカメラを切り替える）
![挿絵112-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/938aed2b-1608-2c58-b7f9-e6a7026d3a93.png)

　③カメラのCaremaの数値をラジオボタンの選択値にする。
　　　下図のようにカメラのアイテムを選択（下図の場合“Camera1”）そこへ
　　　Value([ラジオボタンのアイテム(下図の場合”Radio1”)].Selected.Value)を入力
![挿絵113-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/19b2344b-5a99-91d3-8845-2981ba50c954.png)

　④ラジオボタンにラベルを追加　　　
　　　ラベルを挿入、Textを書き換える。
![挿絵114-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/cabcd97e-fd49-e1a4-e1bf-5f216f189664.png)

## 将来の拡張について
今回は単純にカメラ画像の保管のみとしたが、以下のように拡張も考えられる。
![挿絵104-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552279/1c2ebdc3-6ca6-7fa7-a2d6-82fae0c49332.png)

## 参考
PowerAppsのカメラで撮影した写真をOneDriveに保存する
https://qiita.com/r-wakatsuki/items/670f85c628ec231a5a5b

【PowerApps】カメラで撮った画像をSharePointリストに保存し、他のアプリで見る。
https://qiita.com/Econoshift/items/2727dc687f5801d87272

PowerAppsカメラコントロールでハマった 
https://qiita.com/yamad365/items/c44c2c3bd5bd31f06892

Power Apps でのラジオ コントロール
https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/controls/control-radio
(ただしここで言われている「項目」は”Item”と読み替えること)

PowerAppsからPowerAutomateを実行する(2022/09時点でのボタンでのPowerAutomateの呼出し手順)
https://miseruit.com/2022/06/17/post-2687/