https://d226lax1qjow5r.cloudfront.net/blog/blogposts/make-phone-calls-with-microsoft-excel-and-vonage-open-contactpad-sdk/embed-vbc.png

Microsoft ExcelとVonage Open ContactPad SDKで電話をかける

最終更新日 February 14, 2022
#open-contactpad-sdk
#excel
#javascript

所要時間：1 分

はじめに

このページでは、新しいVonage Open ContactPadを利用して、サードパーティプラットフォームとのVBCインテグレーションを短時間で構築した方法を説明します。まず、統合の利用可能な機能を示すビデオです。

厳選アプリケーション - Microsoft Excel Online

選択した マイクロソフト・エクセル・オンラインを選んだのは、最近マイクロソフトがエクセル用のJavaScript APIをリリースしたという記事を読んだからだ。多くの人がスプレッドシートを扱うためにこのプログラムを使っており、データを扱うにはそれなりにわかりやすい方法だと思った。Microsoft Excelは オフィスアドイン.非常にクールなアドインのひとつが スクリプトラボで、開発者はアドインの作成を試すことができます。このハウツーでは、Excel と Vonage JavaScript 関数を使って Script Lab にコードを追加し、その結果を GitHub Gist.そこから先に進むために、読者は以下のことに興味があるかもしれない。 Officeアドインの公開.

マイクロソフト・エクセル・オンライン

このハウツーを最大限に活用するには、Script Lab Officeアドインをインストールし、GithubからGistをインポートすることをお勧めします：

ジスト ジストには、あなたのプロジェクト用にカスタマイズするための完全なソースコードが含まれています。以下の例は非常に特殊であり、特定の機能を実行するために必要なものがすべて含まれているわけではありません。

Vonage Open ContactPadを使い始める

Vonageの Vonage Open ContactPad SDKはJavaScriptソフトウェア開発ツールキットです。 Vonageユニファイド・コミュニケーション(UC)ダイヤラーインターフェースをウェブベースのアプリケーションに組み込むことを可能にするJavaScriptソフトウェア開発ツールキットです。この SDK を使用するには Vonageビジネスコミュニケーションアカウントでサインインする必要がありますが、追加の API ユーザーやサインアップなしで SDK を使用して開発できます。このため、アプリケーションに通信クライアントを組み込みたい開発者にとっては、非常に軽量な統合フレームワークとなります。

なぜPC/Macアプリケーションではなく、マイクロソフト・エクセル・オンラインなのか？

Vonage Open ContactPad SDKはウェブアプリケーションに埋め込まれることを想定しており、開発者が埋め込まれたスペースを完全にコントロールできる場合に最もうまく機能することに注意することが重要です。この点については スタートページという注意書きがあります。

スクリプトラボのセットアップとコードの最初の行

Excelにスクリプトラボをインストールすると、「ヘルプ」メニューの右側に「スクリプトラボ」メニューが作成されます。そのタブをクリックすると、スクリプトラボでの作業に役立つ3つのボタンが表示されます。次に「コード」をクリックすると、VisualStudioのようなウィンドウがExcelのインターフェイスに埋め込まれ、コードが表示されます。ブラウザのキャッシュをクリアしない限り、スクリプトラボのコードは残ります。より永続性を求める場合は、共有オプションを使ってコードを gist として GitHub に保存します。.私の冒険では、たくさんのプライベートなgistを作成することになりました。もし私が真の統合プロジェクトに取り組んでいたら、おそらくコードをVisual Studio Codeに移行し、より正確なバージョン管理で作業するでしょう。

Script Labの使い方を覚えたら、ダイヤラーを埋め込むHTMLセクションから始めました。以下の手順を参照してください。 Open ContactPadの読み込み.これには ライブサンプルを使った プランカー.

私の場合 <div>コンテナを提供することで、アプリケーションをページ上の移動可能なドットとしてではなく、ダイヤラーインターフェイス全体に表示できるようにしたかったのです。データプロバイダを ucとして設定しました。

<div class="vonage-dialer-container"></div>
<script data-provider="uc" data-autoload="false" src="https://apps.gunify.vonage.com/cti/common/vonage.dialer.sdk.js">
</script>

驚くべきことに、ここで停止してコードを実行すると、Microsoft Excel Onlineにダイヤラを埋め込むことができます！しかし、エクスペリエンスをカスタマイズするために開発者ができることはまだまだたくさんあります。

エクセルAPIを探る - サンプルデータの設定

では、なぜサンプル・データを用意したのか？それは、スプレッドシート内のデータのフォーマットや場所をユーザーに例示して、コードがどこにあるのかわかるようにしたかったからです。各 "コンタクト"（行）に対して電話をかけるトリガーとなるクリック可能なエリアと、電話番号の場所を設定したかった。Script LabでアプリケーションのHTMLから始めて、スプレッドシートの目的のセクションにデータを入力するボタンを追加しました。このボタンを何度も押すと、シート上のデータが上書きされる。

<center><button onclick="populateSampleData()">Populate Sample Data</button></center>

次のステップは、JavaScriptでpopulateSampleData()関数を実装することです。幸い Microsoft Excel JavaScript API ドキュメントにいくつかの例があります。

function populateSampleData() {
 return Excel.run(function(context) {
   var worksheet = context.workbook.worksheets.getItem("Sheet1");
 
   var data = [
     ["Company", "Contact Last", "Contact First", "Number", ""],
     ["Widget Zone", "Anderson", "Wendy", "555-555-5555", "Dial"],
     ["Widgets Galore", "Burns", "Ryan", "555-555-5555", "Dial"],
     ["Widgets Emporium", "Johnson", "Amanda", "555-555-5555", "Dial"]
   ];
 
   var range = worksheet.getRange("A2:E5");
   range.values = data;
   range.format.autofitColumns();
 
   return context.sync().then(function() {});
 }).catch(errorHandlerFunction);
}

最初に、最初のワークシートを選択する。空白のエクセル・ファイルでは、通常 "Sheet1 "と呼ばれる。そして、そのシートに入るデータのオブジェクトを作成します。次に、データが占めるセル数をカバーするように範囲を設定し、範囲の値をデータオブジェクトに設定します。列をオートフィットすると、見た目が少しすっきりします。

また、アプリケーションのロード時に発生する書式設定も作りました。これにより、選択範囲が左上のセルに配置されます。また、ダイヤルの「ボタン」をクリックできるようにし、背景色と文字色を変更しました。

//start with selection at upper left
 var worksheet = context.workbook.worksheets.getItem("Sheet1");
 var initSelection = worksheet.getRange("A1");
 initSelection.select();
 
 //format dial buttons
 var range = worksheet.getRange("E:E");
 var conditionalFormat = range.conditionalFormats.add(Excel.ConditionalFormatType.containsText);
 
 conditionalFormat.textComparison.format.font.color = "white";
 conditionalFormat.textComparison.format.fill.color = "purple";
 conditionalFormat.textComparison.rule = {
   operator: Excel.ConditionalTextOperator.contains,
   text: "Dial"
 };

ダイヤル "ボタン "の作動

このプロジェクトで最も満足のいく成果のひとつは、エクセル・シートで何かをクリックすると、そのシートに由来する番号に電話がかけられるようになったことだ。私の場合、それはデータの各行に表示されるダイヤルの「ボタン」である。ボタン」を引用符で囲んでいるのは、これはボタンではなく、単に「Dial」と書かれたセルだからです。選択範囲の変更をチェックし、クリックされたセルのテキストが "Dial" という単語と一致したときに反応するハンドラを作成しました。

function handleSelectionChanged(event) {
 return Excel.run(function(context) {
   var range = context.workbook.getSelectedRange().load();
 
   return context.sync().then(function() {
     const selectedContent = JSON.stringify(range.values, null, 4);
 
     const rowString = JSON.stringify(range.rowIndex, null, 4);
 
     const rowIndex = Number(rowString) + 1;
 
     if (selectedContent.match("Dial")) {
       placeCall(rowIndex);
     }
   });
 }).catch(errorHandlerFunction);
}
 
function placeCall(row) {
 return Excel.run(function(context) {
   var toNumberRange = context.workbook.worksheets
     .getItem("Sheet1")
     .getRange("D" + row)
     .load();
 
   return context.sync().then(function() {
     const toNumber = JSON.stringify(toNumberRange.values, null, 4);
 
     VonageDialer.placeCall(toNumber);
   });
 }).catch(errorHandlerFunction);
}

ボネージ・コミュニケーションズのイベントへの反応

Open ContactPadのもう一つの強力な機能で、統合アプリケーションの中で、次のようなイベントを受信したときに、そのイベントに基づいて処理を実行することができます。 Vonageイベント.イベントの種類（event.type）を見て、イベントに反応するコードを作成するだけです。これらのイベントに対して私のコードが行っていることの詳細は、アドバンス・トピックのエリアで説明します。CALL_START、CALL_ANSWER、CALL_ENDは、利用可能なオプションのほんの一部です。詳細については SDKデータ・モデル.

VonageDialer.init({ /* dialer config options */ }, (dialer) => {
 dialer.setOnDialerEvent((event) => {
   switch (event.type) {
     case 'CALL_START': {
       break;
     }
     case 'CALL_ANSWER': { // available only for UC
       break;
     }
     case 'CALL_END': {
       // do something based on event.data (screen pop, store interaction, etc.)
       break;
     }
     default: {
       console.log('Unhandled event', event);
     }
  }
 });
});

アドバンス・トピックス

このセクションでは、コンタクト検索の実装やインタラクションコンタクトの設定など、統合を独自のものにするためのさらなるカスタマイズについて説明します。

連絡先検索の実装 - エクセルの行が検索可能な連絡先になる

スプレッドシートの連絡先をContactPadで検索可能にする方法を見てみましょう。

連絡先プロバイダー機能の追加

連絡先を表示させるために最初に行うことは、ダイヤラの初期化の一部としてcontactsProvider機能を有効にすることです。次のセクションで説明するように、featuresの値をtrueに設定すれば完了です！この ドキュメントに、統合プロバイダの作成に関する詳細情報があります。

SVGアイコン登録

アイコンを登録すると、そのアイコンを使って連絡先がどこから来たのかを視覚的に指定することができます。これはExcelとの統合なので、Excelのアイコンを使うことにした。Base64は アイコンスカウト.

VonageDialer.init(
 {
   features: {
     contactsProvider: true,
     openContact: true
   }
 },
 (dialer) => {
   dialer.registerSvgIcon(
     "excel",
     "data: image / svg + xml; utf8; base64, **excel icon SVG data goes here**
   );

コンタクトデータの提供 - ハンドラーの実装

Screenshot of Microsoft Excel and the Vonage Open ContactPad with the number 55 in the Contact Number section with search results displayed belowSearch Contact Data

電話番号フォーマットの冒険

電話番号の書式設定、保存、検索は非常に複雑な作業になります。その一端を知るには、次の記事をご覧ください。 SitePointの記事をご覧いただきたい。幸いなことに、私自身のプロジェクトでは、いくつかのことをコントロールすることができます。ひとつは、ユーザーがアメリカの番号しか持っていないことです。そこで、ダイヤラーの国コードを明示的にUSに設定しています。

var countryCode = "US";
VonageDialer.setCountryCode(countryCode);

また、入力される電話番号はすべてアメリカの番号だと仮定しているので libphonenumberを使い、検索用と表示用の両方のNumbersをフォーマットしている。

<script src="https://unpkg.com/libphonenumber-js@1.9.6/bundle/libphonenumber-max.js">
</script>
filteredContacts.push(sortedContacts[i]);
const ph = libphonenumber.parsePhoneNumber(sortedContacts[i].phoneNumber, countryCode);

簡単な例としては、私のコードで十分だが、実装の目的によっては、ユーザーのナンバー、コンタクトとみなされるナンバーを考慮し、検索機能を慎重に実装することに時間を費やしたいだろう。

連絡先データの翻訳とフィルタリング機能

これらは、連絡先データをExcelのJavaScriptが期待するフォーマットからVonageのJavaScriptが期待するフォーマットに変換するために作成した関数です。これらは連絡先を検索するコードで呼び出されます。

   function translateContacts(excelData) {
     excelData = JSON.parse(excelData);
     let len = excelData.length,
       contactsData = [],
       obj = new Object(),
       objString = "",
       i;
     for (i = 0; i < len; i += 1) {
       if (excelData[i][4] == "Dial") {
         obj["provider"] = "excel";
         obj["id"] = i;
         obj["label"] = excelData[i][2] + " " + excelData[i][1] + " of " + excelData[i][0];
         obj["type"] = "Contact";
         const ph = libphonenumber.parsePhoneNumber(excelData[i][3], countryCode);
         obj["phoneNumber"] = ph.format("INTERNATIONAL").replace(/\D/g, "");
         objString = JSON.stringify(obj);
         contactsData.push(JSON.parse(objString));
       }
     }
     return contactsData;
   }
   function filterContacts(query, contacts) {
     const sortedContacts = contacts.sort(function (a, b) {
       const labelA = a.label.toUpperCase(); // ignore upper and lowercase
       const labelB = b.label.toUpperCase(); // ignore upper and lowercase
       if (labelA < labelB) {
         return -1;
       }
       if (labelA > labelB) {
         return 1;
       }
       // names must be equal
       return 0;
     });
     let filteredContacts = [];
     for (let i = 0; i < sortedContacts.length; i++) {
       if (
         JSON.stringify(Object.values(sortedContacts[i]).filter(item => item !== "excel"))
           .toUpperCase()
           .indexOf(query.toUpperCase()) > 0
       ) {
         filteredContacts.push(sortedContacts[i]);
         const ph = libphonenumber.parsePhoneNumber(sortedContacts[i].phoneNumber, countryCode);
         sortedContacts[i].phoneNumber = ph.format("INTERNATIONAL");
       }
     }
     return filteredContacts;
   }
ダイヤルサジェストの作成
   const searchContactables = (query, callback) => {
     Excel.run(function(context) {
       var worksheet = context.workbook.worksheets.getItem("Sheet1");
 
       var range = worksheet.getRange("A3:E999");
       range.load("values");
 
       return context.sync().then(function() {
         const excelData = JSON.stringify(range.values, null, 4);
         const contactsData = translateContacts(excelData);
 
         const filteredContacts = filterContacts(query.replace(/[^A-Za-z0-9_]/g, ""), contactsData);
 
         callback(filteredContacts);
       });
     }).catch(errorHandlerFunction);
   };
   dialer.setOnSearchContactables(searchContactables);

インタラクションコンタクトの設定 - ダイアラインターフェース内にコンタクトデータを表示する

この機能は インタラクションコンテンツの設定セクションで説明されています。ここでは、通話中にリモート番号の連絡先情報をダイヤラーに表示する機能を実装した方法を示します。

Screenshot of the Code Window of the Vonage Open ContactPad interface while in a call.Dialer Interface

 dialer.setOnDialerEvent((event) => {
   //search for contact
   Excel.run(function(context) {
     var worksheet = context.workbook.worksheets.getItem("Sheet1");
     var range = worksheet.getRange("A3:E999");
     range.load("values");
     return context.sync().then(function() {
       const excelData = JSON.stringify(range.values, null, 4);
       const contactsData = translateContacts(excelData);
       const query = "" + event.data.phoneNumber;
       const filteredContacts = filterContacts(query.replace(/[^A-Za-z0-9_]/g, ""), contactsData);
       const interactionContact = filteredContacts[0];
       switch (event.type) {
         case "CALL_START": {
           if (filteredContacts.length > 0) {
             dialer.setInteractionContact(event.data.id, {
               provider: interactionContact.provider,
               id: "" + interactionContact.id,
               label: interactionContact.label,
               type: interactionContact.type
             });
           }
           break;
         }

コンタクトを「開く」機能の実装

Screenshot of Microsoft Excel and the Vonage Open ContactPad with the number 555 in the Contact Number section with search results displayed below and the first match highlighted in the Excel sheetOpen Contact

オープンコンタクト機能の追加

このコードは、ユーザーが連絡先検索からリンクアイコンをクリックすると、エクセルシートの連絡先をハイライト表示します。動作させるには openContact: trueダイアラーの init機能で

case "OPEN_CONTACT": {
     const rowNumber = event.data.id + 3;
     const rowString = "A" + rowNumber + ":D" + rowNumber;
     const row = worksheet.getRange(rowString);
     row.select();
     break;
   }
// Dialer init
VonageDialer.init({
  features: {
    contactsProvider: true,
    openContact: true,
    openActivity: 'acme',
    eventsHistory: true
  }
}, (dialer) => { /* <-- dialer instance */ });

概要

これを読んで、さまざまなアプリケーションで使用できるカスタマイズ可能なVonageダイヤラを作成できることを願っています。ぜひ ビジネスコミュニケーションチャンネルで共有してください。

シェア:

https://a.storyblok.com/f/270183/400x453/37e0b25a78/lisa-venezia.png
Lisa Venezia

Lisa helps connect business communications with customer workflows by working closely with the teams that create Vonage integrations with CRMs such as Salesforce, Microsoft Dynamics and HubSpot. Through adding developer solutions for Vonage Apps, she looks forward to unlocking powerful capabilities for people to work and communicate seamlessly within the platforms they use the most. Outside of work, Lisa enjoys singing choral music, playing the mellophone bugle, and spending time with her husband and their corgi.