rex0220 シェイプ!プラグイン

kintone アプリで、画像に図形、手書き、テキストを描くことが出来るプラグインです。

参考
- [rex0220 シェイプ!プラグイン テーブルへの画像添付](https://qiita.com/rex0220/items/97ac2d50e91b76fe7c34)

# 直近の変更

Ver.3
・詳細画面で、「標準画像表示」機能を追加
・「画像名を保持」機能を追加
　拡張子は「.png」になります
・一覧画面で、シェイプ情報の json ファイルを非表示
・シェイプ設定で、表示対象シェイプが０の時、手書き設定で指定したアイコンも表示されなくなる不具合対応

Ver.2
・画像サイズに合わせて、キャンバスサイズを変更する機能を追加
　プラグイン設定の縦横サイズ内で、キャンバスサイズを変更する
・プラグイン設定で、「画像拡張子変更」指定を追加
　シェイプ画像保存時の拡張子を「.xxxx」にして、スライドショーの対象外にする

# 概要

シェイプ！プラグインの特長
・画像に図形、手書き、テキストを描くことが出来るプラグイン
・既定の図形、手書き、テキストの線の太さ・背景色などを設定可能
・レコード保存後、編集画面で図形の色・テキストなどを再編集可能
・３ヶ国語対応
・PCのみ対応



- 図形編集

![2024-12-20_21h21_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/516d454f-ce42-81d1-cf59-968634cdb45f.png)


図形アイコンにカーソルを当てると、ドロップダウンで図形アイコンを表示します。

![2024-10-20_21h34_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/d06a069a-53d2-faeb-047e-f22e6b54f9d2.png)

配置した図形をクリックして、選択状態にして線の太さ・色等を変更できます。
図形をドラッグして、位置の移動が出来ます。

![2024-10-20_21h40_34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/e96b4454-f62c-205b-8d27-e3a741458286.png)

上下左右のドラッグポイントで、図形のサイズ変更が出来ます。
選択した図形の上にあるドラッグポイントを回転させることで、図形が回転します。

![2024-10-20_21h43_29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/a0102674-a09d-392e-a459-4d630e32f6da.png)


- 図形表示

![2024-10-20_20h41_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/db37d83f-3d9e-43e9-8cf1-4b71fddb631f.png)


# 操作例

![2024-10-20_21h56_15.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/cba97e4b-6127-c2d2-1dcd-8d0d2703357e.gif)

# 図形の選択と移動・サイズ変更

図形をクリックし、選択状態にしてドラッグで移動。

![2024-10-21_08h54_44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/dc16619e-6ef7-0cd9-4615-b243d5a0b232.png)


図形の選択ポイントをドラッグして、サイズ変更

![2024-10-21_08h21_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/916d6e5d-d143-e37a-5a72-311836361f9c.png)

# 図形の回転

図形上部の選択ポイントをドラッグして、回転。
Shiftキーを押しながら回転すると、１５度ずつ回転します。

![2024-10-21_08h23_57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/05c0625c-05e5-5065-242b-81388c62d202.png)

# 図形の線の太さ・色を変更

図形を選択状態にして、線の太さや色を変更できます。

![2024-10-21_08h51_34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/77586777-ae74-989d-f64a-ba3f8f266c6a.png)

# 手書き操作

手書きボタンを選択して、手書き操作できます。
手書き操作を終了する場合は、選択ボタンや他の図形ボタンをクリックします。
手書きした図形を選択して、色やサイズを変えることもできます。

![2024-10-21_09h19_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/239ce6e9-1acb-9f67-0300-db99a619e673.png)

# テキスト図形

テキスト図形をダブルクリックして、文字を編集できます。
テキスト図形を選択して、移動・サイズ変更できます。

![2024-10-21_09h26_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/6e8e9ebc-63bd-6f83-7ef0-89a40069460d.png)

テキスト図形を選択してテキストの配置ボタンクリックで、配置を左・中央・右に変更できます。

![2024-10-21_09h28_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/521c4373-8b4d-df8c-e0c3-c9fcab0c8304.png)


# グループ選択と移動・サイズ変更・回転

画面上で範囲指定して複数の図形を選択しグループ化することができます。
ショートカットキー「CTL+a」で全図形を選択できます。
選択されたグループは、移動・サイズ変更・回転できます。

![2024-10-21_08h26_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/3f48ee65-ba3c-ea48-ac79-b68c69ee7f7e.png)

グループ選択の操作例

![2024-10-21_08h29_37.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/b67d74ef-8772-41cc-9f88-93301d727789.gif)

# 図形の削除

図形を選択して、カットボタンをクリックすると削除できます。
ショートカットキー「CTL+x」でも削除します。

![2024-10-21_08h33_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/58efdac0-1163-b943-ef41-e579c2607463.png)

# 図形のコピー＆ペースト

図形を選択して、ショートカットキー「CTL+c」で、コピー。「CTL+v」でペーストします。

![2024-10-21_08h36_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/80a08f31-d5ec-60df-b1e7-059493b859bf.png)

# 図形操作のやり直し（UNDO, REDO）

UNDO, REDO ボタンをクロックすることで、図形操作のやり直しができます。
ショートカットキーで「CTL+z」UNDO、「CTL+y」REDO ができます。

![2024-10-21_08h38_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/6498e83f-7c26-a35f-b310-732137ab83ee.png)

# 全図形の削除・背景画像の削除

全図形の削除ボタン・背景画像の削除ボタンで削除できます。

![2024-10-21_08h43_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/173433b8-c8fb-ee44-0b7e-bedbde0007cd.png)

# ズーム

「ズーム」をチェックすると、カーソル位置を中心にしてマウスのホイール操作でズームできます。
「ズーム」のチェックを外すと戻ります。

![2024-10-21_08h45_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/a8237641-fe48-639f-0a45-d0d7495610fe.png)

# 画像サイズ

「画像サイズ」をチェックすると、プラグイン設定の縦横サイズ内で画像サイズに合わせてキャンバスサイズを変更します。
プラグイン設定で、「画像サイズ」のチェックを指定できます。

![2024-12-20_21h34_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/80047b5f-35da-9a8f-1663-779e4d17c957.png)

# 図形画像を添付ファイル項目にドラッグして追加

編集画面で、 図形画像を添付ファイル項目にドラッグして追加できます。
追加された画像は、png の画像ファイルになります。

![2024-10-21_09h35_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/bd3e91e0-f71a-43e4-0587-cca6add66ea7.png)

# 詳細画面での画像表示

プラグイン設定で「標準画像表示」をチェックすると、詳細画面で添付ファイル項目のサムネイル画像を表示します。※kintone 標準の添付ファイル項目表示
「標準画像表示」なしだと、詳細画面でスペース項目に画像を表示します。

- 「標準画像表示」チェック：　添付ファイル項目を表示、スペースを非表示
![2025-04-18_07h44_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/d7a64f5d-7cfc-422c-9fe7-a5aabfadf9de.png)


- 「標準画像表示」チェックなし：　添付ファイル項目を非表示、スペースに画像を表示
![2025-04-18_07h48_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/d45c9d38-33b6-46d6-b3fa-989f9acf4135.png)


# アプリフォーム設定

画像を表示するスペース項目と画像データを保存する添付ファイル項目を設定します。
スペース項目ごとに対応する添付ファイル項目が必要です。

![2024-10-20_20h52_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/baad639b-493b-5d4e-1ee0-b4500ec6a0be.png)

スペース項目には、要素IDを指定してください。
![2024-10-20_20h54_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/3bc39ade-6d5f-0238-c139-63361e7f3062.png)

# シェイプ！プラグイン設定

- NOTE: メモ用
- 説明：　プラグイン設定の説明用
- プラグイン有効： チェックするとプラグインが有効
- スペースID：　スペースを識別するID
- 多言語：　ボタン名を３か国語別に設定
- シェイプ設定：　図形の枠線・背景色などを設定
- 手書き設定：　手書きモードの線や色を設定
- テキスト設定：　テキスト図形の枠線・背景色などを設定
- 画像サイズ縮小：　レコード保存時に背景画像のサイズを縮小
- 画像拡張子変更：　シェイプ画像保存時の拡張子を「.xxxx」にして、スライドショーの対象外にする
- 標準画像表示：　詳細画面で標準画像を表示
- 画像名を保持：　拡張子は「.png」になります
- スペースID：　スペース項目の要素ID
- ボタン：　ヘッダー部に表示するボタン表示の有無
- ボタン名：　ボタン名と図形編集ダイアログに表示
- 概要：　図形編集ダイアログに表示
- 添付ファイル：　画像を保存する添付ファイル項目を指定
- ファイル名：　画像を保存時のファイル名
- 横：　画像のサイズ[px]
- 縦：　画像のサイズ[px]
- 表示縦：　画像の表示サイズ[px]
- 画像サイズ：　図形編集ダイアログに表示する「画像サイズ」の指定
    - プラグイン設定の縦横サイズ内で画像サイズにキャンバスサイズを変更する
- 変更不可：　画像追加後、編集不可にする

![2025-01-20_23h38_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/002ba6a8-46f7-dbe2-4967-615bef674eae.png)

## シェイプ設定：　図形の枠線・背景色などを設定

チェックしたアイコンが、シェイプ選択に表示されます。

![2024-10-20_20h48_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/81fccaff-535e-d3f0-ecf3-5f3134f131d2.png)

左端をドラッグして、位置を変更できます。

![2024-10-21_07h49_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/c4de6e8c-9971-6da0-85f1-a4797c25627e.png)

線の色・背景色がアイコンに反映されます。

![2024-10-21_07h51_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/17fcae03-8b5f-dacf-d20f-85aabf8ac1e2.png)


## 手書き設定：　手書きモードの線や色を設定

チェックしたアイコンが、シェイプ選択に表示されます。

![2024-10-20_20h48_55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/74597e47-aa2e-4c02-2af3-af8d693a9d67.png)

線の幅・線の色がアイコンに反映されます。

![2024-10-21_07h54_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/de73cd0b-a95e-780d-48de-eb758383acff.png)

## テキスト設定：　テキスト図形の枠線・背景色などを設定

チェックしたアイコンが、シェイプ選択に表示されます。
「テキスト」に指定した内容が、テキスト図形配置時に表示されます。

![2024-10-20_21h15_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/d5076eda-ce11-b3db-0b45-57ec1bd9479c.png)

シンボル・線の色・背景色・フォント色がアイコンに反映されます。

![2024-10-21_07h58_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/4422a667-b058-9de1-141a-0d698df63f1c.png)

テキストの内容がテキストボックス追加時に表示されます。

![2024-10-21_08h02_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/3bcedd75-f094-a414-2223-c65a35f236ac.png)

![2024-10-21_08h03_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/47a91647-2f42-bd66-09ca-46580e155da0.png)


# 注意事項

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