← 活用ガイド一覧へ
画像編集プラグイン

テンプレート画像を背景にして手書き入力する

このページでは、画像編集プラグインを使用して、テンプレート画像を背景にして手書き入力する手順を確認できます。

できること

テンプレート画像を背景にして手書き入力することで、確認サインや電子署名を可能にします。

テンプレート画像を背景に手書き入力した署名付き画像をレコード詳細画面で表示する例
動作イメージ

利用シーン

  • 報告書をテンプレート画像として、お客様に確認のサインをしてもらう
  • 契約書をテンプレート画像として、契約者に電子署名をしてもらう

必要なアプリ・プラグイン

アプリ

以下のボタンをクリックするとアプリテンプレートがダウンロードできます。

運用中のアプリでも設定が可能です。今回の設定内容(設定手順)に基づいて、作成したい方はアプリテンプレートをダウンロードしてください。

プラグイン

画像編集プラグイン

まだ kintone にプラグインをインストールしていない方は、30日間のお試し申込をしてプラグインをご利用ください。

設定手順

1添付ファイルフィールドを設定する

アプリのフォーム設定で、添付ファイルフィールドを設定します。 アプリテンプレートを利用する場合は、既に設定済です。

アプリのフォーム設定で添付ファイルフィールドを設定する画面
手順1の設定画面
2プラグインの基本設定を行う

プラグイン設定画面を開きます。 設定名称の設定、対象の添付ファイルフィールドの指定、新規手書き作成の機能ONを行います。

プラグイン設定画面で新規手書き作成を有効にする画面
手順2の設定画面
3新規手書き作成ボタン名を設定する

新規手書き作成のエディターを起動するボタン名を設定します。任意の名称を設定しましょう。

新規手書き作成ボタン名を設定する画面
手順3の設定画面
4画像保存方法を設定する

画像保存方法を設定します。 「別ファイルとして保存」と「元画像を上書き保存」が選択できます。 利用用途に適した設定を選択しましょう。

画像保存方法を別ファイル保存または上書き保存から選択する画面
手順4の設定画面
5キャンバスの初期サイズを設定する

キャンバスの初期サイズを設定します。任意のサイズを設定しましょう。

キャンバスの初期サイズを設定する画面
手順5の設定画面
6テンプレート画像を設定する

テンプレート画像の機能をONにします。 参照ボタンからテンプレート画像を選択します。 画像は「URL」と「添付ファイルフィールド」から選択可能です。 今回の例では、添付ファイルフィールドからテンプレート画像を設定しました。

テンプレート画像の機能を有効にする画面
手順6の設定画面(テンプレート画像を有効化)
添付ファイルフィールドからテンプレート画像を選択する画面
手順6の設定画面(テンプレート画像の選択)

設定が完了したら、保存ボタンを押して、アプリを更新します。

7署名ボタンをクリックする

アプリ画面に戻り、レコード詳細画面を開きます。 署名ボタン(新規手書き作成ボタン)が追加されているのでクリックします。

レコード詳細画面に表示された署名ボタン(新規手書き作成ボタン)
手順7の操作画面
8手書き入力して保存する

テンプレートが初期背景として設定された画像編集エディターが起動するので、手書き入力を行います。 記入が終わったら、右上の保存ボタンをクリックします。

テンプレート画像を背景にしたエディターで手書き入力する画面
手順8の操作画面
9保存結果を確認する

テンプレート画像を背景にして手書き入力が完了しました。

手書き入力が完了し添付ファイルに保存されたプレビュー
手順9の完成画面

完成

テンプレート画像を背景に手書き入力した完成イメージ
完成イメージ

Crena Plugin

すべてのプラグインを
30日間無料でお試し

  • 全プラグインが使える
  • クレジットカード不要
  • 本番環境で動作確認
Crena Plugin 無料トライアル申し込み画面