paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

はじめてのGoogle Homeアプリ開発入門。PaizaCloudとRubyで10分でアプリ開発して公開できた!

f:id:paiza:20180119011451j:plain
(English article is here)

f:id:paiza:20151217152725j:plainこんにちは、吉岡(@)です。

皆さんは、スマートスピーカーを使っていますか?

私は最近、Google Homeを使っています。最初は「正直そんなに必要ないのでは?」という気持ちもあったのですが、実際に使い始めると、なかなか便利で手放せなくなってしまいました。

携帯電話を取り出す必要もなく、誰でも、どこからでも、声だけで使えるというのは利便性が高いですね。最近の機械学習・AI技術の進歩もあり、認識精度もいよいよ実用的になってきたなと感じます。

ある調査によると、アメリカでは成人の18%がスマートスピーカー保有しており、さらに保有者の 65%は「手放せない」と言っている…という結果も出ています。 (参考: National Public Media The Smart Audio Report from NPR and Edison Research)

このスマートスピーカーGoogle Homeですが、自分でプログラミングをすれば、自由に拡張し機能を増やすことができます。

Google Homeは単体でも便利ですが、自分好みの機能を追加すると、さらに便利で使うのも楽しくなります。

プログラミングといっても、音声認識などはプラットホーム側でやってくれるので、文字列処理だけで比較的簡単に拡張できてしまいます。

スマートスピーカー声だけで使えるので、自分で作ったプログラムをすぐに同僚や友人、家族などに使ってもらえるのも魅力的ですね。

ただ、実際にGoogle Homeアプリをプログラミングして動かすには、開発環境やサーバの設定が必要です。プログラミング自体は簡単でも、実際に作って動かすところまで持っていくのはなかなか面倒な作業も伴います。

そこで、今回はPaizaCloudを利用してみます。

PaizaCloudは、クラウド上で動く開発環境です。PaizaCloudでは、面倒なインストールや環境設定をすることなく、Web開発やアプリケーション開発を簡単・手軽に始められます。

PaizaCloudでは、Google Homeアプリの開発に適した環境も用意されているので、ブラウザさえあれば、すぐにGoogle Homeアプリをプログラミングして開発することができます。

開発環境がクラウド上で動作しているので、自分でサーバなどを用意しなくても、作ったプログラムはその場ですぐに動かせます!

今回は、実際にPaizaCloud上でRubyを使って、ツイートを読み上げてくれるGoogle Homeアプリを作ってみましょう。

手順に沿っていけば、誰でも10分程度でGoogle Homeアプリを作り、その場で動かしてみることができます。

PaizaCloud Cloud IDEを使う

それでは、始めていきましょう。まずは、PaizaCloudにログインします。

PaizaCloud Cloud IDEのサイトはこちらです。

https://paiza.cloud/

メールアドレスなどを入力して登録すると、登録確認メールが送られてきます。GitHubGoogle(Gmail)ログインを利用すると、ボタン一つで登録することもできます。

サーバを作る

次は、開発環境となるサーバを作ります。

f:id:paiza:20171213234155p:plain

「新規サーバ作成」ボタンを押して、サーバ作成画面を開きます。

f:id:paiza:20171218232242p:plain

特に何も変更せずに、もう一度「新規サーバ作成」ボタンを押すと、3秒程度でGoogle Homeアプリの開発環境がブラウザ上にできあがります。

f:id:paiza:20180115174407p:plain

Google Assistantアプリを作る

Google Home拡張機能は、Google Assistantアプリとして作ります。

Google Assistantアプリの作成はActions on GoogleというWebサイトでできますので、ブラウザで以下のURLを開きます。

https://console.actions.google.com/

f:id:paiza:20180119104802p:plain

"Add/import project"をクリックします。

f:id:paiza:20180119104824p:plain

"Add project"ダイアログが表示されるので、プロジェクト名と国名を入れます。ここでは、プロジェクト名を"MyTweet"、国を"Japan"に設定します。"CREATE PROJECT"ボタンを押します。

f:id:paiza:20180119105027p:plain

Actions on Googleのプロジェクトが作成されました。Google Homeでの会話機能を拡張するには、通常Dialogflowを使います。

"Dialogflow"の"BUILD"ボタンを押します。

f:id:paiza:20180119105054p:plain f:id:paiza:20180119105155p:plain "CREATE ACTIONS ON DIALOGFLOW"ボタンを押してDialogflowのアクションを作成します。

ログイン、認証などが要求された場合は、ログイン等をしてください。

f:id:paiza:20180119105117p:plain

"DEFAULT LANGUAGE"を日本語に変更して、"CREATE"ボタンを押します。

f:id:paiza:20180119105330p:plain

Dialogflowで会話機能を作るためのAgentが作成されました。

はじめての会話

まずは、このGoogle Assistantアプリを使って、何か言わせてみましょう。

Dialogflowのメニューから"Intents"を選びます。

f:id:paiza:20180119105547p:plain

"Default Welcome Intent"で、このアプリが最初の動作を記述しますので、これをクリックします。

"Response"の"Text response"で話すことばを書いていきます。ゴミ箱アイコンでデフォルトのメッセージを削除したあと、"ADD MESSAGE CONTENT"ボタンで"Text response"を選び、追加メッセージを作成します。ここでは「マイツイッターへようこそ」と書いてみます。

設定できたら、画面上部の"SAVE"ボタンで保存します。

f:id:paiza:20180119105757p:plain

次に、Actions on GoogleGoogle Assistantアプリの設定をします。

https://console.actions.google.com/ を開き、作成したプロジェクト(MyTweet)を選択します。

f:id:paiza:20180119110016p:plain

"Overview"ページで設定していきます。正式にリリースする場合は細かく設定しておきますが、ここではとりあえず適当に設定しておきます。

App informationの"EDIT"をクリックします。

まず、言語が英語("English")になっている場合、"Add Language"で日本語("Japanese")を追加し、"Japanese"に変更します。

f:id:paiza:20180119110125p:plain

アプリケーションの名前と、発音を設定します。ここでは、「マイTwitter」のように書いておき、"NEXT"ボタンを押します。

この名前で、「OK Google、マイTwitterにつないで」のように呼び出すことになりますので、できるだけ、発音しやすい言葉にしたほうがいいですね。

f:id:paiza:20180119110233p:plain

"Details"では、"Assistant app introduction"、"Short description"、"Full description"でアプリの説明などを設定します。ここも「ツイートを読む」などを入れて、"Next"ボタンを押します。

f:id:paiza:20180119110652p:plain

"Images"ではアプリの画像を指定します。とりあえず仮で、何らかの画像ファイルを設定しておきます。

f:id:paiza:20180119110752p:plain

"Contact details"ではメールアドレスを設定します。

f:id:paiza:20180119110821p:plain

"Privacy and consent"ではプライバシーポリシー("Privacy Policy")を設定します。仮に"https://privaci.policy/"のように設定しておくこともできます。

f:id:paiza:20180119110834p:plain

"Additional Information"ではカテゴリ(Category)を指定します。"Social & comminication"にしておきます。設定できたら"Save"ボタンを押します。

f:id:paiza:20180119110924p:plain

設定できたら、"TEST DRAFT"ボタンを押してみましょう。会話シミュレータが起動します。

f:id:paiza:20180119111135p:plain

「マイTwitterにつないで」と入れてみましょう。

f:id:paiza:20180119111245p:plain

先ほど設定した「マイツイッターへようこそ」のメッセージが表示され、また音声も出てきます。

実際にGoogle Homeからも利用できるので、「OK Google、マイツイッターにつないで」、「OK Google、マイツイッターと話す」のようにGoogle Homeに話しかけてみましょう。

Google Homeが返事してくれましたね!

会話プログラムの呼び出し

それでは、今度は実際にツイッターのツイートを読ませてみましょう。

Dialogflowのコンソール( https://console.dialogflow.com/ )を開きます。

Dialogflowで外部のサービスを呼び出すには、Fulfillmentを使います。

メニューからFulfillmentを選択します。

f:id:paiza:20180119111425p:plain

URLフィールドに、サービスのURLを設定します。

PaizaCloudで動かすサーバのホスト名は「サーバ名.paiza-user.cloud」になります。

また、次に作成するRuby Sinatraのサーバはポート番号は4567番になります。PaizaCloudで立ち上げたサーバは自動的にSSLを利用できますので、プロトコルはHTTPではなく、HTTPSにします。また、サービスのパス名は "/webhook"としておきます。

結果、 URLは https://サーバ名.paiza-user.cloud:4567/webhook となります。(「サーバ名」は、作成したサーバの名前に 置き換えてください)

f:id:paiza:20180119111600p:plain

URLを設定したら"SAVE"ボタンをクリックして保存します。

次に、メニューのIntentsから"Default Welcome Intent"を選択します。"Fulfillment"の項目が追加されているので、その"Fulfillment"をクリックし、表示される"User webhook"をチェックしておきます。これで、このアプリが起動したときに、PaizaCloudで動かすサーバに接続できます。

f:id:paiza:20180119111642p:plain

プログラムの作成

それでは、PaizaCloud上でプログラムを書いていきます。ここでは、RubySinatraを使ってサーバを作ります。

PaizaCloudでは、ブラウザ上でファイルの作成・編集ができます。

PaizaCloudの画面左側の「新規ファイル」アイコンをクリックしてみましょう。

f:id:paiza:20171218232330p:plain

ファイル名を入力する画面がでてくるので、ファイル名を"server.rb"として、「作成」ボタンを押します。

f:id:paiza:20180119111805p:plain

ファイルが作成されました!

まずは、単純に何か固定のメッセージを返してみましょう。以下のようにRubyプログラムを作成します。

require 'sinatra'
require 'sinatra/reloader'
require 'sinatra/json'
require './config'

post '/webhook' do
  return json({
      speech: "こんにちは、こちらはサーバプログラムです。"
  });
end

get '/' do
  return "Hello World"
end

f:id:paiza:20180119111920p:plain

プログラムが作成できたら、「保存」ボタンで保存します。

プログラムを見てみましょう。"post /webhook'"ブロックでは、POST "/webhook"リクエストに対するアクションを書きます。ブロックの返り値がHTTP応答となります。

DialogflowのFulfillmentのWebhookでは、JSON形式で返しますので、json()メソッドを使います。

speechフィールドには、このアプリが話す内容を書いておきます。ここでは、固定の「こんにちは、こちらはサーバプログラムです。」というメッセージを返します。

また、動作確認のため、トップページ(GET '/'リクエスト)へのアクションを"get '/'"ブロックに書いておきましょう。ここでは単純に"Hello World"としておきます。

それでは、このプログラムを実行して動かしてみましょう。

実行するには、"ruby ./server.rb -o 0"のようにコマンドを実行します。sinatraはデフォルトではlocalhostのみで待ち受けて外部から接続できません。そこで、このように、"-o 0"(又は"-o 0.0.0.0")オプションを追加してグローバルアドレスで待ち受けて外部から接続できるようにします。

PaizaCloudでは、ブラウザ上で、コマンドを入力するための「ターミナル」を使うことができます。

画面左側の、「ターミナル」のボタンをクリックします。

f:id:paiza:20171213234317p:plain

ターミナルが起動しますので、"ruby ./server.rb -o 0"と、実行するコマンドを入れて改行キー(エンターキー)を押します。

$ ruby ./server.rb -o 0

f:id:paiza:20180119112126p:plain

コマンドが実行されました。"tcp://0:4567"と表示されており、ポート番号4567でサーバが動作していることがわかります。

また、画面の左側に、"4567"と書かれたボタンが追加されています。

f:id:paiza:20180115171204p:plain

Sinatraの開発環境では、4567番ポートでサーバが起動します。

PaizaCloudでは、この4567番ポートに対応したブラウザ起動ボタンを自動で追加しています。

ボタンをクリックすると、ブラウザ(PaizaCloudの中で動くブラウザ)が起動して、"Hello World"と表示されました!

f:id:paiza:20180115171236p:plain

それでは、このプログラムがちゃんと呼び出されるか確認してみましょう。

Dialogflowの右側の「See how it works in Google Assistant.」をクリックしてシミュレータを起動します。(または、"Actions on Google"のプロジェクトのメニューから"Simulator"をクリックしても起動できます。)

f:id:paiza:20180119112015p:plain

"マイTwitterにつないで"と入れてみましょう。"こんにちは、こちらはサーバプログラムです。"と表示されました。PaizaCloudで作成したRubyのサーバプログラムに接続して、応答を取得できていますね!

では実際に、Google Homeに話しかけてみましょう。

「マイTwitterにつないで」と話しかけてみます。

f:id:paiza:20180119112235p:plain

返事が返って来ました。「こんにちは、こちらはサーバプログラムです。」と言っています!

Google Homeでも話しかけてみましょう。「OK Google, マイTwitterにつないで」。返事が返って来ました!成功です!

Twitterからのツイート取得

それでは、いよいよツイートを読み込んで読ませてみましょう。

ツイートを読み込むには、TwitterAPIキーが必要になります。以下の記事のように、APIキーを用意しておきましょう。

http://paiza.hatenablog.com/entry/paizacloud_twitter_bot_ruby/2018/01/10#twitter_apikey

設定ファイル(twitter-config.rb)を作成して、このAPIキーを以下のように設定します。

ここで、YOUR_CONSUMER_KEY / YOUR_CONSUMER_SECRET / YOUR_ACCESS_TOKEN / YOUR_ACCESS_SECRET には、取得したAPIキーに置き換えてください。

twitter-config.rb:

require 'twitter'

config = {
    consumer_key: "YOUR_CONSUMER_KEY",
    consumer_secret: "YOUR_CONSUMER_SECRET",
    access_token: "YOUR_ACCESS_TOKEN",
    access_token_secret: "YOUR_ACCESS_SECRET",
}

$twitterRestClient = Twitter::REST::Client.new(config)
$twitterStreamingClient = Twitter::Streaming::Client.new(config)

サーバプログラムを、ツイートを読み込んで返すように変更します。

server.rb:

require 'sinatra'
require 'sinatra/reloader'
require 'sinatra/json'
require './config'

post '/webhook' do
  tweets = $restClient.home_timeline
  text = tweets[0].text
  return json({
      speech: "えーぴーあいから最新ツイートを読み上げます。" + text
  });
end

get '/' do
  return "Hello World"
end

動作を確認してみましょう。

Dialogflowの右側の「See how it works in Google Assistant.」をクリックしてシミュレータを起動します。(または、"Actions on Google"のプロジェクトのメニューから"Simulator"をクリックしても起動できます。)

"マイTwitterにつないで"と入れてみましょう。最新ツイートが表示されました!

f:id:paiza:20180119112607p:plain

では実際に、Google Homeに話しかけてみましょう。

OK Google, マイTwitterにつないで」と話しかけてみます。

最新ツイートを読み上げてくれていますね。成功です!

Twitterのツイート検索

今度は、ツイートの検索機能を追加してみましょう。「〜で検索」という言葉に反応するようにしてみます。

Dialogflow( https://console.dialogflow.com/ )を開き、メニューからIntentsを選択し、"CREATE INTENT"ボタンをクリックして、Intent作成画面を表示します。

"User says"の部分にユーザの音声入力を書きます。

まずは、"fooを検索"のように入れます。

f:id:paiza:20180119113022p:plain

"foo"の部分は固定ではないのでパラメータとして設定します。"foo"の部分を選択してクリックします。選択肢が表示されるので@sys.anyを選択します。

f:id:paiza:20180119113148p:plain

PARAMETER NAMEには"keyword"という名前を設定しておきます。これで、"foo"の部分に任意の言葉が使えるようになり、"keyword"というパラメータとして参照できるようになります。

f:id:paiza:20180119113226p:plain

このパラメータは必須なので、"REQUIRED"をチェックしておきます。パラメータがない場合のメッセージを設定するため、"Define prompts..."をクリックします。

f:id:paiza:20180119113336p:plain

ここでは、「なになにを検索、のように検索するキーワードを指定してください」と指定しておきます。

f:id:paiza:20180119113404p:plain

PaizaCloudで立ち上げたサーバを利用するので、"Fulfilment"をクリックし、"Use webhook"にチェックしておきます。

f:id:paiza:20180119111642p:plain

以上のように設定できたら、"SAVE"ボタンをクリックして保存します。

サーバプログラム"server.rb"も以下のように変更しておきます。

server.rb:

require 'sinatra'
require 'sinatra/reloader'
require 'sinatra/json'
require './config'

post '/webhook' do
    obj = JSON.parse(request.body.read)
    keyword = obj['result']['parameters']['keyword']
    puts "keyword=#{keyword}"
    if ! keyword
        tweets = $twitterRestClient.home_timeline
        text = tweets[0].text
        return json({
            speech: "最新ツイートを読み上げます。" + text
        });
    else
        tweets = $twitterRestClient.search(keyword).take(5)
        if tweets[0]
            text = tweets[0].text
            return json({
                speech: "#{keyword}でのツイート検索結果を読み上げます。" + text
            });
        else
            return json({
                speech: "#{keyword}のツイート検索結果はありませんでした。"
            });
        end
            
    end
end

get '/' do
  return "Hello World"
end

プログラムを見てみましょう。ユーザの「〜で検索」という発言の「〜」の部分はHTTPの要求ボディにJSON形式で渡されますので、JSON.parseでオブジェクトに変換します。result/parametersフィールドにパラメータが保存されているので、"keyword"パラメータを取得します。

キーワードが存在する場合、キーワードでツイートを検索します。検索するには、$twitterRestClient.searchメソッドを呼び出します。取得できたら、ツイートの内容をJSONオブジェクトで返します。

動作を確認してみましょう。

Dialogflowの右側の「See how it works in Google Assistant.」をクリックしてシミュレータを起動します。(または、"Actions on Google"のプロジェクトのメニューから"Simulator"をクリックしても起動できます。)

"マイTwitterにつないで"と入れてみましょう。その後、「初心者向けプログラミングレッスンを検索」と入れてみると…検索結果が表示されました。

f:id:paiza:20180119112836p:plain

では実際に、Google Homeに話しかけてみましょう。

「マイTwitterにつないで」と話しかけてみます。その後、「初心者向けプログラミングレッスンを検索」と話しかけてみましょう。

検索結果を話しています。成功です!

これでGoogle Homeアプリが完成しました!

なお、PaizaCloudの無料プランでは、一定時間が経つとサーバは停止します。継続的にbotを動かしたい場合は、ベーシックプランへアップデートしてください。 詳しくはこちら https://paiza.cloud

まとめ

PaizaCloud上でGoogle HomeアプリをRubyプログラムを書いて作り、その場で実際に動かしてみました。

Google Homeアプリは、音声認識をあまり意識しなくても、簡単に作れるようになっています。また、作ったアプリを声だけで、誰でもすぐに使えるのも魅力的です。どんなメッセージにどう応答させるかを考えながら作ったり、使いながら改良したりするのは楽しいですね。興味のある方は、ぜひ作ってみてください!

(botを作ってみたらpaiza(@paiza_official)まで教えてくれるとうれしいです!)

 


  「PaizaCloud」では、環境構築に悩まされることなく、ブラウザだけで簡単にウェブサービスやサーバアプリケーションの開発や公開ができます。 https://paiza.cloud

 


  paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック