キャンバス アプリでマルチ メディア ファイルを使用する

画像、オーディオ、ビデオ ファイルをキャンバス アプリに追加できます。 Microsoft Stream、Azure Media Services などのストリーミングサービスや、YouTube などのサードパーティのストリーミング サービスからビデオを追加する。 または、ペン入力 のような入力コントロールを使用して署名を収集します。

この記事では、マルチメディア、ストリーミング、入力制御のシナリオにおける作業について説明します。 この記事で使用しているデータ ソースは、OneDrive for Business の Excel ファイルです。

前提条件

Power Apps にサインアップ し、サインアップに使用した同じ資格情報を使用してサインイン します。

このビデオでは、キャンバス アプリでマルチメディア ファイルを使用する方法について説明します。

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

追加するメディア ファイルの種類 (画像、ビデオ、オーディオなど) を選択できます。 メディア ペインまたは画像コントロールを使用して画像を追加できます。

メディア ペインを使用して画像、オーディオ、ビデオを追加する

ご利用のアプリで、メディア ペインを使用してメディアファイルを追加、削除するには :

1. 左側のパペインで メディア を選択します。

   

2. メディア パネルから アップロードを選択します。

   

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

4. メディア ペインからファイルを選択して、画面に挿入します。

   

5. アプリを 保存して公開 します。

6. 他のユーザーとアプリを共有する。

コントロールを使用して画像、オーディオ、ビデオを追加する

画像、オーディオまたはビデオコントロールを使用して画像、オーディオ、ビデオを追加するには :

1. 上部のメニューで 挿入 を選択します。

2. メディア ドロップダウンを選択します。

3. 画像、オーディオ、ビデオコントロールから選択します。

画像コントロールで、画像プロパティを、拡張子なしの画像ファイル名で更新します。 オーディオまたはビデオコントロールで、メディア プロパティをファイル名、または YouTube の動画 URL などの URL をダブル クォーテーションを付加して更新します。

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

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

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

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

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

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

   

5. アプリを 保存して公開 します。

6. 他のユーザーとアプリを共有する。

Microsoft Stream メディアを追加する

Microsoft Stream ビデオコントロールの追加方法の詳細については、Microsoft Stream ビデオ コントロールの例 に移動します。

クラウドからアプリに画像を追加する

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

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

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

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

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

   

   ビジネス向け OneDrive からファイル パスをコピーするには、ファイルを選択してから、続いて画面右側の詳細ペインから パス (直接リンクをコピー) を選択します。

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

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

6. 必要に応じて、アプリのオリエンテーションを横方向に更新します。

7. 挿入 > ギャラリー を選択し、続いて 水平方向 を選択します。

8. 必要に応じて、テキスト フィールドを選択してから最初の画像の下部の見出しフィールドを選択し、それらを削除して画像のみを画面に表示します。

   

   数式エラーが表示された場合は、Ctrl + Zを押下して削除を元に戻します。最初にサブタイトル フィールドを削除し、続いて タイトル フィールドを削除するようにしてください。

9. ギャラリーの アイテム プロパティを Jackets に設定します。

   

10. ギャラリーの最初の画像を選択し、画像プロパティを ThisItem.Images に設定します :

    

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

    

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

11. アプリを 保存して公開 します。

12. 他のユーザーとアプリを共有する。

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

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

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

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

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

   2. 挿入リボンでテーブルを選択します。

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

      

      Excel ファイルがテーブル形式になりました。 Excel の表の書式設定の詳細については、テーブルの書式を設定する を参照してください。

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

      

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

4. Power Apps で、タブレット レイアウトで空白のアプリを作成します。

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

   1. ビュー メニューを選択し、 データ ソースを選択します。

      

   2. データ ソースの追加を選択し、ビジネス向け OneDrive を選択します。

   3. SavePen.xlsx を選択します。

   4. 図面 テーブルを選択して、接続 を選択します。

      

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

6. 挿入 > 入力を選択し、続いてペン入力を選択します。

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

   

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

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

   

9. 横型ギャラリー コントロールを追加します (インサートタブ > ギャラリー)。

10. 必要に応じて、テキスト フィールドを選択してから最初の画像の下部の見出しフィールドを選択し、それらを削除して画像のみを画面に表示します。

    

    数式エラーが表示された場合は、Ctrl + Zを押下して削除を元に戻します。最初にサブタイトル フィールドを削除し、続いて タイトル フィールドを削除するようにしてください。

11. ギャラリーの アイテム プロパティを Drawings に設定します。 ギャラリー コントロールの 画像 プロパティが自動的に ThisItem.Image に設定されます。

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

    

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

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

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

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

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

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

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

    注意

    Excel のファイル名が異なる場合は、フォルダー名が異なる場合があります。 たとえば、ファイル名が Pen.xlsx の場合、フォルダ名は Pen_images になります。

    SavePen.xlsx で、Image 列に、新しい画像へのパスが指定されます。

16. アプリを 保存して公開 します。

17. 他のユーザーとアプリを共有する。

使用されていないメディアを削除する

メディア > 使用していないメディアの削除オプションを使用して、アプリから未使用のメディアをすべて削除してクリーンアップしたり、アプリのサイズを小さくすることができます。

既知の制限

• アプリの読み込み中のパフォーマンスを向上させる目的で、次のサイズ制限が適用されます :
  • アプリにアップロードされるすべてのメディア ファイルの合計サイズは 200 MB を超えることはできません。
  • アプリ内の個々のメディア ファイルの最大サイズは 64 MB を超えることはできません。
• 対応しているメディアの種類は次のとおりです : .jpg, .jpeg, .gif, .png, .bmp, .tif, .tiff, .svg, .wav, .mp3, .mp4
• クラウドストレージの既知の制限は、アプリをクラウドベースのストレージに接続する際に適用されます。

関連項目

• コントロールのリファレンス
• 計算式を使用する