PowerApps の概要

PowerApps でマルチメディアファイルを使用する

By Karthik Bharathy [MSFT]

2017年4月27日

その他の記事

この記事の内容:

前提条件
ファイルまたはクラウドからメディアを追加する
Azure Media Services からメディアを追加する
クラウドからアプリにイメージを追加する
ペン画をクラウドにアップロードする
既知の制限
BLOB の詳細については、

このトピックでは、アプリにマルチメディアファイルを埋め込み、データソースにペン画をアップロードして、アプリでデータソースからのイメージを表示する方法を説明します。このトピックで使用しているデータソースは、OneDrive for Business の Excel ファイルです。

前提条件

PowerApps にサインアップし、インストールします。 PowerApps を開く際に、サインアップに使用した同じ資格情報でサインインします。

ファイルまたはクラウドからメディアを追加する

追加するメディアファイルの種類 (イメージ、ビデオ、オーディオなど) を選択できます。

[コンテンツ] タブで[メディア] を選択します。
[メディア] の下で、[イメージ]、[ビデオ]、または [オーディオ] を選択し、[参照] を選択します。
追加するファイルを選択して、[開く] を選択します。

お使いのコンピューターの [ピクチャ] フォルダーが開き、そこからイメージを選択するか、または別のフォルダーに移動できます。
ファイルの追加が終了したら、Esc キーを押して既定のワークスペースに戻ります。
[挿入] タブで [メディア] を選択し、[イメージ]、[ビデオ]、または [オーディオ] を選択します。
イメージコントロールを追加した場合は、その Image プロパティを、追加したファイルに設定します。

注拡張子を付けずに、単一引用符で囲んで、ファイル名のみを指定します。
ビデオまたはオーディオコントロールを追加した場合は、その Media プロパティを、追加したファイルに設定します。

注 YouTube ビデオを再生するには、ビデオコントロールの Media プロパティを、二重引用符で囲んだ該当する URL に設定します。

Azure Media Services からメディアを追加する

Azure Media Services アカウントの [AMS] > [設定] > [資産] から、ビデオ資産をアップロードして発行します。
発行したら、ビデオの URL をコピーします。
PowerApps の [挿入] > [メディア] から、ビデオ コントロールを追加します。
Media プロパティを、コピーした URL に設定します。

次の図に示すように、Azure Media Services がサポートするすべてのストリーミング URL を選択できます。

Media プロパティの設定

クラウドからアプリにイメージを追加する

このシナリオでは、クラウドストレージアカウントの OneDrive for Business にイメージを保存します。 Excel テーブルを使用して、イメージのパスを格納し、アプリのギャラリーコントロールにイメージを表示します。

このシナリオでは、いくつかの .jpeg ファイルを格納している CreateFirstApp.zip を使用します。

注: Excel ファイル内のこれらのイメージのパスでは、スラッシュを使用する必要があります。 PowerApps で Excel テーブルにイメージのパスを保存すると、パスに円記号が使われます。このようなテーブルからのイメージのパスを使用する場合は、Excel テーブル内のパスを円記号ではなくスラッシュを使用するように変更します。そうしないと、イメージは表示されません。

CreateFirstApp.zip をダウンロードし、Assets フォルダーをクラウドストレージアカウントに抽出します。
Assets フォルダーの名前を Assets_images に変更します。
Excel スプレッドシートに 1 列のテーブルを作成し、次のデータを入力します。
テーブルに Jackets と名前を付け、Excel ファイルに Assets.xlsx と名前を付けます。
アプリで、データソースとして、Jackets テーブルを追加します。
イメージのみコントロールを追加し ([挿入] タブ > [ギャラリー])、その Items プロパティを Jackets に変更します。

ギャラリーがそれらの画像で自動的に更新されます。

Items プロパティを設定すると、[PowerAppsId] という名前の列が Excel テーブルに自動的に追加されます。

Excel テーブル内のイメージのパスは、イメージの URL にすることもできます。例として、Flooring Estimates サンプルファイルがあります。クラウドストレージアカウントにそれをダウンロードして、FlooringEstimates テーブルをデータソースとして、アプリに追加し、ギャラリーコントロールを FlooringEstimates に設定できます。ギャラリーは自動的にイメージで更新されます。

ペン画をクラウドにアップロードする

このシナリオでは、データソース OneDrive for Business にペン画をアップロードする方法を説明し、ペン画をそこに格納する方法を確認します。

Excel で、Image [image] をセル A1 に追加します。
次の手順を使用してテーブルを作成します。

a. セル A1 を選択します。

b. [挿入] リボンの [テーブル] を選択します。

c. ダイアログボックスで、[先頭行をテーブルの見出しとして使用する] を選択し、[OK] を選択します。

Excel ファイルは、現在表形式です。 Excel の表の書式設定の詳細については、「Excel のテーブルの書式を設定する」を参照してください。

d. テーブルに、Drawings と名前を付けます。
Excel ファイルを SavePen.xlsx という名前で、OneDrive for Business に保存します。
PowerApps で、空のアプリを作成します。
アプリで、データソースとして、OneDrive for Business アカウントを追加します。

a. [ビュー] タブをクリックまたはタップし、[データソース] をクリックまたはタップします。

b. [データソースの追加] をクリックまたはタップして、[OneDrive for Business] をクリックまたはタップします。

c. [SavePen.xlsx] をクリックまたはタップします。

d. [Drawings] テーブルを選択して、[接続] をクリックまたはタップします。

Drawings テーブルが、データソースとして一覧表示されます。
[挿入] タブで、[テキスト] を選択し、[ペン入力] を選択します。
新しいコントロールの名前を MyPen に変更します。
[挿入] タブで、ボタン コントロールを追加し、その OnSelect プロパティを次の数式に設定します。
```
Patch(Drawings, Defaults(Drawings), {Image:MyPen.Image})
```
イメージコントロールを追加し ([挿入] タブ > [ギャラリー])、その Items プロパティを Drawings に変更します。ギャラリーコントロールの Image プロパティが自動的に ThisItem.Image に設定されます。

画面が次のようになるように、コントロールを配置します。
F5 キーを押すか、[プレビュー]( ) を選択します。
MyPen で何かを描画し、ボタンを選択します。

ギャラリーコントロールの最初のイメージに、描画したものが表示されます。
他の何かを絵に追加して、ボタンを選択します。

ギャラリーコントロールの 2 番目のイメージに、描画したものが表示されます。
Esc キーを押して、プレビューウィンドウを閉じます。

クラウドストレージアカウントに、SavePen_images フォルダーが自動的に作成されています。このフォルダーには、それぞれのファイル名の ID が付けられて保存されたイメージが格納されます。フォルダーを表示するには、F5 キーを押すなどして、ブラウザーウィンドウを更新する必要がある場合があります。

SavePen.xlsx で、[Image] 列に、新しいイメージのパスが指定されます。