目次

はじめに~ようこそ!VUI温泉へ

ご挨拶&ご説明
動作環境について
サンプルデータのリポジトリー
免責事項と表記関係
謝辞
底本について

第1章 音声アプリの企画

1.1 企画を立てよう
1.2 企画のタネを見つけよう
1.3 その企画はシンプルかどうか?
1.4 企画ができたら

第2章 プラットフォーム

2.1 各プラットフォームのベストプラクティスを理解しよう
2.2 各プラットフォームの概念的な差異
2.3 各プラットフォームの機能的な差異
2.4 どのプラットフォームから作ればいいの?

第3章 設計

3.1 音声アプリのUIを設計していこう
3.2 スマートスピーカーの中の人格を決める「履歴書」を作ろう
3.3 ハッピーパスについて
3.4 音声アプリの本格的なフローを書こう
3.5 デバッグ

第4章 画面付きデバイスの対応について

4.1 対応すべき、した方が絶対にいい!!
4.2 5つの要素
4.3 画面ありきで考えないで!
4.4 画面付きデバイスの発売以前に公開したスキルについて
4.5 画面付きデバイスのテンプレートと自由度
4.6 ディスプレイテンプレートを使う際の注意など
4.7 Amazon Presentation Languageについて
4.8 マルチモーダルスキルにおけるUI/UXの重要性

第5章 Voice UI/UXデザイナー

5.1 Voice UI/UXデザイナーと言う仕事
5.2 脚本の読み書きが強みに
5.3 いろんな場所にどんどん顔を出そう

第6章 Clovaスキル開発ハンズオン~開発環境を用意しよう

6.1 機材の用意
6.2 Visual Studio Codeのインストール
6.3 Node.jsの動作環境をインストール

第7章 Clovaスキル開発者デビュー!

7.1 これから作るもの
7.2 LINE developers 登録
7.3 Clova Developer Center β でスキルチャネルを作成
7.4 Extentionの設定情報記入
7.5 対話モデルの作成
7.6 開発設定
7.7 アカウント連携
7.8 ユーザー設定「スキルストア」
7.9 テスト

第8章 スキル本体のプログラムを作る

8.1 Finderで、コードを置くフォルダをつくる
8.2 「helloworld」コードのダウンロード
8.3 .envファイルの作成
8.4 npmをつかって必要なパッケージの追加インストール
8.5 エラーが出ちゃった時の調べ方

第9章 サーバーの起動

9.1 RESTfulサーバーの起動
9.2 ngrokクライアントのインストール
9.3 ClovaスキルとngrokのURLの紐付け
9.4 シミュレーターからの呼び出しテスト
9.5 トラブルシュート

第10章 実機で喋らせよう

10.1 Clovaアプリで、テスト中のスキルを「有効」にする
10.2 Clovaスキル「ハローワールド」の動作確認
10.3 トラブルシュート
10.4 Clovaは自分の発音をどのように認識しているかを調べる
10.5 Clovaに英語を喋らせよう

第11章 AWSにデプロイしよう

11.1 AWSの無料枠を確認する
11.2 AWSの無料アカウントを作る
11.3 Lambda関数を作成
11.4 API GatewayにPOSTメソッドを追加
11.5 APIをデプロイ

第12章 ClovaからLambdaに繋ぎこもう

12.1 Lambda関数にあわせてClovaスキルを修正
12.2 node_modulesをインストール
12.3 zip圧縮し、AWSにアップロード
12.4 ClovaスキルからAPIに接続する設定
12.5 シミュレーターでテストする
12.6 Lambda関数のテスト
12.7 トラブルシュート
12.8 実機でテストする
12.9 まとめ

第13章 LINE botにメッセージを送ろう

13.1 Botの作成
13.2 BotのIDやハッシュ類を控えておく
13.3 Lambda関数のコードダウンロード
13.4 Lambda関数の上書き
13.5 Lambda関数のテスト
13.6 Clova実機テスト
13.7 ユーザーIDを動的に取得するように変更
13.8 動的ユーザーIDによる、Clova実機テスト
13.9 まとめ

第14章 IFTTT

14.1 IFTTTについて
14.2 Google Homeから家電を操作しよう
14.3 Amazon Alexaから家電を操作しよう
14.4 IFTTTで、Google Home向けのレシピを作ってみよう

第15章 Alexa Skill Blueprints

15.1 Alexa Skill Blueprints でスキルを作ってみよう

あとがき

はじめに~ようこそ!VUI温泉へ

ご挨拶&ご説明

 ……あら、お客様。大変失礼しました。

 いつからそこに?まるで影武者のようですね。

 私達たち、おしゃべりに夢中で気づきませんでした。

 忍びだけに、本日はお忍びのご旅行ですか???……うふふ。


 ようこそ、『VUI温泉』へいらっしゃいました。

 ささ、荷物はこちらに。スリッパお履きになって……。


 お客様、当温泉は、初めてでいらっしゃいますか?


 ……あら、そうなんですね。ありがとうございます。


 当温泉は初めての方を特に大歓迎しております。


 長旅でお疲れでしょうけれども、当温泉のマニュアル『スマートスピーカーアプリのお品書き』を、この特製ウェルカムドリンクでも飲みながらゆっくりとお聞きいただけますでしょうか?

図: VUI温泉へいらっしゃいませ

 まず本書前半では、Amazon Alexa、Google Assistant、LINE Clovaの各プラットフォームの音声アプリを20本近く企画・設計をしてきた当温泉の若女将(叶姉妹で言うところの美香さん、阿佐ヶ谷姉妹で言うところの美穂さん)である元木が、経験から、企画立案の方法、プラットフォームの差異、ハッピーパスや会話フローの作り方や注意点、Voice UI/UXデザイナーの仕事とは何かといったことをしたためております。

 そして、後半は当温泉の名物女将(広瀬姉妹で言うところのアリスさん、倍賞姉妹で言うところの千恵子さん)が、LINE Clovaの開発について、本当の初心者でもちゃんと最後まで開発が出来るように図解をたくさん入れながら、親切にしたためております。また、ノンプログラミングでAmazon EchoやGoogle Homeに対応したシステムを作る方法にも触れているので、そちらもお見逃しなく。

 執筆自体は初心者ながら、Voice UIを愛する気持ちだけで、このマニュアル『スマートスピーカーアプリのお品書き』は、アツアツに仕上がっております。


 ……ところで、どうして二人でこのお品書きを作ることになったのか?……って?


 それは、お客様がご出発される時に、お土産としてお話することにいたしますね。うふふ。


 特製ウェルカムドリンクはいかがでしたか?


 ……おいしかった?それは良かったです。


 朝早くから二人で、となりの酪農農家に生乳を搾りに行った甲斐がありました。うふふ。

図: 牛の乳搾りはいいぞ

 それからお客様。VUI温泉の湯は、とってもなめらかでツルッツルになる美人の湯なんですよ。男性も女性も肌艶が良くなるんです。


 それだけではなく、入るとほんの少しスキルが上がったような気分になる……なんておっしゃるお客様もいらっしゃるんです。本当かしら?でも、ありがたい限りですわ。うふふ。




 さあ、ごゆっくりと『スマートスピーカーアプリのお品書き』を片手に、VUIのなめらかなお湯に浸かって、旅の疲れを癒してくださいね。

動作環境について

 本書の第2部「Clovaスキル開発ハンズオン」では、Macを使った方法の説明をいたします。必要なOSの種類などは、「機材の用意」で詳しくご説明します。

サンプルデータのリポジトリー

 https://github.com/sitopp/clova-helloworld.git

免責事項と表記関係

 本書に記載されている内容は、筆者の所属する組織の公式見解ではありません。

 本書はできるだけ正確を期すように努めましたが、筆者が内容を保証するものではありません。記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。よって本書の記載内容に基づいて読者が行った行為、及び読者が被った損害について筆者は何ら責任を負うものではありません。

 本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。本書の内容は、2019年6月執筆時点のものです。

謝辞

 書籍の作り方について、しのやん様に教えていただきました。いつも危ないところで助けていただき、本当にありがとうございます。

底本について

 本書籍は、技術系同人誌即売会「技術書典5」で頒布されたものを底本としています。

第1章 音声アプリの企画

1.1 企画を立てよう

 みなさんはこれまで、どんな企画をして来たのでしょう。

 IT業界が長い人はフィーチャーフォンのWEBサイトを企画していた人もいるでしょうし、PCのWEBサイトのクリエイティブディレクターでした、と言う人もいるでしょう。

 はたまた、印刷会社で紙媒体のディレクターやってました、と言う人。広告代理店で、とある企業の、とあるサービスのプロモーション全般の制作進行管理をやっていたと言う人もいるかもしれません。

 全部、これまでの筆者の仕事なんですけどね。

 業界は変われど企画畑でずっと働いて、ウンウン唸りながら日々企画を考えて情報収集を続けてきた人。さらにはマーケティングのことも考えて、悩みに悩み抜いて答えを出して来た人からしても、きっとVoice UIは未知なる世界ですよね。それでも、企画は企画。これまでやったことがないことを考えるのはワクワクしませんか?

 音声アプリの企画のポイントは、次の3つです。

 ・音声で聞いたり、音声でコントロールして便利

 ・音声で聞いたり、音声でコントロールして新しい

 ・音声で聞いたり、音声でコントロールして面白い

 この3つのどれかに当てはまる企画を考えましょう。逆に、次の3つは避けてください。ユーザーに使われないアプリを作っても仕方ありません。

 ・音声で聞いたり、音声でコントロールするよりもスマホの方がわかりやすい

 ・音声で聞いたり、音声でコントロールするとイラっとする

 ・音声で聞いたり、音声でコントロールする意味がない

 あなたの自由な発想が次のVoice UIのマーケットを作っていきます!さあ、まずは自由に発想を巡らせましょう。

1.2 企画のタネを見つけよう

 とはいえ、どうやってVoice UIの企画を考えればいいのかわからない……。初めてVoice UIに触れる人は、まずそこで立ち止まります。そうした時筆者は、2点大事にしていることがあります。

 1点目は「PCを捨てて、街へ出よう」ということです。とにかく、街に出て情報収集しましょう。

 例えば、喫茶店やカフェにて。好きな飲み物を頼んで席についたら、飲みながら周りの会話に耳を傾けます。マスターと常連客の会話、幼稚園にお子さんを送った後のママさんグループの会話。倦怠期なのかお互いにスマホに目を通しながらポツポツとするカップルの会話……。

 気になった会話の内容をスマホのメモに書き留めます。特に相槌の打ち方は、気にするといいでしょう。会話の種類は、人と人との関わりの数だけあります。

 音声アシスタントと人も「会話」のコミュニケーションで成立する関係です。日頃から会話を意識すると、あっと驚くような画期的な企画につながると信じています。

図: カフェや喫茶店は会話の宝庫

 2点目は、「他人の作った音声アプリを使い倒そう」ということです。

 「Voice UIの企画でこういうことが出来ないか?」という相談が時折舞い込みます。しかし、「もう既に世の中にそれ、あるから。しかもまんまだから」とか、「それは将来的にはできるようになるかもしれないけど、今はまだできないから」ということが多いのです。

 筆者や筆者の周りのVoice UIに関わる人間は、とてもマーケットに敏感です。新着の音声アプリがあればすぐに試してみますし、筆者の場合は試した上でその音声アプリのいいところ、悪いところをメモしています。

 そうすることによって、もう既に世の中にある音声アプリでも少し方向転換すれば新しい魅力的な内容になる可能性も出てきます。さらに、世の中にないとわかったらしめたものです。さっさと仲間を見つけて、作ってしまえばいいのです。

 他人の作った音声アプリを徹底的に使い倒すことによって、自分の企画にその知見が生きてきます。

図: 気軽に話しかけてどんどん使おう

1.3 その企画はシンプルかどうか?

 各プラットフォームのどのベストプラクティスを見ても共通して書いてあるのは、「機能はシンプルに」ということです。

 人は耳から聞いた情報を処理できる量が限られています。思い出してください。航空会社やクレジットカード会社の電話での音声案内を最後まで聞いて、「あれ、確認したい◯◯って何番だっけ?」とわからなくなり、結局また最初から聞き直すといった経験はありませんか?これは、その音声案内で可能な機能が多いために起こる弊害です。

 同じように音声アプリにおいても、複数の機能を入れようとするとユーザーを戸惑わせてしまいます。特に、これまでWEBやアプリでの企画をされて来た方は、あれもこれもと企画を盛り込みがちです。

 ユーザーを路頭に迷わせないためにも、企画段階から機能はシンプルに作ることをイメージしてください。

1.4 企画ができたら

 企画ができたら、それを周りの人に説明して聞いてもらいましょう。「想像できない」「それ、スマホでもよくない?」「意味がわからない」と言われたら、なぜ想像ができないのか、なぜスマホでもいいと思ったのか、なぜ意味がわからないのかを改めて掘り下げて考えます。

 例えば、筆者の企画のひとつである「カレシダンナの愚痴を聞くよ」と言う音声アプリを知人に説明すると、「アレクサがカレシダンナの愚痴を聞いてくれる」と言うコンセプトはとても想像しやすいし、わかりやすいと言われました。「スマホでもよくない?」と言った人はいませんでした。「友達でもよくない?」とは言われましたが。

 自分の彼氏や旦那の愚痴は、言う相手を選びますよね。笑い話になるのであれば誰に話しても大丈夫ですが、深刻な悩みになると誰彼構わず話すと言うわけにはいきません。

 音声アシスタントは、現時点ではまだまだAIとは程遠い存在です。何を言っても答えてくれると言うわけではありません。その設計をするのは、あなたの仕事なのです。

 ところで、「カレシダンナの愚痴を聞くよ」を、どなたか一緒に作ってくださる開発者の方はいらっしゃいませんか?STORYLINE(現在はInvocable)を使って自分で作っていたのですが、デプロイのところでうまくいかずに、現状一旦中断しております……。かつ、きっとこのツールだけではこれは実現できないなという機能も出てきており、ああ、自分でコードが書ければなあと思う日々です。勉強中ではありますが、非エンジニアにとってはハードルが高く、悪戦苦闘しております。自分では最高にイケてる企画だと思っているのですが、どなたか一緒に作ってくださる方を募集しております!

図: リアルに募集中!

第2章 プラットフォーム

2.1 各プラットフォームのベストプラクティスを理解しよう

 企画ができたら、すぐにVoice UI/UXの設計に入りたいところです。ですが、その前に各プラットフォームが公表しているベストプラクティスを理解することが必要です。

 ・Amazon Alexa

  ─https://developer.amazon.com/ja/docs/smarthome/best-practices-for-the-alexa-app.html

 ・Google Assistant

  ─https://developers.google.com/actions/design/walkthrough?hl=ja

 ・LINE clova

  ─https://clova-developers.line.biz/guide/Design/Design_Guideline_For_Extension.md

 このURLに書いてあることを、しっかり読みましょう。

 後ほど、筆者の経験も含めて、大切なことについては改めて詳しく述べていきますね。

図: プラットフォームから出ている文書は熟読!

2.2 各プラットフォームの概念的な差異

 各プラットフォームはもちろん別の企業なので、音声アシスタントには様々な差異があります。開発しながら、咀嚼して捉えていくのが一番自分の糧になるのですが、ここでは概念的な差異を紹介します。

Amazon Alexa

 Amazon Alexaは、音声アプリのことを「スキル」と呼びます。

 Amazon Alexaが使えるデバイスに、自分の使いたい「スキル」をAlexaスキルマーケットからユーザーが選定して「有効にする」ボタンを押して追加し、カスタマイズしていく、という概念です。

 呼び出し方を知っていれば、「有効にする」ボタンを押さずとも使えるようになりさらに便利になりました。

 Amazon Alexaにおける音声での検索エンジンは、MicroSoftのBingを使っています。普段、Bingを好んでWEB検索で使っている人はなかなかのマニアックな方だと思いますが(いらっしゃったらすみません)、Alexaを使っている人は、みんな知らず知らずのうちにBingにお世話になっているのです。

 Amazon Alexaもスマホのアプリから使えるようになりましたので、いつでもあなたのそばにAmazon Alexaがいるよ、と言う世界を目指しているように思います。

 デバイスとしてはEchoシリーズというスピーカーを出しています。画面付きのデバイス「Amazon Echo SPOT」「Amazon Echo SHOW」を日本でもいち早く発売しました。後ほど説明しますが、本当に、本当に、画面付きはいいぞー!

 個人的には、とてもオススメです。

図: Amazon

Google Assistant

 Googleは、音声アプリを「アプリ」もしくは「アクション」と呼びます。

 ただ、Alexaのようにマーケットから追加するというより、クラウドから「呼び出してくる」という概念です。

 つまり、マーケットはあるのですがそこで「有効にする」という作業は必要はなく、単純にショーケースのような捉え方です。スマホで見ている場合は、「試してみる」のボタンを押下するとそのアプリが起動する形です。

 もちろん、Google Assistantの検索はGoogleの検索エンジンです。

 これは筆者の個人的な想像の範疇を超えませんが、Voice UI市場の世界的シェアで当初GoogleはAmazonに遅れを取っていました。音声アプリにおいての検索エンジンをBingに取られるのは何としても避けたいことである、と考えているのだと予想します。

 ですので、Googleは「Google Home」「Google Home mini」だけでなく、スマホなどあらゆるデバイスで使える、世界で既に10億台(2019年1月現在)が動いていることを高らかにうたっています。大手の家電量販店を巻き込んだ販売戦略も、これまで日本ではGoogleがこの規模で行ったものはなかなかないのではないでしょうか。

 それくらいGoogleが本気で力を入れているプロジェクトである、と考えていいでしょう。

図: Google

LINE Clova

 LINEは大きく前述2社と違うところは、「キャラクター戦略」と「LINEアプリとの連携」です。

 まずは「キャラクター戦略」です。自社のオリジナルキャラクターである、「サリー」「ブラウン」に加え、「ドラえもん」「ミニヨン」などキャラクターのスピーカーを次々と発表しました。

 日本人のキャラクター好きは世界でも類を見ないものなので、そこに着眼したというところは日本を主戦場として見ているLINEの姿勢の表れでしょう。

 また、「LINEアプリとの連携」についても、これまでコツコツと増改築を進めてきたLINEアプリをしっかりとこのLINE Clovaとつなげているところが特徴的です(一方で少し使いづらく何がどこにあるか最早把握しづらいレベルです)。

 メッセージのやり取りや読み上げはもちろん、今後は企業アカウントやお店などが、LINEアカウントと連携したLINE Clovaの何かしらサービスを始めていくことが考えられます。

 また、2018年11月に行われたエンジニア向け技術カンファレンス「LINE DEVELOPER DAY 2018」で発表されたのが「LINE Things」です。これは、LINEがあらゆるモノとつながっていくというプロダクトです。これがClovaからも操作が可能になってくると、一気に情勢が変わってくる可能性も十分にあります。

図: LINE
試し読みはここまでです。
この続きは、製品版でお楽しみください。