はじめに

コラボフローでサインを手描きして画像保存するカスタマイズを作成してみました。
（コラボフローJavaScript APIを使ってカスタマイズしています）

コラボフローを知らない方は、ぜひ こちらを参考にしてみてください！

事前準備

コラボフローの通常フォーム

必要となるのは以下のパーツです。

• 画像パーツ
• ラベルパーツ

ラベルパーツの設定情報
コラボフローのラベルパーツには、HTMLを登録することができます！
フォーム内にサインを手書きするスペースやサイン画像を保存するボタンを表示させたいので、
「ラベルの内容」には以下のHTMLを登録しておきます。

・手書きサインのエリア

<div id="signature">　</div>

・手書きサインの画像確認エリア
<div id="signature-image">　</div>

・画像出力ボタン
<button type="button" id="output-image">画像出力</button>

・クリアボタン
<button type="button" id="clear">クリア</button>

・保存ボタン
<button type="button" id="save">ファイルに保存</button>

ラベルパーツ設定の例

ラベルパーツの設定画面

実際のフォーム画面（ラベルパーツの表示）

カスタマイズファイル

手書きの署名をブラウザ上で実装するために、「jSignature」というプラグインを利用します。
フォーム編集画面にて「カスタマイズ」タブを表示して、以下のように登録します。

jquery

登録するURL「https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js」

jSignature

登録するURL「https://cdnjs.cloudflare.com/ajax/libs/jSignature/2.1.3/jSignature.min.js」

カスタマイズ用jsファイル

(function () {
  "use strict";
  collaboflow.events.on( "request.input.show",function (e) {
      // 初期化
      $("#signature").jSignature();

      // クリア処理
      const clearButton = document.getElementById("clear");
      clearButton.addEventListener("click", async function () {
        $("#signature").jSignature("clear");
      });

      // 画像出力処理
      const outputImageButton = document.getElementById("output-image");
      outputImageButton.addEventListener("click", async function () {
        const signatureImage = $("#signature-image");
        signatureImage.empty();
        const image = new Image();
        image.src = $("#signature").jSignature("getData");
        $(image).appendTo(signatureImage);
      });

      // ファイル保存する処理;
      const saveButton = document.getElementById("save");
      saveButton.addEventListener("click", async function () {
        // jSignatureから画像データを取得
        var datapair = $("#signature").jSignature("getData", "image");
        var i = new Image();
        i.src = "data:" + datapair[0] + "," + datapair[1];
        const base64Data = i.src.split(",")[1];

        // base64データをバイナリデータに変換する
        const byteCharacters = atob(base64Data);
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);

        // Blobオブジェクトを作成
        const blob = new Blob([byteArray], { type: "image/png" });

        // BlobオブジェクトをURLに変換し、ダウンロードリンクとして提供
        const a = document.createElement("a");
        a.href = URL.createObjectURL(blob);
        a.download = "signature.png";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      });
    }
  );
})();

カスタマイズcssファイル

#signature {
  margin: 0px 0px;
  border: 2px dotted #000;
  width: 400px;
}

#signature-image {
  margin: 0px 0px;
  border: 1px solid #000;
  width: 400px;
}

動作確認

以下の手順で実際に動作するか確認してみます。

1. 手書きスペースにサインする
   2.「画像出力」ボタンを押す
2. 手書きサインを確認する
3. 「ファイルに保存」ボタンを押す
4. 手書きサインの画像ファイルがダウンロードされる
5. ダウンロードしたファイルを添付する

最後に

申請書を自由にカスタマイズできるのは楽しいですよね！！
手書きサインの画像をもっとシームレスに添付できるようになれば、実用化できそうな気がします。

株式会社コラボスタイル

株式会社コラボスタイルは、『ワークスタイルの未来を切り拓く』を理念に掲げ、
ワークスタイルのちいさなチャレンジがライフスタイルをより良くすると考えております。

ITツールを提供するメーカーにとどまらず、働く人と働く場所の未来を作っていく会社です。

社内のワークフローを整備することで、働く人の業務ストレスを軽減し
みんなが働きやすい環境を実現するため、ソフトウエアエンジニアを募集しています。

・株式会社コラボスタイルの会社情報
https://www.wantedly.com/companies/company_8613418