kintone アプリで、画像に図形、手書き、テキストを描くことが出来るプラグインです。
参考
概要
シェイプ！プラグインの特長
・画像に図形、手書き、テキストを描くことが出来るプラグイン
・既定の図形、手書き、テキストの線の太さ・背景色などを設定可能
・レコード保存後、編集画面で図形の色・テキストなどを再編集可能
・３ヶ国語対応
・PCのみ対応
- 図形編集
図形アイコンにカーソルを当てると、ドロップダウンで図形アイコンを表示します。
配置した図形をクリックして、選択状態にして線の太さ・色等を変更できます。
図形をドラッグして、位置の移動が出来ます。
上下左右のドラッグポイントで、図形のサイズ変更が出来ます。
選択した図形の上にあるドラッグポイントを回転させることで、図形が回転します。
- 図形表示
操作例
図形の選択と移動・サイズ変更
図形をクリックし、選択状態にしてドラッグで移動。
図形の選択ポイントをドラッグして、サイズ変更
図形の回転
図形上部の選択ポイントをドラッグして、回転。
Shiftキーを押しながら回転すると、１５度ずつ回転します。
図形の線の太さ・色を変更
図形を選択状態にして、線の太さや色を変更できます。
手書き操作
手書きボタンを選択して、手書き操作できます。
手書き操作を終了する場合は、選択ボタンや他の図形ボタンをクリックします。
手書きした図形を選択して、色やサイズを変えることもできます。
テキスト図形
テキスト図形をダブルクリックして、文字を編集できます。
テキスト図形を選択して、移動・サイズ変更できます。
テキスト図形を選択してテキストの配置ボタンクリックで、配置を左・中央・右に変更できます。
グループ選択と移動・サイズ変更・回転
画面上で範囲指定して複数の図形を選択しグループ化することができます。
ショートカットキー「CTL+a」で全図形を選択できます。
選択されたグループは、移動・サイズ変更・回転できます。
グループ選択の操作例
図形の削除
図形を選択して、カットボタンをクリックすると削除できます。
ショートカットキー「CTL+x」でも削除します。
図形のコピー＆ペースト
図形を選択して、ショートカットキー「CTL+c」で、コピー。「CTL+v」でペーストします。
図形操作のやり直し（UNDO, REDO）
UNDO, REDO ボタンをクロックすることで、図形操作のやり直しができます。
ショートカットキーで「CTL+z」UNDO、「CTL+y」REDO ができます。
全図形の削除・背景画像の削除
全図形の削除ボタン・背景画像の削除ボタンで削除できます。
ズーム
「ズーム」をチェックすると、カーソル位置を中心にしてマウスのホイール操作でズームできます。
「ズーム」のチェックを外すと戻ります。
図形画像を添付ファイル項目にドラッグして追加
編集画面で、 図形画像を添付ファイル項目にドラッグして追加できます。
追加された画像は、png の画像ファイルになります。
アプリフォーム設定
画像を表示するスペース項目と画像データを保存する添付ファイル項目を設定します。
スペース項目ごとに対応する添付ファイル項目が必要です。
スペース項目には、要素IDを指定してください。
シェイプ！プラグイン設定
- NOTE: メモ用
- 説明： プラグイン設定の説明用
- プラグイン有効： チェックするとプラグインが有効
- スペースID： スペースを識別するID
- 多言語： ボタン名を３か国語別に設定
- 画像サイズ縮小： レコード保存時に背景画像のサイズを縮小
- シェイプ設定： 図形の枠線・背景色などを設定
- 手書き設定： 手書きモードの線や色を設定
- テキスト設定： テキスト図形の枠線・背景色などを設定
- スペースID： スペース項目の要素ID
- ボタン： ヘッダー部に表示するボタン表示の有無
- ボタン名： ボタン名と図形編集ダイアログに表示
- 概要： 図形編集ダイアログに表示
- 添付ファイル： 画像を保存する添付ファイル項目を指定
- ファイル名： 画像を保存時のファイル名
- 横： 画像のサイズ[px]
- 縦： 画像のサイズ[px]
- 表示縦： 画像の表示サイズ[px]
- 変更不可： 画像追加後、編集不可にする
シェイプ設定： 図形の枠線・背景色などを設定
チェックしたアイコンが、シェイプ選択に表示されます。
左端をドラッグして、位置を変更できます。
線の色・背景色がアイコンに反映されます。
手書き設定： 手書きモードの線や色を設定
チェックしたアイコンが、シェイプ選択に表示されます。
線の幅・線の色がアイコンに反映されます。
テキスト設定： テキスト図形の枠線・背景色などを設定
チェックしたアイコンが、シェイプ選択に表示されます。
「テキスト」に指定した内容が、テキスト図形配置時に表示されます。
シンボル・線の色・背景色・フォント色がアイコンに反映されます。
テキストの内容がテキストボックス追加時に表示されます。
注意事項
・既に、JavaScript によるカスタマイズを行っているアプリの場合、処理が競合して、エラーになる場合があります。その場合は、該当するアプリでプラグインの使用を中止してください。
・フォームを変更した場合は、プラグインを再設定してください。
・画像サイズが大きい場合、画面表示・更新に時間がかかる場合があります。画像サイズは、必要最小限にしましょう。