3分でClovaスキル「サイコロトーク」を作ってみた

2018年7月12日に[Clova Extensions Kit（CEK）](https://clova-developers.line.me/)がリリースされました。
そこで簡単なスキルを3分で作ってみました。

作ったものは[Google Homeでサイコロトークアプリを作ってみた](https://qiita.com/h-takauma/items/e6c13659313c675d550c)と全く同じスキルです。
Clova Extensions Kitの基礎を知りたい方は[@imajoririさん](https://qiita.com/imajoriri/items/8d511cdfde8cb731ff82)の記事が詳しいです。

# 完成動画
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Clovaでサイコロトーク🎲<br>これなら3分で出来るw<a href="https://twitter.com/hashtag/%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%82%B9%E3%83%94%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#スマートスピーカー</a><a href="https://twitter.com/hashtag/Clova_CEK?src=hash&amp;ref_src=twsrc%5Etfw">#Clova_CEK</a> <a href="https://twitter.com/hashtag/Clova?src=hash&amp;ref_src=twsrc%5Etfw">#Clova</a> <a href="https://t.co/p84Ut6iuW9">pic.twitter.com/p84Ut6iuW9</a></p>&mdash; がおまる@スマートスピーカー・HoloLens研究者 (@gaomar) <a href="https://twitter.com/gaomar/status/1017967457368092673?ref_src=twsrc%5Etfw">2018年7月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 基本情報入力
LINE Developersでスキルチャネルを作成してください。
ざっくり基本情報はこのように埋めました。

![s100.png](https://qiita-image-store.s3.amazonaws.com/0/154355/09a0aaa0-43a9-7ba6-ae86-3fee70fde5df.png)

# AWS Lambda関数作成
AWSのLambdaで関数を作成します。

![s101.png](https://qiita-image-store.s3.amazonaws.com/0/154355/662aec39-67f6-1e57-bda0-3e9aa467dc14.png)

# APIGateway作成
関数ができたら、APIGatewayを作成します。
トリガーの追加にある`API Gateway`をクリックします。

<img width="1348" alt="s102.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/bda42a55-8e88-0f4e-c4d7-f100558aaf61.png">

新規APIの作成を行います。
埋めたら右下の［追加］ボタンをクリックします。

<img width="1305" alt="s103.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/a036ae75-3fb2-db94-4179-dec2710eb6c7.png">

右上の［保存］ボタンをクリックするとAPI GatewayのアクセスURLが発行されます。
この値をコピーしてClovaに貼り付けます。
<img width="1343" alt="s104.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/9c8aa56e-068a-b9bd-efa8-9004a3273f45.png">

ExtensionサーバーのURLにLambdaでコピーした値を貼り付けます。

<img width="1278" alt="s105.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/7743802b-a4eb-bd8f-f47c-5405ee6ded48.png">

# プログラムを編集する
AWS Lambda画面の`SaikoroSkill`をクリックします。

<img width="1326" alt="s106.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/7e8e9d5d-a1d4-03fc-a3b3-6fad9716f81f.png">

index.jsのコードを編集します。
編集したら右上の［保存］ボタンをクリックします。
<img width="1340" alt="s107.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/4ce7ed93-2834-4e51-b97f-8400d52c1a94.png">

```javascript:index.js
'use strict';

exports.handler = function (event, context, callback) {
    var response = {
        statusCode: 200,
        headers: {},
        body: ""
    };
    
    // 音楽再生先URL
    const url = `https://storage.googleapis.com/XXXXXXXXXXXXX.appspot.com/dice.mp3`;
    
    const wadai = ['情けない話。略して「なさばな」', 
                    '初めてまるまるした話。略して「はじまる」',
                    '信じられない話。「アンビリバボー！」',
                    '旬な話。「フレッシュ！」',
                    'シャレにならない話。略して「しゃればな」',
                    '今日の当たり目！。「おめでとー！おめでとー！」'];

    // ランダムで話題を選択する
    const wadaiIndex = Math.floor(Math.random() * wadai.length);
    const speechText = wadai[wadaiIndex];
                

    var responseJson = JSON.stringify({
        "version": "1.0",
        "response": {
            "outputSpeech": {
                "type": "SpeechList",
                "values": [
                    {
                        "type":"URL",
                        "lang":"",
                        "value": url
                    },
                    {
                        "type":"PlainText",
                        "lang":"ja",
                        "value": speechText
                    }
                ]
            },
            "card": {},
            "directives": [],
            "shouldEndSession": true
        }
    });
    
    response.body = responseJson;
    
    callback(null, response);

};

```

レスポンスの処理は[コチラ](https://clova-developers.line.me/guide/#/CEK/Guides/Build_Custom_Extension.md#ReturnCustomExtensionResponse)で確認してください。

# まとめ
記事書く方が時間かかりましたが、実質3分で簡単なスキルが作成できました。
スキルを呼び出すためにはClovaの実機で「Clova、サイコロトークを開いて」と言えばスキルが実行されます。
ただ単純にしゃべらせるだけのスキルなら一瞬で作成することができます。
是非、皆様もスキルを作ってみましょう！

システム化のご検討やご相談は弊社までお問い合わせください。
https://i-enter.co.jp/contact/