2021/04/27

Salesforceのサイト機能とは?注意点や設定方法をサンプルを用いてご紹介

 
  

Salesforceにおけるサイトとは?

Salesforceのサイトとは、分析やワークフローの管理、プログラマブルロジックなどのLightningプラットフォームの機能を使用してカスタムページやWebを作る機能です。 サイトでは、Siteやcookieを利用して、Apexを使ったSalesforceのサイトを管理できます。主にマーケティングを行うことに使用し、サイトの作成や構築、公開も画面上でおこなうことが可能です。 テキストや画像、動画だけでなく、ソーシャルウィジットのレイアウトを調製することもできます。HTMLの知識がなくてもSalesforceでサイトが作れるので、商品を紹介するページや会社のホームページなどを作るということに活用できます。

Salesforceのサイトの概要

Salesforceのサイトに関する説明をします。Apexで作成する方法やSite.comを使用した作成方法を紹介します。Site.comはSalesforceでマーケティングを行うために開発された管理システムです。 テキストや画像、動画、ソーシャルウィジットなどのレイアウトサイトをドラッグとドロップで作ることが可能で、クラウドを通じて公開もすぐにできます。Salesforceとリアルタイムで連携します。 Site.comでは公開者の権限が必要になり、サイトの作成や削除、サイトのインポートやエクスポート、複製、ページの作成やテンプレートの作成、スタイルシートや画像などデータの作成や編集、サイトページのプレビューが可能です。 他にも寄稿者というものがあり、ページ作成や画像などのインポート編集、サイトのプレビューができます。

サイトの設定方法

Salesforceのサイトの設定方法にはいくつかの方法があります。ひとつは、Apexを利用してサイトを設定する方法と、Site.comなどを利用して画面から作成する方法です。 ApexからSalesforceのサイトを設定する方法は、サンプルコードを用いて設定方法を説明します。画面より設定する方法は、例を用いながら説明します。Apexでコードを作成する方法や画面から作成する方法を参考にしてみてください。 画面から作成する方法はサイトのデザインを確認しながらSalesforceのサイトを作ることができます。Salesforceのサイト設定は、方法がさまざまなので、自分に合った方法、ツールを見つけるといいでしょう。

画面から設定

Salesforceのサイトを画面から設定します。Site.comを使用した場合の方法をご紹介します。 最初は個人情報の画面から「Site.com Contributor ユーザ」や「Site.com Publisher ユーザ」と書いてあるチェックボックスにチェックしましょう。Salesforceのサイトを作成するのに簡単な例を用いて説明します。ヘッダ、フッタ、サイドバーのあるサイトです。

ヘッダとフッタの作成方法

サイトのテンプレートを作成でのヘッダとフッタについて説明します。まず、サイトのテンプレートを用意します。ページテンプレートを選択して、「新規ページテンプレート」ボタンをクリックしましょう。ページ名を入力してレイアウトを決めます。 エディタ画面が開き、左にあるサイドバーから「カスタムコード」を選択し、編集画面のヘッダ部分にドラッグしましょう。ドロップ後にコード編集をするコードが表示されます。HTMLで直接編集することも可能です。 フッタの編集は、左にあるサイドバーから「コンテンツブロック」を選択し、編集画面のフッタ部分にドラッグします。コンテンツブロックはリッチテキストエディタを使っているので、HTMLを使用せずに編集が可能です。

フッタとメニューの作成方法

Salesforceのサイトのメニュー作成について説明します。 メニューに関しては、左のサイドバーから「メニュー」を選択し、編集画面のメニューを作成したいに移動させます。メニューは登録されている画面から自動的に作り出されるため、編集中はページがないので、表示されません。 最後に編集画面の右側を右クリックし、「編集可能にする」にチェックをつけます。編集可能にすることによって、指定した部分に各ページのコンテンツ内容を見ることができるようになります。 Salesforceのサイト作成のテンプレートが1ページ完成しました。他のページも同様に作成します。

ページ作成とプレビュー

ページの作成方法とプレビューについて説明します。概要タブに戻り、サイトページを選択し、新規ボタンで「サイトページ」を選択しましょう。ページ名を入力し、最初に作成したテンプレートを選びます。 作成したテンプレートは右にあるパネルだけで編集が可能です。概要ページや製品ページ、提携企業の情報など作りたいページに合わせて編集します。ページが完成したら、プレビューでページを確認します。 概要に戻り、上の方にあるプレビューボタンをクリックしましょう。プレビューが無効になっている場合は、「匿名プレビューを有効化」を選択します。その後に「匿名プレビューを表示」を選択し、プレビューでSalesforceのサイトを確認しましょう。 問題がなければ、Salesforceのドメインを追懐します。ドメインを作成したサイトに当てはめ、サイトを公開して完成です。

ApexでサイトURLを書き換える

Apexを用いたURLの書き換えを含む管理方法について説明します。作成されたApexクラスは、インターフェースを利用しましょう。サンプルコードは以下になります。 global class yourClass implements Site.UrlRewriter { global PageReference mapRequestUrl(PageReference yourFriendlyUrl) global PageReference[] generateUrlFor(PageReference[] yourSalesforceUrls); } SalesforceのサイトURLを書き換える場合は、$Pageマージ変数を含む!URLFOR関数を使用します。以下の例では、myPageというページにリンクさせます。

SalesforceサイトのURLを追加する場合

ApexでサイトのURLを書き換えを追加する方法を説明します。Salesforceでサイトの書き換えを追加する場合は、「設定」から検索ボックスに「サイト」と入力し、「サイト」という項目を選択しましょう。 新しくサイトを作成するならば「新規」、サイトを編集するのであれば「編集」を選択して「サイトの編集」ページで、「URL書き換えクラス」の「Apexクラス」をクリックし保存するのです。 確認の際は実際にサイトを開き、URLを確認します。サンプルコードは以下になります。
<apex:page standardController=""Account"">
    <apex:detail relatedList=""false""/>
</apex:page>

<apex:page standardController=""contact"">
    <apex:pageBlock title=""Parent Account"">
        <apex:outputLink value=""{!URLFOR($Page.mycontact,null,
                [id=contact.account.id])}"">{!contact.account.name}
                </apex:outputLink>
    </apex:pageBlock>
   <apex:detail relatedList=""false""/>
</apex:page>

global with sharing class myRewriter implements Site.UrlRewriter {

    //Variables to represent the user-friendly URLs for
    //account and contact pages
    String ACCOUNT_PAGE = '/myaccount/';
    String CONTACT_PAGE = '/mycontact/';
    //Variables to represent my custom Visualforce pages
    //that display account and contact information
    String ACCOUNT_VISUALFORCE_PAGE = '/myaccount?id=';
    String CONTACT_VISUALFORCE_PAGE = '/mycontact?id=';

    global PageReference mapRequestUrl(PageReference
            myFriendlyUrl){
        String url = myFriendlyUrl.getUrl();

        if(url.startsWith(CONTACT_PAGE)){
            //Extract the name of the contact from the URL
            //For example: /mycontact/Ryan returns Ryan
            String name = url.substring(CONTACT_PAGE.length(),
                    url.length());

            //Select the ID of the contact that matches
            //the name from the URL
            Contact con = [SELECT Id FROM Contact WHERE Name =:
                    name LIMIT 1];

            //Construct a new page reference in the form
            //of my Visualforce page
            return new PageReference(CONTACT_VISUALFORCE_PAGE + con.id);
        }
        if(url.startsWith(ACCOUNT_PAGE)){
            //Extract the name of the account
            String name = url.substring(ACCOUNT_PAGE.length(),
                    url.length());

            //Query for the ID of an account with this name
            Account acc = [SELECT Id FROM Account WHERE Name =:name LIMIT 1];

           //Return a page in Visualforce format
            return new PageReference(ACCOUNT_VISUALFORCE_PAGE + acc.id);
        }
        //If the URL isn't in the form of a contact or
        //account page, continue with the request
        return null;
    }
    global List generateUrlFor(List
            mySalesforceUrls){
        //A list of pages to return after all the links
        //have been evaluated
        List myFriendlyUrls = new List();

        //a list of all the ids in the urls
        List accIds = new List();

        // loop through all the urls once, finding all the valid ids
        for(PageReference mySalesforceUrl : mySalesforceUrls){
        //Get the URL of the page
        String url = mySalesforceUrl.getUrl();

            //If this looks like an account page, transform it
            if(url.startsWith(ACCOUNT_VISUALFORCE_PAGE)){
                //Extract the ID from the query parameter
                //and store in a list
                //for querying later in bulk.
                        String id= url.substring(ACCOUNT_VISUALFORCE_PAGE.length(),
                        url.length());
                        accIds.add(id);
            }
        }

    // Get all the account names in bulk
    List  accounts = [SELECT Name FROM Account WHERE Id IN :accIds];

    // make the new urls
    Integer counter = 0;

    // it is important to go through all the urls again, so that the order
    // of the urls in the list is maintained.
    for(PageReference mySalesforceUrl : mySalesforceUrls) {

       //Get the URL of the page
       String url = mySalesforceUrl.getUrl();

       if(url.startsWith(ACCOUNT_VISUALFORCE_PAGE)){
         myFriendlyUrls.add(new PageReference(ACCOUNT_PAGE + accounts.get(counter).name));
         counter++;
       } else {
         //If this doesn't start like an account page,
         //don't do any transformations
         myFriendlyUrls.add(mySalesforceUrl);
       }
    }

    //Return the full list of pages
    return myFriendlyUrls;
  }

}

Salesforceのサイトの注意点

Salesforceのサイトに関していくつか注意する必要があります。まず、SalesforceのサイトURLをApexを用いて書き換える場合、クラスやメソッドがグローバルであること、Apexクラスにメソッドを指定することです。 また、Apexクラスにメソッドを指定しないときはnullにします。受信するURLは標準ページや画像には対応できないので注意です。次にSite.comに関する注意点を説明します。 Salesforceのサイトにデータを表示したいときは、Site.comとSalesforceでデータ連携が必要です。Site.com Studioを開いて、概要タブの「サイトの設定」から「ゲストユーザプロファイル」のリンクを開きます。 Salesforceのプロファイル画面が出てくるので、「標準オブジェクト権限」や「カスタムオブジェクト権限」から接続したいものを選びましょう。

Salesforceでサイトを活用しよう

今回は、Salesforceのサイト機能について紹介しました。 Salesforceのサイト機能には、画面から設定する方法とApexを用いて設定する方法があります。サンプルコードを用いてそれぞれの設定方法、注意点を説明しました。 Salesforceでのサイト設定は商品の紹介するページを作成する、会社のホームページを作るなど使用する場面も多いので、ぜひ活用できるようにしましょう。]]>

ITエンジニアへのキャリアチェンジならキャリアチェンジアカデミー

この記事の監修者・著者

株式会社オープンアップITエンジニア
株式会社オープンアップITエンジニア
未経験からITエンジニアへのキャリアチェンジを支援するサイト「キャリアチェンジアカデミー」を運営。これまで4500人以上のITエンジニアを未経験から育成・排出してきました。
・AWS、salesforce、LPICの合計認定資格取得件数:2100以上(2023年6月時点)
・AWS Japan Certification Award 2020 ライジングスター of the Year 受賞

おすすめの動画

  • 【未経験からIT業界へ転職するなら】相談窓口とスキルの獲得はここで解決!IT転職が一気に有利に!【キャリアチェンジアカデミー】

  • 【費用一切不要】未経験からIT業界へ転職するならまずはここへ相談!【キャリアチェンジアカデミー】

  • 【何のエンジニアになれるのか?】未経験からITエンジニアを目指すとこんな道がある【キャリアチェンジアカデミー】