署名プラグイン
概要
署名入力欄を配置し、入力した内容を画像としてアップロードします。
※2025/06/16以降 利用可能になります。
活用例
作業報告書などの署名記入で使用できます。
注意事項
- このサイトに掲載しているサンプルプログラムは、参考用としてご提供しています。動作保証はしておりませんので、ご注意ください。
なお、これらのプログラムを使用したことによるトラブルや損害については、責任を負いかねますので、あらかじめご了承ください。
サポート窓口へお問い合わせいただいても、対応はできかねますのでご了承ください。 - JavaScriptプラグインは、プロフェッショナルコースで使用できます。
制限事項
- 入力欄はレコード作成・レコード編集画面のみ動作します。
- アップロードしたファイルは詳細画面のみ表示します。
- 署名入力欄はスペースタイプ、アップロード先は添付ファイルタイプのみ選択可能です。
プラグインの機能
-
設定画面
スペースフィールドから署名入力欄、添付ファイルフィールドから、アップロード先を選択します。
-
プラグイン
指定したスペースに署名入力欄を配置します。
署名入力欄で保存ボタンを押下すると、アップロード先に指定した添付ファイルフィールドに内部的にアップロードします。
登録を行うと、詳細画面から画像ファイルとして保存されているのが確認できます。
開発手順
STEP1：設定画面
プラグインを追加したアプリのフィールド一覧を取得し、設定の選択肢として表示します。
フィールド一覧 の取得には、REST API を使用します。
プラグイン設定用にフィールド一覧を取得します。(config.js)
// プラグイン設定情報する (アプリIDの取得用)
const config = atPocket.plugin.app.getConfig();
// フィールド一覧取得API実行する
atPocket.api('apps/'+ config.appId +'/fields', 'GET', {}, function(result) {
// 成功時に実行する処理を記載
// セレクトボックスの選択肢にフィールド一覧をセットします
・・・
}, function(result) {
// エラー時に実行する処理を記載
・・・
});
プラグイン設定表示用のHTMLを記載します。(config.html)
<div class="config_form">
<div class="config_row">
<div class="config_caption">
署名
</div>
<div class="config_input">
<select id="sign_field" name="sign_field">
</select>
</div>
</div>
<div class="config_row">
<div class="config_caption">
ファイル
</div>
<div class="config_input">
<select id="file_field" name="file_field">
</select>
</div>
</div>
</div>
STEP2：プラグイン本体
スペースフィールドに署名入力欄を配置します。
保存ボタンクリック時に署名を画像に変換し、ファイルフィールドにアップロードします。
レコード作成・レコード編集画面表示時に、署名入力欄を配置します。(plugin.js)
// レコード作成画面/編集画面表示時に実行する
atPocket.events.on(['app.record.create.show', 'app.record.edit.show'], function(event) {
// プラグイン設定を取得する
const config = atPocket.plugin.app.getConfig();
・・・
// 配置するスペース要素を取得する
const wrapper = atPocket.app.record.getSpaceElement(config.sign_field);
// キャンバス枠追加
const wrapperElement = document.createElement('div');
wrapperElement.id = 'canvas-wrapper';
wrapper.appendChild(wrapperElement);
・・・
// キャンバス生成
const canvas = document.createElement('canvas');
canvas.id = 'signature-area';
wrapperElement.appendChild(canvas);
・・・
});
保存ボタンクリック時、画像に変換してファイルフィールドにアップロードします。(plugin.js)
// 保存ボタン追加
const uploadButton = createButton("upload");
uploadButton.addEventListener("click", () => {
// 署名が記入されているかどうか
if (signaturePad.isEmpty()) {
// 何も記入されていない場合
・・・
} else {
// 記入されている場合
canvas.toBlob(async function(blob) {
// ファイル置換を非同期処理する
await fileReplace(config.file_field, blob);
・・・
}, 'image/png');
}
});
headerRight.appendChild(uploadButton);
// ファイル置換
async function fileReplace(fileField, blob) {
// レコードの値を取得する
const record = atPocket.app.record.get();
・・・
// ファイルアップロードを非同期処理する
const fileInfo = await atPocket.app.record.upload(blob, fileName + '.png');
// 取得したファイルを追加する
record[fileField].value.push(fileInfo);
// レコードに値をセット
atPocket.app.record.set(record);
}