第２回目では Power Apps と Azure SQL Database にてデータ連携する方法を解説しました。
第３回目では Power Apps と Azure Cosmos DBでの連携方法について学んでいきたいと思います。
Power Apps と Azure Cosmos DB は直接コネクタを介した連携ではなく、Power Automate クラウドフローを介して連携します。
※Cosmos DB については事前に環境構築（アカウント、データベース、コレクションの作成）が完了していることを前提としており、構築における詳細な手順については割愛させていただきます。
本稿では、アカウントを「ted」、データベースを「SampleDB」、コレクションを「Persons」、パーティションキーを「id」 にて作成していますので、説明文章および、画像の内容は適宜置き換えて読み進めてください。
目次
アプリケーションの構成
アプリケーションの作成
まとめ
アプリケーションの構成
作成するアプリケーションの構成概念は以下の通りです。
アプリケーションの作成
PowerAppsのアプリケーションを作成しましょう。
PowerAppsのホームから「空のアプリ」を選択します。
作成メニューで「空のキャンパスアプリ」の「作成」を押下します。
今回はPowerAppsのキャンバスアプリを空の状態から作成していきます。このあたりは前回同様です。
「アプリ名」を入力して今回は「タブレット」を選択します。
空のキャンバスアプリが作成されました。
さて、第1回、第2回もご覧になった方は、お分かりになると思いますが、Power Apps キャンバスアプリでは、Office 製品である 「Power Point」のように画像やオブジェクト（Power Apps では「コントロール」と呼びます）を自由に配置して「データソース」からの情報を出力することができたり、「Excel」の「関数」のように、オブジェクトに表示させたい情報をうまく加工することができます。
このように、「コントロール」「データソース」「関数」をうまく組み合わせていくことで、アプリケーションを作成します。
左側の「＋」を押下し、「テキスト入力」を選択しましょう。
そうすると、画面上にテキストボックスが出現します。
ここで、上方で「Fx」と書いた右側の入力欄に「“テキスト入力”」をありますが、「Now()」と置き換えてみましょう。
すると、実際に「Now()」と入力した時間が表示されたかと思います。
Excelで慣れている方は理解しやすいと思いますが、このように実行するタイミングや、取り扱う値（インプット）によって、振る舞いや出力（アウトプット）を変化させるものをExcelと同様、Power Appsでも「関数」と呼び、「関数」を「コントロール」（のプロパティ）に定義することにより、アプリケーションを作成していきます。
続いて、「テキストラベル」、「日付の選択」、「ボタン」、「入力」グループから「スライダー」、を選び、それぞれ配置していきましょう
テキストラベルを選択し、Fx に 「Slider1.Value」と入力し、「再生」します
スライダーを実際に動かすと、連動してラベルの値も変わります。
挙動が確認できたら、「×」で戻りましょう
次は、「垂直ギャラリー」を追加し、配置します。
続いては、「変数」を作成し、ギャラリー上にデータが表示できるようにします。
「ボタン」の OnSelect プロパティに下記のように関数を定義します。
Collect('List',{
'Text':TextInput1.Text,
'Date': DatePicker1.SelectedDate,
'Value': Slider1.Value
})
次にギャラリーを選択すると、データソースの選択欄に「List」が追加されていますので、そちらをクリックします。
（図のようなギャラリー全体に選択にならない場合、クリックする箇所を微調整してください）
このようになったら成功です
ツリービューを表示し、Gallery1 の右にある 「＞」を選択すると、以下のようなコントロールがさらに表示されますので、Title には 「SubTitle」に「ThisItem.Date」と入力します。
（※ ThisItem.D まで打つと、候補がでてくるので、そちらを選ぶと簡単です。）
Gallery1 内に 新しく、ラベルを追加します。Subtitle など、Gallery1内のコントロールを選んだ状態で、上部のコマンドバーから「ラベル」を選択すると、
Gallery1 内に新たにラベルコントロールが追加されますので、下図のように配置を調整します。
Gallery1 内で、NextArrowは不要になるので消しておきましょう。コントロールを選んで、右クリック、削除で削除できます。
（Imageも使いませんが、削除するとエラーが発生したり、配置が乱れてしまいますので、一旦残します）
Title、SubTitle、Label2 の Text プロパティはそれぞれ下記のように設定します。
Title: ThisItem.Text
SubTitle: ThisItem.Date
Label2: ThisItem.Value
試しに、「再生」して、テキストボックスの値や日付選択、スライダーを動かした後、「ボタン」をクリックしてみると、右側に配置したギャラリーにデータが次々追加されていくのがわかると思います。
今までに行った操作は、「変数」を「データソース」として利用することと、「変数」に対して、値をどんどん追加することのできる「関数」を組み合わせたにすぎません。
「変数」は簡単に言うと「箱」のようなもので、何かを入れたり出したりできる便利なものです。
「変数」には種類（「型」）があり、変数の「型」と取り扱う値の「型」が一致していないと扱えません。
コントロール上で直接扱ったり「関数」で加工が難しい種類の「データソース」でも、「変数」に入れたやることで、扱いできるようになったり、加工が簡単になるケースがあります。
さて次は、Power Automateの設定になります。
Power Automate とは、Power Apps の兄弟のようなものです。
Power Apps は「アプリケーション」としての面が強いですが、Power Automate は「自動化」をメインとして、毎日の決まりきった特定の業務を自動化したりするのに役立ちます。
Power Apps、Power Automateの他にも、Power BI、Power Virtual Agent と呼ばれる４つの製品がありますが、それらは「Power Platform」と呼ばれ、Microsoftが提唱するノーコード・ローコードツールプラットフォームのことです。
詳しくは、公式サイトなどでその全体像などを調べてみるとよいかもしれません。
https://powerplatform.microsoft.com/ja-jp/what-is-power-platform/
抽象的な概念の話や座学が多くなってしまいました。
お待ちかね、早速Power Automate の設定に入っていきましょう。
Power Automate は 現在作業中の画面からも作成することもできますが、デバッグや細かい設定をしたりするのに不向きなため、少し画面を移動したいと思います。
左上のアプリランチャーから Power Automate を選択するか、別タブで、https://japan.flow.microsoft.com/ja-jp/ を開くと、以下のような画面が表示されますので、「＋作成」を選んでください
「自動化したクラウドフロー」を選択すると、以下のような画面になりますので、そのままスキップで進めてください。
以下のような画面が現れすので、「コネクタとトリガーを検索する」窓に「PowerApps」と入力します。
そうすると、以下のような画面に切り替わるので「Power Apps」を選択してください。
操作を進めると、このような画面になるので、「新しいステップ」で押下し、「組み込み」を選択し、「データ操作」を選んでください。
画面が少し切り替わるので、「作成」を選びます。
「入力」にフォーカスが当たると、以下のようなポップアップが出現するとおもいますので、「Power Apps で確認」をクリックしてください。
さらに次のステップを登録します。
「新しいステップ」を押下し、検索欄に「Cosmos」などと入力すると、Azure Cosmos DB のコネクタが見れるようになります。
「ドキュメントを作成または更新（V3）」を選択すると、接続が見つからない、等のエラーが表示されるので、コネクタの「…」から、「＋新しい接続の追加」を選んで、接続情報の入力画面を表示してください。
接続情報は、Azure Portal（https://portal.azure.com）画面にて、作成したAzure Cosmos DB の「キー」情報画面から確認して入力してください。
入力完了しましたら、「作成」を押下します。
エラーメッセージのようなものがまだたくさん出ていますが、こちらは、接続情報、Cosmos DB の構築作業が完了できていれば、body以外の項目がプルダウンから選べるようになっていると思います。
bodyに関しては、選択すると、右側にポップアップが出現しますので、そのなかから、「作成」のグループにある「出力」を選択します。
これで、Cosmos DBへの登録処理が完成しました。
これまでの処理が間違っていなければ、Power Automate の画面上このようになっていると思います。
詳しい説明は割愛しますが、Power Automate では、このようにステップをつなぎ合わせて処理を作っていきます。
このような作業を通じて作った処理を「フロー」と呼び、好きな数だけフローを作っていくことができます。
フローは１つの「トリガー」から始まって、複数の「アクション」を組み合わせて処理を作りこんでいきます。
少しわかりにくいですが、左上の方の「無題」とあるところはクリックでき、名称を入力することができますので
「CosmosDB登録」と名称を入力し、保存しましょう。
保存が完了したら、Power Automateを開いていたタブは閉じても大丈夫です。
そろそろ、Power Apps 開発の操作には慣れてきたでしょうか？
先ほど作成したPower Automate のフロー（CosmosDB登録）をPower Apps側からボタン押下によって呼び出す処理を実装してみます。
Power Apps 編集画面に戻り、画面上にボタンを追加し、「送信」など分かりやすいテキストを設定しましょう。
左側のメニューのうち、上から６つめのアイコン（カーソルを合わせてしばらくおくと「Power Automate」というツールチップ表示が出現します）をクリックし、「＋フローの追加」を選ぶと、先ほど作成した「CosmosDB登録」処理が出現するかと思いますので、クリックして追加してください。
追加されると以下のような画面になります。
先ほど作成した「送信」ボタンを選択し、OnSelect項目に「CosmosDB登録」を打とうとすると、候補に挙がってくるとおもいます。
※もし上がってこないようであれば、PowerAppsに戻ってからの操作がうまくいっていないと思いますので、少し戻って確認するか、Power Automateで作成したフローがちゃんと保存されているか確認してください。
詳しい説明は省きますが、OnSelect項目には、以下のように入力してください。
CosmosDB登録.Run(JSON({
Text: TextInput1.Text,
Date: DatePicker1.SelectedDate,
Value: Slider1.Value,
id:GUID()
}))
再生したあと、「送信」ボタンを押下してみましょう。うまくいけば、Power Apps → Power Automate を通じ、CosmosDBにデータが登録されるはずです。
Azure Portal の データエクスプローラから Cosmos DB の中身を確認してみましょう。
図のようにデータが生成されていれば成功です！
まとめ
今回はPowerApps、Power Automateを使って、CosmosDBにデータ登録をしてみました。
CRUDで言うところの「C」だけの操作ですが、R（読み込み）、U（更新）、D（削除）に関しても、似たような作業手順で作成することができますので、興味がある方はぜひチャレンジしてみてください。
さて、３回にわたって、Power Apps とデータソースという題材をテーマに取り扱ってきましたがいかがでしたでしょうか。ExcelやPower Pointくらいしか触ったことない、という方でしたら、ちょっと難しかったかもしれませんし、VBAやAccess、またはPHPやPythonでシステムを作ったことがある、という方でしたら、拍子抜けするくらい簡単にアプリが作れた感覚じゃないかなぁと思います。
Microsoftの提唱するノーコード、ローコードツール「Power Platform」の中でも、とっつきやすいと思われるPower Apps （さらにその中でも「キャンバスアプリ」）に絞って話をしてきましたが、これらの製品群を使うと、もっと多種多様な業務に合わせたアプリケーションや自動化を作っていくことができます。
「掲載日：2022年6月1日」
【第１回】データ連携（SharePointリスト編）
【第２回】データ連携（Azure SQL Database編）