Power Appsの「ペン入力」の使いどころを考える

# はじめに
*Power Apps* のコントロールの中に、[ペン入力 コントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-pen-input)があります。

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-pen-input

マウスやペンタブレットを利用した手書きの文字の反映ができるコントロールです。

しかし、この機能の活用シーンが、私はなかなか思い浮かびません。
手書きといえば・・・契約書へのサインといった場面が主に思い出されますので、実際どう使おうか悩みどころです。

そもそも印刷とか*PDF*の扱いをどうするんだ🧐といったところから首をかしげてしまいます。

まずは印刷、*PDF化*の実現ができるか今回検証してみました。
*PDF* 関数と*Print* 関数を用いた手書きの反映をテーマに書いていきます。

# [ペン入力 コントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-pen-input)

[ペン入力 コントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-pen-input)は、文字通り手書きの入力を受け付け、ペン、タブレット、マウス、または指からの手書き文字を反映することができます。

この[ペン入力 コントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-pen-input)は*Image* として、画像コントロールから参照できたりします。

例えば手書きを反映した後、画像として表示することがサインらしく表示できそうですね。
架空の雇用契約書のサインをテーマにアプリを作っていきましょう。

実装のステップは以下のようになります：

1. サイン入力用の[ペン入力 コントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-pen-input)コンテナを表示・非表示をコントロールできる状態で用意する
1. Print関数やPDF関数を用いて。印刷やPDF保存を果たす

:::note warn
実運用を想定したアプリケーションではありません。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/d2dea33b-5131-c051-1672-9254b8fd52cc.png)

# アプリの作成
*Power Apps*のテンプレートには「縦長で印刷」というテンプレートが存在します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/042bbcf7-4b46-f7e6-b40f-6ae46df9d5df.png)


これにはすでに*Print* 関数が埋め込まれていて使い勝手が良いです。

*HTMLテキスト*を配備し、契約書を設定してみましょう。

```html:HTML テキストコントロールに挿入する契約書
$"<!DOCTYPE html>
<html lang='ja'>
<head>
    <meta charset='UTF-8'>
    <title>雇用契約書</title>
</head>
<body style='font-family: Arial, sans-serif; margin: 40px;'>
    <h1 style='text-align: center;'>雇用契約書</h1>

    <p>でもどり株式会社（以下『甲』という。）と{User().FullName}（以下『乙』という。）は、以下のとおり雇用契約（以下『本契約』という。）を締結する。</p>

    <div style='font-weight: bold; margin-top: 20px;'>第1条（雇用期間）</div>
    <div style='margin-left: 20px;'>
        甲は、乙を{Today()}から{DateAdd(Today(),1,TimeUnit.Months)}までの期間、雇用する。
    </div>

    <div style='font-weight: bold; margin-top: 20px;'>第2条（業務内容）</div>
    <div style='margin-left: 20px;'>
        乙の業務内容は、以下のとおりとする。<br>
        1. 業務内容の詳細
    </div>

    <div style='font-weight: bold; margin-top: 20px;'>第3条（就業場所）</div>
    <div style='margin-left: 20px;'>
        乙の就業場所は、東日本海東京都千代田区とする。
    </div>

    <div style='font-weight: bold; margin-top: 20px;'>第4条（就業時間）</div>
    <div style='margin-left: 20px;'>
        1. 乙の就業時間は、がんばれるだけがんばるもの。<br>
        2. 休憩時間は、原則ない。
    </div>

    <div style='font-weight: bold; margin-top: 20px;'>第5条（賃金）</div>
    <div style='margin-left: 20px;'>
        1. 完全出来高<br>
        2. 支払日：毎月末日
    </div>

    <div style='font-weight: bold; margin-top: 20px;'>第6条（休日・休暇）</div>
    <div style='margin-left: 20px;'>
        乙の休日は、土曜日、日曜日、及び法定の祝日とする。年次有給休暇については、別途定める。
    </div>

    <div style='font-weight: bold; margin-top: 20px;'>第7条（契約の解除）</div>
    <div style='margin-left: 20px;'>
        甲及び乙は、30日前までに書面によって通知することにより、本契約を解除することができる。
    </div>

    <div style='margin-top: 50px;'>
        <div>{Today()}</div>
        <div>甲：でもどり株式会社</div>
        <div>代表取締役：デモドリガツオ</div>
        <div>乙：{User().FullName}</div>
    </div>
</body>
</html>
```
このようなものになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/425ac749-f435-2ffc-89d9-7c35da74f651.png)

:::note warn
架空の内容です
:::

:::note info
`$` `文字列補間`を用いて、テキストの差し込みを実行しています。
`$` `文字列補間`は本当に便利なのでマスターしましょう！
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/ba7789d7-672f-6763-b45e-c42051d44a6c.png)

こちらの枠`rgba(255,0,0,1)`に、`画像`と`四角形`を用意し、疑似的にサインを反映します。

`画像`の`Image`プロパティは

```plaintext:画像コントロールの設定値
PenInput1.Image // ペン入力コントロールの名前.Image
```
このように設定することで、[ペン入力 コントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-pen-input)に記載された情報が反映されます。

■ 画像コントロールを用いる理由

:::note info
ペン入力コントロールは、印刷画面やPDF画面で出力すると真っ黒になったり、印刷に不適だと判断しました。
余計な枠線やアイコンも表示されない画像コントロールに結果だけ映すことによってサイン欄を用意しています。
:::

## コンテナー
コードで全体像を先に出します。

```yaml
- conPenInput:
    Control: GroupContainer
    Variant: manualLayoutContainer
    Properties:
      Fill: =RGBA(255, 255, 255, 1)
      Height: =Parent.Height * 0.15
      Visible: =varSign
      Width: =Parent.Width
      Y: =Parent.Height - Self.Height
    Children:
    - PenInput:
        Control: PenInput
        Properties:
          BorderThickness: =1
          Height: =144
          Size: =1
          Width: =458
          X: =323
          Y: =11
    - icoPenInput:
        Control: Classic/Icon
        Variant: Edit
        Properties:
          Icon: =Icon.Edit
          PaddingBottom: =8
          PaddingLeft: =8
          PaddingRight: =8
          PaddingTop: =8
          X: =15
    - lblPenInput:
        Control: Text
        Properties:
          Text: ="Please sign here..."
          Height: =38
          Width: =277
          X: =15
          Y: =64
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/74a278fb-62f9-fbdd-515e-b44f73e45d6d.png)

*Sign*ボタンを押すと最下部に表示されるコンテナーです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/5c18bfdd-2da5-d85d-0d07-ccd37c6f7a95.png)

ヘッダーのボタンで表示・非表示をコントロールする*Visible*を制御しています。

[ペン入力 コントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-pen-input)にサインを入力すると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/2e0a771f-3eb0-3900-2b9c-f4a8c8c9799c.png)

`画像` コントロールにも反映されます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/ac208245-240e-91aa-88ba-dfb2abd50c08.png)

## Print 関数
[Print 関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-print)は引数不要の関数です。`Print()`にて任意の画面の印刷画面が開きます。

https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-print


クリックしてみると私のPCでは上手く表示されません💦

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/cc44ecf1-6621-9dbd-700e-4996b8c0f7d2.png)

用紙サイズを`Legal`と一度設定すると、`A4`にも反映されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/c80ca875-90ac-7e14-9ce5-9fe100266700.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/8c79942d-175a-597c-6d3b-6416db158433.png)

謎な現象です。とりあえずできそうなことは理解できました。

## PDF 関数
[PDF 関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-pdf)は`試験段階`の機能です。

https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-pdf

`設定`から機能をオンにする必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/a7ba1cba-9fa6-f42a-6566-a2904d14f351.png)

[PDF 関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-pdf)は文字通りPDFを出力する機能ですが、戻り値は`Blob`です。

*Power Automate*を経由して保存する必要があります。

`ファイル`を指定して、*Power Apps*から*Power Automate*に渡すためには、ファイル名と合わせて[PDF 関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-pdf)の結果を渡します。

```plaintext:OnSelect PDFを保存
Power Automateのフロー名.Run({file:{contentBytes:PDF(signMain), name: "PDFファイルの名前.pdf"}})
```

*Power Automate*はシンプルなファイルの保存でとどまっておりますので、コチラでは割愛。

*PDF*として保存されましたが`（）`などが欠損していますね・。
課題ありです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/ee3baf74-52eb-e9d2-18d8-ef15a5fdd914.png)

# おわりに
[ペン入力 コントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-pen-input)っていつ使うかな、と思っていましたが、手書きのサインを使っている運用を含めて、工夫すれば一定の活用の余地がありそうだなと少し感じました。

画像として参照できるということは、`おえかき`アプリや`ひらがな`練習にもいいかも。
夢が広がりますね。

それでは、**良いPower Lifeを！**