LoginSignup
13
6

More than 3 years have passed since last update.

Salesforce PlatformAdvent Calendar 2020Day 4
@hanamizuki10(ハナミズキ)in株式会社co-meeting

Salesforce:ソフトフォン（ Lightning Open CTI ）の環境構築方法について

Last updated at Posted at 2020-12-04

この記事は Salesforce Platform Advent Calendar 2020 - Qiita 第4日目の投稿です。

事の発端

とある業務にて、Salesforceにソフトフォンを導入している組織が存在しておりました。
そのためソフトフォンを含んだ開発組織作りが必要となり、今回は調べた内容を忘備録のつもりで投稿します。

そもそもソフトフォンって何？って人向け情報

パソコンに専用のソフトをインストールし、インターネットを介して通話をする機能です。
音声コミュニケーションツールでいうと、SkypeやZoom、Google MeetやMicrosoft Teamsなどありますが、ここでいうソフトフォンは、少し違います。
取引先の相手が電話機で、通話を受け取れる仕組みです。
詳しいことは、IP-PBX（Private Branch Exchange）・・・企業内ネットワーク上にIP電話機を接続して内線と外線を中継するシステムについて調べてもらえると理解度が深まると思います。

簡単なイメージでいうと、Salesforceの取引先や取引先責任者には、電話番号が登録されていますが、この電話番号クリック一つで電話できるサービスを提供しているものがソフトフォンです。
営業職の人には大変便利なサービスですね！
image.png

※注意※
改めて、ここで記載している内容は デモ環境 です。
実際のソフトフォンを導入する方法は記載していません。ただ、少しは参考になるかもしれないです。

開発組織にデモ用のソフトフォンをインストールする手順

基本的に、サイト Lightning Open CTI の流れに基本的に従う事で構築完了できます。
今回は、一連の手順に補足してます。

1. Salesforce組織にログイン

インストールしたい組織にログインします。

2. デモ用ソフトフォンパッケージのインストールと確認

2.1. パッケージをインストール

https://login.salesforce.com/packaging/installPackage.apexp?p0=04t41000000bSXh
※注意※Sandboxにインストールする時は 以下のパッケージを利用してください。
https://test.salesforce.com/packaging/installPackage.apexp?p0=04t41000000bSXh

こちらのリンクをクリックすると以下のような画面が出てきます。

image.png

2.2.インストールの確認

Salesforce組織のインストール済みパッケージ画面を開くと、インストールされたことが確認できます。
image.png
設定にてコールセンターをクイック検索すると、Demo Call Center Adapterが追加されていることを確認できます。
image.png
初回の状態で以下のようなコールセンター定義となっております。
image.png

※この時注意すべきは、インストールされたパッケージには demoAdapterPage2 ページが存在しないのに、コールセンター 定義ファイルには、 CTI Adapter URL2 ：/apex/demoAdapterPage2 という記述が存在することです。
このままでは動きませんので修正が必要です。
（ほんとトラップだよ・・・これ・・・。。）
この修正は、5. 設定状況確認と必要に合わせてコールセンター の定義修正にて追加の解説します。
image.png

3. コールセンター に ユーザーを追加

コールセンターの詳細の下の方にコールセンターユーザーの管理 ボタンがあるのでそちらをクリックします。
image.png

コールセンター ユーザーの管理画面が表示されるため、ユーザー追加をクリックします。
image.png

条件にあわせてユーザーを検索してください。
image.png

リストに出てきたユーザーをチェックして、コールセンターに追加ボタンをクリックします。
image.png

これでユーザーが追加されます。
image.png

以上です。

4. ユーティリティバーにOpen CTI Softphoneを追加

ここでは、ユーティリティバーにソフトフォンが表示できるようにします。
なお、ユーティリティバーとは、以下の下部分にあるバーのことです。
image.png
まず、アプリケーションマネージャを開きます。今回ソフトフォンを追加したいアプリケーションを確認し、右側のメニュー▼を開き編集を選択してください。
image.png
アプリケーションの設定の中から、ユーティリティ項目を選択し、ユーティリティ項目を追加ボタンをクリックしてください。
image.png
すると、以下のように簡易メニューが開かれるので、その中から、Open CTI ソフトフォンを選択してください。
image.png
以下のように表示されます。
ラベルやアイコンなど、気になるようなら変更して、保存ボタンをクリックします。
image.png
これで、ソフトフォンがユーティリティバーに表示されるようになります。

5. 設定状況確認と必要に合わせてコールセンター の定義修正

試しに、以下のユーティリティバーに表示されたPhoneをクリックしてみましょう。
image.png
以下のエラーメッセージが出てきたら定義ファイルに問題があります。
image.png
改めて、このエラーメッセージは定義ファイルに存在していないページを指定している場合に出るエラーメッセージです。
image.png
以下のように修正しましょう。
image.png
もう一度クリックして、以下のような画面が出てきたら問題なく設定完了できています。
image.png

ここから先は、Trailhead Playgroundでは問題ないのに、Sandbox上でエラーが発生して気づいた問題です。
Snadbox上では、Phoneをクリックすると、以下のようなエラー画面が出ることがあります。
image.png

このような時は、demoAdapterPageを直接プレビューから開いてみてみましょう。

image.png

この時、プレビュー上では問題なさそうに表示されるのに、コンソールログを見ると以下のエラーメッセージが出力されていたりします。
Refused to frame 'https://XXXXXXXXXXXX.visual.force.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://XXXXXXXXXXXX.my.salesforce.com (https://XXXXXXXXXXXX.my.salesforce.com/)".

この問題は、既にGithub上でissueとして上がってます。
https://github.com/developerforce/open-cti-demo-adapter/issues/36

issueのコメントを追うと解決策が書いてます。
この件は、相対パスではなく絶対パスで定義すると解決するとのことでした。

なお、手順のサイトをよく確認したら、注意事項として記載ありました。
（私は読み飛ばしてしまっておりました。反省点の一つです。）
image.png

この内容を踏まえて、以下のように修正することで解決できます。
image.png

なお、必要に応じてContent Security Policy対策のためホワイトリストへドメインを追加しなければならない事もあります。
image.png

以上の設定で、以下のような画面が出てきたら問題なく設定完了できています。
image.png

6. ソフトフォンにログイン

このソフトフォンはデモで実際には電話をかけないアプリですが、ログイン機能があります。
ユーザーIDやパスワードは何も入力せずに、Log Inボタンを押せば次の画面に移動します。

ログイン成功したら以下のような画面になります。

image.png
ダイヤルパッドをクリックすると、ダイヤルが出てきます。
image.png
以上です。
上記の手順を行うことで、Salesforce上の電話フィールドは全て、電話機マークがつくようになります。
image.png

この時、電話マークをクリックすると、電話が発信される仕組みです。
image.png

カスタムコンポーネント上での実装について

LWCカスタムコンポーネント上にて、電話番号をCTI連携する方法は以下の通りです。

<lightning-click-to-dial value="000-1111-2222" record-id="5003000000D9duF"></lightning-click-to-dial>

標準レイアウト上の電話番号は自動的にSalesforceが切り替えて表示してくれるが、カスタムコンポーネント上では意図的に実装しないとソフトフォンが起動しません。
record-id 属性を指定することで、電話の宛先Nameをポップアップに表示できるようになります。
なお、これを実装すると、必ず電話アイコン（📞）が表示されるようになるため 要注意 です。
必要に応じて、以下のようなロジックを呼び出し、lightning-click-to-dialを利用しないようなロジックも検討が必要です。

/**
 * コールセンターが利用できるかどうかを返す
 */
@AuraEnabled(cacheable=true)
public static Boolean isAvailableCallCenter() {
  User user = [
    SELECT Id, Name, CallCenterId
    FROM User WHERE Id = :UserInfo.getUserId()
  ];
  return (user.CallCenterId != null);
}

※補足※
ユーティリティ上に表示するように設定したソフトフォンは、ユーザーがコールセンターに追加されていないと連動して表示されない仕組みとなっています。
よって、ユーザーにコールセンターId情報が内部的に紐づいているかどうかを判断条件にできます。
参考：User | Salesforce および Lightning プラットフォームのオブジェクトリファレンス

参考リンク

  • Lightning Open CTI

    • デモ用のソフトフォンアプリのインストール方法が記載されている。
      • デモというだけあって実際に電話はしない。

  • Trailhead:Module:Lightning Experience のコールセンターインテグレーション

    • この単元に従うと空のソフトフォンをセットアップできる。

      • 設定前と設定後の違い

        • ”電話”のフィールドに対して、電話番号の前に、斜線の入った電話マークがつく

        image.png
        image.png

    • 注意：このTrailhead単元に沿って作成したコールセンター の定義と Lightning Open CTI の指示に従って作るコールセンター の定義はAPI参照名が同じであるため、既に片方実装されていると片方がまともに動かない。この場合、Trailhead単元に従って作成したコールセンター の定義を削除するとよい。

  • lightning-click-to-dial - example - Salesforce Lightning Component Library

    • システム的にclick-to-dialを実装したい時の解説ページ。この通りに記載すると、電話アイコンが付与される。

最後に、今回の調べて思ったことは、、、

そもそもソフトフォンという存在を知らなかったので、すごく学びになった気がする。
実際にソフトフォンを導入して使ってみたいという気持ちが調べながらだと凄く盛り上がりはしたが、冷静に考えると、ソフトフォンが導入されても、私はソフトフォンを使って電話する可能性が１割も無いのでは？と改めて感じたため、盛り上がった気持ちはすぐに鎮火しました。
改めて特定の分野で働く人の業務効率を改善するようなサービスって色々あるんだなぁという感想となりました。
この知識が、どこかでまた役に立つことがあるのだろうか・・？という気持ちもありつつ、日本語向けの資料が少なかったので今回、思い切って、記事にしてみました。
いつか誰かの助けになれば良いな・・・。

以上です。ではでは。

13
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
13
6