手書きパッドの組み込み

ここでは、RayPenをVisualforceページに配置し、ユーザによる手書きの署名と、署名結果を表示する手順を説明します。なお、ここで説明する内容はサンプルパッケージでインストールすることもできます。

1. 署名を格納するカスタムオブジェクトを作成する

まず、署名を保存するためにカスタムオブジェクトを作成します。

  1. Salesforce Classicの場合、「設定 > 作成 > オブジェクト」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > オブジェクトおよび項目 > オブジェクトマネージャ」をクリックする。
  2. Salesforce Classicの場合は「新規カスタムオブジェクト」ボタン、Lightning Experienceの場合は「作成 > カスタムオブジェクト」をクリックする。
  3. カスタムオブジェクトの情報に次の値を設定し、「保存」をクリックする。
    • 表示ラベル: SurgeryAgreement
    • オブジェクト名: Surgery_Agreement
    • レコード名: Surgery No.
    • データ型: 自動採番
    • 表示形式: SGRYAG-{00000000}
    • 開始番号: 0

作成した「SurgeryAgreement」カスタムオブジェクトに、次のカスタム項目を作成します。

項目の表示ラベル API参照名 データ型 説明
AgreementText AgreementText__c ロングテキスト(131072) 契約の文章
Date Date__c テキストエリア(255) 署名した日付
DoctorTitle DoctorTitle__c テキストエリア(255) 医師名
PatientName PatientName__c テキストエリア(255) 患者名
Patient Signature Patient_Signature__c Lookup(Signature) 署名のルックアップ
PDFPageUrl PDFPageUrl__c URL(255) 将来の拡張のための予約
SignatureId SignatureId__c テキスト(255) 署名のID
SignatureTitle SignatureTitle__c テキストエリア(255) 署名のタイトル
Title Title__c テキストエリア(255) タイトル

2. 署名を保存するコントローラを作成する

次に、署名を書き込むためのコントローラを作成します。次の手順ではPC(Mac)のブラウザを使用します。

  1. Salesforce Classicの場合、「設定 > ビルド > 開発 > Apexクラス」を開く。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > プラットフォームツール > カスタムコード > Apexクラス」を開く。
  2. 「新規」ボタンをクリックし、「Apex Class」に次のコードを貼り付け、「保存」をクリックする。
public with sharing class SurgeryAgreementPageController {
    
    
    public string defaultAgreementText = '私は術前、担当医師より手術に関して十分な説明をうけ了解いたしました。よって貴院における手術の実施に同意いたします。なお手術中、他の疾患が発見された場合や不測の事態が生じた場合には、それに応じた適切な処置をとられることに同意いたします。';
    public string getDefaultAgreementText(){
        return this.defaultAgreementText;
        
    }
    
    public string defaultAgreementTitle = '手術同意書';
    public string getDefaultAgreementTitle(){
        return this.defaultAgreementTitle;
    }
    public string defaultAgreementDate = Datetime.now().format('yyyy年MM月dd日');
    public string getDefaultAgreementDate(){
        return this.defaultAgreementDate;
    }
    
    public string defaultSignatureTitle = '署名欄';
    public string getDefaultSignatureTitle(){
        return defaultSignatureTitle;
    }
    public string defaultDoctorTitle =  '院長 殿';
    public string getDefaultDoctorTitle(){
        return defaultDoctorTitle;
    }
    
   
    public Surgery_Agreement__c currentAgreement{get{
        if (!Surgery_Agreement__c.sObjectType.getDescribe().isAccessible()){return null;}

        PageReference currentPage = apexpages.currentPage();
        Map<string, string> parameters = currentPage.getParameters();
        string currentAgreementId = parameters.get('agreementId');
        
        return this.getAgreementById(currentAgreementId);
    }}
    
    public string currentAgreementSignatureId;
    public string getCurrentAgreementSignatureId(){

        if (!Schema.sObjectType.Surgery_Agreement__c.fields.signatureId__c.isAccessible()){return '';}
        if (this.currentAgreement != null){
            return this.currentAgreement.signatureId__c;
        }else{
            return '';
        }
    }
    
    public Surgery_Agreement__c savedAgreement;
    
    
    public Surgery_Agreement__c signAgreement(string agreementId, string signatureId){
        if (!Surgery_Agreement__c.sObjectType.getDescribe().isAccessible()){return null;}

        if (!Surgery_Agreement__c.sObjectType.getDescribe().isUpdateable()){return null;}

        Surgery_Agreement__c agreement = getAgreementById(agreementId);
        if (agreement == null){
            return null;
        }
        agreement.signatureId__c = signatureId;
        agreement.Patient_Signature__c = signatureId;
        
        update agreement;
        
        return agreement;
    }
    
    public Surgery_Agreement__c getAgreementById(string agreementId){
        if (!Surgery_Agreement__c.sObjectType.getDescribe().isAccessible()){return null;}
        
        if (String.isEmpty(agreementId)){
            return null;
        }
        
        Surgery_Agreement__c agreement = [select AgreementText__c, SignatureId__c  from Surgery_Agreement__c where Id=:agreementId limit 1];
        return agreement;
    }
    
    
    public PageReference onPatientSignatureComplete(){
        if (!Surgery_Agreement__c.sObjectType.getDescribe().isCreateable()){return null;}

        Surgery_Agreement__c agreement  = new Surgery_Agreement__c();
        agreement.Date__c = this.defaultAgreementDate;
        agreement.DoctorTitle__c = this.defaultDoctorTitle;
        agreement.SignatureTitle__c = this.defaultSignatureTitle;
        agreement.AgreementText__c = this.defaultAgreementText;
        
        insert agreement;
        
        
        this.signAgreement(agreement.Id, patientSignatureId);
        this.savedAgreement = agreement;
        return null;
    }

    public Boolean getCurrentSignatureExists(){
      return this.savedAgreement != null;
    }
    public string patientSignatureId{get;set;}
}

3. 署名パッドを表示する

次に、Visualforceページを作成して署名パッドを表示します。次の手順ではPC(Mac)のブラウザを使用します。

  1. Salesforce Classicの場合、「設定 > 開発 > Visualforceページ」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > カスタムコード > Visualforceページ」をクリックする。
  2. 「新規」ボタンをクリックする。
  3. 「表示ラベル」と「名前」に「Surgery_Agreement」と記入する。
  4. 「Lightning Experience、Lightning コミュニティ、およびモバイルアプリケーションで利用可能」をオンにする。
  5. 「Visualforce Markup」に次の内容を入力し、「保存」をクリックする。
<apex:page controller="SurgeryAgreementPageController" standardStylesheets="false">

    <h1>
        {!defaultAgreementTitle}
    </h1>
    <div>
        {!defaultDoctorTitle}
    </div>
    <div>
        {!defaultAgreementText}
    </div>
    <div>
        {!defaultAgreementDate}
    </div>
    
    <div>
        {!defaultSignatureTitle}

         <div class="signature-pad-container">
            <gcrp:RayPen placeholder="署名する" 
                              styleClass="signature-button"
                              signatureImageStyle="max-width: 200px; max-height: 100px;"
                              currentSignatureId="{!patientSignatureId}"
                              onSignatureComplete="{!onPatientSignatureComplete}"

                              footNote="署名の前に契約書を必ずお読みください"
                              footNoteColor="#cccccc"

                              signatureLineColor="#cccccc"
                              titleText="同意書"
                              titleTextColor="#000000"
                              okButtonText="OK"
                              cancelButtonText="キャンセル"
                              signaturePadOrientation="portrait"                              
                              />
        </div>
        
    </div>

    <style>
    .signature-pad-container{
        max-width: 200px;
        max-height: 100px;
        width: 200px;
        height: 100px;
        border: 1px solid black;
        background-color: white;
        text-align: center;
    }
    
    .signature-button{
        
        width: 200px !important;
        height: 100px !important;
        background-color: white !important;
        border: none !important;
        -webkit-appearance: none;
        background-image: none !important;
        box-sizing: border-box;
        border-radius: unset !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .signature-image{
    }
    </style>
</apex:page>

次に、作成したVisualforceページをSalesforceモバイルアプリから表示可能にします。

  1. Salesforce Classicの場合、「設定 > ビルド > 作成 > タブ」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「プラットフォームツール > ユーザインタフェース > タブ」をクリックする。
  2. 「Visualforceタブ」の「新規」ボタンをクリックする。
  3. 「Visualforceページ」に「Surgery_Agreement」を選択する。
  4. 「タブの表示ラベル」に「Surgery Agreement」を入力する。
  5. 「タブ名」に「Surgery_Agreement_Tab」を入力する。
  6. 「タブスタイル」に任意のスタイルを選択する。
  7. 「次へ」をクリックし、タブをプロファイルに割り当て、保存する。

作成したタブをSalesforce1のナビゲーションメニューに追加します。

Salesforce Classicの場合:

  • 「設定 > 管理 > モバイル管理 > Salesforce ナビゲーション」で、Salesforce1のナビゲーションメニューにタブを追加する。

Lightning Experienceの場合:

  • 歯車アイコンをクリックした後「設定 > プラットフォームツール > アプリケーション > モバイルアプリケーション > Salesforce > Salesforce ナビゲーション」で、Salesforce1のナビゲーションメニューにタブを追加する。

4. 動作を確認する

次の手順ではスマートフォンまたはiPadのSalesforceモバイルアプリを使用します。

  1. Salesforceモバイルアプリを起動し、Salesforceにログインする。
  2. ナビゲーションメニューから「Surgery Agreement」をタップする。
  3. 「署名する」をタップする。
  4. 「同意書」画面で、手書きを試す。
  5. 「OK」ボタンをクリックする。
  6. Visualforceページに保存された署名が表示されることを確認する。
Copyright © 2018 GrapeCity inc. All rights reserved.