More than 5 years have passed since last update.

株式会社LIFULL

Salesforce Visualforce + Apexで入力フォーム作成 (SalesforceからSlackへメッセージを通知する)

Last updated at 2018-12-18Posted at 2018-12-16

はじめに

SalesforceのVisualforceページ及びApexクラスで入力フォームを作成し、フォームから入力したメッセージをSlackへ通知するプログラムを作ってみました。

Salesforceではなるべく標準機能を活用した方が良く、むやみにVisualforceページやApexクラスは作らない方が良いとは思っておりますが、自分の単純な興味と勉強がてら、Developer Editionで試してみました。

入力フォームの挙動、実際のVisualforceとApexのソースは後述致します。

参考資料

Slack APIキー発行手順については、以下の記事を参考にさせて頂きました。ありがとうございます。

Slack API 推奨Tokenについて
https://qiita.com/ykhirao/items/3b19ee6a1458cfb4ba21

実行環境

・Salesforce Developer Edition

作成したVisualforce + Apex入力フォームについて

(1) 入力フォーム概要

VisualforceとApexで以下のような簡単な入力フォームを作りました。

(2) 入力フォームで入力する内容

入力フォームの各テキストエリアやテキストボックスでは、以下のような内容を入力します。

　・Chatwork投稿メッセージ及びメール本文
　・Chatwork投稿メッセージタイトル及びメール件名
　・メッセージ投稿先のChatworkルーム番号( https://www.chatwork.com/#!rid******** の ridより後ろの番号部分)
・Slackへメッセージを投稿する時のSlackチャネル名( メッセージ投稿先のSlackチャネル名を入力します)
　・送信先メールアドレス

入力フォームにある「Chatwork+Slack+メールでメッセージ送信」ボタンをクリックしますと、メッセージをSlackへ通知します。

本記事では例示用として、メッセージ投稿先のSlacチャネル名は「general　」として記載しています。

(3) 入力フォームから入力した内容のSlack通知

Salesforce Apexの入力フォームで「Chatwork+Slack+メールでメッセージ送信」ボタンをクリックすると、入力したメッセージがSlackチャネル「Channel」→「general」に通知されます。

Slack側の事前設定

Slackへのメッセージ通知はSlack APIを使用します。

まずは、以下の操作でSlack APIキーを発行します。

(1) Slackアカウントを発行します。

Webブラウザから以下へアクセスし、Slackアカウントを発行します。
本記事の例では、私のアカウント名(na0aaooq)を指定してSlackアカウントを作成します。

(2) 発行したSlackアカウントのワークスペースにサインインします。

Webブラウザから以下へアクセスし、Slackアカウントのワークスペースへサインインします。

(3) Slack Apps作成画面を開きます。

Webブラウザから以下へアクセスします。

(4) Slack Apps作成画面で「Create An App」をクリックします。

以下のようにSlack Appを作成します。

設定	入力する内容例
App Name	Example Salesforce Slack Info
Development Slack WorkSpace	na0aaooq (自分のSlackアカウントワークスペースを指定する)

「Create App」をクリックします。

(5) 「Slack Apps」 -> 「Settings」->「Basic Information」画面が表示されます。作成するSlack Appのアクセス可能なワークスペース等を指定します。

前述の操作により、作成した「Slack Apps」 -> 「Settings」->「Basic Information」画面が表示されます。

Salck Appがアクセス可能なワークスペース等を指定します。

「Add features and functionality」は「Bots」をクリックします。

「Install your app to your workspace | Please add at least one feature or permission scope to install your app.」で「permission scope」をクリックします。

設定	入力する内容例
Add features and functionality	Bots
Install your app to your workspace	Please add at least one feature or permission scope to install your app.

(6) 「Slack Apps」 -> 「Settings」->「Features」画面が表示されます。作成するSlack Appのスコープを指定します。

「Slack Apps」 -> 「Settings」->「Features」画面を下方向にスクロールして、「Scopes」の部分までスクロールします。

前述の操作で作成したAppへの通知として、「Scopes」->「Select Permission Scopes」->「Send messages as Example Salesforce Slack Info」を選択します。

「Save Changes」をクリックします。

(7) 「Slack Apps」 -> 「Settings」->「Features」画面が表示されます。作成するSlack Appをインストールします。

「Slack Apps」 -> 「Settings」->「Features」画面を上方向にスクロールして、「OAuth & Permissions」の部分までスクロールします。

「Install App to Workspace」をクリックします。

(8) 作成したSlack Appを「Autorize」します。

「This app was created by a member of your workspace, Slackアカウント名」と表示されるので、「Autorize」をクリックします。

Slack APIの動作確認

(1) 作成したSlack App及びSlack APIキーによるSlackメッセージ通知の動作確認を行います。

「Slack Apps」 -> 「Settings」->「Features」画面の「OAuth Tokens & Redirect URLs」を表示します。

「OAuth Tokens & Redirect URLs」の「OAuth Access Token」に、Slack App経由でSlackへメッセージを通知する為の、Slack APIトークンが表示されています。「Copy」をクリックします。(以下の例では、トークン文字列を消して掲載しています)

例えば、Slack APIのOAuthトークンが以下であるとします。

xoxp-4********8-4********0-5**********9-2******************************b

curlでSlack App経由でSlackへメッセージを通知できるかテストします。
curlで指定するパラメータは以下の通りです。

設定	入力する内容例
Token	作成したSlack AppのSlack APIキー(OAuthトークン)
channel	メッセージ通知先として指定したSlackワークスペースの通知先チャネル
text	Slackチャネルに通知するメッセージ内容

以下のようにcurlを実行します。

$ curl -X POST -d "token=xoxp-4********8-4********0-5**********9-2******************************b" -d "channel=general" -d "text=test-messsages" https://slack.com/api/chat.postMessage

レスポンスとして「ok」が返却される事を確認します。

$ curl -X POST -d "token=xoxp-4********8-4********0-5**********9-2******************************b" -d "channel=general" -d "text=test-messsages" https://slack.com/api/chat.postMessage

{"ok":true,"channel":"C********","ts":"1545023860.000900","message":{"type":"message","subtype":"bot_message","text":"test-messsages","ts":"1545023860.000900","username":"Example Salesforce Slack Info","bot_id":"B********3"}}

Slackチャネルにメッセージが通知された事を確認します。

Salesforce側の事前設定

(1) Salesforceの「リモートサイト設定」にSlack APIエンドポイントURLを追加します。

「設定」->「管理」->「セキュリティのコントロール」->「セキュリティのコントロール」->「リモートサイトの設定」をクリックし、Slack APIエンドポイントURL( https://slack.com )を追加します。

追加する設定は以下の通りです。

設定	入力する内容例
リモートサイト名	SlackAPI
リモートサイトの URL	https://slack.com
プロトコルセキュリティの無効化	チェックなし
説明	任意の説明
有効	チェック

「リモートサイトの設定」追加操作の流れは以下と同じです。

(2) Salesforceの「カスタム設定」にSlack APIキーを追加します。

「設定」->「ビルド」->「開発」 ->「カスタム設定」をクリックし、Slack APIトークン等の環境変数を追加します。

追加する設定は以下の通りです。

項目の表示ラベル	API参照名	データ型	入力する内容例
SlackAPIエンドポイントURL	SlackApiEndPoinUrl	URL(255) (ユニーク)	https://slack.com
SlackAPIエンドポイントURI(メッセージ通知)	SlackApiUriPostMessage	テキスト(255) (ユニーク、大文字と小文字を区別しない)	/api/chat.postMessage
SlackAPIトークン	SlackApiToken	テキスト(255) (ユニーク、大文字と小文字を区別しない)	(Slack APIキー文字列) xoxp-48-40-59-2********************b

「カスタム設定」追加操作の流れは以下と同じです。

作成したVisualforceページのソース

基本的な処理の流れは以下と同じです。

(1) 入力フォーム用のVisualforceページ

・PostMessageFormページ

PostMessageForm.page

<apex:page controller="PostMessage">
    <apex:form >
    <apex:pageBlock title="PostMessageForm">
    <apex:pageMessages />

    <table class="chatwork_messages">
         <tr>
             <th>
                 Chatworkへ投稿するメッセージタイトル 及び 送信するメール件名を入力
             </th>
             <td>
                 <apex:pageBlockSection columns="1">
                     <apex:inputText id="chatwork_title" value="{!chatwork_title}" required="true" />
                 </apex:pageBlockSection>
             </td>
         </tr>

         <tr>
             <th>
                 Chatworkへ投稿するメッセージ 及び メール本文を入力
             </th>
             <td>        
                 <apex:pageBlockSection columns="1">
                     <apex:inputTextarea id="chatwork_meesage" value="{!chatwork_message}" required="true" />
                 </apex:pageBlockSection>
             </td>
         </tr>
         
        <tr>
             <th>
                 Chatworkへメッセージを投稿する時の投稿先ルーム番号を入力
             </th>
             <td>        
                 <apex:pageBlockSection columns="1">
                     <apex:inputText id="chatwork_post_room" value="{!chatwork_post_room}" required="true" />
                 </apex:pageBlockSection>
             </td>
         </tr>
         
         <tr>
             <th>
                 Slackへメッセージを投稿する時のSlackチャネル名を入力
             </th>
             <td>        
                 <apex:pageBlockSection columns="1">
                     <apex:inputText id="slack_channel" value="{!slack_channel}" required="true" />
                 </apex:pageBlockSection>
             </td>
         </tr>

        <tr>
             <th>
                 メッセージ送信先のメールアドレスを入力
             </th>
             <td>        
                 <apex:pageBlockSection columns="1">
                     <apex:inputText id="to_mail_address" value="{!to_mail_address}" required="true" />
                 </apex:pageBlockSection>
             </td>
         </tr>
         
    </table>
    
    <apex:commandButton action="{!post_message}" value=" Chatwork+Slack+メールでメッセージ送信 "/>

    </apex:pageBlock>
    </apex:form>
</apex:page>

作成したApexクラスのソース

(1) Visualforceで作った入力フォームのコントローラクラス

・PostMessageクラス

PostMessage.apex

////////////////////////////////////////
// Visualforceで入力されたメッセージ内容やタイトル等をChatworkやメール配信するApexクラス
////////////////////////////////////////
public with sharing class PostMessage {

    // Visualforceページのテキストエリアで入力されたChatworkへ投稿するメッセージ本文を取得
    public String chatwork_message { get; set; }

    // Visualforceページのテキストボックスで入力されたChatworkへ投稿するメッセージタイトルを取得
    public String chatwork_title { get; set; }
    
    // Visualforceページのテキストボックスで入力されたメッセージ投稿先のChatworkルーム番号を取得
    public String chatwork_post_room { get; set; }
    
     // Visualforceページのテキストエリアで入力されたSlackへ投稿するメッセージ本文を取得
    public String slack_message { get; set; }

    // Visualforceページのテキストボックスで入力されたメッセージ投稿先のSlackチャネル名を取得
    public String slack_channel { get; set; }

    // Visualforceページのテキストボックスで入力されたメール送信先アドレスを取得
    public String to_mail_address { get; set; }
    
    public void post_message() {
    
        PostChatworkMessage post_chatwork = new PostChatworkMessage();
        PostSlackMessage post_slack = new PostSlackMessage();
        SendMailMessage send_mail_message = new SendMailMessage();
        
        String mail_subject = chatwork_title;
        String mail_message = chatwork_message;
         String slack_message = chatwork_message;
        
        // Visualforceページで入力されたメッセージをChatworkへ投稿する
        post_chatwork.post_chatwork_message( chatwork_title, chatwork_message, chatwork_post_room );
 
         // Visualforceページで入力されたメッセージをSlackeへ投稿する
        post_slack.post_slack_message( slack_message, slack_channel );

        // Visualforceページで入力されたメッセージをメール送信する
        send_mail_message.send_mail_message( mail_subject, mail_message, to_mail_address );
        
    }
        
}

(2) Slackへのメッセージ送信クラス

・PostSlackMessageクラス

PostSlackMessage.apex

////////////////////////////////////////
// Slackにメッセージを投稿するApex
////////////////////////////////////////
public with sharing class PostSlackMessage {

    // カスタム設定からSlack APIトークン情報等を取得
    private static String SlackApiEndPointUrl;
    private static String SlackApiToken;
    private static String SlackApiUri;
    
    static {
        SlackApiSetting__c setting = SlackApiSetting__c.getInstance();
        
        SlackApiEndPointUrl = setting.SlackApiEndPoinUrL__c;
        SlackApiToken       = setting.SlackApiToken__c;
        SlackApiUri     = setting.SlackApiUriPostMessage__c;
        
    }

    public void post_slack_message(String slack_message, String slack_channel) {
    
        String result_message = '';
        
        Http http = new Http();
        HttpRequest request = new HttpRequest();

        request.setEndpoint(SlackApiEndPointUrl + '/' + SlackApiUri);
   
        request.setMethod('POST');
        
        request.setBody('token=' + SlackApiToken + '&' +  'channel=' + slack_channel + '&' + 'text=' + slack_message);
        
        HttpResponse response = http.send(request);
        Integer status = response.getStatusCode();
        
        if ( status == 200 ) {
            result_message = response.getBody();
        } else {
            result_message = status.format() + response.getBody();
        }
        
    }
        
}

以上になります。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up