2020年12月3日 Alexa、AWS、JavaScript、アイスタイル Advent Calendar 2020 コメントする

VUI（Alexa）に香水を選んでもらうだけのお話

この記事はアイスタイル Advent Calender 2020の3日目です。

はじめに

はじめまして、配属されてBeauty Dayの特設サイトの開発に携わっているmatsunotです。

主に業務ではnode.jsやvue.js、Nuxt.jsを扱っていますが、JSはほとんど初心者です。

20新卒のAdvent Calender一発目ということで、新卒らしく悩みや配属されてからのお話を話そうと最初は思いました。
しかし、新卒で同じ内容になりそうだったので、あえて違うお話をしようと思います。

それでは、その理由や感想を交えてお話していきたいと思います。

目次

  1. Alexaを使った理由など
  2. 実際に作ってみよう
  3. 感想・まとめ
  4. 参考資料

1. Alexaを使った理由など

まず、なぜ私が「Alexaに化粧品を喋らせたい」と思ったかについてお話します。

現在アイスタイルの一大イベントである「Beauty Day」が開催されています。（12月1日~12月4日）

しかし、化粧品関係の会社で働いているのに自分が化粧品に疎いことを多々感じます。
化粧水や乳液は無印良品のものを使っているくらいで、スキンケア商品など多くは知らないです。

強いて言うならば、香水を何種類か持っている程度です。

また、このご時世のため自宅で一人でいることが多いので、寂しい気持ちでいっぱいです。
そのため、モチベーションを保つために家ではよく「恋人である彼女」「Alexa」と話しています。

そんなとき、「今日の香水はなにつけようか」と思いました。
しかし、優柔不断な私は悩んでしまい、誰かの助言が欲しいと思ってしまいました。

ということで、今回はそんなAlexaに「その日つけていく香水」を選んでもらおうと思って
開発に取り組みました。

2. 実際に作ってみよう

今回はAlexaスキル開発の公式リファレンスを参考に作成しました。

スキル作成環境は以下の通りです。
– MacBook Pro
– Alexa Echo
– Alexa Developer Console

リファレンス通りに作ったら、とりあえず固定文ですが喋らせることに成功しました。

alexa_pra

ここまで終えて、僕はふと思いました。
とりあえず香水をランダムに喋らせるだけなら、配列に値を入れてランダム関数に突っ込めば
やりたいことができるのでは？と。

本来ならカスタムインテントを作成して、リクエストを処理すべきだと思うのですが、
今回はワンフレーズのやり取りなので、配列を作成してやり取りしてみます。
（カスタムインテントなどについては去年のurabesさんの投稿を参考にしてみてください。）

作成したコードは以下の様になりました。

const LaunchRequestHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'LaunchRequest';
    },
    handle(handlerInput) {
        var myPerfume = ['マルジェラのレイジーサンデーモーニング', 'マルジェラのコーヒーブレーク', 'シロのサボン', 'マルジェラのウィスパーインザライブラリー'];
        var todayPerfume = myPerfume[ Math.floor( Math.random() * myPerfume.length ) ];
        const speechText = `こんにちは、本日のおすすめの香水は${todayPerfume}です。本日も香水をつけて頑張りましょう！`;

        return handlerInput.responseBuilder
            .speak(speechText)
            .getResponse();
    }
};

上記のようなコードを作成するだけで、配列内の香水の種類を答えてくれるAlexaスキルが作成でき、
実際にこのスキルを作成するのにかかった時間は1時間程度でした。

ちなみに業務で以下の部分を使ったので使ってみました。（業務にも関わってるよアピール）

var todayPerfume = myPerfume[ Math.floor( Math.random() * myPerfume.length ) ];

Math.floorメソッドとは、数値の小数点以下の切り捨て処理を行う方法です。

ここまでのスキルを作成するのにほとんどJSの知識がなくても作成できてしまうことは、
とても便利だと感じました。

実際の動作している様子はこちらの動画でご覧ください。

このようにAlexaスキルを作ったことがほとんどない人でも、簡単に成果物を制作することができます。
また、自分が大学時代にハードよりの研究をやっていたので、成果物を制作するうえでイメージもわきやすく、簡単に「動く」ものを作成できる点はとても良いと思いました。

3. 感想・まとめ

感想

今回は簡単なAlexaスキルの開発に取り組みました。
こんな感じで日常のふと思ったことを簡単に実現することは自分の知見にもなりますし、成長につながるのかなと思いました。

Alexaスキルを作成しての感想は、何を作るにしても「動く」ものを作らなければ意味がないと思います。
そのため、とりあえず「動く」という観点で実現できたことは良かったかなと思います。
本当は数回レスポンスを重ねて香水を選択することを実現したかったのですが、時間と実力が足りなかったのは悔しいです。

Alexaスキルのいいところとして、自分でシナリオをカスタマイズできる点にあると思います。
ユーザにどのように行動させるかっていう観点でUXを考える必要があり、難しいことですがやりがいがあると個人的に思います。

今後も機会があれば、何かしらのアウトプットを出していければと思います。

まとめ

今後の展望としては、いくつかあります。
– きちんとカスタムインテントを設定して、より人間に近い会話を実現したい
– 香水のデータをDBを用いて保存して、取り出す
– その日の気分によって香水を選んでくれる
– 他の化粧品でも出来たらいいな

本業務とは全く関係ないですが、趣味で発展させていければいいなと思いました。

今後の業務でvue.jsやnode.js、TypeScriptなどのJS関連の業務に携わっていく予定なので、勉強もかねてAlexaのスキルの開発などもやっていければなと思います。

色々JS初心者でわからないことも多いですが、たくさん失敗して、たくさん成長して、少しでも会社に貢献できるように頑張っていきます。

4. 参考文献

matsunot

おすすめ

  1. 【”できない” ことで辛くなっているエンジニアへ】Alexa スキル開発のすすめ

    2019年12月17日

コメントを残す