https://a.storyblok.com/f/270183/75582/3b016d4636/voicemail-featured-image.png

Julia Biroデベロッパー・アドボケイト

Juliaは、チュートリアル、ガイド、実用的なリソースを作成することで、仲間の開発者に力を与えることに尽力しています。アウトリーチと教育のバックグラウンドを持つ彼女は、テクノロジーをより身近なものにし、開発者の経験全体を向上させることを目指しています。地域のコミュニティイベントでもよく見かける。

Node-REDとNexmo Voice APIで独自のボイスメールを構築する

最終更新日 May 24, 2021

#node-red

#low-code

所要時間：4 分

私は人生のほとんどの期間、ボイスメールを避けてきた。その理由は単純で、メッセージを100％聞き取ることができなかったからだ。

かけ直せる電話番号がスラスラと出てきたり、留守電が空っぽだったり、ファーストネームが聞き取れたりしたら、私はラッキーだと思っていただろう。たいていの場合、こんな感じだ：

「やあ、ジュリア、テッドだ。僕のように、いろいろな方向に引っ張られていて、本当に忙しいと思う。でも、お願いがあるんだ。このメッセージを受け取ったら、折り返し電話をくれて、僕のプロポーズについてどうするか決めたことをメッセージに残してほしい。いずれにせよ、そうしてもらえると助かる。電話を待ってるよ」。

テッド...モスビー？クリリー？キャシディ？知る由もない

幸いなことに、Node-REDで自分のボイスメールを作成することは、これらのメッセージを解読するよりも早くて簡単です。どのように機能するのか見てみましょう！

何を作るのか

このチュートリアルは 「NexmoとNode-RED入門"シリーズです。

これらの記事では、SMS、Voice、VerifyなどのNexmo APIを使い始める方法を紹介しています。

このチュートリアルでは、あなたのNexmo番号に電話をかけてメッセージを残すことができるシンプルなボイスメールサービスを構築します。

録音されたVoiceメッセージは、Nexmoのサーバーから取得され、あなたのEメールアドレスに送信されます。

依存関係

前提条件

始める前に必要なものがいくつかある：

Node.jsおよび Node-REDがインストールされていること。
サーバーをインターネットに公開する方法。これは、Node-REDのホスティングバージョンを実行しているか、次のようなトンネリングサービスを使用していることを意味します。 ngrok- このページをご覧ください。 Node-RED で Ngrok を始めるチュートリアル

資格の取得

Node-REDでNexmoノードを使用するには、認証情報を提供する必要があります。あなたのダッシュボードにアクセスし、APIキーとシークレットを見つけてメモしてください。

次に必要なのは Voice対応バーチャル番号が必要です。Numbers（ナンバーズ）>」に進みます。 Numbersを購入するをクリックしてください。

buy number nexmo dashboard

Node-REDエディタのセットアップ

Node-REDエディタにアクセスするには、ブラウザを次の場所に移動します。 http://localhost:1880.

エディタを開いたら、次にをインストールする必要があります。と Ngrokノード(ホスト版のNode-REDを使用していない場合)とデフォルトのメールノード.これは パレットの管理メニューで対応するパッケージを検索し、インストールをクリックします：

ネクスモ node-red-contrib-nexmo
ングロク node-red-contrib-ngrok
Eメール node-red-node-email

Node-REDを再起動すると、これらのノードが画面左側のノードパレットに表示されます。

ローカルサーバーをインターネットに公開する

Node-REDのホスティングバージョンを使用していない場合、Nexmo Voice APIはWebhookエンドポイントにアクセスする別の方法を必要とします。ローカルサーバーを公衆インターネットからアクセスできるようにする.Node-REDをローカルマシンではなく、パブリックウェブサーバーで実行している場合、準備は完了です。Nexmo Voiceアプリケーションを作成する。ステップに進みます。

これを行う便利な方法は、次のようなトンネリングサービスを使うことである。 ngrokのようなトンネリングサービスを使うことである。ノードがあります。

の弦を取る。をそして offを入力として受け取り、トンネルの開始/停止を行い、ngrokホストのアドレスを msg.payload.チュートリアル Node-RED で Ngrok を始めるを参照してください。

輸入インポート クリップボード下記のスニペットからインポートするか、自分でこのパスを作ってみてください。

[
    {
        "id": "faed0f7.1e524f",
        "type": "inject",
        "z": "5b8bbfc3.1a9f18",
        "name": "",
        "topic": "",
        "payload": "on",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 190,
        "y": 100,
        "wires": [
            [
                "8a01baeb.6756d"
            ]
        ]
    },
    {
        "id": "11051fa9.75bd1",
        "type": "inject",
        "z": "5b8bbfc3.1a9f18",
        "name": "",
        "topic": "",
        "payload": "off",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 190,
        "y": 160,
        "wires": [
            [
                "8a01baeb.6756d"
            ]
        ]
    },
    {
        "id": "8a01baeb.6756d",
        "type": "ngrok",
        "z": "5b8bbfc3.1a9f18",
        "port": "1880",
        "creds": "5a9e2b8c.173a2c",
        "region": "ap",
        "subdomain": "",
        "name": "",
        "x": 400,
        "y": 140,
        "wires": [
            [
                "93fd5675.743c1"
            ]
        ]
    },
    {
        "id": "93fd5675.743c1",
        "type": "debug",
        "z": "5b8bbfc3.1a9f18",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "x": 620,
        "y": 140,
        "wires": []
    },
    {
        "id": "5a9e2b8c.173a2c",
        "type": "ngrokauth",
        "z": ""
    }
]

この時点で、あなたのエディターはこのように見えるはずだ：

ngrok path

を押す前の最後のステップとして デプロイを押す前の最後のステップとして ngrokノードのプロパティを開き、ポート番号 (1880Node-REDの場合)とリージョンを指定する。

すでにngrokアカウントを持っている場合は、オートトークンを追加することもできます。もし持っていなくても心配しないでください。ノードが完全に設定されていないと警告が出ますが、これは問題ではありません。

ngrok properties

ヒット デプロイをクリックし をクリックします。 injectノードのボタンをクリックし、デバッグエリアに表示されたURL（今後の参考のためにYOUR_URL）に移動して、公開アドレスにあるNode-REDエディタを探します。

ngrok node-red

Nexmo Voiceアプリケーションの作成

Nexmo Voice APIは、Nexmoアプリケーションを使用して、Nexmoエンドポイントに接続するために必要なセキュリティ情報と設定情報を保持します。

Nexmo Node-REDパレットでは、いくつかのノードがこれらのアプリケーションを作成する機能を持っています： getrecording, earmuff, mute, hangup, transfer, createcall, playaudio, playttsそして playdtmf.

これらのノードをワークスペースにドラッグし、ダブルクリックしてノードのプロパティを開きます。

の横にある Nexmo Credentialsの横にあるドロップダウンメニューから "Add new nexmovoiceapp... "を選択し、編集ボタンをクリックします。以下の詳細を入力し 新規アプリケーションの作成.

KEY	DESCRIPTION
`Name`	Choose a name for your Voice Application, for example "Nexmo Voice Application".
`API Key`	Your Nexmo API key, shown in your account overview.
`API Secret`	Your Nexmo API secret, shown in your account overview.
`Answer URL`	YOUR_URL/answer, you'll be hosting a Nexmo Call Control Object (NCCO) here. - more about this later on.
`Event URL`	YOUR_URL/event, you'll need to reference this when setting up the event handler.

Node-REDはあなたのアカウントに新しいNexmoアプリケーションを作成し、App IDと秘密鍵のフィールドに入力します。このステップの後、使用したNexmoノードを削除してください。 nexmovoiceappコンフィグノードが作成され、このフローに必要なすべてのNexmo認証情報が含まれているからです。

create voice app

電話番号の設定

次に、バーチャル・ナンバーをこのアプリケーションにリンクさせる必要がある。

Nexmoダッシュボードで、作成したVoice Applicationsを検索します。 ボイス> アプリケーション.

このアプリケーションの名前をクリックし、その下にある Numbersタブをクリックし リンクボタンをクリックしてください。

使用したい電話番号がすでに他のアプリにリンクされている場合は、以下をクリックする。 番号の管理をクリックし、着信をあなたのアプリに転送するように設定します。

link number

ボーナスのヒントノードを使います。 commentノードを使い、アプリケーションにリンクされているNexmo番号をメモしておく。

インバウンドコールの処理

バーチャル番号に着信があると、Nexmo Voice APIは定義したエンドポイントにリクエストを行います。 GETを定義したエンドポイントにリクエストします、 YOUR_URL/answerというエンドポイントにリクエストを行い、コールの処理方法に関する一連の指示を期待します。

まず、このエンドポイントを実装してみよう。

インバウンドコール用Webhookエンドポイントの定義

を追加する。 voice webhookと return nccoノードをワークスペースに追加し、それらを配線してウェブフック・エンドポイントを定義する。次に voice webhookノードのプロパティを開き GETとして Methodとして選択し /answerフィールドに URLフィールドに入力し デプロイ.

inbound webhook

素晴らしい！これでNexmoのAPIにNCCOを返すWebhookができました。この時点では何の指示も含まれていないので、いくつか追加してみよう！

Nexmoコール・コントロール・オブジェクト（NCCO）の構築

Nexmo APIが期待する命令は Nexmoコール制御オブジェクトNCCOとも呼ばれる。

Node-REDエディタのNexmoパレットで対応するノードを見つけるか、または NCCOリファレンスを参照してください。

この場合、電話をかけてきた人に挨拶をしてから、メッセージの録音を開始したいと思うでしょう。そのためには talkノードの後に recordノードを追加する必要があります。

ワークスペースに追加し、それらを voice webhookと return nccoノードの間に接続します。

`talk`

次に talkノードエディタを開き Text{}フィールドに、発信者に読み上げさせたいメッセージを設定する。例："Xに着きました、メッセージをどうぞ"

昔のボイスメールにノスタルジーを感じているのなら、準備は万端だ。その一方で、ボイスメールを選択することでパーソナライズすることもできる。 Voice Nameを選択したり SSMLタグを選択したり、SSMLタグを利用することで、より人間らしく、よりロボットらしく聞こえるようにすることもできます。

`record`

ノードのプロパティに recordノードのプロパティで URL {}フィールドに YOUR_URL/record.これは、Nexmoが録画完了後にパラメータのセットを返すeventURLになります。

に目を通すと NCCOリファレンスに目を通せば、呼び出し番号がその一つではないことにすぐに気づくだろう。

幸いなことに、発信者の電話番号をanswerURLから取得し、クエリパラメータとして渡すことができます。

フィールドを URL {}フィールドを YOUR_URL/record?from={{msg.call.from}}.こうすることで fromレコードのeventURLから msg.req.query.from.

次のステップに進む前に、以下を選択していることを確認してください。 POSTを Method, MP3として Formatを選択し End On Silence(例：3)を設定していることを確認してください。

voicemail record

生成されたNCCOをご覧になりたい方は、以下をご覧ください。 YOUR_URL/answer.Nexmoがコール・フローを制御するために使用するJSON形式の一連のアクション、または「命令」が表示されます。

さらに一歩進んでみませんか？あなたのNexmo番号にダイヤルして、実際に見てみましょう！

voicemail NCCO

フェッチ・レコーディング

この時点で、発信者はTTSメッセージとビープ音で迎えられ、メッセージが録音される。次のステップは、ネクスモのサーバーから録音を取得することである。

イベントURLの記録

まず、録画が完了したときに録画パラメータが送信されるように、録画イベントURLを定義します。

ワークスペースに http inワークスペースにノードを追加し、次に http responseノードを追加し debugノードを接続してください。こうすることで、デバッグ・エリアにイベントのロギングを開始することができ、実際に何が起こっているのかをもう少し詳しく知ることができる。

ノードのプロパティを開き http inノードのプロパティを開き POSTを Methodを選択し URLフィールドを /record.

ノードは http responseノードには 200として設定されていなければならない。 Status codeに設定されているはずだが、これはデフォルト値でもあるので心配はいらない。

録画データは msg.payloadに保存されている fromに格納されている。 msg.req.query.from.で complete msg objectを debugノードのエディターで Output.

レコーディング

実際に録画を取得するには getrecordingノードを使います。
キャンバスに1つ追加し、それを /record http inノードに接続し、ノードエディタを開きます。

2つのフィールドが表示されます：

Nexmo Credentials- ドロップダウンメニューから、先ほど作成した Voice アプリケーションを選択します。
Filename {}- ラベルの {}これはこのフィールドがをサポートしていることを意味します。をサポートしており、値を動的に設定できることを意味します。これは、発信者番号とタイムスタンプをファイル名に含める絶好の機会を与えてくれる。 recordings/{{msg.req.query.from}}_{{msg.payload.timestamp}}.mp3.

ファイル名フィールドは、msg.filename の値を設定するためにあります。次に、オーディオを自分のサーバーにアップロードする、または fileノードを使って自分のコンピュータにダウンロードするか、あるいは e-mailノードを使用して自分自身に送信します。

録音を電子メールアドレスに送信する

この例では、デフォルトのNode-RED e-mailノードを使用します。 msg.payloadを電子メールとして送信します。 msg.topic.

この場合 msg.payloadはバイナリ・バッファ（録画）で、添付ファイルに変換されます。メールに本文を追加したい場合は、次のように設定します。 msg.descriptionとして設定します。 changeノードの前に e-mailノードの前に設定します。

ファイル名は msg.filenameである。

ノードを changeノードを getrecordingその後に e-mailノードに接続します。両方ともノードパレットにあります、 changeの下にあります。関数と e-mailの下にあります。 ソーシャル.次に、それらの設定方法を見てみよう。

`change`

ノードのプロパティを開き changeノードのプロパティを開き セット操作を使って2つのルールを定義する。

まず msg.topicメールの件名

上のフィールドの payloadを topicに置き換え、次に expressionタイプ toドロップダウンからタイプを選択します。 JSONataクエリと式言語を使用します。発信者の番号をメールの件名に含めるには、このフィールドに次のように入力します。 'Voicemail from ' & msg.req.query.from.

をクリックする。追加ボタンをクリックして、2つ目のルールを定義する。今回は、メールの本文である msg.descriptionの値を設定します。また式を使ってもいいし、"Hey, you've got voicemail!"のようなシンプルな文字列でもいい。

voicemail change

プレス完了を押してください。 e-mailノードに進みましょう！

`e-mail`

ノードエディタでは e-mailノードエディターには3つのフィールドがあります： To- 受信者のメールアドレス Useridそして Password- メールのログイン情報

voicemail email

完了したら完了そして デプロイ.あなたのボイスメールは稼働しています！

通話イベントのログ

その前にもうひとつ！デバッグ・エリアでコール・イベントを確認し、実際に何が起こっているのかをよりよく理解することはとても便利なので、イベント・ウェブフックを追加してみよう！

ノードを http inノードを http responseノードと debugノードに接続し、デバッグ・エリアでコール・イベントを表示できるようにします。

ノードで http inノードで POSTを Methodを選択し URLフィールドを /event.

voicemail flow

Nexmo番号に電話をかけ、デバッグサイドバーで通話イベントを確認する！

お試しあれ！

出来上がり！これでもうボイスメールに悩まされることはありません。Nexmoの電話番号に電話すれば、すぐにメールが届きます。

次はどこだ？

さらに読む

別のチュートリアルを試す