自作Clovaスキルを実機で動かすまで

スマートスピーカー
2018.08.25

この記事では、LINE Clovaに自作スキルを実装する方法について書いていきます。2018/7/12にClovaのスキルを誰でも開発できるClova Extensitons Kitが公開されました！早速、イジリ倒してみます。

Redirecting... | LINE Developers
developers.line.biz

猛者の方々はすでにAWS上にFunctionを導入して審査とか出していそうです。。。私は、そこまではできていなくて、チュートリアルを見ながら、ローカルにサーバを立てて実機で動作確認するところまで出来ましたので、その内容と私が詰まった点をこの記事に書いていきたいと思います。

１．完成系

私：「ねぇClova、サイコロ占いを起動して」

Clova：「サイコロをいくつ振りましょうか？」

私：「サイコロを３つ振って」

Clova：「サイコロを３つ振ります。結果は２、３、４で合計は９です」

２．準備するもの

私が実機でテストするまで必要だったものを書きます。

チュートリアル上は、「Git」「Node.js」「Chrome拡張機能」の3つが必要だと書いてあります。しかし、チュートリアルだと、専用のコンソールで発話に対するレスポンスの確認をするようになっていますが、やっぱり実機でどうなっているか確認したいため、①ローカルサーバを外部からHTTPS参照できるようにするngrokと②実機(ClovaFriends)を準備します。また、Clova Developer Center βにログインしているアカウントと同じアカウント（メールアドレス）でログインしたClovaFriendsがあると、ClovaFriendsが認識した発話をテキストで確認できるため、③スマホのLineClovaアプリで設定を確認します。

他の方は引っかからないと思いますが、Node.jsのバージョンが古すぎると、チュートリアルが失敗しますので、Node.jsのバージョンは最新版を使うようにしましょう。

３．環境の準備

私の環境は、次のものです。「１．準備するもの」のソフトウェアインストール後の状態です。

  • OS：Windows8.1の64bit
  • Node.js：v8.11.3
  • Clova：v1.7.1
  • （Git：git version 2.12.0.windows.1）

ローカルへのExtensionサーバーの準備

ここは、何も考えずに、チュートリアル通りのコマンドを実行しましょう。

git clone https://github.com/line/clova-extension-sample-dice.git
cd clova-extension-sample-dice
git checkout tutorial1
npm install
node app.js

サーバーの起動確認をChrome拡張機能のPostmanを利用して行います。Chromeのアドレスバーに「chrome://apps/」と入力して、「Postman」を選択しましょう。入力例はチュートリアル通りこのURLを参考に次の赤い四角を入力します。

最後に青い「Send」ボタンをクリック。このとき、400エラーとかえって来た場合は、先ほど起動した、ローカルサーバの「node app.js」のコマンドプロンプトを確認しましょう。

【起動直後】

【PostmanからSend直後】

何かリクエストが届いていれば、OKです。　ここまでで、Postmanの役割は終わりです。

Gitからダウンロードしたソース(Node.js)を変更した場合は、一度「Ctrl＋C」でサーバを停止したのちに、「node app.js」でサーバーを再起動しましょう。

４．Extensionの基本情報の登録と設定

Extensionの基本情報を登録

サーバーが上手く起動出来たら、Clova Developer Center βからExtensionの基本情報を登録します。次の画面は、作成後の画面です。初めての方は、「LINE Developersでスキルチャンネルを新規作成」という緑色のボタンをクリックしましょう。

この中で、重要なところは、「Extension ID」(後で変更不可)と「呼び出し名」「ExtensionサーバーのURL」(後で変更可）です。私の場合は、次のように設定。

  • 基本設定タブ
    • Extension ID
      • simota.clova.extension.sampledice
    • 呼び出し名
      • サイコロ占い
  • サーバー設定タブ
    • ExtensionサーバーのURL
      • ngrokの値　（※１）
    • アカウント連携の有無
      • なし
  • 配布情報タブ
    • 未記入
  • 個人情報の保護および規約同意
    • 設問の通りわかる範囲で記入

※ngrokの設定について

ngrokについては、以前私が書いた記事があります。

ngrokは便利！
この記事ではngrok(エングロック)について書きます。このngrokを初めて知ったのは、GoogleHomeの勉強会に参加したときです。ngrokは、localにhttp/httpsサーバを簡単に立てて、インターネットからアクセスできるようにできるものです。例えばスマホやクラウドからGoogleHomeを操作できるようになるというものでした。
shimota.app
2018.09.02

これを参考にして、「ngrok.exe http 3000」というコマンドを打つと次のような画面になります。

これをもとに設定します。

注意点としては、「/clova」を付けること。そして、ngrokは起動のたびにURLが変わるため、サーバー設定を都度変更する必要があります。設定は即反映されるので、毎度設定する手間以外は、開発に影響がでません。

５．Extensionスキルの開発とブラウザ上でのテスト

対話モデルを登録する

対話モデルの設定は、Extensionの基本情報を設定した場所から開くことができます。

開くとこんな感じの画面になります。この中で、「カスタムインテント」というものを作っていきます。

※この画面は、あとで何回も来ます。ここからが一番のつまりどころでした。

出来上がりの「ThrowDiceIntent」は次のような画面です。

Intentが２つ「サイコロを振って」「サイコロを１つ振って」です。Intentとは、実際にスマートスピーカーに話しかける言葉を指しています。IntentやSlotを変更したあとはビルドをする必要があります。ビルドには３分～５分かかるのでちょっとした開発をする際は、ストレスになります。もう少し早くして欲しい。

テストの前に、Gitのソースを修正するところがある

function checkApplicationId(jsonRequestBody, applicationId) {
    if (jsonRequestBody.context.System.application.applicationId !== "simota.clova.extension.sampledice") {
        throw new Error(`Invalid application id: ${applicationId}.`);
    }
}

applicationIdという項目があるので、そこを自分で設定したExtensionIdに変更します。これをしないと、ずっとステータスコード４００が返ってきます。

シミュレータでテスト

左側の「テスト」を選択すると、対話モデルのテスト画面に遷移します。ここのテキストボックスに試したい発話（スマートスピーカーに喋りかける言葉）を記載します。

テストの結果は次のように返ってきます。

  • サンプル発話
  • サービスの応答
  • 実行されるイベント
  • 解析されたインテント
  • 解析されたスロット
  • リクエストJSON
  • レスポンスJSON

{
    "version": "1.0",
    "session": {
        "sessionId": "95b5a2db-924e-4411-9862-5f3461048cae",
        "user": {
            "userId": "3d_u0yZoQumSKWM1GiMJpQ",
            "accessToken": "98aa02a4-2021-4348-be57-8522ddfb2432"
        },
        "new": true
    },
    "context": {
        "System": {
            "application": {
                "applicationId": "simota.clova.extension.sampledice"},
            "user": { 省略 },
            "device": { 省略 }
        }
    },
    "request": {
        "type": "IntentRequest",
        "intent": {
            "name": "ThrowDiceIntent",
            "slots": {
                "diceCount": {
                    "name": "diceCount",
                    "value": "1"
                }
            }
        }
    }
}

このようにうまくいけばいいのですが、ここもたくさんはまりました。

サービスの応答が404になる

  • サーバー設定タブのExtensionサーバーのURLが間違っています。見直しましょう。

サービスの応答が500になる

  • 作成したソース内で、ヌルポや0除算等の実行時エラーが発生しています。

一番はまったのは、解析されたスロットの有無によってJSONデータが変わることです。Node.js苦手なので、NULL判定が埋まっくできなかったよ。。。解析されたスロットがない場合は、次のJSONになる。

    "request": {
        "type": "IntentRequest",
        "intent": {
            "name": "ThrowDiceIntent",
            "slots": null
        }
    }

しっかりローカルサーバの「node app.js」のコマンドプロンプトにもログが出ています。

サクラエディタでやっていたんですが、VIsualStudioCodeだとローカルでデバッグもできるんでしょうかねぇ。

参考）スロットの設定方法

チュートリアルを見ていると、この記事を書いている時点では、対話モデル作成時のスロットの設定方法がちゃんと書いてありませんでした。ここで、書いておきたいたいと思います。

(a)利用するビルトインスロットタイプ（利用したい型）を有効にする

有効になったスロットタイプは、「ビルトイン スロットタイプ」に表示される

(b)スロットリストに使用したい変数名を登録する

(c)スロットリストに登録した変数名に型を紐付ける

(d)カスタム インテントのサンプル発話で変数として扱いたい部分を指定し、変数名を割り当てる

これでOKです。次の発話が１つのサンプルで表現できるようになります。テストシミュレータで確認してみてください。

  • サイコロを１つ振って
  • サイコロを２つ振って
  • サイコロを６つ振って

また、変数の部分は、Node.js上は「this.request.intent.slots.diceCount.value」で取得することができます。（ヌルポに注意）

６．実際にClovaFriends上で動かしてみる

ブラウザのシミュレータ上である程度の動作確認がとれたら、最後は実機でテストしてみたいところです。ここがまた、行間が広いところです。準備として、LINE Developersコンソールと実機のClovaFriendsのログインアカウントを同じにします。詳しい設定方法はよくわかりませんが、アカウントを分けている方は、チュートリアルに沿ってテスターIDの追加を行ってください。

設定に成功すると、実機（ClovaFriends）に話しかけた言葉を拾うことができるようになります。実際に３言ぐらい喋りかけてみました。このサンプルでは、スキルに対応していないので、「すみません、わかりませんでした」という反応が返ってきます。

実際にスキルを試してみる

実機に喋った内容と、リクエストとレスポンスログを並べてみます。

■「サイコロ占いにつないで」と喋りかけた場合のリクエストとレスポンス

■「サイコロを３つ振って」と喋りかけた場合のリクエストとレスポンス

■「終わり」と喋りかけた場合のリクエストとレスポンス

リクエストとレスポンスの内容をみるとシミュレータでテストしたときと動作が異なりますね。このあたりがベータ版といったところでしょうか。ここまでで、私のCEKのチュートリアル完了です。

実機をシミュレータで動作が異なる部分

一番詰まった部分は次の点です。

  • シミュレータだとIntentRequestのみのテストが可能だか、スキル起動直後は、LaunchRequestが実行される

チュートリアルだったので、深いところまでドキュメントを読み込んでいませんでしたが、ClovaExtensionKitに組み込まれているビルトインされたイベントの制御をしっかり覚えないと開発が難航するかもしれませんね。

その他

チュートリアルを進む上でかいつまんだ情報

  • 類似語を登録でき誤認識を減らせることができます。。
  • Clova Extensions Kitで開発できる言語は今は２種類。今後増える予定
    • Node.js
    • Swift
  • サーバーの指定はありません。ngrok、AWS、GCPなどで利用可能なことが確認されている。

まとめ

自作Clovaスキルを実機で動かすまでをまとめました。GoogleのDialogFlowになれてからClovaExtensionKitを利用するとちょっと感覚が違って手間取りますね。また、ベータ版ということもあって、ドキュメントが不足しているところもあります。今後改善に期待しましょう。今後としては、何か１つスキルをリリースしてみたいですね。

コメント

タイトルとURLをコピーしました