手書きサインプラグイン

使い方

受領書・作業報告書・同意書など、「その場でお客さまにサインをもらう」書類は、まだ紙で運用されていることが多い業務です。紙でもらうと、あとで写真を撮ってkintoneに添付するか、ファイルに綴じて保管することになり、探すのにも手間がかかります。 このプラグインは、レコードの追加・編集画面に手書きの署名欄を出します。スマホやタブレットは指で、パソコンはマウスで書けます。書いた署名はそのレコードの値として保存され、詳細画面と一覧画面では画像として表示されます。 署名した人の名前と、署名した日時を別のフィールドに自動で残すこともできます。「署名がないと保存できない」ようにもできるので、サインのもらい忘れを防げます。 署名は文字列（複数行）フィールドに画像データ（data:image/png;base64,...）として入ります。表示には使えますが、あとからまとめて取り出すのには向きません（CSVに書き出すと1件あたり数万文字の羅列になります）。v3では、署名と同じ画像をPNGファイルとして添付ファイルフィールドにも残せるようになりました。添付ファイルにしておけば、「添付ファイル一括ダウンロードプラグイン」（同じサイトで配布中）でまとめてZIPに取り出せます。介護の実地指導などで「◯月分の記録を全部出して」と言われたときも、レコードを1件ずつ開かずに済みます。

1. 署名を入れるフィールドを用意する

   まず、アプリのフォームに「文字列（複数行）」フィールドを1つ追加します。署名はPNGの画像データにしてこのフィールドに入れるので、ほかの入力には使わない、署名専用のフィールドにしてください。

   添付ファイルフィールドには入れられません。kintoneの追加・編集画面では、添付ファイルの値を画面から書き換える公式の方法がないためです。文字列（複数行）にしておくと、ふつうの値と同じようにレコードの保存・取り消しができ、保存に失敗したときに署名だけが残ることもありません。

   あわせて、署名欄を出したい場所に「スペース」を置き、その「要素ID」を決めておくと、思ったところに署名欄を出せます（例： sign1）。

   署名した人と日時も残したいときは、「文字列（1行）」と「日時（または日付）」のフィールドも用意してください。

   控え（PNG）も残したいときは、あわせて「添付ファイル」フィールドも1つ用意しておいてください（1つの署名欄につき1つ）。

2. プラグインの設定で署名欄を決める

   プラグインの設定画面で「署名を入れるフィールド」に、用意した文字列（複数行）フィールドを選びます。1つのフィールドにつき1つの署名欄を作れます（1つのアプリで3つまで）。お客さまと担当者の2人分の署名がほしいときは、2つ作ってください。

   ・署名欄の見出し：「ご署名（お客さま）」のように、その場で読む人にわかる言葉にします。空のときはフィールド名をそのまま出します。

   ・置き場所：フォームに置いたスペースの「要素ID」を入れます。空のときは、PCはレコードの上部、スマホはレコードタイトルの下に出ます。

   ・署名欄の見た目：高さ（100〜400px）、ペンの太さ（1〜8px）、ペンの色を選べます。高さを大きくすると画像も大きくなります。

   ・署名の必須：オンにすると、署名がないレコードを保存できなくなります。

   ・あわせて記録する：署名を書いたときに、ログインしている人の名前と、そのときの日時を入れます。

   「署名欄を出す画面」で、レコードの追加画面・編集画面を選びます。詳細画面には署名欄を出せません（kintoneには詳細画面で値を書き換える公式の方法がないためです）。

   設定を保存したら「アプリを更新」を押してください。

   あわせて、控えを残す設定もこの画面で行います。

   ・添付ファイルフィールド：控えの置き場所です。用意した添付ファイルフィールドを選びます。既定は「残さない」です。署名欄ごと（1つのアプリで最大3つ）に設定できます。

   ・ファイル名：控えのファイル名です。既定は {date}_{signer}_{label} です。次の記号を差し込めます。

   　{date}（日付、例: 20260415）／{time}（時刻、例: 0930）／{signer}（署名した人、例: 山田 太郎）／{label}（その署名欄の見出し、例: 実績確認）／{record}（レコード番号、例: 42）

   　既定のままだと「20260415_山田_太郎_実績確認.png」のような名前になります（空白は _ に置き換わります）。ファイル名に使えない記号（\ / : * ? " < > |）は自動で取り除かれます。

3. 署名をもらう

   レコードの追加・編集画面を開くと、署名欄が出ます。スマホ・タブレットは指で、パソコンはマウスで書いてください。書いている間に画面が動かないようにしてあるので、指でもきれいに書けます。

   書き終えると、その内容がすぐにフィールドに入り、「署名を入れました。保存を忘れないでください。」と出ます。あわせて記録する設定にしていれば、署名した人と日時もこのときに入ります。

   ・1つ戻す：直前に書いた線だけを消します。書き損じたときに使います。

   ・全部消す：署名をすべて消して、はじめからやり直します。署名した人と日時も一緒に空になります。

   最後にレコードの「保存」を押してください。押さないと署名は残りません。

   すでに署名があるレコードを編集画面で開くと、その署名が下絵として出ます。そのまま書き足すことも、「全部消す」でやり直すこともできます。

4. 書いた署名を見る（紙に出す・PDFにするときは帳票出力プラグインを使う）

   詳細画面では、長い画像データがそのまま見えると読みにくいので、もとのフィールドを隠して、署名を画像として出します。

   一覧画面にそのフィールドを出しているときは、セルを小さな署名の画像に置き換えます。誰がサイン済みかを一覧で見わたせます。この表示は設定画面でオフにもできます。

   kintoneの「印刷用画面」ではこのプラグインのJavaScriptが読み込まれないため、署名は画像として出ず、data:image/png;base64,iVBORw0KGgo... という文字列がそのまま印字されます。受領書や作業報告書として紙に出したい・PDFにしたいときは、この画面で印刷せず、「to.morrow 帳票出力プラグイン」を使ってPDFを作ってください。署名を入れた文字列（複数行）フィールドをテンプレートに配置すると、画像として出力されます。

5. 控え（添付ファイル）を、あとでまとめて取り出す

   控えは、レコードの保存が終わったあとに作られます。そのため、保存のあとに「更新」という変更履歴がもう1件残ります。署名が前回から変わっていなければ、控えは作り直されません。署名を消して保存すると、控えも一緒に消えます。控えの作成に失敗しても、レコードの保存自体は成功します（利用者にエラーは表示されません）。

   控えを添付ファイルにしておくと、「添付ファイル一括ダウンロードプラグイン」（同じサイトで配布中）を使って、複数レコードの添付ファイルをまとめてZIPで取り出せます。介護の実地指導などで「◯月分の署名を全部見せてほしい」と言われたときも、レコードを1件ずつ開かずに済みます。

   正本（実際に使われる値）はあくまで文字列（複数行）フィールドのままです。添付ファイルは表示・保存用の控えという位置づけです。