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

このトピックでは、アプリにマルチ メディア ファイルを埋め込み、データ ソースにペン画をアップロードして、アプリでデータ ソースからのイメージを表示する方法を説明します。This topic shows you how to embed multimedia files in your app, upload pen drawings to a data source, and show images from a data source in your app. このトピックで使用しているデータ ソースは、OneDrive for Business の Excel ファイルです。The data source used in this topic is an Excel file in OneDrive for Business.

前提条件Prerequisites

PowerApps にサインアップし、インストールします。Sign up for PowerApps, and install it. PowerApps を開く際に、サインアップに使用した同じ資格情報でサインインします。When you open PowerApps, sign in using the same credentials that you used to sign up.

ファイルまたはクラウドからメディアを追加するAdd media from a file or the cloud

追加するメディア ファイルの種類 (イメージ、ビデオ、オーディオなど) を選択できます。You can choose the kind of media file to add (for example, images, video, or audio).

  1. [コンテンツ] タブで[メディア] を選択します。On the Content tab, select Media.
  2. [メディア] の下で、[イメージ][ビデオ]、または [オーディオ] を選択し、[参照] を選択します。Under Media, select Images, Videos, or Audio, and then select Browse:

  3. 追加するファイルを選択して、[開く] を選択します。Select the file that you want to add, and then select Open.

    お使いのコンピューターの [ピクチャ] フォルダーが開き、そこからイメージを選択するか、または別のフォルダーに移動できます。The Pictures folder on your computer opens, and you can select an image from there or navigate to another folder.

  4. ファイルの追加が終了したら、Esc キーを押して既定のワークスペースに戻ります。When you finish adding files, press Esc to return to the default workspace.
  5. [挿入] タブで [メディア] を選択し、[イメージ][ビデオ]、または [オーディオ] を選択します。On the Insert tab, select Media, and then select Image, Video, or Audio:

  6. イメージ コントロールを追加した場合は、その Image プロパティを、追加したファイルに設定します。If you added an image control, set its Image property to the file that you added:

    Image プロパティの設定

    拡張子を付けずに、単一引用符で囲んで、ファイル名のみを指定します。Note Specify the file name only, without the extension, inside single quotes.

  7. ビデオまたはオーディオ コントロールを追加した場合は、その Media プロパティを、追加したファイルに設定します。If you added a video or audio control, set its Media property to the file that you added:

    Media プロパティの設定

    YouTube ビデオを再生するには、ビデオ コントロールの Media プロパティを、二重引用符で囲んだ該当する URL に設定します。Note Play a YouTube video by setting the Media property of a video control to the appropriate URL, enclosed in double quotation marks.

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

  1. Azure Media Services アカウントの [AMS] > [設定] > [資産] から、ビデオ資産をアップロードして発行します。From your Azure Media Services account, upload and publish your video asset from AMS > Settings > Assets.
  2. 発行したら、ビデオの URL をコピーします。After the video is published, copy its URL.
  3. PowerApps の [挿入] > [メディア] から、ビデオ コントロールを追加します。From PowerApps, add the Video control from Insert > Media.
  4. Media プロパティを、コピーした URL に設定します。Set the Media property to the URL that you copied.

次の図に示すように、Azure Media Services がサポートするすべてのストリーミング URL を選択できます。As this graphic shows, you can choose any streaming URL that Azure Media Services supports:

Media プロパティの設定

クラウドからアプリにイメージを追加するAdd images from the cloud to your app

このシナリオでは、クラウド ストレージ アカウントの OneDrive for Business にイメージを保存します。In this scenario, you save images in a cloud storage account, OneDrive for Business. Excel テーブルを使用して、イメージのパスを格納し、アプリのギャラリー コントロールにイメージを表示します。You use an Excel table to contain the path to the images, and you display the images in a gallery control in your app.

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

: Excel ファイル内のこれらのイメージのパスでは、スラッシュを使用する必要があります。NOTE: The path to these images in the Excel file must use forward slashes. PowerApps で Excel テーブルにイメージのパスを保存すると、パスに円記号が使われます。When PowerApps saves image paths in an Excel table, the path uses backslashes. このようなテーブルからのイメージのパスを使用する場合は、Excel テーブル内のパスを円記号ではなくスラッシュを使用するように変更します。If you use image paths from such a table, change the paths in the Excel table to use forward slashes instead of backslashes. そうしないと、イメージは表示されません。Otherwise, the images won't display.

  1. CreateFirstApp.zip をダウンロードし、Assets フォルダーをクラウド ストレージ アカウントに抽出します。Download CreateFirstApp.zip, and extract the Assets folder to your cloud storage account.
  2. Assets フォルダーの名前を Assets_images に変更します。Rename the Assets folder to Assets_images.
  3. Excel スプレッドシートに 1 列のテーブルを作成し、次のデータを入力します。In an Excel spreadsheet, create a one-column table, and fill it with the following data:

    Jackets テーブル

  4. テーブルに Jackets と名前を付け、Excel ファイルに Assets.xlsx と名前を付けます。Name the table Jackets, and name the Excel file Assets.xlsx.
  5. アプリで、データ ソースとして、Jackets テーブルを追加します。In your app, add the Jackets table as a data source.
  6. イメージのみコントロールを追加し ([挿入] タブ > [ギャラリー])、その Items プロパティを Jackets に変更します。Add an Image only control (Insert tab > Gallery), and set its Items property to Jackets:

    Items プロパティ

    ギャラリーがそれらの画像で自動的に更新されます。The gallery is automatically updated with the images:

    ジャケット イメージ

    Items プロパティを設定すると、[PowerAppsId] という名前の列が Excel テーブルに自動的に追加されます。When you set the Items property, a column named PowerAppsId is automatically added to the Excel table.

    Excel テーブル内のイメージのパスは、イメージの URL にすることもできます。In the Excel table, the image path can also be the URL to an image. 例として、Flooring Estimates サンプル ファイルがあります。An example is the Flooring Estimates sample file. クラウド ストレージ アカウントにそれをダウンロードして、FlooringEstimates テーブルをデータ ソースとして、アプリに追加し、ギャラリー コントロールを FlooringEstimates に設定できます。You can download it to your cloud storage account, add the FlooringEstimates table as a data source in your app, and then set the gallery control to FlooringEstimates. ギャラリーは自動的にイメージで更新されます。The gallery is automatically updated with the images.

ペン画をクラウドにアップロードするUpload pen drawings to the cloud

このシナリオでは、データ ソース OneDrive for Business にペン画をアップロードする方法を説明し、ペン画をそこに格納する方法を確認します。In this scenario, you learn how to upload pen drawings to your data source, OneDrive for Business, and examine how the drawings are stored there.

  1. Excel で、Image [image] をセル A1 に追加します。In Excel, add Image [image] to cell A1.
  2. 次の手順を使用してテーブルを作成します。Create a table using the following steps:

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

    b.b. [挿入] リボンの [テーブル] を選択します。On the Insert ribbon, select Table.

    c.c. ダイアログ ボックスで、[先頭行をテーブルの見出しとして使用する] を選択し、[OK] を選択します。In the dialog box, select My table has headers, and then select OK.

    テーブルの作成

    Excel ファイルは、現在表形式です。Your Excel file is now in a table format. Excel の表の書式設定の詳細については、「Excel のテーブルの書式を設定する」を参照してください。See Format the data as a table for more information about table formatting in Excel.

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

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

  3. Excel ファイルを SavePen.xlsx という名前で、OneDrive for Business に保存します。Save the Excel file to OneDrive for Business as SavePen.xlsx.
  4. PowerApps で、空のアプリを作成します。In PowerApps, create a blank app.
  5. アプリで、データ ソースとして、OneDrive for Business アカウントを追加します。In your app, add the OneDrive for Business account as a data source:

    a.a. [ビュー] タブをクリックまたはタップし、[データ ソース] をクリックまたはタップします。Click or tap the View tab, and then click or tap Data sources.

    b.b. [データ ソースの追加] をクリックまたはタップして、[OneDrive for Business] をクリックまたはタップします。Click or tap Add data source, and then click or tap OneDrive for Business.

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

    d.d. [Drawings] テーブルを選択して、[接続] をクリックまたはタップします。Select the Drawings table, and then click or tap Connect.

    接続

    Drawings テーブルが、データ ソースとして一覧表示されます。Now, the Drawings table is listed as a data source.

  6. [挿入] タブで、[テキスト] を選択し、[ペン入力] を選択します。On the Insert tab, select Text, and then select Pen input.
  7. 新しいコントロールの名前を MyPen に変更します。Rename the new control MyPen:

    名前の変更

  8. [挿入] タブで、ボタン コントロールを追加し、その OnSelect プロパティを次の数式に設定します。On the Insert tab, add a Button control, and set its OnSelect property to this formula:

     Patch(Drawings, Defaults(Drawings), {Image:MyPen.Image})
    
  9. イメージコントロールを追加し ([挿入] タブ > [ギャラリー])、その Items プロパティを Drawings に変更します。Add an Image gallery control (Insert tab > Gallery), and set its Items property to Drawings. ギャラリー コントロールの Image プロパティが自動的に ThisItem.Image に設定されます。The Image property of the gallery control is automatically set to ThisItem.Image.

    画面が次のようになるように、コントロールを配置します。Arrange the controls so that your screen resembles the following:

    サンプル画面

  10. F5 キーを押すか、[プレビュー]( ) を選択します。Press F5, or select Preview ( ).
  11. MyPen で何かを描画し、ボタンを選択します。Draw something in MyPen, and then select the button.

    ギャラリー コントロールの最初のイメージに、描画したものが表示されます。The first image in the gallery control displays what you drew.

  12. 他の何かを絵に追加して、ボタンを選択します。Add something else to your drawing, and select the button.

    ギャラリー コントロールの 2 番目のイメージに、描画したものが表示されます。The second image in the gallery control displays what you drew.

  13. Esc キーを押して、プレビュー ウィンドウを閉じます。Close the preview window by pressing Esc.

    クラウド ストレージ アカウントに、SavePen_images フォルダーが自動的に作成されています。In your cloud storage account, a SavePen_images folder has been automatically created. このフォルダーには、それぞれのファイル名の ID が付けられて保存されたイメージが格納されます。This folder contains your saved images with IDs for their file names. フォルダーを表示するには、F5 キーを押すなどして、ブラウザー ウィンドウを更新する必要がある場合があります。To show the folder, you may need to refresh the browser window by, for example, pressing F5.

    SavePen.xlsx で、[Image] 列に、新しいイメージのパスが指定されます。In SavePen.xlsx, the Image column specifies the path to the new images.

既知の制限Known limitations

お客様の組織内の Excel データを共有する方法の詳細については、これらの制限をご確認くださいFor information about how to share Excel data within your organization, review these limitations.

BLOB の詳細については、For more information

アプリを、ブラウザー ウィンドウや電話などのさまざまなプラットフォームでテストしてください。Be sure to test your app on different platforms, including in a browser window and on a phone.

別のデータ ソースへの直接のマルチ メディアのアップロードを含む高度なシナリオについては、イメージ キャプチャのプロのヒントイメージ アップロード用のカスタム コネクタに関するページを参照してください。For information about more advanced scenarios that involve uploading multimedia directly to a different data source, see image capture pro tips and custom connectors for image upload.

データ ソースにファイルをアップロードする別の方法は、Patch 関数を使用することです。Another way to upload files to a data source is to use the Patch function.