LoginSignup
6
5

More than 5 years have passed since last update.

AlexaにQiitaの最新記事のタイトルを言わせるスキルを開発してみた

Last updated at Posted at 2018-06-14

タイムセールに乗せられてamazon echo plusを買ったので、Alexaスキル開発をちょっとやってみました。
とはいっても、公式のAlexaスキル開発トレーニングを読めばできるんですけどね!

今回はそれを読みつつ、Qiitaの最新記事のタイトルを言わせるところまでやります。
(公開しようとしたら、「第三者の商標またはブランドが使用されていたため、認定を却下いたしました。」って言われちまったよチクショウ!)

準備

必要なものは以下の通りです。

  1. Amazon Developerアカウント
  2. AWSアカウント

Amazon Developerアカウントは、こちらに遷移して右上の「サインイン」から、お持ちのAmazonアカウントでログインしてください。
詳しくは、Alexaスキル開発トレーニングシリーズ 第1回 初めてのスキル開発の「ステップ 1. アカウントの作成」を参照してみてください。。。

AWSアカウントは、持っている人は少ないでしょうから作りましょう。私は作りました。
https://aws.amazon.com/jp/register-flow/ こちらを見ながら作成します。

Alexaスキルを作成する

面倒なので、ここからは公式の画像を交えながら説明します。

開発者コンソールにサインインします

ここから
amazon-developer-console.png

ここをクリック
amazon-developer-console-menu.png

すると、以下のような画面になります。(自分の画面です)
ASK1.png

「スキルの作成」ボタンを押します

すでに完成形がありますが、今回は1から作る前提なので気にしない。

スキルの名称を決めます

名称はなんでもいいですが、ここでは便宜上「qiita_newtopic」と入力し、「次へ」をクリックします。
ASK2.png

スキルに追加するモデルに「カスタム」を選択して「スキルを作成」をクリックします

作成に成功すると、以下のような画面になると思います。
ASK3.png

呼び出し名を決めます

左側の「呼び出し名」をクリックして、呼び出し名に「キータの新着」とでも入れておきます。
ASK4.png

入れたら「モデルの保存」をクリックして保存します。

インテントを作成します

インテントは、簡単に言えばメソッド名とそれに対応するフレーズの組み合わせのことだと思っておけばOKだと思います。
左側の「インテント」の右側にある「+追加」ってところをクリックし、インテントの名称に「getIntent」とでも入れます。
この名称は、後で出てくるAWSLambdaで使用する関数名となります。
ASK5.png

サンプル発話を決めます

何をしゃべりかけたらそのインテントが発動するかを決めます。
赤枠内に文言を入れてエンターを押すと、その下のところに登録されていきます。
このサンプルでは「教えて」と「聞かせて」を登録しています。
ASK6.png

ちなみに「スロット」とはいわゆる変数ですが、今回は使用しません。
登録し終えたら、「モデルを保存」を押しておきましょう。

ここで、いったんスキル開発の準備を終わります。
次に、AWSLambdaの準備です。

AWSLambdaで関数を作成する

お次はAWSにログインします。

タイムゾーンを設定します

もし東京になっていなかったら、赤枠内を変更してください。
ASK7.png

AWSLambda関数を作成します

AWSサービスのところに、「lambda」と入力します
そうすると、出てきますのでこれをクリックします。
aws-menu-lambda.png

AWS Lambdaの初期画面が表示されたら、「関数の作成」をクリックします。
aws-lambda-top.png

関数作成時の設定

真ん中の「設計図」を選択し、フィルターに「fact」と入れてエンターキーを押すと「alexa-skill-kit-sdk-factskill」が出ますので、これを選択して「設定」をクリックします。
aws-select-mode.png

関数の名称は便宜上、「qiita_newtopic」とでもしておきます。
(私の場合はすでにあるため入力できません・・・)
次の画面でロールのドロップダウンリストから、「カスタムロールの作成」を選択するといきなり別タブが開くと思います。
ASK8.png

別タブが開いたら、何も変えずに「許可」をクリックします。
ASK9.png

戻ってきたらそのまま「関数の作成」をクリックします。
ASK10.png

これで初期状態で作成完了!

AWSLambdaの画面

最初は以下のような画面だったはず。
ASK11.png

トリガーを追加します

左側から、「Alexa Skills Kit」をクリックします。
そうするとトリガーの設定が開くので、スキルIDは「無効」にして、追加します。
スキルIDはAlexaスキルの作成のところで確認できますが、特に公開するわけでもないので今回は設定しません。
ASK12.png

追加したら、保存しましょう。
ASK13.png

コードを書きます

まずは関数名のところをクリックします。
そうすると、コードエディターが開きます。
ASK14.png

index.jsとなって開いているところに、以下のコードを貼り付けてください。(キャプチャでは貼り付け後です)

index.js
'use strict';
const Alexa = require('alexa-sdk');
const https = require('https');

var APP_ID = undefined;
var HELP_MESSAGE = "助けは来ない";
var HELP_REPROMPT = "どうしますか?";
var STOP_MESSAGE = "さようなら";

exports.handler = function(event, context, callback) {
    var alexa = Alexa.handler(event, context);
    alexa.APP_ID = APP_ID;
    alexa.registerHandlers(handlers);
    alexa.execute();
};

var handlers = {
    'LaunchRequest': function () {
        this.emit('getIntent');
    },
    'getIntent': function () {
        var self = this;
        var url = 'https://qiita.com/api/v2/items?page=1&per_page=3';
        var start = '新着の、3件のタイトルを読み上げます。';
        var message = '';
        https.get(url, function(res) {
            var body = '';
            res.setEncoding('utf8');
            res.on('data', function(chunk) {
                body += chunk;
            });
            res.on('end', function(res) {
                var data_list = JSON.parse(body);
                for (var i = 0; i < data_list.length; i++) {
                    var num = i + 1;
                    message += num + 'つ目。' + data_list[i]['title'] + '';
                }
                self.emit(':tell', start + message);
                return;
            });
        }).on('error', function(e) {
            self.emit(':tell', '通信に問題が発生しました');
        });
    },
    'AMAZON.HelpIntent': function () {
        var speechOutput = HELP_MESSAGE;
        var reprompt = HELP_REPROMPT;
        this.emit(':ask', speechOutput, reprompt);
    },
    'AMAZON.CancelIntent': function () {
        this.emit(':tell', STOP_MESSAGE);
    },
    'AMAZON.StopIntent': function () {
        this.emit(':tell', STOP_MESSAGE);
    },
    'SessionEndedRequest': function () {
        // Nothing to do
    }
};

元がサンプルのソースで、それを今回アレンジして使っているのでよく分からない項目がたくさんあります(笑)
貼り付けたら、また保存しましょう。
ちなみに、getIntent というメソッド名がキモです。(Alexaスキルのインテント名と同じにします)

テストを実行します

キャプチャではすでに設定があるのですが、新しく作成するために「テストイベントの設定」を選択します。
ASK15.png

「新しいテストイベントの作成」を選択し、イベントテンプレートに「Alexa Start Session」を選択します。
イベント名は適当でOKです。
ASK16.png

「作成」を押すと準備完了です。
「テスト」をクリックすると、以下のようになると思います。
ASK17.png

テストに成功したら、AWSLambdaの作成は完了です。やったね!
最後に、画面右上上部の「ARN」のところにある文字列をコピーしておきます。

Alexaスキルとのリンク

Alexaスキルを作った画面に戻ります。

エンドポイントを設定します

画面左側の「エンドポイント」をクリックして、先ほどコピーしたARNを貼り付け、保存します。
ASK18.png

今の状態を確認

左側の「カスタム」をクリックしてトップに戻ると、あとはビルドだけになっていると思います。あともうちょい!
ASK19.png

ビルドします

上のキャプチャで、グレーアウトしている「3.モデルをビルド」をクリックすればビルドが始まります。
待っていると勝手に終わります。
ASK20.png

動作確認

ついにあと一息です。

テストを有効にします

サクッと有効化します。
ASK21.png

動かしてみます

赤枠内に、「キータの新着を開いて教えて」と入力します。
すると、応答があります!!
ASK22.png

成功ですね!
ちなみに、amazon echo plusを買ったアカウントとAmazon Developerのアカウントが同じなら、amazon echo plusに対して、「アレクサ、キータの新着を開いて教えて」と呼びかけるとちゃんと応答してくれます(^ω^)
これは、テストを有効化すると、アカウントに紐づいたAlexa端末でもテスト可能になるためです。(たしか)

終わりに

長々とお疲れ様でした!

ただ、最後の最後に不思議に思ったかもしれません。
なぜ呼び出し時、「開いて」を間に入れないといけないのか。
これがないと、正しく動作しません。理由はよく分かっていません。。。誰か教えて。

6
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5