はじめに

先日（7月12日）、Clova向けアプリの開発環境の提供が開始されました！

昨年の8月にLINE WAVEを購入し、9月にはLINE DEVELOPER DAYに参加し、開発環境の公開を待ちわびていた私としては、とても嬉しいです^^

昨年のLINE DEVELOPER DAYの様子はこちら

Clova向けアプリ開発の概要を掴むため、今回はCEKとAzure Functionsを使ってアプリを作ってみたいと思います。

で、開発するアプリですが、、

LINEのスマートスピーカーは、ブラウン（くま）やサリー（ひよこ）など、せっかくキャラクターになっているので、 「日頃の労をねぎらってくれるアプリ」 を作って、ブラウンに癒されてみようと思います!

（注）日頃の業務でメンタルがやられているわけではありませんw

完成品：「ねぎらいくん」

まず初めに、今回できたスキルはこんな感じです。

毎日暑いので、LINE ブラウンに癒されるスキル作ってみた。#Clova #Clova_CEK #CEK勉強中 pic.twitter.com/Vzh8hYcScf
— 金谷拓哉/Takuya Kanatani (@torisankanasan) July 25, 2018

CEK(Clova Extensions Kit)とは？

まずCEKですが、公式サイトによると、

CEKは、Clova Extension(以下、Extension)を開発および配布する際に必要なツールとインターフェースを提供するプラットフォームです。ClovaプラットフォームとExtension間のデータの送受信をサポートします。Extensionは、音楽、ショッピングなどの外部のサービス(サードパーティサービス)、または家庭のIoTデバイスの制御など、Clovaの機能を拡張して、ユーザーに様々な体験を提供するWebアプリケーションです。

とのことです。

以下の表の通り、GoogleでいうActions on Google、AmazonでいうAlexa Skills Kitにあたるのかなと思います。

企業名	LINE	Amazon	Google
AIアシスタント名	Clova	Alexa	Google Assistant
アプリの呼び方	Extension※	Skill	Action
アプリ開発環境	Clova Extensions Kit	Alexa Skills Kit	Actions on Google
組み込み開発環境	Clova Interface Connect	Alexa Voice Service	Google Assitant SDK
搭載デバイス(一部抜粋)	WAVE	Echo	Google Home
	Friends	Echo Dot	Google Home Mini

※エンドユーザーには、「スキル」という表現で提供されます。

このCEKを使って、アプリ（スキル）を作っていきます。

開発

開発の流れ

公式サイトのチュートリアルにある通り、Extensionを作成する流れは、以下のようになります。

ステップ1 Extensionサーバーを用意する(ご自身でお願いします)
ステップ2 Extensionの基本情報を登録する(Clova Developer Centerで作業)
ステップ3 対話モデルを登録する(Clova Developer Centerで作業)
ステップ4 Extensionの動作をテストする(Clova Developer Centerと実際のデバイスで作業)

順番に解説していきますが、ステップ2とステップ3は公式サイトのチュートリアルとほぼ同じですw

それではステップ1です。

ステップ1 Extensionサーバーを用意する

Extensionサーバーは、Clovaと通信してユーザーのインテントを処理するREST APIサーバーです。Extensionを開発するためには必要です。

とのことですが、ここが一番やっかいなポイントだと思います。

Qiitaのこちらの記事「Clova SDK で作ったカスタムスキルを色んなサーバーにデプロイしてみる」では、Heroku、Lambda、Firebaseをサーバーとして利用する方法がわかりやすく紹介されています。

私はあえてAzure Functionsでサーバーを用意してみたいと思います！

前提条件

Azureのアカウントが必要です。

https://azure.microsoft.com/ja-jp/free/

¥22,500分のクレジットが付いてくるらしいので、無料で使い始めることができます。

Azure Functionsとは？

公式サイトによると、

Azure Functions は、小規模なコード ("関数") をクラウドで手軽に実行できるソリューションです。目の前の問題に必要なコードだけを記述すればよく、アプリケーション全体や、コードを実行するインフラストラクチャのことを考える必要がありません。Azure Functions を使用すると、Microsoft Azure でサーバー不要のアプリケーションを作成できます。

とのことです。
サーバー不要、嬉しいですね！

Azure Functionsの価格は、

Azure Functions 従量課金プランでは、1 秒あたりのリソースの使用量と実行回数に基づいて課金されます。従量課金プランの価格には、月間無料使用分として、月あたり 100 万回のリクエストと、400,000 GB 秒のリソース使用量が含まれています。

とのことですので、とりあえず無料で使えそうです。
無料、嬉しいですね！

サーバーの設定（Azure Functions）

Functions は C#、F#、Node.js、Java、PHP などの開発言語を使用できますが、今回は、Node.jsを使います。

Azure ポータルにログインし、左上の+リソースの作成をクリックし、「Fuction App」という名前のリソースを見つけます。

Fuction Appをクリックすると、以下の画面が表示されるので、さらに作成をクリックします。

アプリ名、リソースグループ、ホスティングプラン、場所、Storage、Application Insightsをそれぞれ入力＆選択し、作成をクリックします。

作成（デプロイ）に少し時間がかかりますが、作成が完了すると、通知があると思いますので、通知に記載されたリソースに移動ボタンをクリックしてください。

以下のような画面が表示されると思いますので、

関数をマウスオーバーすると表示される＋ボタンをクリックし、関数を作成します。
シナリオは「webhook+API」、言語は「JavaScript」を選択し、この関数を作成するをクリックします。

以下の画面が表示されると思います。

あとは、index.jsを以下の内容に書き換え、保存をクリックします。

index.js

// ねぎらいの言葉
const arr = [
    "頑張ってるね",
    "本当に頑張ったね",
    "お疲れさま",
    "いつもありがとう",
    "よくやってるよ",
    "なかなかできることじゃないね",
    "あなたならきっと大丈夫"
];

module.exports = function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');
    // 0~6の間でランダムな整数を生成
    const rand = Math.floor(Math.random() * arr.length);

    // インテントのタイプに応じたClovaへの応答メッセージを生成
    const intent = req.body.request.type;
    context.log(intent);
    let responseText = null;
    switch (intent) {
      case 'LaunchRequest':
        responseText = "おかえりなさい。今日はどんな一日でしたか？";
        break;
      case 'IntentRequest':
        responseText= arr[rand];
        break;
    }
    context.res = {
        body: {
            "version": "1.0",
            "sessionAttributes": {},
            "response": {
                "outputSpeech": {
                    "type": "SimpleSpeech",
                    "values": {
                        "type": "PlainText",
                        "lang": "ja",
                        "value": responseText
                    }
                },
                "card": {},
                "directives": [],
                "shouldEndSession": false
            }
        }
    };
    context.done();
};