PowerAppsのマイクコントロールの録音データを保存する

# 本日の投稿背景
巷でPowerAppsの楽器作成が流行っているのですが
そこでよく聞かれるのが
「マイクコントロールの音声ってどうやって保存するの？」
ということですので、実際にやってみました。

# 必要なもの
## Azure
ストレージアカウントが必要です。
作成方法は後で記載します。
料金はかなり控えめですので（多くても6.6円/GB/月）なので出し惜しみしないように！

## PowerApps
* ストレージアカウントとの接続
* マイクコントロール
* ボタン

# Azure側操作
## ストレージアカウントの用意
[Azureポータル](https://azure.microsoft.com/ja-jp/)にサインインしましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/3f496ba0-3731-ddfb-a77d-caa43baa128a.png)

アカウントをお持ちでない方も、Office365アカウントでログインすればすんなりできると思います。
これを機にAzureを使いこなしましょう。

左メニューのストレージアカウントをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/48dd6545-34a7-afaa-9b11-c7c58d500cbc.png)

追加をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/771f4f0e-5c96-4826-e027-ef79c88ddee0.png)

ストレージアカウント作成画面を設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/68e26ddc-eeb5-0c9e-dca8-976a239fd12d.png)

リソースグループが存在しないときは、リソースグループの作成が求められますので
作成してください。
また、ストレージアカウント名は世界で唯一の名称が必要です。
先頭にテナント名なんかにしとくとよろしいかと思います。
あと、アカウントの種類は必ずStorageV2にしてください！

必須項目を入力したら、確認及び作成をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/9773d022-42a7-17e0-8807-3be8989133e7.png)

確認画面で検証に成功しましたと出たら、容赦なく「作成」をクリックしましょう。

作成が完了すると以下のような画面になります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/c16e5c75-068c-6908-ef8f-d1c049f2b87b.png)

「リソースに移動」をクリックしましょう。

## BLOBコンテナの作成
BLOBコンテナとは、フォルダみたいなものです。
BLOB直下にはデータを置くことができず、必ずコンテナを作成して
コンテナを指定してからファイルをアップロードすることになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/ac82ebf2-b9d2-2e5d-5c47-82cf2910f6d2.png)
左メニューからBLOBをクリックし、「コンテナー」をクリックしてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/88f5f8ed-f269-2df1-4de7-598ac2192f70.png)
コンテナー名を任意の名称で作成し、「OK」をクリックしてください。
また、このコンテナー名称は後で使用しますので、メモ帳などにコピペしておきましょう。

## BLOBアクセスキーの取得
BLOBに外部サービスからアクセスする際は
* ストレージアカウント名
* アクセスキー
この二つが必要になります。
BLOBを作成した際に生成されていますので、取得しましょう。
左メニューからアクセスキーをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/d2040b0f-9541-939f-20df-211f0900cb69.png)

赤枠で示したボタンでそれぞれコピーできますので
ストレージアカウント名とアクセスキーをメモ帳などにコピペしておきましょう。

これでAzure側の操作は完了です。

# PowerApps側
## 接続の設定
先ほど作成した BlobにPowerAppsから接続する定義を設定します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/b3006533-3110-0b8c-a877-7c767cf642ad.png)
設定メニューから「接続」をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/34d05151-2611-c3e9-79ae-f5b416937c5d.png)
「新しい接続」をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/e48151a7-3e96-9fcf-3ac8-d223668946f5.png)
「Azure Blob Storage」をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/d5633087-84ad-68f3-f3a1-73f684b17e85.png)
ポップアップ表示されるので
メモ帳などに記録している、ストレージアカウント名とアクセスキーを入力して
「作成」をクリックしてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/e1d7fd53-d760-ed99-6be0-305d24f35d38.png)
このようになっていれば問題ありません。

## アプリの作成
キャンバスアプリを作成します。

### データソースの追加
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/a6076348-8b7a-52dc-3ca1-5178a00a2815.png)
まずは、ビューから「データソース」をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/255ca6ef-248c-826f-07be-1f76c5903c98.png)
「データソースの追加」をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/99d5caa9-62e1-437d-4f72-dd6bbfde03f4.png)
先ほど作成した接続が出てきますので、それをクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/cefeabab-f96c-fed3-0bff-820ec0967a9b.png)

このようになればOKです。

### マイクコントロールアクションの設置
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/439ee527-831e-1aec-1f3a-fe90300854ba.png)
挿入＞メディア＞マイク　をクリックします。

### 送信用ボタンの設置
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/bd310da8-2b97-a5d9-3dc3-ff716f56567b.png)
挿入＞ボタン　をクリックします。

ボタンを押したときに、BLOBに送信されるようにします。
OnSelectに以下を宣言します。

```PHP:OnSelectプロパティ
AzureBlobStorage.CreateBlockBlob(
    "audiocontoller",   //コンテナ名称
    "Audiodata.aac",    //ファイル名
    Microphone1.Audio   //マイクコントロール名称．Audioプロパティ
)
```

これで作業は終了です。

マイクコントロールで録音後
ボタンを押すと、Blobに送信され、Blobを確認すると以下のようになっていれば成功です！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/d22b7191-01db-980a-eebe-83970a71832d.png)


# 最後に
この投稿が参考になったと思う方は、ぜひいいねとフォローをお願いします！