rex0220 絵描きプラグイン

kintone アプリで、マウス等を使って絵や文字をかけるプラグインです。
PC・モバイル対応で、サインによる承認も可能です。

# 絵描きプラグインの特長

・テキスト項目、添付ファイル項目、に画像データを格納
・画像ファイル読み込み機能
・スペース項目で、編集・表示
・カラー選択
・ペン、消しゴム、塗りつぶし機能
・線の太さを指定可能
・元に戻す、やり直し、クリア機能
・複数スペース対応
・スペース領域クリックで、絵描きダイアログ表示
・絵描きボタン表示
・印刷機能に対応
・PC・モバイル対応

[STORES 絵描きプラグイン](https://rex0220.stores.jp)

- [rex0220 絵描きプラグイン モバイル操作](https://qiita.com/rex0220/items/7928ebbd12963d29175a)

※ Ver.11
・詳細画面で、「標準画像表示」機能を追加
　(データタイプが添付ファイル項目の場合のみ)
・「画像名を保持」機能を追加。　拡張子は「.png」になります
　(データタイプが添付ファイル項目の場合のみ)
　※画像名の undo, redo は未サポート

# 概要

画像ファイルを読み込み、書き込みができます。
iPhone, iPad では、写真を撮って読み込み、タッチスクリーンで書き込みができます。

![2023-03-18_14h54_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/c2e6dc08-9361-14bf-9575-0b424922dba6.png)

# 操作例

- PC： Surface Laptop で、画像ファイル読み込み、タッチスクリーンで書き込み
![2023-03-18_16h05_51.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/d13f8cd0-78fd-3a18-8221-d4c5b675d83d.gif)

- iPhone, iPad：　カメラで写真を撮って読み込み、タッチスクリーンで書き込み
![draw1 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/3eb3a145-7790-2d27-a380-aa59dc0d1341.gif)

# アプリ追加・編集画面
絵描きプラグインが編集モードになります。

下記ライブラリをカスタマイズして使用していますので、基本的な編集方法は同じです。
[DrawingBoard](http://leimi.github.io/drawingboard.js/)

追加・編集画面で、絵描きボタンをクリックするか、スペースの画像をクリックすると、ダイアログが表示されます。

![2021-08-30_04h18_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/8070b6f0-8a70-0011-2c51-88f691e4ca47.png)

# 印刷対応

kintone 標準の印刷機能に対応しています。

![2021-08-30_10h41_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/1e0adb24-1576-5826-7111-8642ed55fbfc.png)


# フィールドのアクセス権対応

データ項目の編集権限が無ければ、画像編集不可になります。

![2021-08-30_04h42_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/11a53564-1bbe-1b62-1196-585fb1c2b8ee.png)

追加・編集画面で、画像編集の可否でスペース枠の色が変わります。

![2021-08-30_11h09_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/c55a7de0-2e2f-0c2c-4fee-2086e8c5c298.png)

# 絵描き編集機能
カラー選択
![draw02.png](https://qiita-image-store.s3.amazonaws.com/0/100572/124f7c06-98aa-a7e1-88eb-fd1b6583ea46.png)

# アプリ詳細画面

詳細画面では、スペース項目内にimg として表示します。

![2021-08-30_04h21_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/d4257590-36e6-0547-ad06-beda8bc00c54.png)


# フォーム設定

画像を表示するスペース項目と画像データを保存するテキスト項目または添付ファイル項目を設定します。

![2021-08-30_04h22_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/71658e9c-541c-2845-18f8-0f49d47b7bbe.png)


# 絵描きプラグインの追加

![draw11.png](https://qiita-image-store.s3.amazonaws.com/0/100572/054d38e7-59d3-7ed0-95b1-3cf2a4dfc9ea.png)


# 絵描きプラグインの設定

設定画面を開くとスペース項目とオプション指定が表示されますので、
絵描き対象にする項目を選択し、編集初期設定内容を指定します。
設定後に、「保存する」ボタンをクリックします。

- NOTE: メモ用ですので自由にお使いください。
- プラグイン有効：　チェックするとプラグインが有効になります
- 標準画像表示：　詳細画面で「標準画像表示」となります
　(データタイプが添付ファイル項目の場合のみ)
- 画像名を保持：　拡張子は「.png」になります
　(データタイプが添付ファイル項目の場合のみ)
- スペースID：　スペースを識別するID
- ラベル：　絵描きダイアログのタイトル、ボタンのラベルに表示されます
- データ項目：　文字列項目または、添付ファイル項目を選択します
- 色：　文字色をクリックして選択
- 背景色：　背景色をクリックして選択
- 縦：　編集領域の縦
- 横：　編集領域の横
- 表示縦：　スペースの表示縦。表示横は、比率で自動計算
- 線の太さ：　絵描き時の線の太さ
- 一覧の縦：　データ項目に文字列項目を指定時に有効
- ボタン：　絵描き編集ボタン表示
- 変更不可：　画像保存後、編集不可とします
- 複写：　レコード複写時に画像データを引き継ぎます

![2025-01-20_23h33_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/0b8db7f3-0a64-3e8e-6181-5429b96c1200.png)


# 注意事項

- 既に、JavaScript によるカスタマイズを行っているアプリの場合、処理が競合して、エラーになる場合があります。その場合は、該当するアプリでプラグインの使用を中止してください。
- フォームを変更した場合は、プラグインを再設定してください。
- 画像サイズが大きい場合、画面表示・更新に時間がかかる場合があります。画像サイズは、必要最小限にしましょう。