Azure FunctionsでLINE ブラウンに癒されるClova向けスキルを作ってみた。

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

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

[昨年のLINE DEVELOPER DAYの様子はこちら](https://qiita.com/torisankanasan/items/112556493e5e1923d1e7)


Clova向けアプリ開発の概要を掴むため、今回は[CEK](https://clova-developers.line.me/guide/#/CEK/CEK_Overview.md)と[Azure Functions](https://azure.microsoft.com/ja-jp/services/functions/)を使ってアプリを作ってみたいと思います。

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

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

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

# 完成品：「ねぎらいくん」
まず初めに、今回できたスキルはこんな感じです。

<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">毎日暑いので、LINE ブラウンに癒されるスキル作ってみた。<a href="https://twitter.com/hashtag/Clova?src=hash&amp;ref_src=twsrc%5Etfw">#Clova</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/CEK%E5%8B%89%E5%BC%B7%E4%B8%AD?src=hash&amp;ref_src=twsrc%5Etfw">#CEK勉強中</a> <a href="https://t.co/Vzh8hYcScf">pic.twitter.com/Vzh8hYcScf</a></p>&mdash; 金谷拓哉/Takuya Kanatani (@torisankanasan) <a href="https://twitter.com/torisankanasan/status/1022153166714855424?ref_src=twsrc%5Etfw">July 25, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# CEK(Clova Extensions Kit)とは？
まずCEKですが、[公式サイト](https://clova-developers.line.me/guide/#/CEK/CEK_Overview.md)によると、
> CEKは、Clova Extension(以下、Extension)を開発および配布する際に必要なツールとインターフェースを提供するプラットフォームです。ClovaプラットフォームとExtension間のデータの送受信をサポートします。Extensionは、音楽、ショッピングなどの外部のサービス(サードパーティサービス)、または家庭のIoTデバイスの制御など、Clovaの機能を拡張して、ユーザーに様々な体験を提供するWebアプリケーションです。

とのことです。

以下の表の通り、Googleでいう[Actions on Google](https://developers.google.com/actions/)、Amazonでいう[Alexa Skills Kit](https://developer.amazon.com/ja/alexa-skills-kit/?sc_category=paid&sc_channel=SEM&sc_campaign=JP_JA_developer_b&sc_publisher=GO&sc_content=content&sc_detail=280880655779&sc_funnel=convert&sc_country=JP&sc_keyword=alexa%20skills%20kit&sc_medium=paid+SEM+JP_JA_developer_b+GO+content+280880655779+convert+JP+alexa%20skills%20kit&gclid=CjwKCAjwhLHaBRAGEiwAHCgG3nz4kHrMW1_jogkCKHkhJkFtlQpVILib8qLidoBRH5tsib6QwZsu-BoCb8wQAvD_BwE)にあたるのかなと思います。


| 企業名 | LINE | Amazon | Google |
|:-----------:|:------------:|:------------:|:------------:|
| AIアシスタント名 | Clova | Alexa | Google Assistant |
| アプリの呼び方 | Extension※ | Skill | Action |
| アプリ開発環境 | [Clova Extensions Kit](https://clova-developers.line.me/guide/#/CEK/CEK_Overview.md) | 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を使って、アプリ（スキル）を作っていきます。

# 開発
## 開発の流れ
[公式サイトのチュートリアル](https://clova-developers.line.me/guide/#/CEK/Tutorials/Build_Simple_Extension.md)にある通り、Extensionを作成する流れは、以下のようになります。

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

順番に解説していきますが、**ステップ2**と**ステップ3**は[公式サイトのチュートリアル](https://clova-developers.line.me/guide/#/CEK/Tutorials/Build_Simple_Extension.md)とほぼ同じですw

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

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

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

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

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

### 前提条件
Azureのアカウントが必要です。

[https://azure.microsoft.com/ja-jp/free/](https://azure.microsoft.com/ja-jp/free/)

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

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

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

[Azure Functionsの価格](https://azure.microsoft.com/ja-jp/pricing/details/functions/)は、
> Azure Functions 従量課金プランでは、1 秒あたりのリソースの使用量と実行回数に基づいて課金されます。従量課金プランの価格には、月間無料使用分として、月あたり 100 万回のリクエストと、400,000 GB 秒のリソース使用量が含まれています。

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

### サーバーの設定（Azure Functions）
Functions は C#、F#、Node.js、Java、PHP などの開発言語を使用できますが、今回は、Node.jsを使います。

[Azure ポータル](https://portal.azure.com/)にログインし、左上の`+リソースの作成`をクリックし、「Fuction App」という名前のリソースを見つけます。
<img width="1280" alt="スクリーンショット 2018-07-26 1.38.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/4ffbc75e-76ca-9fb4-8750-981e06208dd2.png">

`Fuction App`をクリックすると、以下の画面が表示されるので、さらに`作成`をクリックします。
<img width="1280" alt="スクリーンショット 2018-07-26 1.40.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/22e46e53-0fc1-c562-7c8b-3c94e0159a43.png">

アプリ名、リソースグループ、ホスティングプラン、場所、Storage、Application Insightsをそれぞれ入力＆選択し、`作成`をクリックします。
![図2.png](https://qiita-image-store.s3.amazonaws.com/0/151106/e83f95ef-1957-79f8-9243-c188c3741dfd.png)

作成（デプロイ）に少し時間がかかりますが、作成が完了すると、通知があると思いますので、通知に記載された`リソースに移動`ボタンをクリックしてください。
<img width="1280" alt="スクリーンショット 2018-07-26 1.52.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/44b2de57-dd43-ec15-859f-38ac26e7a8ed.png">

以下のような画面が表示されると思いますので、
![図３.png](https://qiita-image-store.s3.amazonaws.com/0/151106/01e882f0-e67b-8860-20e0-be4ba04c2259.png)

関数をマウスオーバーすると表示される`＋`ボタンをクリックし、関数を作成します。
シナリオは「webhook+API」、言語は「JavaScript」を選択し、`この関数を作成する`をクリックします。
<img width="1280" alt="スクリーンショット 2018-07-26 1.58.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/51d54856-26f6-b828-a53c-f5272d005312.png">

以下の画面が表示されると思います。
<img width="1280" alt="スクリーンショット 2018-07-26 2.02.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/29ddab89-0f67-75a1-6284-53713f33d435.png">

あとは、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();
};
```

最後に、`実行`ボタンの右側にある`</> 関数の URL の取得`をクリックし、表示された関数のURLをコピーしておいてください。これを後で使います。

<img width="1280" alt="スクリーンショット 2018-07-26 2.04.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/36a5a676-3084-f201-f8ae-d361c3402a69.png">

これでサーバーの準備ができました。

## ステップ2 Extensionの基本情報を登録する(Clova Developer Centerで作業)
最初に、お持ちのLINEアカウントで[Clova Developers Center](https://clova-developers.line.me/cek/#/list) にログインします。

https://clova-developers.line.me/cek/#/list

### チャネルを作成
`LINE Developersでスキルチャネルを新規作成`をクリックし、

![スクリーンショット 2018-07-17 0.38.54.png](https://qiita-image-store.s3.amazonaws.com/0/151106/d570397f-26ca-6d45-2f96-ccc638c32738.png "スクリーンショット 2018-07-17 0.38.54.png")

新規プロバイダー作成にチェックを入れ、プロバイダー名を入力し、`次のページ`をクリックします。
プロバイダーとは、サービス提供者（企業・個人）の名前のこと、です。

![スクリーンショット 2018-07-17 0.41.57.png](https://qiita-image-store.s3.amazonaws.com/0/151106/f325cba0-a684-9ba4-ea84-c04d9b1c1b05.png "スクリーンショット 2018-07-17 0.41.57.png")

チャネル名を入力し、`入力内容を確認する`をクリックします。
チャネル名は、あなたがスキルを管理するために利用します。 Clovaで提供するサービスの名前などを入力してください。

<img width="1280" alt="スクリーンショット 2018-07-24 19.54.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/f6af6bde-c552-4075-8721-34f267525ea2.png">


`作成してClova Developer Centerに移動`をクリックします。

<img width="1280" alt="スクリーンショット 2018-07-24 19.54.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/e23621c8-f852-de7f-9e60-591f624fa6a8.png">

### Extensionを作成
すると、「新しいExtensionを作成」という画面が表示されます。

<img width="1280" alt="スクリーンショット 2018-07-24 19.57.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/34725770-8796-c4e4-0d5e-ea4cddfbdcda.png">

タイプとして、`カスタム`を選択します。

<img width="1280" alt="スクリーンショット 2018-07-24 19.58.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/8b047b3f-5099-867c-6b87-d627315fbdc5.png">

Extension ID、スキル名、呼び出し名（メイン）、呼び出し名（サブ）を入力していきます。
スキル名がアプリの名前のこと、です。

<img width="1280" alt="スクリーンショット 2018-07-25 15.01.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/f84a0e89-90d4-dd7a-6e01-781597dfaccd.png">

AudioPlayerの使用、提供者について、利用規約と個人情報ポリシー、それぞれにも入力＆チェックを入れ、`作成`をクリックします。

<img width="1280" alt="スクリーンショット 2018-07-25 15.01.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/5e8b3452-b8ee-74e7-7401-d4eb0464864f.png">

`次へ`というボタンが表示されるので、クリックします。

<img width="1280" alt="スクリーンショット 2018-07-25 15.01.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/5326d412-589b-c0f4-930a-a76fa2b40599.png">

### サーバー設定
次に、「サーバー設定」という画面が表示されます。
**ステップ1 Extensionサーバーを用意する** で作成した関数のURLを貼り付けて、`保存`ボタンをクリックします。

<img width="1280" alt="スクリーンショット 2018-07-25 15.09.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/f62c1c36-023a-fc85-1cd6-20aa22106925.png">

次に、右上の`個人情報の保護および規約同意`タブをクリックして、`対話モデル`をクリックします。
今回は、公開申請はしないので、「配布情報」と「個人情報周り」の入力は省略します。

<img width="1280" alt="スクリーンショット 2018-07-26 0.30.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/ab2763bc-8282-0735-c396-01b0d5597173.png">

## ステップ3 対話モデルを登録する(Clova Developer Centerで作業)
ステップ２を終えると、対話モデル登録のためのダッシュボードが表示されます。

<img width="1280" alt="スクリーンショット 2018-07-26 0.33.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/5c04536e-6db1-ef10-46f5-6f8ba18e725e.png">

カスタムインテントの横の`＋`ボタンをクリックし、新規のカスタムインテントの名前を入力します。

<img width="1280" alt="スクリーンショット 2018-07-26 0.34.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/3514c366-4e15-2061-7dfa-59a510938d9a.png">

`作成`をクリックすると、サンプル発話の入力ができるので、適当に新しいサンプル発話を追加します。

<img width="1280" alt="スクリーンショット 2018-07-26 0.37.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/a9b4353a-3afa-a63a-2395-0f02e79e7734.png">

右上の`保存`をクリックした後、左上の`ビルド`をクリックすると、`ビルド中`という表示に変わります。

<img width="1280" alt="スクリーンショット 2018-07-26 0.38.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/b76ce2cf-41e6-2deb-6ed5-b937de564fc5.png">

これで、**ステップ3 対話モデルを登録する**は、完了です！

## ステップ4 Extensionの動作をテストする(Clova Developer Centerと実際のデバイスで作業)
最後に、動作テストしてみます。

`テスト`をクリックすると、ユーザーのサンプル発話が入力できるので、適当に入力し、`テスト`をクリックすると、サーバーからの応答が表示されます！

<img width="926" alt="スクリーンショット 2018-07-26 0.40.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/394143f1-c37d-1a8c-f9fb-bf3499f18773.png">

もし応答が返ってこない場合は、Azure Functionsの画面に戻り、以下のように、ログを確認することもできます。
<img width="1280" alt="スクリーンショット 2018-07-26 2.21.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/6e974f95-dfe7-813a-8952-a054c58cfad5.png">


さらに、**ステップ2 Extensionの基本情報を登録する**で登録した、呼び出し名を使って、お持ちのClovaに話しかけると、冒頭の動画のように実機での動作確認もできます！

# 所感
今回は、とりあえずClova向けのアプリを作ってみるということと、Azure Functionsとの連携を試してみました！

作ってから気づいたのですが・・・Clovaデフォルトの雑談機能も、わりとねぎらってくれますよねw

Azure Functionsは、Azure Functionsだけでエンドポイントの公開まで、手軽にできるのが素敵ポイントだな、と感じました！

[CEK SDK for Node.js](https://github.com/line/clova-cek-sdk-nodejs)といったSDKも、公式から提供されているので、次は、SDK利用にトライしてみたいと思います！

今日はここまで〜。