
三島正裕のOffice 365コラム「Power AppsでCSVデータを出力する」

目次
はじめに
こんにちは!クラウドビジネス担当の三島です。Office365徹底活用コラムPower Apps編ということで、今回はPower AppsでのCSVデータ出力について解説をしたいと思います。Power Appsのコラムも書き始めてからようやく1年が経過しまして、最近は、お客様からPower Appsを社内で活用してみたいというお声を頂く機会も増えてきました。社内業務の効率化やデータの有効活用など、本当に様々なご相談を頂くのですが、中でもよく頂くご要件が既設の業務システムとの連携です。
このコラムを読んで頂いている皆様はご存じだと思いますが、Microsoft Power Appsは様々なデータに接続することが出来ます。Office365上のコンテンツはもちろん、Microsoft Azureや他のクラウドサービスにも接続してアプリケーションを作成することが出来ます。Common Data serviceを使えばスケジュールを設定して定期的にデータを読みに行くことも出来ます。ですが、実際にはセキュリティ上の問題から、メインの業務システムに直接接続して利用されるケースというのは稀で、業務システムとPower Appsアプリとのデータのやりとりは、テキストデータを介して行いたいとおっしゃられる場合が多いのが実情です。
データ連携で一般的に多く使われる形式がCSVなのですが、Power Appsではどのようにして作成したら良いのでしょうか。残念ながらPower AppsにはCSVデータを作成する機能は現時点では実装されていないため、少し難しくなりますがFlowを組み合わせることで実現することが出来ます。
さて、このCSVデータ出力の仕組みですが、今回もアプリ作成をしながら解説をしたいと思います。とある会社で開催される商品展示イベントに合わせてアンケートアプリを作成。そこで担当者が入力したデータをCSVで出力するというシナリオです。1時間程度で作成出来るアプリですのでお時間のある方はぜひ試してみてくださいね。

データの保存先を作成する
イベント開催中に登録するアンケート数を数百枚程度と予測して、今回のデータソースはOneDriveに置いたExcelを使用します。もし、今回のアプリを実務で使用する予定で、もっと多くのデータを登録されたい場合は有償プランで利用出来るCommon Data serviceを使用して下さい。
ローカル環境でExcelファイルを作成します。1行目の各列に下図のとおり項目名を入力して、テーブル形式で保存します。テーブル名はQuestionnaireとします。下図にサンプルデータを載せています。サンプルデータは入力していなくてもアプリ作成を進めることは出来ますが、ある程度データがある方が作成は楽になります。項目「PowerAppsId」はPower AppsがExcelデータを参照する際に使用するキーがセットされる箇所です。予め作成しておいても良いですし、なくてもPowerAppsにExcelファイルを登録したタイミングで自動的に作成されます。サンプルデータ作成時に値を空欄にしておいても値は自動的にセットされます。

Excelファイルを作成したら、OneDrive上の任意の場所に保存をしてください。

アプリケーションを作成する
管理画面からアプリを選択して、「+アプリの作成」を選択します。表示されたメニューよりキャンパスを選択します。続いて接続先を選択します。今回アプリの作成ではOneDrive for Businessを選択してください。先ほど保存したExcelファイルが表示されますので、作成したExcelテーブルを選択して接続ボタンを押します。

接続ボタンを押すとアプリのビルドが始まります。数十秒程度でアプリのベースが完成します。

一覧画面の項目を編集する
一覧画面(BrowseScreen1)のギャラリー(BrowseGallery1)の内容を編集します。デフォルトの項目にはポイント、価格、商品がありますが、Excelで作成した項目が全て表示されるようラベルを追加します。ラベルの追加は、画面上部にある挿入ボタンからラベルを選択して行います。各ラベルのプロパティTextの値については下図に載せておりますので、まずは同じように入力して計12個のラベルを作成して下さい。作成出来ましたら各ラベルを見やすいように配置します。項目名を太字にしたり、色を変えたりしておくと見やすくなると思います。
下図のラベルで日時だけDateAdd関数を使用して表示のときにマイナス9時間としていることに注意してください。Excelデータの日時をPower Apps側で読み込ませた場合、日本時間に合わせる処理が行われてしまい、元データに9時間加算されてしまいます。Power Apps側から入力するだけであれば気にする問題ではありませんが、他システムからの連携やデータ移行をされる際は、元データどおりに時間が正しく表示されているか、必ず注意をして下さい。

ギャラリーの出力条件も下図のように変更します。ギャラリーの表示項目を検索フォームに入力した値で曖昧検索出来るようにします。データの並びは日時順に設定します。

詳細画面の項目を編集する
詳細画面(DetailScreen1)のフォーム(DetailForm1)を編集します。今回はアンケートアプリを作成しますので、フォームの各項目のタイトルをアンケートらしく下図のように変更します。ここでも日時はDateAdd関数を使って時間調整をしていることに注意して下さい。
※項目名については必ずしも下図の名前になっていないことがあります。どうかご了承ください。

編集画面の項目を編集する
編集画面(EditScreen1)のフォーム(EditForm1)を編集します。こちらも詳細画面と同じように、フォームの各項目のタイトルを変更します。先程と同様に、日時についてもDateAdd関数で時間調整をしていますが、編集画面ではUpdate関数も使用していることに注意して下さい。データ表示時は元データにマイナス9時間していますので、データ更新時には9時間加算しておかないと誤った時刻がExcelファイルに書き込まれてしまいます。

CSVデータ出力機能
CSVデータを出力するためのアイコンを作成します。挿入メニューよりアイコンを選択し、ダウンロードアイコンをクリックします。一覧画面(BrowseScreen1)のタイトルの横にアイコンを配置します。
続いて、ダウンロードアイコンをクリックした状態で、アクションメニューを開き、Flowsを選択します。表示されたメニューから「+新しいフローの作成」を選択します。Flowが起動します。テンプレートの中から「Power Appsボタン」を選択して「このテンプレートを使用」を押してください。

続いてJSONの設定をします。Power Appsの一覧画面に表示している内容をJSON形式にしてFlowに渡します。Power Apps側の設定は後程説明しますが、JSON形式にしておくと、複数行の情報も簡単にFlowへ引き渡すことが出来ます。Flow側ではJSON形式で送られたデータを解析するステップを追加します。
Flowの画面が開くと、Power Appsのステップのみが表示されているはずです。ここで「+新しいステップ」ボタンを押下して新しいステップを追加します。アクションを選択するメニューが表示されますので、検索フォームに“JSON”と入力して検索します。アクションより「JSONの解析」を選択します。
「JSONの解析」ステップが追加されます。コンテンツの入力フォームにフォーカスをあて、メニューから「JSONの解析_コンテンツ」をセットして下さい。スキーマには下図のように入力してください。

JSONの解析の設定内容については下図を参考にして下さい。最初にコンテンツを入力します。入力フォームにフォーカスをあてると、右のメニューに設定可能なコンテンツが表示されます。Power Appsで確認またはJSONの解析コンテンツを選択して、コンテンツの入力フォームに「JSONの解析コンテンツ」をセットして下さい。スキーマにはCSVにセットする項目をJSONで指定します。

CSVファイル作成のための設定をします。「+新しいステップ」ボタンを押して、次のアクションを選択します。CSVで検索してアクションより「CSVテーブルの作成」を選択します。開始の入力フォームにフォーカスをあてて、メニューから「本文」をセットして下さい。詳細オプションをクリックして列は“カスタム”とします。CSVデータのヘッダーと値を入力します。入力する内容は下図を参考にして下さい。


CSVファイルの保存先をSharePoint サイトのドキュメントに指定します。
「+新しいステップ」ボタンを押して、次のアクションを選択します。“SharePoint”で検索して、アクションより「ファイルの作成」を選択します。
ステップ「ファイルの作成」が表示されます。CSVデータの保存先として、サイトのアドレス、フォルダーのパスを選択します。ファイル名は任意で問題ありませんが、作成の度に上書きされないようファイル名に日時を入れています。日時は現在日時を取得していますが、addHours関数で9時間加算していることに注意して下さい。ファイルコンテンツは「出力」を設定します。

ここまで入力できましたら、Flowのタイトルバーの下に表示されている名前を“QuestionnaireCSV“に変更して保存をして下さい。

Flowを実行する
ダウンロードアイコンをクリックすると、Flowが実行されCSVファイルがSharePointサイトに書き込まれるように設定します。ダウンロードアイコンのOnSelectのパラメータを下図のように設定します。ギャラリーの内容を直接Flowへ送ることは出来ませんので、同じ条件でフィルタリングしたデータをコレクションに入れ、それをJSON形式に変換してFlowへ送るよう設定しています。

CSVファイルを作成する
作成したダウンロードアイコンをクリックしてCSVファイルを作成します。実行結果は下図のとおりです。SharePoint Onlineで指定したフォルダーにCSVファイルが書き込まれています。

おわりに
今回はPower AppsでCSVファイルを作成してみましたが如何でしたでしょうか。データを作成するだけでも、設定する箇所は意外にも多いと感じられたかもしれませんが、この操作が出来るようになるとPower Appsの利活用の幅がぐっと広がりますので皆さんも頑張ってトライしてみてくださいね。ご不明な点がございましたら、ディーアイエスサービス&ソリューションまでお気軽にお問い合わせください。
それでは次回もお楽しみに。
三島正裕が登壇!オンデマンドウェビナー
Excelでまとめている、その商談記録。わずか10分でスマホアプリにしてみます!
どんなレイアウトでも大丈夫。フリーアドレス座席予約アプリを10分で作成します。
Dataverse をさらっと知りたい皆様へ。画像付きドキュメント管理アプリを10分で作成します。
https://www.cloudtimes.jp/dynamics365/resource/low-code-tool-dataverse-for-teams