Menu

CRMのプロが書くマーケティングBLOG

Salesforceで、取引先責任者の登録フォームをつくる方法

BtoBマーケティングのプロ

Salesforceで取引先責任者の登録フォームを「シンプルなものでいいからつくりたい」と思っている方向けに書いたブログ記事です。今回は、Salesforceの「Force.com Sites」機能を利用した取引先責任者（＋取引先）のシンプルな登録フォームを作成し公開する方法をざっと紹介します。

※コーディング知識に明るい方は、今回紹介した内容を少し改変するだけで、それなりのフォームを作成できると思います。

なお、このブログ記事は、記述内容の正確性に重点を置いて作成していますが、正確性を完全に保証するものではありません。ご紹介している内容の利用は、テストの実施を含めて各自の責任でお願いします(当社は一切の責任を負いかねます)。また、公開しているソースコードは改変も含めて当社へのご連絡なしに自由に利用いただけますが、再販・転売はご遠慮ください。

仕様

今回紹介するフォームは、「Salesforceの取引先と取引先責任者に以下の項目を登録する」という仕様です。

取引先：

  • 取引先名（必須）
  • 電話
  • Webサイト
  • 取引先責任者：
  • 姓
  • 名
  • 部署
  • 電話
  • メール
  • 役職

※重複判断について：取引先は、同一の取引先名がある場合は同一のデータと判断します。また、取引先責任者は、同一のメールアドレスがある場合は同一のデータと判断します。なお、同一と判断した場合、両オブジェクトともに最終更新日時のもっとも新しいデータを入力値で上書き更新します（入力値が未入力の項目は更新しません）。

概要

以下6つのステップで、フォームの作成から公開までをおこないます。なお、テストに関する作業は省略しています。事前にSandbox等の環境で入念にテストしてください。

  1. 処理が何も記述されていない空のページを3つ作成します。
    ※入力、確認、完了ページの3画面分です。Visualforceを利用します。
  2. データの登録、更新を行う内部処理を作成します。
    ※Apexを利用します。
  3. スタイルシートを作成、登録します。
  4. 空のページにコンテンツを記述します。
  5. サイト登録をおこないます。
  6. 権限設定をおこないます。

詳細

1.?処理が何も記述されていない空のページを3つ作成します。

1-1. [設定] | [ページ]で、[新規]をクリックします。

ページの新規作成

ページの新規作成

※[設定]クリック後の「クイック検索」ボックスで機能名（今回であれば「ページ」）を入力すると、簡単に検索でき、該当機能にすばやくアクセスできます。

1-2. 以下の入力を行い、空のページを作成します。入力指定の無い項目はデフォルトのままでOKです。

  • 表示ラベル： 取引先責任者登録フォーム – 入力
  • 名前： inputContact
  • 説明： 取引先責任者登録フォームの入力画面です。
Visualforce ページ

Visualforce ページ

残り2ページを同様の作業で作成します。入力ページに続き、確認ページです。

  • 表示ラベル： 取引先責任者登録フォーム – 確認
  • 名前： confirmContact
  • 説明： 取引先責任者登録フォームの確認画面です。

最後に完了ページです。

  • 表示ラベル： 取引先責任者登録フォーム – 完了
  • 名前： finishContact
  • 説明： 取引先責任者登録フォームの完了画面です。

2. データの登録、更新を行う内部処理を作成します。

2-1. [設定] | [Apex クラス]から「新規」ボタンをクリックします。

Apex クラスの新規作成

Apex クラスの新規作成

この画面で、以下のコードを貼り付け、[Save]をクリックします。

public with sharing class CustomContactController {

    public CustomContactController() {
    }

    public Contact con {
        get {
            if (con == null) {
                con = new Contact();
            }
            return con;
        }
        set;
    }

    public Account acc {
        get {
        if (acc == null) {
            acc = new Account();
        }
        return acc;
        }
        set;
    }

    /**
     * 保存ボタン押下時のメイン処理でエラーが発生したか？
     * @return true:エラーあり false:エラーなし
     */
    public Boolean isExistErrors {
        get {
            return errorMessages.size() > 0;
        }
    }

    /**
     * 保存ボタン押下時のメイン処理で発生したエラーのリスト
     * @return エラー内容
     */
    public List<String> errorMessages {
        get {
            if (errorMessages == null) {
                errorMessages = new List<String>();
            }
            return errorMessages;
        }
        set;
    }

    /**
     * キャンセルボタン押下時、入力フォームへ遷移
     */
    public PageReference cancel() {
        return Page.inputContact;
    }

    /**
     * 確認ボタン押下時、確認フォームへ遷移
     */
    public PageReference confirm() {
        return Page.confirmContact;
    }

    /**
     * 保存ボタン押下時のメイン処理
     * 処理が正常終了時、完了フォームへ遷移
     * 処理が異常終了時、入力フォームへ遷移
     */
    public PageReference save() {

        try {
            // Salesforceに既に同一の取引先名があるかを確認（同一取引先名で更新日が最新のデータ1件を取得する）
            List<Account> existAccList = [SELECT Name, Phone, Website FROM Account WHERE Name = :acc.Name ORDER BY LastModifiedDate DESC LIMIT 1];

            // 存在する場合
            if (existAccList.size() > 0) {
                // 電話、Webサイトが入力されている場合において、Salesforceのデータと入力値が異なる場合は入力値をセット
                Account existAcc = existAccList[0];
                if (String.isNotBlank(acc.Phone) && !acc.Phone.equalsIgnoreCase(existAcc.Phone)) {
                    // 電話セット
                    existAcc.Phone = acc.Phone;
                }
                if (String.isNotBlank(acc.Website) && !acc.Website.equalsIgnoreCase(existAcc.Website)) {
                    // Webサイトセット
                    existAcc.Website = acc.Website;
                }
                acc = existAcc;
            }

            // 取引先の登録更新
            upsert acc;

            // 取引先責任者のメールアドレス入力がある時
            if (String.isNotBlank(con.Email)) {
                // Salesforceに既に同一のメールアドレスのデータがあるかを確認（同一メールアドレスで更新日が最新のデータ1件を取得する）
                List<Contact> existConList = [SELECT LastName, FirstName, Department, Phone, Email, Title, AccountId FROM Contact WHERE Email = :con.Email ORDER BY LastModifiedDate DESC LIMIT 1];

                // 存在する場合
                if (existConList.size() > 0) {
                    // 姓、名、部署、電話、役職が入力されている場合において、Salesforceのデータと入力値が異なる場合は入力値をセット
                    Contact existCon = existConList[0];
                    if (String.isNotBlank(con.LastName) && !con.LastName.equalsIgnoreCase(existCon.LastName)) {
                        // 姓セット
                        existCon.LastName = con.LastName;
                    }
                    if (String.isNotBlank(con.FirstName) && !con.FirstName.equalsIgnoreCase(existCon.FirstName)) {
                        // 名セット
                        existCon.FirstName = con.FirstName;
                    }
                    if (String.isNotBlank(con.Department) && !con.Department.equalsIgnoreCase(existCon.Department)) {
                        // 部署セット
                        existCon.Department = con.Department;
                    }
                    if (String.isNotBlank(con.Title) && !con.Title.equalsIgnoreCase(existCon.Title)) {
                        // 役職セット
                        existCon.Title= con.Title;
                    }
                    if (String.isNotBlank(con.Phone) && !con.Phone.equalsIgnoreCase(existCon.Phone)) {
                        // 電話セット
                        existCon.Phone = con.Phone;
                    }
                    con = existCon;
                }
            }
            // 上部で登録更新した取引先を取引先責任者にセット
            con.AccountId = acc.Id;

            // 取引先責任者の登録更新
            upsert con;

        } catch(Exception ex) {
            // エラー発生した為、入力フォームへ遷移
            errorMessages.add('システムエラーが発生しました。しばらくしてから再登録いただくか、別途お問い合わせください。');
            System.debug(ex);
            return Page.inputContact;
        }

        // 正常終了した為、完了フォームへ遷移
        return Page.finishContact;
    }
}
Apex Class

Apex Class

3. スタイルシートを作成、登録します。

3-1. [設定] | [静的リソース]から「新規」ボタンをクリックします。

静的リソース

静的リソース

3-2. 以下の入力を行い「保存」ボタンをクリックします。

  • 名前: ContactRegistrationFormStyle
  • 説明: 取引先責任者登録フォーム用のCSSファイルです。
  • ファイル: 以下のコードより「con_reg_form_style.css」という名前のファイル作成し、指定。
  • キャッシュコントロール: 公開
.required { color: red; }
 
div.errorMessages {
    color: #9C0006;
    border: solid #FFC7CE;
    background-color: #FFC7CE;
    margin: 0;
    padding: 0;
}
 
.errorMsg {
    color: #9C0006;
    margin : 0 0 15px 0;
    padding : 0;
}
静的リソースの編集

静的リソースの編集

4. 空のページにコンテンツを記述します。

4-1. [設定] | [ページ]で、上記「1-2.」で作成した空のページの一覧を表示します。

Visualforce ページ

Visualforce ページ

4-2. 「inputContact」ページの[編集]をクリックし、以下の「Visualforce Markup」の内容を入力して「保存」をクリックします。

<apex:page Controller="CustomContactController" sidebar="false" showHeader="false" standardStylesheets="false">
  <apex:stylesheet value=" {! URLFOR($Resource.ContactRegistrationFormStyle)} "/>

  <h1>取引先責任者登録フォーム</h1>

  <apex:outputText rendered="{!isExistErrors}" escape="false" value="<div class=errorMessages><dl><dt>エラー</dt>"/>
  <apex:repeat value="{!errorMessages}" var="errorMessage">
    <dd>{!errorMessage}</dd>
  </apex:repeat>
  <apex:outputText rendered="{!isExistErrors}" escape="false" value="</dl></div>"/>

  <apex:form >
    <p>情報を入力してください。<span class="required">*</span>は必須項目です。</p>

    <fieldset>
      <legend>取引先</legend>
      <dl>
        <dt>取引先名<span class="required">*</span></dt>
        <dd><apex:inputField value="{!acc.Name}"/></dd>

        <dt>電話</dt>
        <dd><apex:inputField value="{!acc.Phone}"/></dd>

        <dt>Web サイト</dt>
        <dd><apex:inputField value="{!acc.Website}"/></dd>
      </dl>
    </fieldset>

    <fieldset>
      <legend>取引先責任者</legend>
      <dl>
        <dt>姓<span class="required">*</span></dt>
        <dd><apex:inputField value="{!con.LastName}"/></dd>

        <dt>名</dt>
        <dd><apex:inputField value="{!con.FirstName}"/></dd>

        <dt>メール</dt>
        <dd><apex:inputField value="{!con.Email}"/></dd>

        <dt>部署</dt>
        <dd><apex:inputField value="{!con.Department}"/></dd>

        <dt>役職</dt>
        <dd><apex:inputField value="{!con.Title}"/></dd>

        <dt>電話</dt>
        <dd><apex:inputField value="{!con.Phone}"/></dd>
      </dl>
    </fieldset>
    <apex:commandButton action="{!confirm}" value="確認"/>
  </apex:form>
</apex:page>
Visualforce ページの編集

Visualforce ページの編集：inputContact

4-3. 「confirmContact」ページの「編集」リンクをクリックし、以下の「Visualforce Markup」の内容を入力して「保存」をクリックします。

<apex:page Controller="CustomContactController" sidebar="false" showHeader="false" standardStylesheets="false">
  <apex:form >
    <p>下記内容を登録します。本当によろしいですか？</p>
    <fieldset>
      <legend>取引先</legend>
      <dl>
        <dt>取引先名</dt>
        <dd><apex:outputField value="{!acc.Name}"/></dd>

        <dt>電話</dt>
        <dd><apex:outputField value="{!acc.Phone}"/></dd>

        <dt>Web サイト</dt>
        <dd><apex:outputField value="{!acc.Website}"/></dd>
      </dl>
    </fieldset>

    <fieldset>
      <legend>取引先責任者</legend>
      <dl>
        <dt>姓</dt>
        <dd><apex:outputField value="{!con.LastName}"/></dd>

        <dt>名</dt>
        <dd><apex:outputField value="{!con.FirstName}"/></dd>

        <dt>メール</dt>
        <dd><apex:outputField value="{!con.Email}"/></dd>

        <dt>部署</dt>
        <dd><apex:outputField value="{!con.Department}"/></dd>

        <dt>役職</dt>
        <dd><apex:outputField value="{!con.Title}"/></dd>

        <dt>電話</dt>
        <dd><apex:outputField value="{!con.Phone}"/></dd>
      </dl>
    </fieldset>
    <apex:commandButton action="{!cancel}" value="戻る"/>
    <apex:commandButton action="{!save}" value="保存"/>
  </apex:form>
</apex:page>
Visualforce ページの編集：confirmContact

Visualforce ページの編集：confirmContact

4-4. 「finishContact」ページの「編集」をクリックし、以下の「Visualforce Markup」の内容を入力して「保存」をクリックします。

<apex:page Controller="CustomContactController" sidebar="false" showHeader="false" standardStylesheets="false">
  <apex:stylesheet value=" {! URLFOR($Resource.ContactRegistrationFormStyle)} "/>
  <p>登録完了しました</p>
  <apex:outputLink value="http://synergylead.jp/">戻る</apex:outputLink>
</apex:page>

※登録完了後のページから遷移させたいページがある場合、以下のURL部分「http://synergylead.jp/」を変更します。
<apex:outputLink value=”http://synergylead.jp/”>戻る</apex:outputLink>

Visualforce ページ：finishContact

Visualforce ページ：finishContact

5. サイト登録をおこないます。

5-1. [設定] | [サイト]で、以下の内容を入力し、「私の Force.com ドメインの登録」をクリックします。ドメイン : お好きなドメイン名を入力してください。
※ここでは「sinamaketaro」と入力しています。一度登録すると変更することはできないので注意が必要です。

サイト

サイト

5-2. 「新規」ボタンをクリックします。

Sites

Sites

5-3. 以下の入力を行い「保存」ボタンをクリックします。

  • サイトの表示ラベル: 取引先責任者登録フォーム
  • サイト名: ContactRegistrationForm
  • サイトの説明: 取引先責任者登録フォームです。
  • デフォルト Web アドレス: inputcontact
  • 有効なサイトのホームページ: inputContact

※他はデフォルトのままでOKです。

サイトの編集

サイトの編集

6. 権限設定をおこないます。

6-1. [設定] | [サイト]で、今回作成したサイト「取引先責任者登録フォーム」のリンクをクリックします。

取引先責任者登録フォーム

取引先責任者登録フォーム

6-2. 「公開アクセス設定」ボタンをクリックし、今回作成したサイト専用のプロファイル画面を表示します。※このプロファイルはForce.com Sites専用のプロファイルです。[設定] | [プロファイル]では表示されないのでご注意ください。

取引先責任者登録フォーム プロファイル

取引先責任者登録フォーム プロファイル

6-3. 「項目レベルセキュリティ」の「取引先」の「参照」リンクをクリックします。

項目レベルセキュリティ：取引先の[参照]

項目レベルセキュリティ：取引先の[参照]

以下の項目に「参照可能」のチェックが入っているか確認します。

  • 取引先名
  • 電話
  • Web サイト
項目レベルセキュリティ：取引先名・電話・Web サイト

取引先 項目レベルセキュリティ：取引先名・電話・Web サイト

6-4. 上記「6-3.」と同様に、「項目レベルセキュリティ」の「取引先」の「参照」リンクをクリックし、以下の項目に「参照可能」のチェックが入っているか確認します。

取引先責任者：

  • 名前
  • メール
  • 部署
  • 役職
  • 電話
20140107_19_ContactPermissionCheck3-resized-600

取引先責任者 項目レベルセキュリティ：名前・部署・電話・メール・役職

6-5. 「標準オブジェクト権限」の「取引先」、「取引先責任者」それぞれに「参照」と「作成」にチェックを入れます。

標準オブジェクト権限

標準オブジェクト権限

6-6. 「有効なVisualforceページ」で「編集」ボタンをクリックし、以下のページを追加します。

  • inputContact
  • confirmContact
  • finishContact
有効な Visualforce ページ

有効な Visualforce ページ

6-7. [設定] | [サイト]で、「取引先責任者登録フォーム」の「有効化」をクリックします。※表示が「有効化」→「無効化」に更新されます。 「無効化」と表示されていれば公開完了です。

取引先責任者フォームの有効化

取引先責任者フォームの有効化

以上で終了です！

アクセスURLについて

本フォームへのアクセスURLは、お客様の情報を含んでいるため、セキュアなHTTPS通信でアクセスすることをおすすめします。HTTPS通信のURLは、単純にURL先頭の「http」を「https」に変更するだけでなく、ドメインも変更する必要があります。（「force.com」の前に「secure」を追加したものとなります。）

具体的なHTTPS通信のURL確認方法は以下のとおりです。

1. [設定] | [サイト]のサイトのURLをまずは確認します。

サイトのURLの確認

サイトのURLの確認

2. [設定] | [サイト]で、今回作成したサイト「取引先責任者登録フォーム」のリンクをクリックし、「カスタムURL」欄より「パス」が「/inputcontact」となっている「ドメイン名」の「○○○.secure.force.com」というドメイン名を確認します。こちらがHTTPS通信用のドメインです。下図の例では「symtaro.secure.force.com」です。

サイトの詳細

サイトの詳細

上記確認の結果、上図の例では「https://symtaro.secure.force.com/inputcontact」となります。

※Sandbox環境について：Sandbox環境では「カスタムURL」欄にはHTTPS通信用のドメイン名が表示されませんが、「http」を「https」に変更するのみでテストを行うことができます。ドメインの「force.com」の前に「secure」を付加する必要はありません。下図の例では「https://sinamaketaro.sb01.cs5.force.com/inputcontact」となります。

Sandbox環境の「カスタムURL」欄

Sandbox環境の「カスタムURL」欄

ただし、有効なSSL 証明書を持っていないため、画面表示に以下のような画面が表示されると思います。ブラウザによっては表示は異なりますが、「このまま続行」といったような選択をすると画面を表示することができます。

ブラウザの画面表示

ブラウザの画面表示

最後に

Force.com Sitesの機能についてはSalesforce社の以下のページに紹介があります。

  • Sites FAQ　※ざっと一読されることをおすすめします。

また、特定のオブジェクト向けにフォームを作成できるAppExchangeアプリもあります（英語です）。

  • FormAssembly　※「Web to any Salesforce object」とありますね。
  • ClickTools　※既存顧客向けアンケートに使われることが多いようです。

以上、「Salesforceで、取引先責任者の登録フォームをつくる方法」でした！

※記載されている内容は掲載当時のものであり、一部現状とは内容が異なる場合があります。ご了承ください。

PageTop
PageTop