ホーム > 使い方 > 手書きの仕組み

手書きの仕組み

RayPenでは手書きの署名用の画面だけを提供します。このため、ユーザがこの画面で手書きの署名を実行するためには、開発者がこの画面をVisualforceページに埋め込み、ユーザがそのページを表示できるようにタブやメニューを追加する必要があります。

gcrp:RayPenコンポーネント

このVisualforceコンポーネントをVisualforceページに配置すると、ユーザに手書きの署名画面を提供できます。署名された結果は画像として添付ファイルに格納されます。添付ファイルが格納された場所は、Signatureオブジェクトのレコードで参照できます。

画面の説明

gcrp:RayPenコンポーネントをVisualforceページに配置すると、Salesforceモバイルアプリでは、gcrp:RayPenコンポーネントを配置した部分に次のように署名パッドが表示されます。

ユーザがまだ署名していない場合、プレースホルダ(placeholder)が表示されます。
ユーザが署名操作を行うと、プレースホルダの代わりに署名の画像が表示されます。

ユーザがプレースホルダをタップすると、次のような手書きの画面が表示されます。

署名する契約書のタイトル(titleText)を表示します。
署名した内容を消去します。
署名の説明文(footnote)を表示します。
署名した内容を破棄するボタン(cancelButtonText)です。
署名した内容を確定するボタン(okButtonText)です。

gcrp:RayPenコンポーネントの属性

RayPenコンポーネントの属性を変更すると、手書きの署名画面の外観を変更できます。

属性名	属性型	説明
cancelButtonText	String	署名の結果を破棄する「キャンセル」ボタンのテキスト。既定値は「Cancel」。
currentSignatureId	String	表示する署名のID。署名の結果を表示しない場合、空欄にします。
footnote	String	署名パッドの下部のテキスト(footnote)。既定値は「Please read the content before you sign.」。
footnoteColor	String	署名パッドの下部のテキスト(footnote)の色。既定値は「#CCCCCC」。
imageHeight	Integer	署名画像の高さ。
imageWidth	Integer	署名画像の幅。
onSignatureComplete	ApexPages.Action	署名が完了したときのハンドラ。このアクションを使用して、署名結果を処理します。
okButtonText	String	署名の結果を確定する「OK」ボタンのテキスト。既定値は「OK」。
placeholder	String	署名がないときのメッセージ（プレースホルダ）です。既定値は空文字。
styleClass	String	open-signature-padボタンのCSSクラス名。
style	String	open-signature-padボタンのスタイル。
reRender	String	onSignatureCompleteアクションが実行されたときに再描画するターゲット。
strokeWidth	Integer	署名のストロークの幅。既定値は「2」。
strokeColor	String	署名のストロークの色。既定値は「#000000」。
signatureImageStyleClass	String	署名画像のCSSクラス名。
signatureImageStyle	String	署名画像のスタイル。
signatureLineColor	String	署名のガイド線の色。ガイド線とは署名パッドの下部に表示される水平線です。既定値は「#CCCCCC」。
signatureBackgroundColor	String	署名パッドの背景色。既定値は「#FFFFFF」。
signaturePadOrientation	String	署名パッドの向き。横向きの場合はlandscape、縦向きの場合はportrait。既定値は「landscape」。
titleTextColor	String	タイトルのテキストの色。既定値は「#000000」。
titleText	String	タイトルの文字列。既定値は「Signature Title」。
id	String	ページの他のコンポーネントがカスタムコンポーネントを参照できるようにする識別子。指定されていない場合、一意の識別子が自動的に生成されます。これはVisualforceカスタムコンポーネントのデフォルトで生成される属性です。
rendered	Boolean	カスタムコンポーネントをページに表示するかどうかを指定する boolean 値。指定されていない場合、この値はデフォルトの true に設定されます。これはVisualforceカスタムコンポーネントのデフォルトで生成される属性です。

gcrp:RayPreviewコンポーネントの属性

RayPreviewコンポーネントの属性を変更すると、プレビュー画面の外観を変更できます。

属性名	属性型	説明
contentDocumentId	String	プレビューに表示するドキュメントのID。通常は「069」で開始されます。例: 069f200000429xV
styleClass	String	open-previewボタンのCSSクラス名。
style	String	open-previewボタンのスタイル。
text	String	open-previewボタンのテキスト。
id	String	ページの他のコンポーネントがカスタムコンポーネントを参照できるようにする識別子。指定されていない場合、一意の識別子が自動的に生成されます。これはVisualforceカスタムコンポーネントのデフォルトで生成される属性です。
rendered	Boolean	カスタムコンポーネントをページに表示するかどうかを指定する boolean 値。指定されていない場合、この値はデフォルトの true に設定されます。これはVisualforceカスタムコンポーネントのデフォルトで生成される属性です。

gcrp:Signatureオブジェクト

署名の結果が格納されるオブジェクトです。

項目の表示ラベル	API参照名	データ型	説明
名前	Name	自動番号	署名を識別するためのIDです。書式は「SIG-{0000000000}」。
AttachmentId	gcrp__AttachmentId__c	テキストエリア(255)	画像化した署名の添付ファイルのIDです。
Signature Image	gcrp__SignatureImage__c	数式 (テキスト)	署名の画像です。Salesforceの画面に埋め込んだり、「スマレポ!」のレポートなどに埋め込むこともできます。
ImageHeight	gcrp__ImageHeight__c	数値(18)	画像サイズの高さです。
ImageWidth	gcrp__ImageWidth__c	数値(18)	画像サイズの幅です。

gcrp:RayPenコンポーネントの使用例

手書きパッドの組み込みを参照してください。

gcrp:RayPreviewコンポーネントの使用例

PDFファイルの生成とプレビュー表示を参照してください。