画像を Excel ファイルに保存してアプリに追加する方法How to save images in an Excel file, and then add these images to your app

このチュートリアルの内容:In this tutorial, we:

  • Excel ファイルを作成してテーブルとして書式設定します。Create an Excel file and format it as a table
  • OneDrive for Business への接続を作成します。Create a connection to OneDrive for Business. 任意のクラウド ストレージ アカウントが機能します。Any cloud storage account will work. このチュートリアルでは、OneDrive for Business を使用します。In this walk-through, OneDrive for Business is used.
  • ペン入力コントロールを使ったアプリを作成します。Create an app with a pen input control
  • ペン入力コントロールから作成した画像を Excel ファイルに保存します。Save the images created from the pen input control to an Excel file
  • Excel ファイルに保存されている画像をアプリで表示します。Display images from an Excel file in your app

前提条件Prerequisites

Excel ファイルをテーブルとして作成するCreate the Excel file as a table

  1. 空の Excel ファイルで、列に "Image [image]" という名前を付けます。In a blank Excel file, name a column Image [image].
  2. 次の手順を使用してテーブルを作成します。Create a table using the following steps:

    1. 任意の行の任意の列のデータを選択します。Select any piece of data in any row and any column. たとえば、[Image] を選択します。For example, select Image.
    2. [挿入] リボンの [テーブル] を選択します。On the Insert ribbon, select Table.
    3. ダイアログ ウィンドウで、[先頭行をテーブルの見出しとして使用する] を選択し、[OK] を選択します。In the dialog window, select My table has headers, and select OK.

      Excel ファイルがテーブル形式になりました。Your Excel file is now in a table format. Excel におけるテーブルの書式設定について詳しくは、データをテーブルとして書式設定する方法についてのページを参照してください。Format the data as a table provides additional details on table formatting in Excel.

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

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

  3. Excel ファイルに SavePen.xlsx という名前を付けて、ご利用のクラウド ストレージ アカウント (OneDrive for Business、Dropbox など) に保存します。Name the Excel file SavePen.xlsx, and save the file to your cloud storage account (OneDrive for Business, Dropbox, and so on).

ペン コントロールを使ったアプリを作成するCreate an app with the pen control

  1. PowerApps で、空のアプリを作成します。In PowerApps, create a blank app.
  2. アプリで、クラウド ストレージ アカウントをデータ ソースとして追加します。In your app, add the cloud storage account as a data source. データ ソースとして追加したら、SavePen.xlsx を接続として追加し、Drawings テーブルを選択します。Once added as a data source, add SavePen.xlsx as a connection, and then select the Drawings table:
    接続Connect

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

  3. [挿入] メニューで、[テキスト][ペン入力] の順に選択します。On the Insert menu, select Text, and then select Pen input. 名前を MyPen に変更します。Rename it MyPen:

    名前の変更

  4. ボタン コントロールを追加し ([挿入] メニュー)、その OnSelect プロパティを次の数式に設定します。Add a Button control (Insert menu), and set its OnSelect property to the following formula:
    Patch(Drawings, Defaults(Drawings), {Image:MyPen.Image})
  5. イメージ ギャラリー コントロールを追加し ([挿入] メニューの [ギャラリー])、その Items プロパティを Drawings に設定します。Add an Image gallery control (Insert menu > Gallery), and set its Items property to Drawings. ギャラリー コントロールの Image プロパティが自動的に ThisItem.Image に設定されます。The Image property of the gallery control is automatically set to ThisItem.Image.

    画面は次のようになります。Your screen should look similar to the following:

    サンプル画面

  6. F5 キーを押すか、[プレビュー]() を選択します。Press F5 or select Preview (). MyPen で何かを描画し、ボタンを選択します。Draw something in MyPen, and the select the button. ギャラリー コントロールの最初の画像に、描画したものが表示されます。The first image in the gallery control displays what you drew. 他の何かを絵に追加して、ボタンを選択します。Add something else to your drawing, and select the button. ギャラリー コントロールの 2 番目の画像に、描画したものが表示されます。The second image in the gallery control displays what you drew.

    プレビュー ウィンドウを閉じます。Close the preview window.

  7. クラウド ストレージ アカウントに移動します。Go to your cloud storage account. 自動的に作成された新しい SavePen_images フォルダーが存在します。There's a new SavePen_images folder that is automatically created. 最新の情報に更新しないと新しいフォルダーが表示されない場合があります。You may need to refresh to see the new folder. このフォルダーには、それぞれのファイル名の ID が付けられて保存されたイメージが格納されます。This folder contains your saved images with IDs for their file names.

    SavePen.xlsx を開きます。Open SavePen.xlsx. Image 列に、これらの新しい画像のパスが表示されます。The Image column includes the path to these new images.

Excel ファイル内の画像をアプリに追加するAdd the image in an Excel file to your app

もう 1 つ例を紹介します。画像をクラウド ストレージ アカウントに保存し、アプリから Excel テーブルを使って画像を表示することができます。In another example, you can save images in a cloud storage account, and then use an Excel table to display the images in your app.

この例では、いくつかの .jpeg ファイルを格納している CreateFirstApp.zip を使用します。In this example, we use the CreateFirstApp.zip that contains some .jpeg files.

注意

Excel ファイルから画像を表示するときは、それらの画像のパスにスラッシュを使う必要があります。When displaying images from an Excel file, the path to these images must use forward slashes. PowerApps で (前の手順のように) 画像を Excel テーブルに保存すると、パスに円記号が使用されます。When PowerApps saves images to an Excel table (as with the previous steps), the path uses backslashes. 前の例で使用した SavePen_images を使用することもできますが、So, you can also use the SavePen_images from the previous example. その場合は、円記号ではなくスラッシュを使用するように Excel テーブル内のパスを変更してください。If you do, change the paths in the Excel table to use forward slashes instead of backslashes. そうしないと、画像は表示されません。Otherwise, the images will not display.

  1. CreateFirstApp.zip をダウンロードし、Assets フォルダーをクラウド ストレージ アカウントに抽出します。Download CreateFirstApp.zip, and extract the Assets folder to your cloud storage account.
  2. Excel スプレッドシートで、次のようなテーブルを作成します。In an Excel spreadsheet, create a table that looks similar to the following:

    Jackets テーブル

  3. テーブルに Jackets という名前を付けます。Name the table Jackets. Excel ファイルに Assets.xlsx という名前を付けます。Name the Excel file Assets.xlsx. また、Assets フォルダーの名前も Assets_images に変更してください。You can also rename the Assets folder to Assets_images.
  4. アプリで、データ ソースとして、Jackets テーブルを追加します。In your app, add the Jackets table as a data source.
  5. イメージのみコントロールを追加し ([挿入] メニューの [ギャラリー])、その Items プロパティを Jackets に設定します。Add an Image only control (Insert menu > Gallery), and set its Items property to Jackets:

    Items プロパティ

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

    ジャケット画像

Items プロパティを設定すると、Excel テーブルが、PowerAppsId という新しい列で自動的に更新されます。When you set the Items property, the Excel table is automatically updated with a new column named PowerAppsId.

Excel テーブル内の画像のパスは、URL になっていてもかまいません。In the Excel table, the image path can also be the URL to an image. Flooring Estimates サンプル ファイルをクラウド ストレージ アカウントにダウンロードして、FlooringEstimates テーブルをデータ ソースとしてアプリに追加し、ギャラリー コントロールを FlooringEstimates に設定してください。Download the Flooring Estimates sample file 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.

詳細情報Learn more

画像、ビデオ、またはサウンドを追加するAdd an image, a video, or a sound
アプリでデータを折れ線グラフ、円グラフ、棒グラフで表示するShow data in a line, pie, or bar chart in your app
PowerApps におけるテーブルとレコードについてUnderstand tables and records in PowerApps