https://a.storyblok.com/f/270183/48445/9ea4930199/ruby-hanami_voice_1200x627.jpg

Ben Greenbergヴォネージの卒業生

ベンはセカンドキャリアの開発者で、以前は成人教育、コミュニティ組織化、非営利団体運営の分野で10年を過ごした。彼はVonageの開発者支援者として働いていた。コミュニティ開発とテクノロジーの交差点について定期的に執筆している。南カリフォルニア出身で、長年ニューヨークに住んでいたが、現在はイスラエルのテルアビブ近郊に在住。

Hanamiで音声合成アプリケーションを作る

最終更新日 February 2, 2021

#ruby

#hanami

#voice-api

所要時間：5 分

このチュートリアルでは、Hanami、Vonage Ruby SDK、Voice APIを使って音声合成音声アプリケーションを作成する方法を紹介します。このチュートリアルでは、音声機能を持つVonageアプリケーションを作成する必要があります。

このチュートリアルで示したコードと完全に動作するアプリは GitHub.

前提条件

Vonage Voiceアプリケーション
Vonageプロビジョニング電話番号
RubyとHanamiのインストール
ングロク

花見とは何か？

花見は、完全な機能を備えたRubyのWebフレームワークです。Ruby on Railsに代わる、より軽量でメモリ消費量の少ないフレームワークです。Railsと同じMVC（モデル、ビュー、コントローラ）手法に基づいています。設計上の主な違いの1つは、機能を可能な限り小さな部分まで分解することです。その結果、Hanamiウェブアプリは、Railsウェブアプリと同じことを達成するために、より多くのファイルを持つかもしれませんが、各ファイルが担当することはできるだけ少なくなります。これにより、バグ追跡、機能追加、リファクタリングがより合理的になります。

Ruby on Railsアプリケーションで大規模なモデルやコントローラを見かけることは珍しくありません。多くの場合、そのコードの多くはサービス領域やヘルパークラスに再構築されます。しかし、Hanamiアプリケーションでは、その全体的な設計のため、1つのモデルや1つのコントローラが扱いにくくなるほど多くのコードで埋め尽くされてしまうことはなかなかありません。

Vonageボイスアプリケーションの作成

Vonage Voice APIを利用するWebアプリケーションを作成するには、DashboardでVonage Voice Applicationを作成する必要があります。に移動します。 アプリケーションに移動します。任意の名前で新規アプリケーションを作成し、"Generate public and private key "を選択します。これで private.keyファイルをコンピューターにダウンロードします。Hanamiアプリケーションの作成を開始したら、そのファイルをルートフォルダに移動します。

で「Voice」機能をオンにしてください。機能をオンにしてください。完了したら保存.をクリックし忘れた場合は保存をクリックし忘れると、公開鍵と秘密鍵の情報はVonageアプリケーションに保存されず、新しい公開鍵と秘密鍵のペアをもう一度生成する必要があります。

VonageのVoiceアプリケーションでは、Vonage Voice APIからのデータに対して、外部からアクセス可能なWebhookアドレスを提供する必要があります。このチュートリアルでは、このデータを使って何かをするつもりはありません。それでも、本番環境で Webhook を使用する際には、少なくとも API から送信された情報を確認することは良い習慣です。ngrokを使えば、アプリケーションを作成したり作業したりするときに、ローカルの開発環境に外部からアクセスできるようにすることができる。ngrok を使用したことがない場合は、次のチュートリアルを参照してください。 このチュートリアルを参照してください。

DashboardでVoiceアプリケーションの作成が完了すると、アプリケーションIDが作成されます。これは今回のアプリで重要になるので、メモしておいてください。

これでVonage VoiceアプリケーションとVonageバーチャル番号が手に入ったので、アプリを作る準備ができました！

花見アプリを作ろう

新しいアプリケーションの最初のステップは、それを初期化することです。コマンドラインから

hanami new voice_app --database=postgres

という新しいディレクトリが作成される。 voice_appという新しいディレクトリが作成され、そこからデータベースにPostgreSQLを使ったウェブ・アプリの足場となるこのコマンドを実行した。そのディレクトリに移動し、お好みのコードエディタで開いてください。

これで音声合成アプリケーションのコードを書き始めることができる。

Vonage Ruby SDKのインストール

最初に行う作業は、Vonage Ruby SDK を gem 依存として Gemfile.

ルート・フォルダーから Gemfileを開き、ルート・フォルダーから gem 'vonage'を追加する。そうしたら、コマンドラインから bundle installをコマンドラインから実行する。

音声通話が可能な認証済みVonage SDK Clientをインスタンス化するには、Vonage API認証情報を提供する必要があります。Vonage Dashboardからダウンロードした private.keyファイルをHanamiアプリのルートフォルダに移動します。また、VonageアプリケーションIDを提供する必要があり、この機会にVonage電話番号を追加します。電話番号がまだ存在しない場合は、ルートフォルダに .envファイルを作成するか、現在のファイルを開き、以下を追加してください：

VONAGE_APPLICATION_ID=Your Vonage Application ID Goes Here
VONAGE_PRIVATE_KEY=./private.key
VONAGE_NUMBER=Your Vonage Number Goes Here

各等号の後のテキストを必要な値に置き換える必要があります。の値はそのままでよい。 VONAGE_PRIVATE_KEYの値は秘密鍵ファイルを正確に指しているので、そのままにしておいてください。

データベースの準備

この時点で、アプリケーション用のデータベースを準備します。このデータベースを使って、音声合成アプリケーションの言語オプションのリストを保存します。ユーザーは、データベース内の利用可能な言語のいずれかを選んで、電話で送信するメッセージを作成することができます。

言語の情報を保持する新しいモデルを生成します。Hanamiでは、データベースモデルのロジックは entityに格納され、データは repository.に格納されます。 entityはデータベースから切り離されます。 repositoryはデータレベルそのものです。

言語モデルを生成するために、Hanamiジェネレーターを再び使うことができます。 bundle exec hanami generate model language.

これは lib/voice_app/entitiesと呼ばれる language.rbの新しいリポジトリ lib/voice_app/repositoriesという language_repository.rbに、そして db/migrations.マイグレーションファイルはタイムスタンプで始まり create_languages.rb.ジェネレーターは私たちのためにいくつかの仕様ファイルも構築します。

マイグレーションファイルを開き、言語名と言語名の列を含むように編集する必要があります。 IETF BCP-47コード指定の列を含むように編集する必要があります。

マイグレーションファイルは、最初に開くとこのようになります：

Hanami::Model.migration do
  change do
    create_table :languages do
      primary_key :id

      column :created_at, DateTime, null: false
      column :updated_at, DateTime, null: false
    end
  end
end

行の後に primary_key :id行の後に、2つの新しい列を作成するコードを追加する：

column :name, String, null: false
column :code, String, null: false

ファイルを保存してから以下のコマンドを実行すると、追加した言語テーブルとそのカラムを持つデータベースが作成される：

bundle exec hanami db prepare

最後に、データベースにいくつかの言語を追加しよう。一番手っ取り早いのは、ターミナルからHanamiコンソールにドロップして、いくつかの言語を追加することだ。Vonage API Developer Portalにある利用可能な言語リストから選択するか、以下のサンプルコードにあるものを使用することができます。まず、コンソールに入るには、コマンドラインから bundle exec hanami consoleをコマンドラインから実行します。次に、データを作成するために、以下のコードスニペットのサンプル言語を使用するか、選択したものから変更して、以下のコードを実行します：

>> repository = LanguageRepository.new
>> repository.create(language: 'English', code: 'en-US')
>> repository.create(language: 'Danish', code: 'da-DK')
>> repository.create(language: 'Tamil', code: 'ta-IN')
>> exit

これで、新しいアプリケーションに言語のデータベースが作成され、次のステップであるビューの生成に進む準備ができました。

ウェブアクションの作成

このチュートリアルでは、Hanamiに同梱されている homeフォルダで構成されたアクションを構築します。そのため、最初のアクションはルート /パスに対応する最初のアクションでは、コマンドラインからHanamiジェネレーターを使って indexアクションを作成します。これは indexビュー用のコントローラと、そのためのHTMLテンプレートが app/web/templates/home/index.html.erb.

さらに、このジェネレーターは、自動的にルートを追加してくれます。 app/web/config/routes.rb: get '/', to: 'home#index'.

上記を作成するために以下を実行する： bundle exec hanami generate action web home#index.

この瞬間を利用して、アプリケーションに必要な他のアクションを生成する。要するに、以下のものが必要なのだ：

new:フォームのアクション POSTユーザーが電話情報を送信するフォームのアクション
create:フォームデータを使って新しい音声合成呼び出しを作成するアクション
success:呼び出しの初期化後にビューを表示するアクション

これらを作成するには、以下を実行する。わかりやすくするために、それぞれを別の行に分割している：

bundle exec hanami generate action web home#new bundle exec hanami generate action web home#create bundle exec hanami generate action web home#success

上記の各ジェネレーターアクションは、最初の indexアクションと同じように

ビューの作成

アプリケーション用に2つのビューのHTMLを追加します。最初のビューはルート indexビューで、2つ目は successビューになります。

ファイルを開き /apps/web/templates/home/index.html.erbファイルを開き、以下を追加する：

<h1>Text-to-Speech Calls on Hanami</h1>

<p>Let's make a phone call!</p>

<form action="/create" method="post">
  <label for="number">Enter a recipient number:</label>
  <input type="text" id="number" name="number">
  <br />
  <label for="language">Choose a language:</label>
  <select id="language" name="language">
    <% languages.each do |voice| %>
      <option value=<%= language.code %>><%= language.name %></option>
    <% end %>
  </select>
  <br />
  <label for="message">Enter a message:</label>
  <textarea id="message" name="message" col="10">
  </textarea>
  <br />
  <input type="submit" value="Submit">
</form>

この indexビューには、3つの入力と送信ボタンを持つ小さなHTMLフォームがあります。最初の入力は、ユーザーがダイヤルしたい番号です。2番目の入力は、言語の選択である。最後に、3番目の入力は、通話で伝えるメッセージである。

2番目の入力の言語ドロップダウン選択は、言語リポジトリにある言語から生成されます。しかし、ビューのローカル変数 voicesを介してアクセスされていることに気づくでしょう。この変数はどこから来たのでしょうか？このチュートリアルの次のステップで、この変数にアクセスできるようにします。

では successビューを追加しましょう。ビューを追加しましょう。 /apps/web/templates/home/success.html.erbを開き、以下を追加します：

<p>Congrats, you sent your message!</p>
<br />
<p>Care to <a href="/">try again?</a>

このビューには、通話完了のお祝いメッセージと、再試行の案内が含まれる。

コントローラにロジックを追加して、ビューで voicesにロジックを追加しましょう。

コントローラ・ロジックの定義

この前のステップで述べたように、変数のコンテキストを indexビューで提供する必要があります。そうしないと、アプリケーションはその変数を未定義とみなしてしまいます。インスタンス変数の定義を indexコントローラの apps/web/controllers/home/index.rb.つのステップが必要だ。まず、データをコントローラに公開する必要があります。Hanamiは、すべてのコントローラがすべてのデータストアにアクセスする必要があることを想定しているわけではないので、コントローラがアクセスできるデータについて意図的に設定する必要があります。そのため、コントローラがどのデータにアクセスできるかを意図的に設定する必要があります。 #callメソッドに変数をインスタンス化する必要があります。

これは indexコントローラーはこんな感じ：

module Web
  module Controllers
    module Home
      class Index
        include Web::Action

        def call(params)
        end
      end
    end
  end
end

行の後に include Web::Action行の後に expose :languages.これで、言語データベースのテーブルがコントローラで使用できるようになります。そして #callアクションの中に、以下を追加します： @languages = LanguageRepository.new.allを追加して、リポジトリ内のすべての言語を indexビューに渡します。

では、Vonage Ruby SDKをコントローラに組み込んでみましょう。 createコントローラに組み込んでみましょう。SDKのクレデンシャルインスタンスをインスタンス化し、それを使用して、音声合成で通話中に送信されるユーザのテキストで電話を生成します。以下を apps/web/controllers/home/create.rbファイルに追加します：

require 'vonage'

module Web
  module Controllers
    module Home
      class Create
        include Web::Action

        def call(params)
          client = Vonage::Client.new(
            application_id: ENV['VONAGE_APPLICATION_ID'],
            private_key: ENV['VONAGE_PRIVATE_KEY']
          )

          response = client.voice.create(
            to: [{
              type: 'phone',
              number: params[:number]
            }],
            from: {
              type: 'phone',
              number: ENV['VONAGE_NUMBER']
            },
            ncco: [{
              action: 'talk',
              text: params[:message],
              language: params[:language]
            }]
          )

          redirect_to '/success'
        end
      end
    end
  end
end

コード・スニペットの最初の行で requireVonage Ruby SDKを使用しています。そして #callメソッド内でクライアントを作成し、SDKの voice#createインスタンス・メソッドを使用して呼び出しを送信します。この voice#createメソッドは API仕様メソッドは、Voice APIのAPI仕様に従って、必須およびオプションのパラメータを受け取ります。最低限、このメソッドには

toパラメータを持つ配列：を持つハッシュを保持する配列。 typeと numberキー
fromパラメータで指定します：の2つのキーを持つハッシュ。 typeと number
nccoパラメータで指定します：Voice API に送信する命令を格納したハッシュの配列。

API仕様 API仕様および NCCOリファレンスは、音声通話を構築する際に利用できるすべての可能な値を発見するための良い出発点です。

アプリケーションの実行

これでアプリケーションを実行する準備ができました！Hanamiウェブアプリを起動するには、ターミナルから次のコマンドを実行します：

bundle exec hanami server

上記のコマンドは、ポート2300でウェブサーバーを起動します。これで、ウェブ・ブラウザを使って http://localhost:2300.電話で音声合成を送信するために作成したフォームが表示されます。おそらくあなたの電話番号を受信者番号として使用して、先に進んで記入してください。Submit "を押すと、あなたのメッセージとともに電話がかかってきて、ブラウザが. successビューにリダイレクトされます。

おめでとう！Hanamiを使って、Vonage Voice APIのテキスト読み上げ機能を使って、完全に機能する音声アプリケーションを構築しました。

次はどうする？

Vonage Voice API でできることの可能性を試してみましたが、まだまだ発見することはたくさんあります。以下のリソースは、あなたの旅を続けるための良い場所となるでしょう：