使ってみよう Salesforce Community Cloud(下)

September 16, 2016 Naoki Kitaarashi

こんにちはアピリオ北嵐です。さてCommunity Cloudのセットアップ手順紹介の後半です。前半ではコミュニティ・サイトを立ち上げる手順を紹介しました。これまでの作業であなたの組織でカスタマー向けのコミュニティ・サイトが公開され、外部ユーザーがログインできるようになりました。標準機能を使って手軽にコミュニティ・サイトを立ち上げるのであればこのままでも良いのですが、もっといろいろカスタマイズしたいという方向けに、今回は詳しいカスタマイズ手順について紹介します。

Community Cloudは複数の既存サービスと新しい機能を統合しているため、設定は1カ所にまとまっておらず複数の箇所で行う必要があります。この点は慣れないと分かりづらい部分でしょう。始めに設定方法の概要について簡単に説明しておきます。

コミュニティ全体の設定は前回説明した「コミュニティ管理」から行います。この画面にはグローバルヘッダから遷移できます。

Screen Shot 2016-08-25 at 17.41.40

[コミュニティ管理画面]

基本的な設定はこのメニューから変更可能なのですが、パブリックな公開サイトはForce.comサイトを使って実現しているため、詳細な設定は「サイトの詳細」設定から行う必要があります。グローバールヘッダの [コミュニティ管理] - [Force.comに移動] をクリックすると「サイトの詳細」の設定画面が表示されます。

Force.comに移動

サイトの詳細

[サイトの詳細]の設定画面

この画面の一部の設定は「コミュニティ管理画面」の設定と重なっていますが、“有効なVisualforceページの指定” と“エラーページ”の指定はここからしかできません。また、この画面の「公開アクセス設定」ボタンを押すと、ログインせずにサイトを利用できるゲストユーザーに紐付くプロファイルが表示されますので、ゲストユーザーに対する詳細なアクセス権の設定はこのプロファイルを変更して下さい。Visualforceページに対する権限については「サイトの詳細」ページでの設定に連動して変更されるようです。

ゲストプロファイル

[ゲストユーザーに対するプロファイル]

このプロファイルで指定するのはゲストユーザーに対するアクセス権であることに注意して下さい。サイトにログインするユーザーに対するアクセス権は、今回のケースですと“Customer Community Plus User" および “Customer Community Plus Login User”プロファイル(この2つのプロファイルの違いについては前回の記事を参照)に対して割り当てる必要があります。例えば、ログインした会員のみが使用できるVisualforceページを作成した場合には、ゲストプロファイルにはアクセス権を割り当てず、前述の2つのプロファイルのみにアクセス権を割り当てます。一方、ゲストユーザーを含めて全てのユーザーが利用できるVisualforceページの場合は、ゲストプロファイルにのみアクセス権を割り当てます。ゲストプロファイルに対して権限を割り当てると、サイトを使う全てのユーザーに対して権限が適用されます。

ホーム画面の変更

デフォルトでは、ログインしていない状態でコミュニティ・サイトにアクセスした時にはログインページが表示されますが、このページを変更できます。下記の例ではコミュニティホームとしてVisualforceページ「CustomHome」を指定しています。

カスタムホーム 設定

[管理] - [ページ] のページ設定

 

<apex:page controller="DefaultController" cache="false"
 title="Home" 
 showHeader="true" sidebar="false" standardStylesheets="true"
 applyHtmlTag="true" applyBodyTag="true" docType="html-5.0">
 
 <div>
 カスタムホームです。
 </div>
</apex:page>

 

[CustomHome VFページ]

このページをログインしていない状態で表示すると下記のようになり、

カスタムホーム nologin

ログイン後は下記のように変わり、自動的に表示されるヘッダ部分にユーザー名と検索ボックスが表示されています。

カスタムホーム Login

デフォルト画面をログイン画面以外に変更すると、サイトにログインしていない状態でアクセスした際に強制的にログイン画面が表示されなくなるので、この点には注意して下さい。
本ブログでは詳しく説明しませんが、ページの設定の“サービスは利用できません”に静的リソースとして静的HTMLを含むzipファイルを指定することで、コミュニティサイトが利用できない場合に表示される画面をカスタマイズできます。詳しくはこちらを参照して下さい。

ログイン画面の変更

ログイン画面やパスワードの変更画面もカスタマイズできます。単にログイン画面のトーンを自社のものに変えたいだけであれば、ヘッダーを任意の画像に変更できます。

 

カスタムログイン設定1

[管理] - [ログイン&登録] のヘッダとフッター設定

設定を変更すると、下記のように標準のログイン画面に指定されたロゴが表示されるようになります。

Screen Shot 2016-08-25 at 13.45.43

ログイン画面全体を任意のVisualforceページに変更したい場合は、ログイン・セクションでVisualforceページを指定します。

Screen Shot 2016-08-25 at 13.43.52

[管理] - [ログイン&登録] のログイン設定

 

<apex:page controller="CustomLoginController" cache="true"
 title="ログイン" 
 showHeader="false" sidebar="false" standardStylesheets="false"
 applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" >
   <html>
     <body class="user-area">
       <apex:form styleClass="pure-form pure-form-aligned">
         <div class="body" ng-app="appMain">
           <div >
             <div style="color:blue;font-size:200%;text-align:center;border-bottom: 2px 
                  solid blue;padding-bottom:10px">アピリオ カスタマーコミュニティ</div>
             <div style="width:300px;margin:0 auto;padding-top:20px">
               <div style="padding:10px;color:red">
                 <apex:pageMessages id="error"/>
               </div>
               <div style="display:inline-block">
                 <label for="user">ユーザーID:</label><br/><br/>
                 <label for="password">パスワード:</label>
               </div>
               <div style="display:inline-block">
                 <apex:inputText value="{!username }" /><br/><br/>
                 <apex:inputSecret value="{! password }" id="password" />
               </div>
               <div style="padding-top:30px">
                 <apex:commandButton action="{!login }" value="ログイン"/>
               </div>
             </div>
           </div>
         </div>
       </apex:form>
     </body>
   </html>
</apex:page>

 

[CustomLogin VFページ]

 

public class CustomLoginController {
 public String username {get; set;}
 public String password {get; set;}
 
 //login to the Community site
 public PageReference login() {
   //jump to the page specified in the third argument after login
   return Site.login(username, password, '/CustomHome'); 
 } 
}

 

[CustomLogin Apexコントローラ]

カスタムログイン結果2

[カスタムログイン画面]

なお標準のログイン画面に存在した「パスワード再設定」と「社内ユーザーとしてログイン」機能は自動的には提供されませんので、必要なら自前で準備する必要があります。
また、設定の“内部ユーザーにコミュニティへの直接ログインを許可”をチェックすると、コミュニティのログイン画面から社内ユーザーのIDとパスワードを使ってサイトにログインできるようになります(チェックしないと、通常のログイン画面からログインする必要があります)。

Screen Shot 2016-08-25 at 14.05.42

[社内ユーザーが直接コミュニティにログインできるようにする]

外部ユーザーのセルフ登録の許可

管理者がコミュニティのユーザーを登録する方式ではなく、ユーザー自らがサインアップしてコミュニティのユーザーを作成できるように設定を変更できます。“外部ユーザーにセルフ登録を許可”をチェックすると、登録ページと作成するユーザーの情報を設定できるようになります。

外部ユーザーを許可設定

[管理] - [ログイン&登録] の外部ユーザーのセルフ登録の設定

“登録ユーザの割り当て先”ではユーザーを紐付ける取引先とプロファイルを選択します。上記の例では登録ページ自体は標準のものを使っています。設定を保存すると次回のログインから画面に“サインアップ”が表示されるようになります。

Screen Shot 2016-08-25 at 14.16.44

“サインアップ”をクリックするとユーザー登録のための画面が表示されます。

外部ユーザーサインアップ2

入力した情報でユーザーが作成されると、下記のようにSalesforceのユーザーが自動的に追加されます。

Screen Shot 2016-08-25 at 18.34.21

エラーページの変更

ApexやVisualforceページでエラーが発生した場合に表示されるエラーページを変更できます。この設定は「サイトの詳細」設定のエラーページセクションから行います。今回は汎用エラーページ(Exception)を変更しますが、それ以外のエラーページも変更できます。

設定エラーページ

[サイトの詳細] のエラーページ

標準で表示されるエラー画面は下記のようなデザインですが、

 

標準エラー画面

例えば、ロゴとエラー文言を変更したVisualforceページを指定すると、下記のようになります。

カスタムエラー画面

 

<apex:page showHeader="false" title="カスタムエラー" cache="false">
  <apex:define name="body">
    <apex:image url="{!URLFOR($Resource.appirioLogo)}"/>
    <center>
      <apex:panelGrid bgcolor="white" columns="1" style="align: center;">
        <br/><br/>
        <apex:panelGrid width="758" cellpadding="0" cellspacing="0" bgcolor="white"
                        columns="1" styleClass="topPanelContainer">
          <br/>
          <apex:outputPanel layout="block" styleClass="topPanel">
            <apex:panelGrid width="758" cellpadding="0" cellspacing="0" bgcolor="white"
                            columns="3">
              <apex:image url="{!URLFOR($Resource.SiteSamples, 'img/warning.png')}"/>
              <apex:panelGroup >
                <apex:outputText styleClass="title" value="{!$Label.site.error}">
                  <apex:param value="{!$Site.ErrorMessage}"/>
                  <!-- this parameter needs to be italic in the site.error label -->
                </apex:outputText>
                <br/><br/>
                管理者まで連絡をお願いします。
              </apex:panelGroup>
            </apex:panelGrid>
          </apex:outputPanel>
        </apex:panelGrid>
        <br/>
        <apex:messages />
        <br/>
      </apex:panelGrid>
    </center>
  </apex:define>
</apex:page>

 

[CustomHome VFページ]

 

今回Community Cloudのセットアップを行う際にネット上の情報をいろいろと調べてみましたが、“Community Cloud”を検索キーワードにするとあまりヒットせず、必要な情報を集めるには他のキーワード(Chatterコミュニティ、Force.com サイト、カスタマーポータルなど)で検索する必要がありました。Community Cloudが従来から提供されている複数のサービスを包含し、サービス自体の名称も変更されてきているためこうした状況になっているのですが、Community Cloudに不慣れな開発者にとってはちょっと非効率な状況です。本ブログではSummer'16環境でのセットアップ方法から基本的なカスタマイズ方法までを整理してみましたので、Community Cloudで開発を始める方の一助になれば幸いです。

本ブログでは従来から提供されているVisualforceページでの開発方法について紹介しましたが、新しいコミュニティ・サイトの開発方法として昨年のリリースよりLightningベースのコミュニティビルダーが提供されています。Salesforceでの開発がLightningベースに移行していく中、コミュニティビルダーも今後より進化していく事が予想されますので、コミュニティ・サイトのカスタマイズ方法も大きく変わっていくかもしれません。

当ブログ記事の記述にあたっては下記サイトの内容を参考にさせてもらいました。

・Synergy! LEAD パートナー向けコミュニティサイトを構築する
・Salesforce Communities 実装ガイド Summer'16

 

著者について

某大手SIベンダーを退職し2015年3月からアピリオの一員としてクラウドの世界に身を投じているシニアエンジニアです。Salesforceを極めようと精進していたら、いつの間にかエンタープライズのHerokuアプリ開発で再びJavaの世界に戻って来ている最近です。クラウドという広大な技術の波に翻弄されつつも、やはりクラウドは最高に面白いなと感じている毎日です。

Naoki Kitaarashi のコンテンツをもっと見る
戻る
Apexを使用してSpringCMからチャンク内の大きなドキュメントにアクセスする方法
Apexを使用してSpringCMからチャンク内の大きなドキュメントにアクセスする方法

2016年8月12日 by Satyanarayan Choudhary  本ブログはアピリオUSのテックブログにSatyanarayan Choudharyが寄稿した記事を抄訳したものです。 原文 ”How to...

次へ
使ってみよう Salesforce Community Cloud(上)
使ってみよう Salesforce Community Cloud(上)

こんにちはアピリオ北嵐です。プロジェクトでSalesforce Community Cloudを触る機会がありましたので、自分の備忘録も兼ねて今回はCommunity Cloudの基本的なセットアップ方法についてご...

アピリオまでお気軽にお問合せください

ご質問はこちら