はじめに
Clovaスキルの開発を始めようと思った時に真っ先に読むのが公式チュートリアルだと思います。
ただ、この公式チュートリアルで最初に躓くのが外部からアクセスできるサーバーを立てないといけないということろです。
練習段階なのにわざわざ外部のサーバーを自分で立てるのは面倒だと思います。
ということで、ローカルでテストする方法を書きたいと思います。
仕組み
ngrokというものを使います。
ngrokとは、localhostで動いているサーバーを外部に公開できるツールです。
これを使って公式チュートリアルをローカルでテストして見たいと思います。
スキルの作成
公式と全く同じスキルを作成して試して見たいと思います。
インテント: ThrowDiceIntent
サイコロを振って
詳しくは、こちら
ソースコードのダウンロード
ここも、公式通り行きます。
$ git clone https://github.com/line/clova-extension-sample-dice.git
$ cd clova-extension-sample-dice
$ git checkout tutorial1
$ npm install
$ node app.js
Server is running on 3000 port
node app.jsを実行すると立ち上がったサーバーのポート番号が表示されると思います。
のちにngrokを起動する時にポート番号が必要なのでメモしておきます。
上記ですと、3000です。
次にngrokを使って外部からのアクセスを可能にしたいと思います。
ngrokのインストール
こちらを参考にしました。
ngrokを使用してローカル環境を外部に公開する
$ brew install ngrok
上記のでうまくいかなかった場合
$ brew cask install ngrok
ngrok起動
先ほどメモしたポート番号と、コマンド一発で起動します。
$ ngrok http メモしたポート番号
今回の場合、ポート番号が3000だったので以下のように起動します。
$ ngrok http 3000
すると、URLが生成されるのでメモします。
httpsの方を使用します。
また、起動毎にドメインが変わってしまうので注意です。
CEKとローカルを紐づける
上記でメモしたURLに/clovaを付け加えてCEKの方のサーバー設定画面で設定します。
上記のURLだと、https://9cc7705c.ngrok.io/clovaになります。
テストしてみる
完成です。
実機でも、ブラウザからでもどっちでもいいのでテストして見てください。
うまく言っているはずです。
Clovaスキルのテストをngrokを使ってローカルで試してみました！の図#CEK #Clova_CEK pic.twitter.com/dDFXNcK7EW
— imajo (@imasirooo) 2018年7月30日
Invalid application id:
ちょっとハマったのですが、チュートリアル通りだとExtension IDにmy.clova.extension.samplediceを入力すると思うのですが、Extension IDはユニークなので怒られます。
そこで、自分の好きなIDに変更すると思うのですがそうすると以下のようなエラーが返されると思います。
Invalid application id: your-id
これはcloneしたコード上ではExtension IDの設定を変更しないといけないからです。
config.jsのExtensionIdをご自身で設定したIDに変更してもう一度試して見てください。