「音声UI」と、もっと大切な“UI”=Use Imagination 2022.5.6 株式会社Laboro.AI　マーケティング・ディレクター　和田 崇 概　要 PCやスマートフォンなどのデジタルデバイスの操作画面やその手段である、UI（User Interface：ユーザーインターフェース）。近年注目を集めているのが、PCのマウスを使った操作や指によるタップ操作と比べても多くのメリットがあると言われる、音声による操作「VUI（Voice User Interface）」です。ただ、VUIは決して全ての操作・入力環境をカバーするものではありません。「どのUIが最も優れているのか」––それは、”UI”＝Use Imagination：想像力のフル活用）によって初めて見えてくるものです。今回のコラムでは、VUIの特徴やこれまでのUIの進化過程を踏まえつつ、多数あるUI選定に必要なことについて考えを巡らせていきます。 目　次 ・ VUI（Voice User Interface）と、UIの進化 　・ CUI（Character User Interface） 　・ GUI（Graphical User Interface） 　・ NUI（Natural User Interface） 　・ OUI（Organic User Interface） ・ VUIの用途と、その仕組み ・ ユーザーにとってのVUIのメリット 　・ 操作入力の手間ヒマが少ない 　・ 両手や目線がフリーになる ・ ユーザーにとってのVUIのデメリット 　・ 自分の音声を他の人に聞かれてしまう 　・ ユーザー環境によって認識精度が落ちる ・ VUIの展望 ・ もう一つの”UI”「ユーザーを想像する」こと VUI（Voice User Interface）と、UIの進化 VUI（Voice User Interface）とは、PCやスマートフォンなどのデジタルデバイスの操作画面や操作方法であるUIの中で、声を用いて操作するものを指します。身近な例では、iPhoneのSiriを代表する音声アシスタントが挙げられます。 近年VUIが注目されている背景のひとつには、AI技術を活用した音声認識技術の精度が向上してきていることが挙げられます。とくにディープラーニングを中心にAI技術が発達してきたことによって、音声認識の精度向上はもちろんのこと、認識した音声をテキスト情報として処理する自然言語処理の技術が実用的なレベルになり、AppleのSiriやAmazonのAlexa、Google Assistantをはじめ、様々な音声アシスタント製品が登場していることも近年の傾向です。 そもそもUIとは、デジタルデバイスの操作画面や操作箇所または入力方法や入力手段の総称のようなものですが、さまざまなタイプが存在し、技術進化とともにその利便性が高められながら進化してきました。 CUI（Character User Interface） 「Character（キャラクター）」は、日本語だとあまり馴染みがないかも知れませんが、英数字などの「文字」のことで、CUIとは、今では当たり前のように行われている文字入力によってデバイスを操作する方法です。コンピューターが登場した初期から存在するオーソドックスなUIではありますが、現在でも各種プログラミングやWindowsのコマンドプロンプトなど、今もなお用いられているUIの一つです。 GUI（Graphical User Interface） CUIの次に登場したUIが、グラフィックによってデバイスを操作するGUI（Graphical User Interface）です。一見イメージが湧きにくいかも知れませんが、PCのデスクトップ上に並んだアイコンをクリックしてデバイスという操作方法はGUIの代表例で、現在でも日常的に活躍しているUIです。 CUIでは原則、決まったプログラミング言語でデバイスに対する指示を入力することから専門的な知識が必要である上、ルールに従った入力手順が求められるため、一般のユーザーにとっては決してハードルが低いものではありませんでした。その点、GUIのような直感的な操作を可能とするUIが登場したことは、PCをはじめとするデジタルデバイスを一般家庭にも広く普及させることに貢献したことに加え、UIの重要性を社会的に認知させることにもなりました。 NUI（Natural User Interface） 近年身近なUIとして普及し、様々なデジタルプロダクトにも搭載されるようになったのがNUI（Natural Interface）です。「Natural」つまり人にとってより日常動作に近い自然な方法でデバイスを操作することを目的にしたUIで、スマートフォンのタップ操作やスライド操作、ATMや券売機のタッチパネル操作、Nintendo Switchのコントローラーのようなジェスチャー操作が代表的な例ですが、もちろん今回のコラムのテーマである音声操作、VUIもこのNUIの一種です。 「五感によるUI」とも言われ、いまの時代にまさに主流になっているUIがこのNUIですが、その台頭の背景には赤外線センサーやBluetooth、モーションセンサーなど、各種センサーの技術向上が挙げられ、マウス操作が中心だったGUIの時代に比べると、その操作はさらに直感的でわかりやすい方法へと進化してきています。 OUI（Organic User Interface） 「Natural」に「Organic」とまるで野菜のようですが、有機を意味する「Organic」は言い換えると、“そのモノの特性に本質的に由来する”といった意味になります。OUI（Organic User Interface）は、言ってみればデジタルデバイスが操作画面といった“操作や入力のツール”としてではなく、まるでそれ自体を操作しているかのような“操作対象”になってしまうような概念です。OUIは、実は2008年頃から提唱されてきている概念ではあるものの、現段階で完全にはこの領域に達していると言い切れず、近未来のUIの姿だと言えます。 よくSF映画で３D表示されたホログラムを主人公が手で掴んだり、投げたりして操作するシーンが登場しますが、まさにOUIの大きな特徴として挙げられるのが「３次元操作」です。現在種集のデジタルデバイスの画面のUIのほとんどは縦・横の２次元で開発されてれていますが、OUIではこれに奥行きも含めた３次元でのUIがベースになります。近年、擬似的ではあるもののAR（Augumented Reality：拡張現実）やVR（Virtual Reality：仮想現実）、またプロジェクションマッピングを活用したUIも登場、３次元空間で立体的な絵を描くアーティストが登場するなども話題になっていますが、その実現はそう遠くはないのかも知れません。 VUIの用途と、その仕組み さて話を現代に戻すと、近年VUIに関連する技術の高度化を背景にさまざまな製品やサービスが登場しています。前述した音声アシスタント製品はその代表格で、GAFAM（Google、Amazon、Facebook（Meta）、Apple、Microsoft）のIT Big５がこぞって、スマートフォン搭載のVUIの他、スマートスピーカーを発売しています。その用途は、ニュース・音楽・ライフスタイルなどの各種情報コンテンツの取得、スマート家電の操作、音声ナビゲーションなど様々です。 VUIを実現するためにさまざまなセンサーや認識・解析技術が活用されていますが、その中でも欠かせない技術が音声認識や自然言語処理に関する技術です。とくにAI技術、具体的には機械学習・ディープラーニング技術進化の恩恵は大きく、入力マイクを通して取得されるデータから人の音声を抽出し、国や地域ごとに異なる言葉を認識し、その内容から適した応答につなげることが可能になっています。 音声認識については、以下のコラムでもご紹介しています。 Laboro.AI コラム： 音声認識AIのいま。その技術や事例を知る。 ユーザーにとってのVUIのメリット 言わずもがな部分が多くもありますが、ユーザー目線に立った時、VUIはCUIやGUIと比べると、以下のようなメリットが考えられます。 操作入力の手間ヒマが少ない 音声だけでデバイス操作が可能になるVUIは、これまでのUIと比べて一つの操作を達成するための手間ヒマが圧倒的に少ないことが特徴です。例えば、目的地への最短ルートを調べる場合、マウスやキーボードを使ったPC操作が必要となるGUIではインターネットブラウザでマップを開いて目的地を入力する、あるいは公共交通機関のWebサイトなどを検索して補足的な情報を集める必要もあるかもしれません。スマートフォン操作のような一部のNUIでも、手順としては似たような内容になるはずです。 一方のVUIでは、音声アシスタントを立ち上げさえすれば、日常会話をするように「◯◯への行き方を教えて」とだけ伝えれば、デバイス側でデータベースにアクセスし、必要な情報を探索、自動音声で回答してくれます。 両手や目線がフリーになる GUIやNUIでは多くの場合で手を使った動作による操作が必要であると同時に、目線もディスプレイに向けておく必要があります。一方、VUIでは口さえ動かして話しかければいいため、料理をしながらレシピをチェックする、運転中にナビを音声で操作するといったように、主たる動作と並行してデバイスを操作することが大きなメリットです。 ユーザーにとってのVUIのデメリット 便利な面がある一方で、VUIは技術的に発展途上であることもあり、以下のようなデメリットもあるのが実際です。 自分の音声を他の人に聞かれてしまう 日本の文化的な側面も関係していますが、公共の場所で声を発することへの抵抗感は依然として強く、VUIが浸透しにくい理由のひとつとなっているようです。VUIで先行しているアメリカなどでは公共の場所で声を発する抵抗感が日本より低いせいか、デバイスへ話しかけるシーンも比較すると多く感じられます。 ユーザー環境によって認識精度が落ちる 上で触れたように、確かに音声認識技術や自然言語処理技術はその精度が向上はしてきているものの完璧なものではありません。例えば、都会の交通量の多い環境では当然ながら雑音の音量が大きく、正確に人の声が認識されにくいですし、一部の言語や方言、さらには専門用語などによっては上手く認識されず、誤った入力がされることも少なくありません。 音声認識の精度を上げるための「音声分離」について、以下のコラムでご紹介しています。 Laboro.AI コラム： 声や音を聞き分ける、『音源分離』とは VUIの展望 ユーザーの入力環境を向上させるように進化してきたVUIですが、その恩恵は単に利便性を向上させるというだけでなく、読み書きができない方々や手が不自由な方々のデバイス入力をサポートするという点でも期待が持たれます。日本では実感が少ないかもしれませんが、識字率が高くない国ではVUIによって初めてインターネットに触れられる層も少なくなく、こうした地域での活用が見込まれるほか、企業にとっては新たな市場の開拓にもつながるとされています。 また、海外ではユーザーとの会話によるインタラクションをベースにしたボイス広告も登場しています。この広告では、従来のように押し売り的に商品を訴求するのではなく、ユーザーの興味関心度やその理由なども尋ねることでより適したレコメンデーションを実現しているとのことです。 様々な用途で期待されるVUI市場。今後さらなる普及と拡大が期待され、ユーザーにとっても新たな生活様式を提案するキーテクノロジーになっていくはずです。 出展：IT media「 音声の時代に起きること――電通イージス・ネットワーク iProspectのエキスパートが語る 」 もう一つの”UI”「ユーザーを想像する」こと 今回のコラムではUIの進化過程を振り返るとともに、VUIに焦点を当て、そのメリット・デメリットや展望について触れてきました。前述のようにVUI、さらにはOUIと今後ますますのユーザーインターフェイス環境の向上が期待されるわけですが、実際それを提供する企業にとって大切なことは、「新しいUI技術を追い掛け採用する」ということではなく、「自社が提供する商品サービスの利用シーンを想像する」ということです。 VUIは確かにユーザーの手間ヒマを少なくする側面も考えられます。ですが、極端な例ではあるものの、例えば仕事でのPC操作の全てをVUIベースにしようとするものなら、オフィス中が声で溢れて大変な騒ぎになるどころか、終業の時間にはユーザーの喉はカラカラになっていることでしょう。また、生命と隣り合わせの医療現場でもしシステムが誤って音声を認識し、医療システムが誤作動する事態を招くなど心配されます。さらにOUIであっても、町中の人がジェスチャーで操作するスペースはありませんし、その光景を想像すると何やら居たたまれない気持ちになります。やはりこれらのシーンではCUIあるいはGUIが入力方法としては適切です。 こう考えると、最新のUIが従来のUIを凌駕するというものでは決してなく、特定のシーンで用いられるより適切な操作・入力方法が誕生していると捉えるべきで、こうした商品サービスを提供する企業にとっては、「商品はどのようなシーンで用いられるのか」、そして「その環境において最も適切で、効率的・生産的なUIはどのような形式か」を考えることが重要なはずです。 VUIはデジタルデバイスとの関わり方として、そして新たな生活様式として、間違いなく現代のユーザーに浸透し始めています。ただ忘れてはいけないのは、VUIをはじめとする先端UIの情報を正確にキャッチアップすることはもちろん、「想像力をフル活用（＝Use Imagination: UI）」し、ユーザー環境に最適なものとして採用されたUIこそが、最も優れたUIであるということです。

はじめに 9/29(水)に行われました 『UI/UXデザイナーLT会 #uiuxdesignerslt』 のイベントレポートを発信させていただきます！ 申し込みは300名の満枠、当日もたくさんの方にご参加いただけたイベントになりました！ rakus.connpass.com はじめに イベント概要 発表の紹介 1. 伝わらない UI UX の 正しい伝え方 / 木村圭 2. UIを止めるな! ～UIデザインのコンサルティングで話すこと～ / yumemiさん 3. デザイナーとして入社した私がフロントエンド領域から届ける体験価値とは / Three4Cさん 4. 三次元的アクセシビリティ解釈。価値、多様性、そして時間 / masuP9さん 5. 新卒2年目のデザイナーが大事にすること / yuriさん 6. TypeScriptで解説する催眠術のかけ方 / Ouji Miyaharaさん 7. Adobe XDでつくるVUIプロトタイピング / Makiko Odaniさん 8. デザイナー採用のUXデザインに取り組み始めた話 / TomoyoHirokawaさん 9. UIデザインの呪術性 - 覚書- / yuki_sasakiさん 10. デザイナー 1 年目のわたしが考えるデザイン / uknmrさん 11. 生産性が上がる文章の書き方と、デザインと文章の関係性 / ShinyaSatoさん 12. 技術とデザインの間 / takanoripさん 13. TypeScriptではじめるUIデザイン / kgsiさん 14. Web UIの実装で考えていることと気をつけたいこと / yamanokuさん 15.３次元のカラーピッカー的なものを作ってみた / chooさん 16. BtoB SaaSのUIリニューアルの苦労 / 小林肇 おわりに イベント概要 今回はUI/UXデザイナー16名による怒涛のLT会を開催させていただきました。 UI/UXデザインをテーマとしたイベントはconnpassを探しても多くなく、16名という大人数でもあっという間にLT枠が埋まりました。 また今回が登壇へ初チャレンジでした方々には、登壇機会をご提供できた形となったことを大変嬉しく思います。 当日は各登壇者16名の個性的な発表により、最後までコメントやツイートが止まりませんでした。 Twitter のタイムラインも大変賑わい、催眠術とカレーという謎の文言の他、ご参加の方からも便利情報のリンクなどをシェアいただけました。 タイムラインを眺めるだけでも学べる情報に溢れていますので、ぜひご覧になっていただき、当日の盛り上がりを感じていただければと思います。 twitter.com ちなみに当日イベントに参加いただいた方の職種は、以下の割合でした。 UI/UXデザイナー：41% エンジニア：39% 学生：5% その他デザイン関連職種：5% その他ビジネス職種：10% 発表の紹介 それでは今回ご登壇いただいた16名の方のコンテンツを紹介させていただきます。 本当に幅広いキャリアの方々に発表をいただき、ありがとうございました！ 1. 伝わらない UI UX の 正しい伝え方 / 木村圭 まずは ラク スのマネージャーである木村から、UI/UXデザイナーの立場からのプロジェクトメンバーとのコミュニケーション（説明力）について、発表させていただきました。 関係するメンバーに思うように意図を伝えられない、UI/UXの重要性が浸透しない、などの悩みを抱えている方には必見の内容です！ speakerdeck.com 2. UIを止めるな! ～UIデザインの コンサルティング で話すこと～ / yumemiさん UIデザインと コンサルティング に取り組まれている yumemiさんより、日々のお仕事で考えている「デザインの使いやすさ、デザインの本来あるべき姿」を オブジェクト指向 UIの例などを交えつつ、ご紹介いただきました。 「行動」と「結果」が直接結びつかなくなった歴史を踏まえると、「UIを止めるな」の意図が深く理解できた気がします。 エンジニア目線でもUXに関わる上で必要な視点のように思えますね。 speakerdeck.com 3. デザイナーとして入社した私がフロントエンド領域から届ける体験価値とは / Three4Cさん 新卒2年目のデザイナーであるThree4Cさんが考える、デザイナーとしてのフロントエンド領域への関わり方を発表いただきました。 ご自身の経験をもとに企画・分析・開発チームと関わる上での姿勢や知識の深め方、今後のありたい姿を語っていただきました。 ご自身の現在地と置かれている状況をしっかり客観視されており、初登壇とは思えない素晴らしい発表でした。 speakerdeck.com 4. 三次元的 アクセシビリティ 解釈。価値、多様性、そして時間 / masuP9さん masuP9さんは非常に個性的に登場し、なんと その場で説明資料を作成される斬新な発表 でした！ 発表は アクセシビリティ と「価値」に対するお考えが中心でしたが、その発表方法はとても衝撃的でした。 発表動画を公開できないことが残念です！ また ラク スの主催イベントでのご登壇を楽しみにしています！ 5. 新卒2年目のデザイナーが大事にすること / yuriさん デザイナー新卒2年目のyuriさんより、freeeさんの共通の価値観である「マジ価値」に基づき、 組織での動き方でデザイナーとして大事と考えられている点、そして B2B サービスのUIを作っていく上で大事と考えられている点を話していただきました。 司会者も話していましたが、新卒2年目とは思えない堂々としたお姿に尊敬のまなざしでした。 日々の思考と「マジ価値」への共感の積み重ねによる成果ではと感じていました。 初のLT挑戦の場として ラク スを選んでいただき、ありがとうございました。 t.co 6. TypeScriptで解説する催眠術のかけ方 / Ouji Miyaharaさん 事前に伺っていたタイトルとは一切関係ない 催眠術のかけ方 について、TypeScriptを交えながらご紹介いただきました！ イベントの空気が一変したタメになるご発表、ありがとうございました！ 催眠術にご興味をお持ちのデザイナーの方、ぜひこちらのスライドをご覧ください！ t.co 7. Adobe XDでつくるVUIプロトタイピング / Makiko Odaniさん Makiko Odaniさんも初のLT挑戦として、 Google Home や Amazon Echo によって注目されているVUI（Voice User Interface 、音声を使って操作するインターフェース）をご紹介いただきました。 発表中には実際に作成されたプロトタイプでのデモも実施いただきました。 デザイナーの方には馴染みのある Adobe XDで手軽に作成できるそうですので、ご興味のある方はぜひお試しいただければと思います！ 8. デザイナー採用のUXデザインに取り組み始めた話 / TomoyoHirokawaさん プロダクトデザイナー のTomoyoHirokawaさんには勢いでイベントにご参加いただき（直前の欠員を埋めていただき、ありがとうございました！）、初のデザイナー採用での体験設計に取り組まれた際のエピソードを語っていただきました。 初の取り組みとのことでしたが、仮説検証 → 修正 → 実行 → 振り返りのステップを着実に踏めていらっしゃる印象を受けました。 特に経営層や他職種を巻き込んでアクションが体現された点、素晴らしいです！ 2周目以降の取り組みも応援しています！！ 9. UIデザインの呪術性 - 覚書- / yuki _sasakiさん 呪術的思考 とUIデザインの関連について、以下の2つの補助線を用いてご説明いただきました！ 一体どのようにUIデザインにつながるのか謎に感じておりましたが、最後は絶妙にUIデザインへと結び付けていただきました！ 非常に深く、まるで催眠術にかかったような気分でした！ クロード・ レヴィ・ストロース 『野生の思考』 ジャック・ラカン 『光点としてのまなざし』 speakerdeck.com 10. デザイナー 1 年目のわたしが考えるデザイン / uknmrさん エンジニアからデザイナーの道へと進まれたuknmrさんより、 プロダクトデザイナー 半年のご経験を踏まえてデザインとは何なのかを語っていただきました。 スライドに出てきます 『”デザイン”はデザイナーだけのものではない』 に込められた深い洞察はとても参考になりました。 あと催眠術にかかったのか、なぜか焼きそばが食べたくなりました！ www.notion.so 11. 生産性が上がる文章の書き方と、デザインと文章の関係性 / ShinyaSatoさん ShinyaSatoさんからはあえてデザインをテーマとした発表ではなく、「文章の書き方」を中心にしたノウハウをご紹介いただきました。 「書く力」はデザイナーにとっても重要度が高く、とはいえ他職種よりも機会が少ないものということで、ご参加の方々からは大好評の内容でした。 在宅ワーク が本格化した今のタイミングでは、デザイナー以外のどの職種でも学ぶことばかりの貴重なお話だったと思います。 speakerdeck.com 最後にご紹介いただきましたShinyaSatoさんの個人ブログはこちらになります。 学びの宝庫です…！！ https://shinya-it.com/work/sentence_of_import shinya-it.com 12. 技術とデザインの間 / takanoripさん デザイナーとエンジニアが分業体制である歴史を踏まえつつ、デザイナーが技術の仕組みを理解する重要性をご説明いただきました。 デザイナーにとって技術への理解が「なぜ必要なのか？」が明確となり、技術とデザインが切り離せないものであることを認識できた方も多いと思います。 エンジニア・デザイナー両方のご経験があるtakanoripさんの実感が強く感じられる内容でした。 speakerdeck.com 13. TypeScriptではじめるUIデザイン / kgsiさん UIの情報整理の難しさと理想を踏まえ、TypeScriptを使った方法を説明いただきました。 TypeScriptの言語仕様を踏まえ、実際にトライされたケースへの所感がとても参考になりました。 あと催眠術にかかったのか、なぜかカレーが食べたくなりました！ speakerdeck.com 14. Web UIの実装で考えていることと気をつけたいこと / yamanokuさん 普段取り組まれている業務でのご経験を踏まえ、UI実装に対する深いお考えを発表いただきました。 ボタンUI1つをとっても思慮がとても深く、ぜひ全てのデザイナーの方にご覧いただきたい内容です。 LTへのご挑戦、ありがとうございました！ scrapbox.io 15.３次元のカラーピッカー的なものを作ってみた / chooさん 「色は本質的に三次元（の要素で表現される）だから、二次元のUIはムリがあるのでは」という仮説に基づき、 三次元のColor Picker を紹介いただきました。 これは凄いです…私の説明よりも、ぜひこちらにアクセスいただいてお試しください！！ t.co docs.google.com 16. BtoB SaaS のUIリニューアルの苦労 / 小林肇 最後は ラク スのUI開発チームの小林より、 ラク スでの17年間のサービスデザインでの歴史を語らせていただきました。 およそ半分が10年以上の歴史を持つ ラク スのサービスですが、現在に至るまで、実に多くのお客様からのお声をいただきながら成長させていただきました。 厳しいご意見からお褒めの言葉まで、お客様からの貴重なフィードバックが重要であることをあらためて考えるきっかけとなりました。 お客様にとって使いやすく、課題解決につながるサービスを目指していきたいという小林からの声で今回のLTを締めさせていただきました。 おわりに ラク ス初のUI/UXデザイナー向けのイベントでしたが、いかがでしたでしょうか？ 個性的な16名の登壇者の方々、イベントを盛り上げていただいて誠にありがとうございました！ また次回開催でのご登壇を楽しみにお待ちしています！ さて、今月 ラク スでは フロントエンド技術への取り組み を発信させていただく予定です。 ご都合のよろしい方は是非、こちらのイベントに気軽にご参加いただけますと幸いです！ rakus.connpass.com また プロジェクトマネジメント にも関わっている方には、こちらのイベントがお勧めです！ アウトプットに飢えているPMの方、お待ちしています！ rakus.connpass.com それではまた次回のブログで。 長文をご覧いただき、ありがとうございました！ 技術広報のitoken1013でした！ エンジニア 中途採用 サイト ラク スでは、エンジニア・デザイナーの 中途採用 を積極的に行っております！ ご興味ありましたら是非ご確認をお願いします。 https://career-recruit.rakus.co.jp/career_engineer/ カジュアル面談お申込みフォーム どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。 以下フォームよりお申込みください。 forms.gle イベント情報 会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

こんにちは。イノベーション推進部の武田です。 Google Assistantアプリを開発するときの本番環境と開発環境の切り分けについて紹介します。 はじめに 最近Google AssistantやAlexaなどのVoice User Interfaceが熱いですね。 毎日のように新しい記事を目にしますし、新しいハードもどんどん登場しています。 プラットフォームごとにSDKも公開されており、誰でもアプリを開発し公開できます。 開発の初期段階では自分だけが触るので、試せる環境が1つあれば十分です。 しかし、開発したアプリを審査に出したりリリースしたとなるとそうは行きません。 そこで 審査や実際に稼働している処理に開発の影響を出さない ことを目的とした環境の構成を紹介します。 アプリの構成と役割 Google Assistantアプリは基本的にActions on GoogleとDialogflow、 そしてCloud Functionsなどのバックエンドサーバーの3つで構成されています。 簡単に説明すると以下のような役割を持ちます。 Actions on Google アプリ自体の管理を担当。アプリ名や言語などを設定したり、審査やリリースといった操作が可能。 Dialogflow 発話内容の分析を担当。会話のパターンや認識する単語を設定できる。 バックエンドサーバー（Cloud Functionsなど） 発話内容に応じて任意の処理を実行する。自分でサーバーを用意することになるため、AWS Lambdaなどでも良い。 ユーザーからのリクエストを含めた処理の流れが下記の図です。 場合によってはバックエンドサーバー自体がなかったり、 バックエンドサーバーの先に別のAPIだったりDBだったりがつらなってきます。 今回は図に示した構成で考えていきます。 本番環境と開発環境の切り分け 切り分けにはActions on GoogleのスナップショットとGoogle Cloud Platform（以降GCP）のプロジェクトを利用します。 図にすると以下のようになります。 切り分け方ごとに説明して行きましょう。 Actions on GoogleとDialogflow Actions on GoogleとDialogflowはスナップショットの仕組みを利用します。 Actions on Googleはバージョン管理機能を備えており、 スナップショットは各バージョンの処理内容を保存したものです。 スナップショットは審査の提出やテスターへの配信の際に自動で作成されます。 開発している途中のようにスナップショット作成時から何かしら変更がある場合、 現在の状態はドラフトとして保存されています。 作成されたスナップショットは、審査やテスト配信など状況に合わせた環境へデプロイされます。 開発中の内容が保存されているドラフトは、開発者のアカウントやシミュレーターで実行可能です。 そのため、無理に別のプロジェクトに分けなくても動作環境は分離されているわけです。 バックエンドサーバーの接続先はDialogflowで設定します。 スナップショットとドラフトで別の設定をしておけば、 リクエストを別々のバックエンドサーバーに飛ばすことができます。 ただ、接続先を手動で切り替えることになるため開発体制によっては何かしら対策が必要です。 Actions on GoogleとDialogflowもGCPの一部であるため、 プロジェクト自体を切り替えて環境を分けることは可能です。 しかし、これらはGUIでの操作がメインです。 プロジェクトを分けると情報の同期が手間になってしまうので、スナップショットを利用する方法を取っています。 バックエンドサーバー（Cloud Functions） Cloud Functionsを利用している場合、 GCPのプロジェクトを別にしてしまうのが良いと思います。 下の図の赤枠の部分です。 Cloud Functionsはデプロイせずにローカルで検証していくことがある程度可能ですので、 プロジェクトを分けなくても動作環境は分離できます。 しかし、Google Homeなどのデバイスやシミュレーターで会話の検証をする場合、 設定したエンドポイントにリクエストが飛ぶことになるためデプロイが必須となってきます。 また、開発するアプリがFirebaseのMessagingやFirestoreを利用していると、 プロジェクトを切り替えれば全てまとめて切り替わってくれるのは楽です。 複数のプロジェクトの管理はFirebase CLIを利用すれば簡単に行えます。 まとめ この方法を使えば、審査や本番に影響を出さずに開発もガンガン進めていくことが可能です。 しかし途中で挙げた手動切り替えなどの問題を考慮すると、 Actions on GoogleとDialogflowも別プロジェクトに切り分けた方がいい状況もあると思います。 このあたりはCLIでの管理が進んできたり、開発のプラットフォームが安定したら考えていきたいところです。 VUIはチャレンジングで非常に面白い領域です。 プロダクトのUXを考えるのもそうですし、開発の方針や設計も手探りな状態なのでやること全てが挑戦です。 今回は技術寄りの内容でしたが、もっとプロダクト寄りの話もしていきたいと思ってます。 最後に DroidKaigi 2019 に採択されました！ Google Assistantアプリのベータテスター配信やCLIでテストしやすい構成など、ちゃんとサービスを作るための内容を発表します。 もし都合が合う方はぜひお越しください！ VUI界隈を盛り上げたかったり、新しいプロダクトを作りたい人を募集中です！ 一緒に世界をカッコよくしていきましょう！ www.wantedly.com