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

前提条件

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

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

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

  1. [コンテンツ] タブで[メディア] を選択します。

  2. [メディア] の下で、[イメージ][ビデオ]、または [オーディオ] を選択し、[参照] を選択します。

  3. 追加するファイルを選択して、[開く] を選択します。

    お使いのコンピューターの [ピクチャ] フォルダーが開き、そこからイメージを選択するか、または別のフォルダーに移動できます。

  4. ファイルの追加が終了したら、Esc キーを押して既定のワークスペースに戻ります。

  5. [挿入] タブで [メディア] を選択し、[イメージ][ビデオ]、または [オーディオ] を選択します。

  6. イメージ コントロールを追加した場合は、その Image プロパティを、追加したファイルに設定します。

    Image プロパティの設定

    拡張子を付けずに、単一引用符で囲んで、ファイル名のみを指定します。

  7. ビデオまたはオーディオ コントロールを追加した場合は、その Media プロパティを、追加したファイルに設定します。

    Media プロパティの設定

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

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

  1. Azure Media Services アカウントの [AMS] > [設定] > [資産] から、ビデオ資産をアップロードして発行します。

  2. 発行したら、ビデオの URL をコピーします。

  3. PowerApps の [挿入] > [メディア] から、ビデオ コントロールを追加します。

  4. Media プロパティを、コピーした URL に設定します。

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

Media プロパティの設定

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

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

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

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

  1. CreateFirstApp.zip をダウンロードし、Assets フォルダーをクラウド ストレージ アカウントに抽出します。

  2. Assets フォルダーの名前を Assets_images に変更します。

  3. Excel スプレッドシートに 1 列のテーブルを作成し、次のデータを入力します。

    Jackets テーブル

  4. テーブルに Jackets と名前を付け、Excel ファイルに Assets.xlsx と名前を付けます。

  5. アプリで、データ ソースとして、Jackets テーブルを追加します。

  6. イメージのみコントロールを追加し ([挿入] タブ > [ギャラリー])、その Items プロパティを Jackets に変更します。

    Items プロパティ

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

    ジャケット イメージ

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

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

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

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

  1. Excel で、Image [image] をセル A1 に追加します。

  2. 次の手順を使用してテーブルを作成します。

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

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

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

    テーブルの作成

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

    d. テーブルに、Drawings と名前を付けます。

    テーブルの名前を Drawings に変更する

  3. Excel ファイルを SavePen.xlsx という名前で、OneDrive for Business に保存します。

  4. PowerApps で、空のアプリを作成します。

  5. アプリで、データ ソースとして、OneDrive for Business アカウントを追加します。

    a. [コンテンツ] タブをクリックまたはタップし、[データ ソース] をクリックまたはタップします。

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

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

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

    接続

    Drawings テーブルが、データ ソースとして一覧表示されます。

  6. [挿入] タブで、[テキスト] を選択し、[ペン入力] を選択します。

  7. 新しいコントロールの名前を MyPen に変更します。

    名前の変更

  8. [挿入] タブで、ボタン コントロールを追加し、その OnSelect プロパティを次の数式に設定します。

    Patch(Drawings, Defaults(Drawings), {Image:MyPen.Image})

  9. イメージコントロールを追加し ([挿入] タブ > [ギャラリー])、その Items プロパティを Drawings に変更します。 ギャラリー コントロールの Image プロパティが自動的に ThisItem.Image に設定されます。

    画面が次のようになるように、コントロールを配置します。

    サンプル画面

  10. F5 キーを押すか、プレビュー) を選択します。

  11. MyPen で何かを描画し、ボタンを選択します。

    ギャラリー コントロールの最初のイメージに、描画したものが表示されます。

  12. 他の何かを絵に追加して、ボタンを選択します。

    ギャラリー コントロールの 2 番目のイメージに、描画したものが表示されます。

  13. Esc キーを押して、プレビュー ウィンドウを閉じます。

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

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

BLOB の詳細については、

アプリを、ブラウザー ウィンドウや電話などのさまざまなプラットフォームでテストしてください。

別のデータ ソースへの直接のマルチ メディアのアップロードを含む高度なシナリオについては、イメージ キャプチャのプロのヒントイメージ アップロード用のカスタム コネクタに関するページを参照してください。

データ ソースにファイルをアップロードする別の方法は、Patch 関数を使用することです。