次の方法で共有

Power Apps での ペン入力 コントロール

  • [アーティクル]

ユーザーが画像の領域を描画、削除、強調表示できるコントロール。

内容

ユーザーはこのコントロールをホワイトボードのように使用して、図を描いたり、入力したテキストに変換可能な文字を書いたりできます。

制限

ペン入力コントロールには、次の制限があります:

  • Windows アプリでのマウスまたはタッチ入力を使用した描画に対するペン コントロールは、部分的にのみサポートしています。 ストロークが断続的になる可能性があります。 スムーズに描画するためには、ペンを使用するか、ブラウザーでアプリを実行します。

重要なプロパティ

Image – エンド ユーザーによって描画された画像を表す出力プロパティ。

Color – 入力ストロークの色。

Mode – このコントロールは 描画または削除モードです。 選択モードは非推奨になりました。

追加のプロパティ

AccessibleLabel – スクリーン リーダー用のラベル。 コントロールの目的だけでなく、代替の入力方法についての説明にも使用できます。

BorderColor – コントロールの境界線の色。

BorderStyle – コントロールの境界線が実線、破線、点線、またはなしかどうか。

BorderThickness – コントロールの境界線の太さ。

DisplayMode – コントロールがユーザー入力を許可するか (編集)、データのみを表示するか (表示)、または無効にするか (無効) どうか。

Fill – コントロールの背景色。

Height – コントロールの上端と下端間の距離。

Input – 非推奨。 入力で、マウス、ペンまたはタッチ入力がサポートされるかどうか。 既定値 (7) では、3 つすべてがサポートされます。

OnSelect – ユーザーがコントロールをタップまたはクリックしたときに実行するアクション。

SelectionColor – リスト内で選択された項目のテキストの色、またはペン コントロールの選択ツールの色。

SelectionThickness – ペン入力コントロールの選択ツールの太さ。

ShowControls – オーディオ プレイヤーまたはビデオ プレイヤーに再生ボタンと音量スライダーなどが表示されるかどうか、およびペン コントロールに描画、削除、クリアなどのアイコンが表示されるかどうか。

Size – コントロールに表示されるテキストのフォント サイズ。

Tooltip – ユーザーがコントロールにカーソルを置くときに表示される説明テキスト。

Visible – コントロールが表示されるか非表示になるか。

Width – コントロールの左端と右端間の距離。

X – コントロールの左端とその親コンテナー (親コンテナーがない場合は画面) の左端間の距離。

Y – コントロールの上端とその親コンテナー (親コンテナーがない場合は画面) の上端間の距離。

Collect( CollectionName, DatatoCollect )

例

一連の画像を作成する

  1. ペン入力コントロールを追加し、MyDoodles という名前を付け、ShowControls プロパティを true に設定します。

    コントロールの追加、名前付け、構成 についてはこちらをご覧ください。

  2. ボタン コントロールを追加し、MyDoodles の下に移動し、ボタン コントロールの Text プロパティを 追加 と表示するように設定します。

  3. ボタン コントロールの OnSelect プロパティを次の数式に設定します:
    Collect(Doodles, {Sketch:MyDoodles.Image})

  4. 画像ギャラリー コントロールを追加し、ボタン コントロールの下に移動し、画像ギャラリーの幅を表示項目が 3 つになるまで縮小します。

  5. 画像ギャラリー コントロールの Items プロパティを Doodles に設定してから、F5 キーを押します。

  6. MyDoodles で画像を描画してから、ボタン コントロールをクリックまたはタップします。

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

  7. (オプション) ペン入力 コントロール内で描画した画像を消去するアイコンをクリックまたはタップし、別の画像を描画してから、ボタン コントロールをクリックまたはタップします。

  8. 画像ギャラリー コントロールで、画像 コントロールの OnSelect プロパティを次の数式に設定します:
    Remove(Doodles, ThisItem)

  9. 画像ギャラリー コントロール内の画像をクリックまたはタップすることにより、その画像を削除します。

SaveData 関数を使用して画像をローカルに保存するか、Patch 関数を使用してデータ ソースに保存します。

アクセシビリティ ガイドライン

色のコントラスト

次の間には適切な色のコントラストが必要です:

  • BorderColor とコントロールの外側の色 (境界線がある場合)
  • Fill とコントロールの外側の色 (境界線がある場合)

スクリーン リーダー サポート

  • AccessibleLabel が存在する必要があります。

    重要

    スクリーン リーダー ユーザーはPen inputにアクセスできません。 常に入力の代替形式を提供してください。 たとえば、スケッチが必要な場合は、ユーザーが画像をアップロードできるように、画像の追加 コントロールの追加を検討してください。 両方の方法を提供すると、ユーザーがより快適な方法を選択できるようになります。

キーボードのサポート

重要

キーボード ユーザーはPen inputにアクセスできません。 常に入力の代替形式を提供してください。 たとえば、署名が必要な場合は、ユーザーが名前を入力できるように テキスト入力 を追加することを検討してください。 両方の方法を提供すると、ユーザーがより快適な方法を選択できるようになります。

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。