前提条件

このチュートリアルの内容:

  • Excel ファイルを作成してテーブルとして書式設定します。
  • OneDrive for Business への接続を作成します。 任意のクラウド ストレージ アカウントが機能します。 このチュートリアルでは、OneDrive for Business を使用します。
  • ペン入力コントロールを使ったアプリを作成します。
  • ペン入力コントロールから作成した画像を Excel ファイルに保存します。
  • Excel ファイルに保存されている画像をアプリで表示します。

Excel ファイルをテーブルとして作成する

  1. 空の Excel ファイルで、列に "Image [image]" という名前を付けます。
  2. 次の手順を使用してテーブルを作成します。

    1. 任意の行の任意の列のデータを選択します。 たとえば、[Image] を選択します。
    2. [挿入] リボンの [テーブル] を選択します。
    3. ダイアログ ウィンドウで、[先頭行をテーブルの見出しとして使用する] を選択し、[OK] を選択します。

      Excel ファイルがテーブル形式になりました。 Excel におけるテーブルの書式設定について詳しくは、データをテーブルとして書式設定する方法についてのページを参照してください。

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

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

  3. Excel ファイルに SavePen.xlsx という名前を付けて、ご利用のクラウド ストレージ アカウント (OneDrive for Business、Dropbox など) に保存します。

ペン コントロールを使ったアプリを作成する

  1. PowerApps で、空のアプリを作成します。
  2. アプリで、クラウド ストレージ アカウントをデータ ソースとして追加します。 データ ソースとして追加したら、SavePen.xlsx を接続として追加し、Drawings テーブルを選択します。
    接続

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

  3. [挿入] メニューで、[テキスト][ペン入力] の順に選択します。 名前を MyPen に変更します。

    名前の変更

  4. ボタン コントロールを追加し ([挿入] メニュー)、その OnSelect プロパティを次の数式に設定します。
    Patch(Drawings, Defaults(Drawings), {Image:MyPen.Image})

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

    画面は次のようになります。

    サンプル画面

  6. F5 キーを押すか、[プレビュー]( ) を選択します。 MyPen で何かを描画し、ボタンを選択します。 ギャラリー コントロールの最初の画像に、描画したものが表示されます。 他の何かを絵に追加して、ボタンを選択します。 ギャラリー コントロールの 2 番目の画像に、描画したものが表示されます。

    プレビュー ウィンドウを閉じます。

  7. クラウド ストレージ アカウントに移動します。 自動的に作成された新しい SavePen_images フォルダーが存在します。 最新の情報に更新しないと新しいフォルダーが表示されない場合があります。 このフォルダーには、それぞれのファイル名の ID が付けられて保存されたイメージが格納されます。

    SavePen.xlsx を開きます。 Image 列に、これらの新しい画像のパスが表示されます。

Excel ファイル内の画像をアプリに追加する

もう 1 つ例を紹介します。画像をクラウド ストレージ アカウントに保存し、アプリから Excel テーブルを使って画像を表示することができます。

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

Excel ファイルから画像を表示するときは、それらの画像のパスにスラッシュを使う必要があります。 PowerApps で (前の手順のように) 画像を Excel テーブルに保存すると、パスに円記号が使用されます。 前の例で使用した SavePen_images を使用することもできますが、 その場合は、円記号ではなくスラッシュを使用するように Excel テーブル内のパスを変更してください。 そうしないと、画像は表示されません。

  1. CreateFirstApp.zip をダウンロードし、Assets フォルダーをクラウド ストレージ アカウントに抽出します。
  2. Excel スプレッドシートで、次のようなテーブルを作成します。

    Jackets テーブル

  3. テーブルに Jackets という名前を付けます。 Excel ファイルに Assets.xlsx という名前を付けます。 また、Assets フォルダーの名前も Assets_images に変更してください。

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

  5. イメージのみコントロールを追加し ([挿入] メニューの [ギャラリー])、その Items プロパティを Jackets に設定します。

    Items プロパティ

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

    ジャケット画像

Items プロパティを設定すると、Excel テーブルが、PowerAppsId という新しい列で自動的に更新されます。

Excel テーブル内の画像のパスは、URL になっていてもかまいません。 Flooring Estimates サンプル ファイルをクラウド ストレージ アカウントにダウンロードして、FlooringEstimates テーブルをデータ ソースとしてアプリに追加し、ギャラリー コントロールを FlooringEstimates に設定してください。 対応する画像でギャラリーが自動的に更新されます。

詳細情報

画像、ビデオ、またはサウンドを追加する
アプリでデータを折れ線グラフ、円グラフ、棒グラフで表示する
PowerApps におけるテーブルとレコードについて