マニュアル一覧へ

画像編集プラグイン

プラグインの設定をする

事前準備について

本プラグインの対象フィールドには、アプリのフォームに追加した添付ファイルフィールドを指定します。利用したい添付ファイルフィールドがまだない場合は、先にフォームへ追加してアプリを更新してから、プラグインの設定を行ってください。

1プラグイン設定画面を開きます。
画像編集プラグインの設定画面
2設定名称を設定します。任意の名称を入力してください。
設定名称を入力する画面
3対象フィールドを設定します。画像編集・手書き入力を利用する添付ファイルフィールドを選択します。
対象とする添付ファイルフィールドを設定する画面

基本設定

4既存画像の編集を利用する場合は、トグルスイッチをONに設定します。添付済みの画像に対して編集ボタンがレコード詳細画面に表示されます。
既存画像の編集のトグル設定画面
5新規手書き作成を利用する場合は、トグルスイッチをONに設定します。白紙から新しい画像を作成するボタンがレコード詳細画面に表示されます。
新規手書き作成のトグル設定画面
6手書きエディターを起動するボタンの名称を設定します。
新規手書き作成のボタン名を設定する画面
7画像の保存方法を設定します。
  • 別ファイルとして保存:編集後の画像を新しい添付ファイルとして追加します。
  • 元画像を上書き保存:編集前の画像に上書きする形で保存します。
画像の保存方法を選択する画面
8新規手書き作成時に使用するキャンバスの初期サイズを設定します。
キャンバスの初期サイズを設定する画面

(任意)テンプレート画像の設定

署名用の枠線画像などのテンプレート画像を読み込んだ状態で、新規手書き作成を開始できます。

テンプレート画像の設定画面

「URLで指定」または「添付ファイルフィールド」から画像を読み込むことができます。

URLで指定

任意の配信サーバーに設置した画像を、テンプレート画像として利用できます。

URLでテンプレート画像を指定する設定画面
CORS設定(URLで指定する場合)

外部ドメインの画像をテンプレート画像として読み込む場合、配信サーバー側でCORSの許可設定が必要です。未設定の場合、画像は表示できても編集後の保存時(canvasの toDataURL など)に SecurityError が発生することがあります。

  • Access-Control-Allow-Origin ヘッダーに、以下のいずれかを設定してください。
    • https://<あなたのkintoneサブドメイン>.cybozu.com(特定Originのみ許可したい場合)
    • *(全Origin許可。セキュリティ要件に注意)
  • 画像は https で配信してください。
  • CDNやストレージを使う場合も、配信設定(CORSルール)側で同様に許可が必要です。

※「添付ファイルフィールド」から読み込む場合はkintone内のファイルを利用するため、CORS設定は不要です。

添付ファイルフィールド

kintoneアプリ内の「添付ファイル」フィールドにアップロード済みの画像を、テンプレート画像として利用できます。

添付ファイルフィールドからテンプレート画像を指定する設定画面

エディター共通設定

9デフォルトのペンの色を設定します。編集画面を開いた時に最初に選択されている色になります。
デフォルトのペンの色を設定する画面
10デフォルトのペンの太さを設定します。編集画面を開いた時の線の太さになります。
デフォルトのペンの太さを設定する画面
11利用を許可するツールを設定します。ユーザーが画像編集画面で使えるツールを制限できます。
利用を許可するツールを設定する画面
12画面下部にある[保存する]をクリックします。
プラグイン設定画面の保存ボタン