Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

VonageコミュニケーションAPIを使ってみた、Vonageのことなら何でも共有しよう！ by VonageAdvent Calendar 2022

Day 7
@raptony

GAS de Vonage!!

Last updated at Posted at 2022-12-21

はじめに

:christmas_tree:Merry Christmas:christmas_tree:
Advent Calenderがきっかけで、Vonageに初めて触れました。
つい先日まで、Vonageって何？そもそもCPaaS（Communication Platform as a Service）って何？っていう状態でしたが、触ってみると面白い。

今回はGAS（Google Apps Script）で実装をしていきます。ネット上にもGASで実装した記事はかなり少ないというかほとんど無かったので、誰かの参考になれば幸いです。
（GASで実装する機会はほとんどないかもしれないですが笑）

ちなみに、公式ドキュメントは様々な言語での参考コードが豊富にありますので、ご興味ある方は公式サイトのデベロッパーセンターをあたってみると良いです。

今回作ったもの

概要

GASで、VonageAPIを利用してSMS送信した後に、発生コストとVonage残高を、Facebook messengerからメッセージを送ります。

実行結果

iPhone12の通知画面

IMG_3405 (1).png

SMSアプリ画面

IMG_34072.png

Facebook Messengerアプリ画面

IMG_34062.png

コード全文

先に今回作成したコードを載せておきます。一部、秘匿情報があるので「***********」で潰してますが、ご了承ください。

Google Apps Script
//メインシナリオ
const main = () => {
  //SMS送信先を指定
  const targetNumber = '***********'
  //FB送信元を指定
  const fromFBId = '***********'
  //FB送信先を指定
  const toFBId = '***********'

  //SMSメッセージ
  let messageSMS = `やっほー！Raptonyです！
Qiita Advent Calendar2022 盛り上がってるよ〜！`

  //SMS送信を実行
  const resultSMS = sendSMS(targetNumber,messageSMS) 

  //送信コストとVonage残高を取得
  let costSMS = parseFloat(resultSMS['messages'][0]['message-price'])
  let yourBalance = parseFloat(resultSMS['messages'][0]['remaining-balance'])

  //FB送信メッセージを生成
  let messageFB = `【コスト通知】
  SMSメッセージを送信しました！
  只今のSMS送信コストは${costSMS}€でした。
  Vonage残高は${yourBalance}€だよ！`

  //FacebookMessenger送信を実行
  const resultFBMessage = sendFBMessage(fromFBId,toFBId,messageFB)
}

//Vonage残高を取得
const getBalance = () => {
  //APIキーととシークレットキーをプロパティ変数から取得
  const apiKey = PropertiesService.getScriptProperties().getProperty('APIKEY')
  const apiSecretkey = PropertiesService.getScriptProperties().getProperty('APISECRETKEY')
  //APIエンドポイント
  const url = `https://rest.nexmo.com/account/get-balance?api_key=${apiKey}&api_secret=${apiSecretkey}`

  //RESTオプションを指定
  const options = {'method':'GET'}
  //フェッチする
  const resultJSON = UrlFetchApp.fetch(url,options)

  //JSONをパース
  result = JSON.parse(resultJSON.getContentText())
  //取得結果をコンソールに出力
  console.log(result['value'])  
}

//SMS送信
const sendSMS = (targetNumber,message) => {
  //APIキーととシークレットキーをプロパティ変数から取得
  const apiKey = PropertiesService.getScriptProperties().getProperty('APIKEY')
  const apiSecretkey = PropertiesService.getScriptProperties().getProperty('APISECRETKEY')
  //APIエンドポイント
  const url = 'https://rest.nexmo.com/sms/json'

  //ペイロードを作成
  const payload = {
    'from':'Vonage APIs',
    'text':message,
    'to':targetNumber,
    'type':'unicode',
    'api_key':apiKey,
    'api_secret':apiSecretkey
  }
  //RESTオプションを指定
  const options = {
    'method':'POST',
    'payload':payload
  }

  //フェッチする
  const resultJSON = UrlFetchApp.fetch(url,options)
  //JSONをパースして結果を格納
  const result = JSON.parse(resultJSON.getContentText())

  //結果を返す
  return result
}

//FacebookMessenger送信
const sendFBMessage = (fromFBId,toFBId,message) => {
  //APIキーととシークレットキーをプロパティ変数から取得
  const apiKey = PropertiesService.getScriptProperties().getProperty('APIKEY')
  const apiSecretkey = PropertiesService.getScriptProperties().getProperty('APISECRETKEY')
  //APIエンドポイント
  const url = 'https://messages-sandbox.nexmo.com/v1/messages'

  //REST Headerを作成(Basic認証)
  const requestHeaders = {
    'Authorization':'Basic ' + Utilities.base64Encode(apiKey + ':' + apiSecretkey),
    'Content-Type':'application/json',
    'Accept':'application/json',
    'muteHttpExceptions':'true'
  }

  //ペイロードを作成
  const payload = {
    'from':fromFBId,
    'to':toFBId,
    'message_type':'text',
    'text':message,
    'channel':'messenger'
  }

  //RESTオプションを指定
  const options = {
    'method':'POST',
    'headers':requestHeaders,
    'payload':JSON.stringify(payload)
  }

  //フェッチする
  const resultJSON = UrlFetchApp.fetch(url,options)
  //JSONをパースして結果を格納
  const result = JSON.parse(resultJSON.getContentText())

  //結果を返す
  return result
}

準備

アカウントを作成

Vonage公式ページの右上にあるログインボタンを押して、各サービスのログインリンクが記載されたページにアクセスします。
スクリーンショット 2022-12-22 5.55.54.png
次に、コミュニケーションAPIログインのリンクをクリックします。
スクリーンショット 2022-12-22 5.49.59.png
必要事項を埋めて、アカウントを作成します。
image.png
ログインするとVonageAPIのダッシュボードが表示されます。
スクリーンショット 2022-12-22 6.00.07.png

Sandboxの準備

VonageにはFacebook Messenger用のサンドボックスが用意されていますので、今回はこちらを活用させていただきます。
左のツリー下部にデベロッパーツールがありますので、開くと「Messagesサンドボックス」メニューがありますので、そちらから設定します。
image.png
スクリーンショット 2022-12-19 2.12.50.png
サンドボックスボタンを押す。
スクリーンショット 2022-12-22 5.26.01.png
QRコードを読み込むと、FacebookのVonageプロフィールが表示されますので、「・・・」ボタンからメッセージを選択してFacebook Messengerに移動します。
IMG_3422.png
次にQRコードが表示されたページに記載されているパスフレーズを入力して、セットアップ完了です。
IMG_3423.png

実装

自分のアカウント残高を取得する

image.png
Vonageダッシュボードにログインすると左上に表示されている残高。まずはこれを取得して、VonageAPIに触れます。
getBalance関数は、Vonageアカウントに接続して、残高を取得します。

Google Apps Script
//Vonage残高を取得
const getBalance = () => {
  //APIキーととシークレットキーをプロパティ変数から取得
  const apiKey = PropertiesService.getScriptProperties().getProperty('APIKEY')
  const apiSecretkey = PropertiesService.getScriptProperties().getProperty('APISECRETKEY')
  //APIエンドポイント
  const url = `https://rest.nexmo.com/account/get-balance?api_key=${apiKey}&api_secret=${apiSecretkey}`

  //RESTオプションを指定
  const options = {'method':'GET'}
  //フェッチする
  const resultJSON = UrlFetchApp.fetch(url,options)

  //JSONをパース
  result = JSON.parse(resultJSON.getContentText())
  //取得結果をコンソールに出力
  console.log(result['value'])  
}

実行結果

image.png
正常に取得できました！
次に、今回の要件に必要な、関数をコーディングしていきます。

SMSを送信する

sendSMS関数はSMSを送信します。

Google Apps Script
//SMS送信
const sendSMS = (targetNumber,message) => {
  //APIキーととシークレットキーをプロパティ変数から取得
  const apiKey = PropertiesService.getScriptProperties().getProperty('APIKEY')
  const apiSecretkey = PropertiesService.getScriptProperties().getProperty('APISECRETKEY')
  //APIエンドポイント
  const url = 'https://rest.nexmo.com/sms/json'

  //ペイロードを作成
  const payload = {
    'from':'Vonage APIs',
    'text':message,
    'to':targetNumber,
    'type':'unicode',
    'api_key':apiKey,
    'api_secret':apiSecretkey
  }
  //RESTオプションを指定
  const options = {
    'method':'POST',
    'payload':payload
  }

  //フェッチする
  const resultJSON = UrlFetchApp.fetch(url,options)
  //JSONをパースして結果を格納
  const result = JSON.parse(resultJSON.getContentText())

  //結果を返す
  return result
}

引数

  • targetNumber：送信先の電話番号を格納した文字列（電話番号は、E.164フォーマットで指定）
  • message：送信内容を格納した文字列

E.164フォーマットとは
国際的に送信先の電話番号を一意に定める表現形式です。国際電話をかけたことがある人には馴染みがあると思いますが、以下のように国番号、市外局番、電話番号をつなげた番号です。
国番号 市外局番の1文字目を削った番号 電話番号
例えば、日本（国番号81）の携帯番号が090-1234-5678だった場合は、次のようになります。
+81 90 12345678

日本語を送信する場合は、typeオプションでunicode指定すると解決できます。
オプションをつけないと下の画像のように「?」で表示されますので注意。
IMG_3402.png

Facebook Messengerに送信する（Basic認証）

sendFBMessage関数はFacebook Messengerにメッセージを送信します。

Google Apps Script
//FacebookMessenger送信
const sendFBMessage = (fromFBId,toFBId,message) => {
  //APIキーととシークレットキーをプロパティ変数から取得
  const apiKey = PropertiesService.getScriptProperties().getProperty('APIKEY')
  const apiSecretkey = PropertiesService.getScriptProperties().getProperty('APISECRETKEY')
  //APIエンドポイント
  const url = 'https://messages-sandbox.nexmo.com/v1/messages'

  //REST Headerを作成(Basic認証)
  const requestHeaders = {
    'Authorization':'Basic ' + Utilities.base64Encode(apiKey + ':' + apiSecretkey),
    'Content-Type':'application/json',
    'Accept':'application/json',
    'muteHttpExceptions':'true'
  }

  //ペイロードを作成
  const payload = {
    'from':fromFBId,
    'to':toFBId,
    'message_type':'text',
    'text':message,
    'channel':'messenger'
  }

  //RESTオプションを指定
  const options = {
    'method':'POST',
    'headers':requestHeaders,
    'payload':JSON.stringify(payload)
  }

  //フェッチする
  const resultJSON = UrlFetchApp.fetch(url,options)
  //JSONをパースして結果を格納
  const result = JSON.parse(resultJSON.getContentText())

  //結果を返す
  return result
}

引数

fromFBId：送信者のFacebookIDを格納している文字列
toFBId：送信先のFacebookIDを格納している文字列
message：送信内容を格納している文字列

シナリオを実行する

main関数は「SMSを送信して、その結果発生したコストと、Vonageの残高をFacebook Messengerに送信する」というシナリオを実行します。

Google Apps Script
//メインシナリオ
const main = () => {
  //SMS送信先を指定
  const targetNumber = '***********'
  //FB送信元を指定
  const fromFBId = '***********'
  //FB送信先を指定
  const toFBId = '***********'

  //SMSメッセージ
  let messageSMS = `やっほー！Raptonyです！
Qiita Advent Calendar2022 盛り上がってるよ〜！`

  //SMS送信を実行
  const resultSMS = sendSMS(targetNumber,messageSMS) 

  //送信コストとVonage残高を取得
  let costSMS = parseFloat(resultSMS['messages'][0]['message-price'])
  let yourBalance = parseFloat(resultSMS['messages'][0]['remaining-balance'])

  //FB送信メッセージを生成
  let messageFB = `【コスト通知】
  SMSメッセージを送信しました！
  只今のSMS送信コストは${costSMS}€でした。
  Vonage残高は${yourBalance}€だよ！`

  //FacebookMessenger送信を実行
  const resultFBMessage = sendFBMessage(fromFBId,toFBId,messageFB)
}

初めてVonageに触れての所感

普段使っている電話番号やFacebook Messengerに対してメッセージや画像を送信できた時はワクワクしました！！
ビジネスシーンでもかなり活用幅が広いと感じます。これまではWebサイト、メール、電話でのリーチがメインでしたが、SMSやFacebookへアプローチできるのは良い。
また、今回僕は試しませんでしたが、2段階認証もサクッと実装できて簡単にセキュアな認証を実装できるようなので、どこかで使ってみたい。

今回、Qiita Advent Calendarへの寄稿がVonageに触れたきっかけでしたが、とても良いサービスに触れることができたと思っています。
今後、プライベート、ビジネスに限らず活用して、実装スピード上げていきたいと思います。

最後まで読んでいただきありがとうございました！！

3
0
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
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?