Power Appsは業務アプリケーションとしてデータベースとのデータ連携や入力フォームとしての利用シーンが多いと思いますが、実はスマートフォン向けアプリも開発できるようになっています。スマートフォンに装備されているセンサーやカメラ、マイクなども利用してアプリ開発が可能です。今回はPower Appsでカメラアプリを作成してみまましょう。
実行・開発環境の準備
まず初めに、スマートフォン側の実行環境を用意しておきます。Power Appsのスマートフォンアプリは、Power Apps自体のアプリケーションの中で実行されることになりますので、Android、iPhoneそれぞれのアプリストアからPower Appsアプリストアをインストールしておきます。
Google Play（https://play.google.com/store/search?q=Power Apps&c=apps）App Store（https://apps.apple.com/jp/app/Power Apps/id1047318566）
次に開発環境を整えておきましょう。スマートフォンアプリの開発をPCから行う場合は実際のスマートフォンの画面をPC側に表示して操作&デバッグなど実行できる環境を用意しておく方が何かと効率的です。例としてAndroidのスマートフォンの画面をWindowsに表示する設定を行います。PC側に「Vysor(https://www.vysor.io/)」というアプリケーションのダウンロード・インストールを実行します。Windows版を選択します。
インストール後実行します。Androidのスマートフォンの場合は「USB デバッグ」を有効にする必要があります。
「USB デバッグ」を有効にするには、スマートフォンの「設定」メニューから「デバイス情報」を選択します。「ビルド番号」を7回タップします。「設定」メニューから「システム」-「開発者向けオプション」を選択します。「USBデバッグ」を有効にします。
以上の設定を行い、スマートフォンをUSBケーブルで接続してVysorを実行すると、PCの画面上にスマートフォンの画面が表示されるようになります。マウスでの操作も可能ですので、開発デバッグ環境として利用していきます。
キャンバスアプリ
実行・開発環境が整ったので実際にアプリを開発していきましょう。まずは基本のキャンバスアプリを「電話」形式で作成します。
「挿入」-「メディア」-「カメラ」を選択します。
適当に配置して、ここまでの状態を確認してみましょう。保存して右上の「公開」メニューを選択します。
「このバージョンの公開」を選択してスマートフォン側で実行してみます。
スマートフォン側で、アプリとして「Power Apps」を実行します。保存したカメラアプリを起動します。
いきなりカメラに映った画像が表示されています。これくらい簡単にアプリにカメラの機能を取り入れることができます。
（10）
写真の撮影
カメラとして撮影して画像として保存する機能を追加します。空の画面「Screen2」を追加します。撮影画面としての「Screen1」にはカメラを全画面で配置して、この画面をタップして画像を取得して変数に格納して次の画面「Screen2」に移動するようにします。「Camera1」の「OnSelect」に以下のように記述します。
Navigate(Screen2, ScreenTransition.None);
Set(_TempImage, Camera1.Photo);
「Screen2」には取得した画像を表示するために挿入メニューから「画像」を追加します。
その他、撮影画面に戻るためのボタン、保存ボタン、メッセージを表示するためのラベルなど配置します。
「Image1」の「Image」プロパティーには、「Screen1」で取得した画像が格納されている変数”_TempImage“を設定します。これで、Screen2が表示されたときに撮影された画像が表示されます。
撮影ボタンの「Button1」の「OnSelect」にはScreen1に戻るために、
Navigate(Screen1,ScreenTransition.None)
と記述します。
画像が保存されたらラベルにメッセージを表示させるために、「Label1」の「Text」プロパティーに変数“_Msg”を設定します。
Power Automateとの連携
最後に核心部分の画像ファイルの保存です。Power AppsはWebアプリケーションになるので、スマートフォン本体へファイルを保存することができません。ファイルの保存先として今回はOneDriveを選択しています。Power Appsから撮影した画像をOneDriveにファイルとして保存することにします。Power Appsから呼び出すPower Automateのフローはこのようになります。トリガーとして「PowerApps（V2）」を利用して、Power Appsからファイル名と画像データを受け取ります。
保存ボタンの「Button2」の「OnSelect」には
PowerAppsカメラ保存.Run(
Text(
Now(),
"yyyyMMddhhmmss"
) & ".jpg",
{
file: {
contentBytes: _TempImage,
name: ""
}
}
);
UpdateContext({_Msg: "OK!"});
と記述します。Power Automateのフローを呼び出して、ファイル名として”タイムスタンプ.jpg”と画像データとして「Screen1」で取得した画像が格納されている変数”_TempImage“を渡します。最後に成功メッセージ“OK!”を変数“_Msg”に設定して表示しています。
テスト
ここまでを保存して公開して、テストしてみましょう。まずは写真を撮って保存ボタンを選択して、“OK!”とメッセージが表示されています。撮り直す場合は保存する前に撮影ボタンを選択すれば前の画面に戻れます。
OneDriveにも問題なく保存されています。
以上、Power Appsでスマートフォンのカメラアプリの作成方法を紹介しました。ほんの数行コードを記述しただけでこれだけのアプリが完成してしまいます。今回作成したアプリはPower Appsならでは、AndroidとiPhone、さらにカメラ付きのPCでも同じアプリが利用できます。自分で作成したスマートフォンのアプリにさらに様々な機能を追加して普段の生活でも便利に利用できるオリジナルアプリを開発してみましょう。
