シェア:
){kind=small}
ベンはセカンドキャリアの開発者で、以前は成人教育、コミュニティ組織化、非営利団体運営の分野で10年を過ごした。彼はVonageの開発者支援者として働いていた。コミュニティ開発とテクノロジーの交差点について定期的に執筆している。南カリフォルニア出身で、長年ニューヨークに住んでいたが、現在はイスラエルのテルアビブ近郊に在住。
Hanamiで音声合成アプリケーションを作る
所要時間：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つのコントローラが扱いにくくなるほど多くのコードで埋め尽くされてしまうことはなかなかありません。
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.
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バーチャル番号が手に入ったので、アプリを作る準備ができました！
新しいアプリケーションの最初のステップは、それを初期化することです。コマンドラインから
という新しいディレクトリが作成される。 voice_appという新しいディレクトリが作成され、そこからデータベースにPostgreSQLを使ったウェブ・アプリの足場となるこのコマンドを実行した。そのディレクトリに移動し、お好みのコードエディタで開いてください。
これで音声合成アプリケーションのコードを書き始めることができる。
最初に行う作業は、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ファイルを保存してから以下のコマンドを実行すると、追加した言語テーブルとそのカラムを持つデータベースが作成される：
最後に、データベースにいくつかの言語を追加しよう。一番手っ取り早いのは、ターミナルから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:呼び出しの初期化後にビューを表示するアクション
これらを作成するには、以下を実行する。わかりやすくするために、それぞれを別の行に分割している：
上記の各ジェネレーターアクションは、最初の 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とnumbernccoパラメータで指定します：Voice API に送信する命令を格納したハッシュの配列。
API仕様 API仕様および NCCOリファレンスは、音声通話を構築する際に利用できるすべての可能な値を発見するための良い出発点です。
これでアプリケーションを実行する準備ができました！Hanamiウェブアプリを起動するには、ターミナルから次のコマンドを実行します：
上記のコマンドは、ポート2300でウェブサーバーを起動します。これで、ウェブ・ブラウザを使って http://localhost:2300.電話で音声合成を送信するために作成したフォームが表示されます。おそらくあなたの電話番号を受信者番号として使用して、先に進んで記入してください。Submit "を押すと、あなたのメッセージとともに電話がかかってきて、ブラウザが. successビューにリダイレクトされます。
おめでとう！Hanamiを使って、Vonage Voice APIのテキスト読み上げ機能を使って、完全に機能する音声アプリケーションを構築しました。
Vonage Voice API でできることの可能性を試してみましたが、まだまだ発見することはたくさんあります。以下のリソースは、あなたの旅を続けるための良い場所となるでしょう：