[運用] 署名データを画像データとして保存する

アプリや端末のローカル参照

これまでのステップで見た動作確認では、保存した署名データはローカル参照の値です。

appres://blobmanager/baa5e3fa76b04c95a236838f2f3a235d/90
/SessionStorage/c4bbb80e54046fe01dc88c4b3825aef8c92ba933d0ac8c342b4d2c7fcda92b02.png

アプリ内の場合は先頭がappres（AppのResource）、端末の場合はSessionStorageになっています。
ステップ1で述べたように、ペン入力のデータを画像データにする場合、Base64形式のURLで取り扱うため、下記のように始まるのが正しいです。

"data:image/png;base64,..."

Base64変換して保存

保存処理（保存ボタンのOnSelect）を下記に修正します。

// コレクションにデータを追加
Collect(
    LocalSignatures, 
    {
        署名データ: JSON(PenInput1.Image, JSONFormat.IncludeBinaryData),　←　ここを修正
        作成日: Now()
    }
);

略

PenInput1.Imageとなっていたところを、JSON関数を使い、Base64に変換します。

署名データを画像として表示する

Base64で保存できれば、アプリ内で画像データとして表示が可能です。
　※確認用のアプリを用意するのがベストプラクティスですが、今回は同じアプリ内の別画面で用意します

FooterContainerのディスプレイ > 両端揃え（水平方向）を「間のスペース」にします。
FooterContainerにボタンを追加し、テキストに「確認用に移動」と入力します。
ツリービュー > Screen1を「画面の複製」を実行します。
Screen1にある移動ボタンのOnSelectに下記を入力します。

Navigate(Screen1_1)

Screen1_1（確認用画面）から、同期ボタンと保存ボタン、ペン入力を削除します。
移動ボタンのテキストを「署名用に移動」に変更し、OnSelectに下記を入力します。

Navigate(Screen1)

MainContainerに水平ギャラリーを追加し、詳細設定 > Imageに下記を入力します。

With(
    {base64Data: ThisItem.署名データ}, 
    Substitute(base64Data, """", "")
)

※Substitute関数を使い、不要な"を取り除いています。

水平ギャラリーにあるImageコントロールのディスプレイ > 画像の位置を「自動調整」、色をグレーにします。

動作確認

アプリを実行すると、最初に署名用の画面が表示されます。

署名用の画面を表示

署名を行い、保存、同期を行います。

署名の保存とデータ同期

移動ボタンを押下し、確認用の画面に移動します。

確認用の画面を表示

すでに保存された署名データが表示されます。
水平ギャラリーを使っているため、横にスクロールします。
JSON関数で正しくBase64で保存された署名データのみ、画像として確認できます。

署名データの画像を確認

Caution: ステップ2で見たように、保存先がLocalSignaturesのため、オンラインにおいても「同期」ボタンの実行が必要です。
　※ただし、オンライン状態を利用し、保存先を分岐させることも可能です