埋め込んだ #PowerApps アプリに SPOページ から情報を渡す方法

個人的なコトなのですが。Power Apps のキャンバスアプリ(以降、アプリ)を SharePoint Online（以降、SPO）のサイトへ埋め込むコトが、ここ最近で連続して発生しました。

もちろん、SPO サイトはモダンです。
クラッシック？なにそれおいしいの？

サイトにアプリを埋め込みながら思ったんですよ。Power Apps のアプリを SPO へ埋め込む、その際に「いま開いているページがドコか？」を Power Apps アプリ側へ認識させたい！と。

これが可能になると、1つのアプリを作るだけで配置した後で、参照されているページ毎に動作を変えるコトができます。

Power Apps アプリを SharePoint Online へ埋め込む

本題に入る前に、Power Apps アプリを SPO サイトページへ埋め込む方法のおさらいです。なお、手段が2つあります。（2021年6月時点）

手段1：Power Apps Webパーツ

これぞまさに！というWebパーツが提供されています。
(´ω`)。○○（PowerとAppsの間に半角スペースが無いのはご愛敬ですねｗ）

Power Apps web パーツを使用する

Webパーツを配置すると[アプリの Web リンクまたは ID]が設定可能になります。ここに、SPO へ埋め込みたいアプリの URL または ID を登録しましょう。ここに設定すべき値の取得方法は、後ほど紹介します。

手段2：埋め込み Webパーツ

埋め込みコードを SPO ページへ追加する際に利用する Webパーツ です。コレを利用すると、HTML を埋め込むことが可能になります。

埋め込みの Web パーツを使用した、ページへのコンテンツの追加

Webパーツを追加すると、埋め込みコードを記載可能な領域が表示されます。ここに、Power Apps アプリを iFrame で埋め込むことができます。

例えば、幅・高さが 100x100 のサイズでアプリを埋め込みたい場合は下記のように記入します。

<iframe 
    width="100"
    height="100"
    src="[Power Apps の アプリURL]">
</iframe>

なお、この埋め込み Webパーツを利用する方法は、Power Apps専用の手段ではないため、アプリIDを指定することはできません。

Power Apps アプリの URL と ID の確認方法

アプリの URL、または ID は下記の手順で確認可能です。Power Apps ホームページの「アプリ」一覧で操作します。

1．該当アプリの三点リーダー(…） → [詳細] の順番でクリック

2．表示された詳細画面で確認

[Webリンク] が Power Apps を本実行した際の URL になります。
[アプリID] が読んで字のごとく、アプリの ID になります。

実現したいこと（おさらい

改めて、実現したいコトを確認しておきましょう。

SPOページは用途によって何枚作成されるか？わかりませんよね。例えば、トップページ以外に専用ページが10個あるサイトの全ページに Power Apps のアプリを埋め込みたい、と言われたと仮定しましょう。そうですねぇ・・・例として「各ページごとのアクセスカウンターがほしい」という要望だ、とか・・・。（※令和の時代にアクセスカウンターｗｗｗ 等のご指摘は不要です😇）

もちろん、ページとアプリを１対１で作れば簡単ですよね。所謂、力技（ちからわざ）ですけども(;´Д｀)
そんな非効率的なコトしたくないです。少なくとも、当方は 1mm も非効率なコトはしたくありません。

なので、作るのは1つのアプリだけで、SPOページの「どこに埋め込まれたか？」を把握したい、という設計に着地します。図で表すと、下記のような感じです。

SPO ページから Power Apps へ情報を渡す方法

では、どうやって実現するか？

Power Apps アプリは現時点では「アプリ側から埋め込まれているサイトやページの情報、URLなどを取得することができない」仕様になっています。つまり、アプリ側では便利な関数などは無いのです。

アプリ側で判断できないのであれば、埋め込む側の SPOページから情報を与えるしかありません。ここで登場するのが***『Param関数』***です。

Param 関数の公式情報はこちら

簡単に言うと、URLパラメータを Power Apps アプリ側で取得する関数です。URLの後ろに ”？” や ”＆” が付いてるモノを見たコトがありませんか？アレが URLパラメーターです。詳しくは @Yellow11 さんが丁寧な記事を書いてくれていますので、そちらを確認ください。

Param関数で外部から値を受け取り、アプリを制御する

説明用アプリ

説明で利用する Power Apps アプリは画面にラベルを2つ置いただけの単純なモノです。前述の Param関数で取得した結果を表示しているだけ、です。

・上段のラベル：Param関数の結果をそのまま表示

・下段のラベル：IsBlank関数で Param関数の中身をチェック

URLパラメータが意図した通りに取得できていれば、上段に値が表示され、下段が false になるハズです。

ちなみに、このアプリの高さ・横幅はチューニングして 100 x 100 にしてあります。今回の主題ではありませんので詳細は割愛！

SPOページへ埋め込む

紹介した Power Apps Webパーツと、埋め込み Webパーツ を利用した HTML による配置をしています。分かりやすいように 2つを並べて配置してます。

アプリIDには URLパラメータが指定できません。そのため、どちらの Webパーツも、Apps アプリの URL を利用します。加えて、URLの末尾に「?ParamValue=値」というパラメーターを追記します。

上記イメージのサイトでは、
　・Apps埋込＝A のページ → 「?ParamValue=A」
　・Apps埋込＝あああ のページ → 「?ParamValue=あああ」
で両方のWebパーツを指定しています。

動作イメージ

実際の動作イメージはこちらです。

Windows 10、Edge（新型）で実行しています。

動画で確認できますが***『Power Apps Webパーツ』は URLパラメータが渡せません。加えて、SPOページ上で、やたら余白ができています（アプリは 100 x 100 サイズ）。*** Power Apps 専用のパーツなのに、誠に残念ですね😥

『埋め込みWebパーツ』であれば URLパラメータが意図した通りに取得できています。サイズも HTML タグ側で調整ができるので非常に柔軟です。

結論：URLパラメーターを使う場合は「埋め込み Webパーツ」を使いましょう

現状、Param関数 を利用して URLパラメーターでアレコレしたい場合は「埋め込み Webパーツ 一択」です。単純に作った Power Apps アプリを SPO へ埋め込みたいだけなら Power Apps Webパーツのが設置が楽です。つまり、適材適所ですね。

なお、このテクニックを利用して、例えばページ毎のアクセスカウンターを作りたい場合は・・・

　1. データソースを用意する
　2. データソース側でSPOページを特定するキーを決める
　3. Power Apps アプリ側で Param関数で上記キーを取得するよう作成
　4. 埋め込み Webパーツ で配置する際、URLパラメータでキーを指定する
　
という手順で実現が可能になります。

もちろん、Power Apps アプリ側でサイトへ埋め込むサイズ感などを考慮して作成する必要があります。加えて、SPOページへ埋め込んだからと言って、Power Apps のキャンバスアプリには変わりありませんので、共有設定が実施できてないユーザーでは利用できません。また、サインインしてないと利用できない等も Power Apps の仕様に準じます。キチンと確認したうえでアプリの設計・製造しましょう。

まとめ

• SPOページの「どこに埋め込まれているか？」を Power Apps アプリへ伝えるためには『Param関数』を使う
  • SPOページ側では『埋め込み Webパーツ』を利用する
  • 『Power Apps Webパーツ』は URLパラメータが無効化される(記事投稿時点

1～2年ほど前は出来なかったような気がするんですよね・・・。埋め込み Webパーツが無かったから？かなぁ？などと思いつつ・・・全く思い出せません（汗

過去挫折した記憶だけあるコトを、直近でリトライしたら実現する方法があった！という感じです。なので忘れないように記事にした次第。きっと、コレをやりたい方は少なからず居るかと思いますので、そんな皆さんの助けになれば幸いです。

それでは、皆さま。素晴らしい Power Platform Life を！