Power Appsをつかって脱PPAPアプリ作成② ～Power Apps編～

Last updated at 2025-04-17Posted at 2025-04-17

前回は、「Power Appsをつかって脱PPAPアプリ作成① ～Power Automate編～」で、Power Automateで脱PPAPのフローを作成しました。
今回の第２回では、連携するアプリをPower Appsで作成する手順を紹介します。

PPAPとは

取引先などにファイルを共有する際、パスワード付きZIPファイルを送信し、別のメールでパスワードを送信するといった流れを一度は経験したことがあると思います。この一連の手順を「PPAP」と呼びます。

P：パスワード付きZIP暗号化ファイルを送ります
P：パスワードを送ります
A：暗号化
P：プロトコル

Power Appsでアプリ化

「Power Automateをつかって脱PPAP」では、脱PPAPの手段として、Power Automateでファイルを共有する方法を紹介しました。
しかし、以下のような課題があります。

ファイル共有時に毎回フローの変数を変更、保存してから実行する必要がある
詳細な共有履歴が確認できない

今回は、上記の課題を解消するために、ファイル共有を自動化するアプリをPower Appsで作成する方法をご紹介します。

Power Appsアプリの全体像

今回Power Appsで作成するアプリの画面イメージです。計３画面作成します。

一覧画面
ファイルの共有履歴を一覧表示する画面です。
詳細画面
一覧画面で選択したアイテムの詳細情報を確認する画面です。
入力画面
共有したいファイルの情報やファイルの権限、共有者を入力する画面です。

それではPower Appsでアプリを作成していきましょう。

Share PointリストとPower Appsの統合

はじめに、「Power Appsをつかって脱PPAPアプリ作成① ～Power Automate編～」で作成しておいたSharePointリストにテストデータを1～2件登録しておきます。
※データがあるとレイアウトを変更しやすいため

（例）テストデータ登録後のリスト

Share Pointリストを開き、[統合]＞[Power Apps]＞[アプリの作成]を選択します。
任意のアプリ名を入力し、[作成]ボタンをクリックします。

以上でShare PointリストとPower Appsが統合されました。
アプリを確認するとスクリーンが３つ作成されています。

画面表示と名称の設定

はじめに画面の設定を変更します。

スクロールせず画面に表示したいので、レイアウトを縦から横に変更します。三点リーダーアイコンから[設定]を選択します。
[表示]の向きを「縦」から「横」に変更します。
表示を横に変更したことで、初期状態は以下のようなレイアウトになります。

スクリーン名を変更します。
初期状態は編集画面ですが、今回は新規登録画面にするため名称を変更します。

対象	変更前	変更後
スクリーン名	EditScreen1	NewScreen1
フォーム名	EditForm1	NewForm1

一覧画面の設定

アプリの一覧画面に対して、レイアウトと一覧表示項目、画面の表示順などを設定します。

▼レイアウトの設定

一覧画面である「BrowseScreen1」スクリーンのレイアウトの設定を行います。
文字サイズやカラーやフォントなどは任意で設定してください。

▼項目の設定

1.　一覧画面に表示する項目を設定します。
共有した日時、ファイル名、共有者のメールアドレスを一覧に表示します。

コントロール名1	コントロール名2	プロパティ	設定値
BrowseGallery1	Title1	Text	Text(ThisItem.登録日時,"yyyy/mm/dd hh:mm", "ja-JP")
BrowseGallery1	Subtitle1	Text	ThisItem.ファイル名
BrowseGallery1	Body1	Text	ThisItem.共有先アドレス

2.　一覧に表示する項目のフォント位置やサイズを設定します。
フォント位置やサイズは任意で設定してください。

3.　項目名のヘッダーを作成します。BrowseScreen1 を選択した状態で[挿入]から[テキストラベル]を選択します。3回繰り返し、Label1～3を挿入します。

4.　BrowseScreen1に挿入したテキストラベルの名前を変更します。

変更前	変更後	備考
Label1	LabelDate	共有日時
Label2	LabelFileName	共有ファイル名
Label3	LabelAddress	共有先アドレス

5.　BrowseScreen1に挿入したヘッダー（テキストラベル）のプロパティを変更します。

コントロール名	プロパティ	設定値	備考
LabelFileName	Text	"ファイル名"	ヘッダー文字(ファイル名)
LabelAddress	Text	"共有先アドレス"	ヘッダー文字(共有先アドレス)

▼ソート順の設定

1.　BrowseGallery1のItemsにソート順の設定をします。

※ 設定値の[@PPAPdemo]は「Power Appsをつかって脱PPAPアプリ作成① ～Power Automate編～」で作成したSharePointリスト名です。自分の環境に合わせて変更してください。

コントロール名	プロパティ	設定値
BrowseGallery1	Items	下記参照

【設定値】

SortByColumns(
    Filter(
        [@PPAPdemo], 
        StartsWith(共有先アドレス, TextSearchBox1.Text) || StartsWith(ファイル名, TextSearchBox1.Text)
    ), 
    "Created", 
    If(SortDescending1, SortOrder.Descending, SortOrder.Ascending)
)

以上で、一覧画面「BrowseScreen1」スクリーンの設定は完了です。
画面レイアウトは以下のようになります。

詳細画面の設定

アプリの詳細画面に対して、レイアウトを設定します。

▼レイアウトの設定

1.　詳細画面である「DetailScreen1」スクリーンのカード（項目名_DataCard1）を編集するため、すべてのカードのロック解除をします。

2.　詳細画面の情報を2列で表示するため、「DetailForm1」のプロパティで「列」を「１」から「２」に変更します。

3.　ゴミ箱のアイコン「IconDelete1」（削除）と鉛筆のアイコン「IconEdit1」（編集）を削除します。
詳細画面は詳細情報の確認用なので、今回は削除と編集の機能は不要です。

4.　「DetailScreen1」スクリーンのヘッダー部分のレイアウトの設定を行います。
文字サイズやカラーやフォントなどは任意で設定してください。

5.　「DetailScreen1」スクリーンの一覧部分のレイアウトの設定を行います。
文字サイズやカラーやフォントなどは任意で設定してください。

設定が完了すると、以下のような画面レイアウトになります。

カードをドラッグ&ドロップで動かすと項目の並び順を変更することができます。
参考までに、今回はこのように配置しました。

登録画面の設定

アプリの登録画面に対して、レイアウトや入力フォームの設定、登録処理を設定します。

▼レイアウトの設定

1.　登録画面である「NewScreen1」スクリーンのカード（項目名_DataCard2）を編集するため、すべてのカードのロック解除をします。

2.　登録画面の情報を2列で表示するため、「NewForm1」のプロパティの「列」を「１」から「２」に変更します。

3.　チェックマークアイコンを飛行機アイコンに変更します。
コントロール「IconAccept1」のアイコンを「チェック」から「送信」に変更します。
飛行機アイコンをクリックすると登録処理が実行されます。

4.　「NewScreen1」スクリーンのヘッダー部分のレイアウトの設定を行います。
文字サイズやカラーやフォントなどは任意で設定してください。

5.　「NewScreen1」スクリーンの「NewForm1」配下にある「URL_DataCard2」は、登録画面には必要ないため削除します。

6.　「NewForm1」スクリーンの入力部分のレイアウトの設定を行います。
文字サイズやカラーやフォントなどは任意で設定してください。

設定が完了すると、以下のような画面レイアウトになります。

入力ボックスの幅と高さはカードをドラッグすることで変更できるので、任意で変更してください。

項目の並び順は「NewScreen1」の編集時と同様に、カードを移動することで変更が可能です。
参考までに、今回はこのように配置しました。

※ カードの配置やサイズ調整が思うようにいかない場合は、NewFormのプロパティで、「列へのスナップ」を「オン」に設定し、再度「オフ」に切り替えることで、コントロールが可能になります。詳細はこちらをご確認ください。

▼ドロップダウンの変更

権限のドロップダウンをラジオボタンに変更します。
選択肢が「編集」と「閲覧」の２択なので、ドロップダウンである必要性がないためです。
※ この設定は必須ではありません。

1.　NewForm1の権限カードを選択し、ラジオボタンを追加します。

2.　追加したラジオボタンを以下のとおり設定します。
位置（X,Yプロパティ）は任意で設定してください。
※ 設定値の[@PPAPdemo]はSharePointリスト名です。自分の環境に合わせて変更してください。

コントロール名	プロパティ	設定値	備考
Radio1	Items	Choices([＠PPAPdemo].権限)	表示レコード
Radio1	Default	“閲覧”	デフォルトで「閲覧」を選択

3.　権限カード（権限_DataCard）を以下のとおり設定します。

カード名	プロパティ	設定値
権限_DataCard2	Update	Radio1.Selected

4.　コンボボックス（DataCardValue）は必要ないため削除します。削除すると、ErrorMessageのYプロパティの参照先がなくなりエラーになりますが、こちらも必要ないため削除します。

▼フォームの設定

入力フォーム（NewForm1）の項目を設定していきます。

1.　現在、画面にはSharePointリストの情報が表示されています。これは既定モードが「編集」であるためです。
新規入力画面にするため、既定モードを「新規」に変更します。

プロパティ	設定値
DefaultMode	FormMode.New

2.　カード（項目名_DataCard）のコントロール名から項目名を判別しにくいので変更します。以下に記載のないものは既定値のままとします。

カード名	コントロール名
	変更前	変更後
サイトのアドレス	DataCardValue9	TextUrl
ライブラリ名	DataCardValue10	TextLibrary
ファイル名	DataCardValue11	TextFile
共有先アドレス	DataCardValue14	TextAddress
通知	DataCardValue13	Toggle1
メッセージ	DataCardValue15	TextMessage

3.　入力ボックスに入力例としてテキストを設定します。

カード名	コントロール	プロパティ	設定値（例）
サイトのアドレス	TextUrl	Default	"https://tenant.sharepoint.com/sites/name"
ライブラリ名	TextLibrary		"ドキュメント"
ファイル名	TextFile		"test.xlsx"
共有先アドレス	TextAddress		"dummy01@XXX.co.jp"
メッセージ	TextMessage		"ファイルを共有します。"

4.　メッセージの入力ボックスは、「単一行」の設定になっています。
改行あり・複数行入力できるように変更します。

カード	コントロール	プロパティ	設定値
メッセージ_DataCard	TextMessage	Mode	TextMode.MultiLine

5.　登録成功時の処理をフォーム入力（NewForm1）に設定します。
下記のように設定すると、登録が成功した時に一覧画面（BrowseScreen1）を表示します。

プロパティ	設定値
OnSuccess	Navigate(BrowseScreen1);

▼その他の設定

キャンセルアイコンの設定をします。
下記のように設定すると、アイコンをクリックした時に一覧画面へ戻ります。

コントロール	プロパティ	設定値
IconCancel1	OnSelect	Navigate(BrowseScreen1)

2.　通知の表示を「オン/オフ」から「する/しない」に変更します。
※この設定は必須ではありません。

カード	コントロール	プロパティ	設定値
通知_DataCard	Toggle1	FalseText	“しない”
通知_DataCard	Toggle1	TrueText	“する”

▼登録処理の設定

右上の飛行機アイコンをクリックしたときに、登録処理が実行されるよう設定します。

1.　左のメニューよりPower Automateを選択し、[フローの追加]をクリックします。

2.　「Power Appsをつかって脱PPAPアプリ作成① ～Power Automate編～」で作成したPower Automateのフローを選択します。

3.　飛行機アイコン（IconAccept1）に以下の設定をします。
※下記の２つは、自分の環境に合わせて変更してください。
・「連携用ファイル共有フロー」：Power Automateフロー名
・「PPAPdemo」：SharePointリスト名

OnSelectの値

// 1.必須項目入力チェック
If(!IsBlank(TextUrl.Text) && !IsBlank(TextLibrary.Text) && !IsBlank(TextFile.Text) && !IsBlank(TextAddress.Text),
    // PowerAutomate処理実行
    UpdateContext({Result:
        連携用ファイル共有フロー.Run(
            TextUrl.Text,
            TextLibrary.Text,
            TextFile.Text,
            TextAddress.Text,
            Radio1.Selected.Value,
            TextMessage.Text,
            Toggle1.Value
        )
    }),
    Notify("必須項目を入力してください", NotificationType.Error);
);

// 1つ目の条件が真の場合
If(!IsBlank(TextUrl.Text) && !IsBlank(TextLibrary.Text) && !IsBlank(TextFile.Text) && !IsBlank(TextAddress.Text),
    // 2.PowerAutomateエラーチェック
    If(!IsBlankOrError(Result),
        SubmitForm(NewForm1);
        Set(GetTextSharedAddress,Result.url);
        Patch(PPAPdemo,{ID:Value(NewForm1.LastSubmit.ID)},{URL:GetTextSharedAddress}),
        Notify("エラーが発生しました。入力値またはエラー内容を確認してください。",NotificationType.Error);
    );
);

// 1つ目と2つ目の条件が真の場合
If(!IsBlank(TextUrl.Text) && !IsBlank(TextLibrary.Text) && !IsBlank(TextFile.Text) && !IsBlank(TextAddress.Text) && !IsBlankOrError(Result),
    // 3.更新処理エラーチェック
    If(!IsBlankOrError(PPAPdemo),
        Notify(Result.flowmsg,NotificationType.Success),
        Notify(Concat(Errors(PPAPdemo), Column &": "& Message), NotificationType.Error);
    );
);

▼登録処理の補足

登録処理の流れはざっくりと下記のとおりです。

① PowerApps内で飛行機アイコンが押下される
　・必須項目が全て入力されている場合：②へ進む
　・必須項目に入力不足がある場合：エラーメッセージを表示して入力を促す

② Power Automateが起動し、フロー実行
　・１． SharePointリストにアイテム登録する
　・２．共有URLを変数にセットする
　・３． SharePointリストを更新(共有URLを登録)し、③へ進む
　※実行中に失敗した場合：エラーメッセージを表示して終了

③ PowerAppsに成功メッセージが表示される

次回の予告

これでPower Appsのアプリが完成しました。
次回（最終章）は、実装手順を確認しながら動かしてみます。ぜひご確認ください！

最後に

テンダでは、「こんなプロジェクトに挑戦したい」「こんなチームで働きたい」「理想のチームを創りたい」と願う仲間を求めています。
カジュアル面談も随時受付中です。ぜひ一度お話ししましょう！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up