NetlifyでClovaを動かそう

[Netlify](https://www.netlify.com/)はFunctionsを動かすことができます。
このFunctions機能を使って、Clovaを動かしてみましょう。

AWS LambdaやAzure Functionsなどありますが、クレジットカードの登録が必須なので、学生の方は少し敷居が高いです。

# 料金
基本無料で利用することができます。
無料枠は月の利用時間は100時間で、呼び出し回数が12万5千回です。
ちょっとお試しで試す分には十分利用できます。  
https://www.netlify.com/pricing/#addons

<img width="1191" alt="s100.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/5890c41f-3a87-ef52-7303-04f68ff6c8b3.png">

# GitHubにリポジトリを作成する
GitHubにリポジトリを作成します。

<img width="725" alt="s101.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/b886b3cb-5a98-b078-e740-1e6eca1e9e36.png">


# ローカルPCにgit環境を整える
ローカルPCにgit環境を整えます。

```
$ mkdir ehou-functions
$ cd ehou-functions
$ git init
$ git commit -m '初回コミット' --allow-empty
$ git remote add origin {GitHubのリポジトリURL}
$ git push -u origin master
```

# Clova関数を作成しよう
`functions`フォルダを作成してそこにプログラムファイルを作成します。

```
$ mkdir functions
$ cd functions
```

`index.js`ファイルを新規作成します。関数ができたらGitHubにプッシュすることを忘れずに！

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

exports.handler = function (event, context, callback) {
    var response = {
        statusCode: 200,
        headers: {},
        body: ""
    };
    
    var speechText = "";
    var requestJson = JSON.parse(event.body).request;
    var endFlg = false;
    
    if (requestJson.type === 'LaunchRequest') {
        // 起動時処理
        speechText = '恵方巻きの方角を知りたい場合は「今年の方角は」と言ってください。それではどうぞ！';

        responseCall(speechText, endFlg, response, callback);
        
    } else if (requestJson.type === 'SessionEndedRequest') {
        
        speechText = 'また知りたくなったら、呼びかけてくださいね！';
        endFlg = true;
    
        responseCall(speechText, endFlg, response, callback);
        
    } else if (requestJson.type === 'IntentRequest') {

        if (requestJson.intent.name === 'EndIntent' || requestJson.intent.name === 'Clova.NoIntent') {
            // 終了処理
            speechText = 'また知りたくなったら、呼びかけてくださいね！';
            endFlg = true;
        
            responseCall(speechText, endFlg, response, callback);
            
        } else if (requestJson.intent.name === 'Clova.GuideIntent') {
            speechText = 'その年の恵方を答えます。知りたい年を西暦でお答えください。では、どうぞ。';
            
            responseCall(speechText, endFlg, response, callback);
            
        } else if (requestJson.intent.name === 'Clova.YesIntent') {
            speechText = '知りたい西暦を答えてください。。';
            
            responseCall(speechText, endFlg, response, callback);
            
        } else if (requestJson.intent.name === 'MainIntent') {
            
            if (requestJson.intent.slots == null) {
                speechText = "西暦を正しくお応えください。";
                
                responseCall(speechText, endFlg, response, callback);
                
            } else {
                var dt = new Date();
                //年
                var myYear = dt.getFullYear();
                
                if (requestJson.intent.slots.yearword != undefined) {
                    myYear = requestJson.intent.slots.yearword.value.substr(0, 4);
                } else {
                    myYear = requestJson.intent.slots.year.value.substr(0, 4);
                }
                
                var num = myYear % 10;
                var wk;

                switch (num) {
                    case 2: case 7: 
                        wk = "北北西"; break;
                    case 4: case 9:
                        wk = "東北東"; break;
                    case 1: case 3: case 6: case 8:
                        wk = "南南東"; break;
                    default:
                        wk = "西南西"; break;
                }

                speechText = myYear + "年は、" + wk + "です。他に知りたい年はありますか？";  
                responseCall(speechText, endFlg, response, callback);
            }
        }
    }

    
};

// レスポンス処理
function responseCall(speechText, endFlg, response, callback) {
    var responseJson = JSON.stringify({
        "version": "1.0",
        "response": {
            "outputSpeech": {
                "type": "SimpleSpeech",
                "values": {
                    "type":"PlainText",
                    "lang":"ja",
                    "value": speechText
                }
            },
            "card": {},
            "directives": [],
            "shouldEndSession": endFlg
        }
    });
    
    response.body = responseJson;
    
    callback(null, response);
    
}
```

# Netlify環境構築
[Netlify](https://www.netlify.com/)にアクセスして、サインインしてください。
［New site from Git］ボタンをクリックします。

<img width="1223" alt="s102.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/4b76a2f6-7106-7375-f994-83b6d8711fa9.png">


## Githubと連携する
GitHubと連携するので、［GitHub］ボタンをクリックします。

<img width="709" alt="s103.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/f6ae1e84-19c6-090e-09e9-2f1739819b8d.png">

GitHubの画面が表示されるので、［Add another organization］をクリックしてください。

<img width="732" alt="s104.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/da28ba44-53da-05fe-3d0b-3bc7a6ec47ed.png">

対象のリポジトリを選択します。

<img width="759" alt="s105.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/b338596e-1b8f-1efd-414e-bca95a951588.png">

リポジトリを選択するとNetlifyの画面に戻り、対象のリポジトリをクリックします。

<img width="731" alt="s106.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/1055793d-9c5a-d9ee-4918-c4df35f13038.png">


そのまま［Deploy site］をクリックします。

<img width="710" alt="s107.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/01ae3d05-960c-ba0e-1b4c-8041502dc28f.png">


［Settings］をクリックして、左メニューから`Functions`をクリックします。
Functionsがあるフォルダを指定します。

<img width="1242" alt="s108.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/a99c0223-5d01-bbc6-9414-f2ce3c9bd149.png">


［Functions］タブをクリックします。作成したjavascriptファイルをクリックします。
今回の場合だと`index.js`をクリックします。

<img width="1236" alt="s109.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/8677f765-61c6-66c8-f5a5-24466e07510f.png">


エンドポイントURLが表示されるので、コピーしておきます。

<img width="1221" alt="s110.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/04618fa4-f5dd-056b-2636-48bcd415946a.png">

# Clovaのエンドポイントを設定する
Clovaデベロッパーセンターのサーバー設定で先程コピーしたURLを指定します。

<img width="1680" alt="s111.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/c20e81c8-54d6-933a-5c66-53e2c695b662.png">


## Extensions Kitの設定
今回のスキルでは`MainIntent`を作成しました。西暦を取得するためのビルトインスロットタイプを指定します。

<img width="1186" alt="s112.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/25ae9952-f95d-24be-7cc9-711669ab386a.png">


## テストする
シミュレーターでテストしてみます。「今年は」と入力すると、今年の恵方がわかります。

<img width="1570" alt="s113.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/448fe813-bf6e-9332-bacb-374128640e66.png">


# まとめ
無料で簡単にFunctions環境を作成することができました。
サクッと試す場合にはオススメですよ！

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