はじめに

Power Apps のコントロールの中に、ペン入力コントロールがあります。

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

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

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

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

ペン入力コントロール

ペン入力コントロールは、文字通り手書きの入力を受け付け、ペン、タブレット、マウス、または指からの手書き文字を反映することができます。

このペン入力コントロールはImage として、画像コントロールから参照できたりします。

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

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

サイン入力用のペン入力コントロールコンテナを表示・非表示をコントロールできる状態で用意する
Print関数やPDF関数を用いて。印刷やPDF保存を果たす

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

アプリの作成

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

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

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>

このようなものになります。

架空の内容です

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

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

画像のImageプロパティは

画像コントロールの設定値

PenInput1.Image // ペン入力コントロールの名前.Image

このように設定することで、ペン入力コントロールに記載された情報が反映されます。

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

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

コンテナー

コードで全体像を先に出します。

- 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

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

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

ペン入力コントロールにサインを入力すると

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

Print 関数

Print 関数は引数不要の関数です。Print()にて任意の画面の印刷画面が開きます。

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

用紙サイズをLegalと一度設定すると、A4にも反映されます。

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

PDF 関数

PDF 関数は試験段階の機能です。

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

PDF 関数は文字通りPDFを出力する機能ですが、戻り値はBlobです。

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

ファイルを指定して、Power AppsからPower Automateに渡すためには、ファイル名と合わせてPDF 関数の結果を渡します。

OnSelect PDFを保存

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

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

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

おわりに

ペン入力コントロールっていつ使うかな、と思っていましたが、手書きのサインを使っている運用を含めて、工夫すれば一定の活用の余地がありそうだなと少し感じました。

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

それでは、良いPower Lifeを！