ブロックチェーン・AI・システム開発の株式会社INDETAIL

Clovaスキル開発始めました【動画あり】

2018.12.15
tacck

※本記事は、INDETAIL Advent Calendar 2018の一環として投稿しています。

この記事は、INDETAIL Advent Calendar 2018の15日目の記事です。

こんにちは、tacckです。
今回のテーマは「Clovaスキル」です。

巷では、スマートスピーカーもだいぶ市民権を得てきたかと思います。
みなさまのご家庭にも、一台はあるのではないでしょうか。(私は四台持っています。)

導入が完全に前回と同じですが、AlexaだけでなくLINE社のClovaのスキル開発もやっていたりします。
今回は、Clovaスキル開発の基本的な作成手順を解説してみたいと思います。

そもそもなぜチャレンジしているのか?

これは、当初は個人の興味で始めました。

LINE Boot Awards 2018
LINE社にてこういうコンテストが開催されるという情報をきっかけに、「やってみるか」と思ったのが正直なところです。

コンテストは無事に予選落ちでしたが、社内でClovaスキル開発の知見も必要になりそうだったりもしており、今後はAlexaスキル開発と並行してチャレンジする流れとなりそうです。

LINE Clovaとは

LINE株式会社 の販売するClovaデバイスである「Clova WAVE」、「Clova Friends」およびそのシリーズ上で動作する対話インタフェースです。
LINE Clova公式サイト
(これ以外にも、家電に搭載されたりしているようです。)

iOSやAndroidにClovaの設定アプリ(LINE Clovaアプリ)があり、こちらで色々と設定を行ないます。

特に、「Clova Friends」シリーズは、LINEの人気キャラクターなどをモチーフにした見た目になっています。
この「視覚的な親しみやすさ」という点は、他のスマートスピーカーと一線を画しています。

可愛い方が、話しかけたくなりますからね。

Clovaスキルとは

Clovaの機能を形作るためのアプリケーションのことです。

Clovaのスキル | LINE Clova公式サイト
Clova Developer Center β

大きくは、

  • LINE社が作成する基本機能
  • サードパーティによる追加機能

があると思ってください。

LINE社が作成する基本機能は常にアップデートされており、気がつくと新しい言葉に答えてくれるようになっていたりします。
(この辺は、Alexaと同様ですね。)

サードパーティによる追加機能は、PCやスマホにアプリをインストールするように、Clovaデバイスで「スキルを有効にする」ことで、新たな機能を利用することが可能になっていきます。
ここで解説するClovaスキルの開発手順は、後者の「サードパーティによる追加機能」の開発手順になります。

Clovaスキル開発手順

まずざっくり仕組みの理解から

仕組みを理解するために、簡単な流れを確認していきましょう。
全体としては、Alexaスキルの時と同様なので、そちらも参考にしてみてください。

デバイスで音声を受付

まずは、Clovaデバイスに向かって「Clova」と呼びかけます。
この時にClovaデバイスがきちんと「Clova」という音声を理解し、その後の発話を受け付けるモードに遷移します。

この時の「Clova」という単語を「ウェイクワード」と呼んだりします。

スキルの起動

続けてClovaデバイスに向かって「[スキル名]を起動」のような形で話しかけます。
例えば、「ゾンビのまちを開いて」と呼びかけると、「ゾンビのまちスキル」を起動します。
(個人的に一押しの、ゲームスキルです。)

この時、呼びかけた言葉はClovaのサービス側(クラウド上のClovaサービス)に送信されます。
Clovaサービスが音声を認識し、[スキル名]に該当するスキルがあって、Clovaデバイスで有効になっていれば、そのスキルのバックエンドを起動することになります。

その後対話内の質問への回答を行なうようなこともありますが、すべて音声はClovaサービス内で処理され、バックエンドは必要な情報をテキストで受け取る形になります。

スキルからの返答

バックエンドは、"HTTPS"の応答のできる環境ならどこでも構いません。
AWSを使う場合は、API GatewayとLambdaを組み合わせることになりますね。

今回は少し趣向を変えて、ローカルの環境を使えるようにしてみます。

ngrok - secure introspectable tunnels to localhost

こちらのngrokというサービスを使います。これを使うと、ローカルのポートをngrok経由で外部に公開できるようになります。

今回のようにちょっとバックエンドを試したり、開発中に頻繁に更新したりするような場合には、このようにローカルの環境を一時的に外部から参照できるようにするサービスはとても便利ですね。
こちらのサービスは有料プランもありますが、今回使う範囲は無料で利用することが可能です。

SDKについては、Alexaと同じくNode.js、Java、Pythonも用意されていますが、他にSwift、Kotlin、Elixir、Go、も用意されています。
Clova Extensions Kitソフトウェア開発キット(CEK SDK) - Clova Developer Center β

ラインナップを見ると、LINEのエンジニアさんのこだわりを伺うことができますね。

この他、LINE社から提供されたものでは無いようですが、C#のSDKもあるようです。
GitHub - kenakamu/clova-cek-sdk-csharp: C# SDK for Clova Extension Kit

色々と選択肢はありますが、Alexaスキルの開発とも共通しているので、ここではNode.jsを使っていきたいと思います。

バックエンド呼び出しの構造

バックエンドを呼び出す時の、大まかなイメージも説明しておきます。

上記の通り、ClovaデバイスからClovaサービスへ音声が送られ、そこでテキスト化されてバックエンドへ情報が渡ってきます。
この時、バックエンドには「どういう会話パターン(インテント)」で「どういうキーワード(スロット)」の発話だったか、という情報がきます。
そのためバックエンドでは、「このインテントでこのスロットが来たら、このように返答する」というような実装を行なうことになります。
(このあたりの構造も、Alexaスキルと同じ形ですね。)

開発ステップ0: アカウント取得

では、スキルの開発を始めましょう。

まずは、こちらもスキルを登録するためのアカウントの準備からです。
登録には LINE Developersアカウント が必要ですが、これを利用するために普段みなさんが利用しているLINEアカウントも必要です。

LINEアカウント に対して「開発者権限」をつけることで LINE Developersアカウント として使える、というイメージです。

LINE Developers

まずは、上記サイトにアクセスしましょう。
右上の「ログイン」ボタンをクリックします。

「LINEアカウントでログイン」をクリックして、ログインを行ないます。

成功すれば、 LINE Developers の初期画面に遷移します。

まずは、ここで「プロバイダー」を作成します。
プロバイダーは、LINE Developers で作成できる機能をまとめる「グループ」のようなものです。

右上の「新規プロバイダー作成」をクリックし、プロバイダー名を作成していきます。(何でも良いです。)
成功すると、「新規チャネル」の作成を促すページに遷移します。

ここまでで、開発前の準備は完了です。

開発ステップ1: 基本的な設計

開発するスキルは、前回と同じものにします。

  • 呼び出し
  • スロットを含む対話 (1パターン)
  • 回答

この流れで、「クリスマス」と「お正月」まで後何日かを教えてくれるスキルです。

開発ステップ2: スキル登録

では、スキル登録を進めていきましょう。

先ほど作業を進めていた LINE Developers のページに戻ります。
このページの下の方にClovaスキルを作成するためのメニューが出ているので、そちらの「チャネルを作成する」をクリックしましょう。

チャネル名は「MyCountDown」として進めていきます。
確認画面で「作成してClova Developer Centerに移動」をクリックします。

すると、 Clova Developer Center へ遷移してスキル登録を進めることになります。
ちなみに、 Clova Developer Center では「新しいExtensionを作成」と出てますが、ここでいう Extension がスキルのことになります。

下にスクロールして、基本設定の「タイプ」を「カスタム」にします。

すると、入力項目がさらに出てくるので、必須の箇所を入力していきます。

Extension ID は、自分の作ったもの以外のスキルも含めて、唯一の名前にする必要があります。
注記にあるように、リバースドメイン(ブラウザのURLで使っている並びの逆順)の形式で、「三階層(ピリオドが二つ)以上」にする必要があります。

各自、適切に設定してください。他の人と重複しないものになると、緑のチェックマークがつくようになっています。
また、この Extension ID は、後々バックエンドの方で使用するのでメモしておいてください。

「スキル名」と「呼び出し名(メイン)」は、「少しだけカウントダウン」にしましょう。

Alexaには無かったのですが、Clovaでは「呼び出し名(サブ)」という項目があります。
これは、呼び出し名を複数登録できる、というものになります。
例にあるように、漢字・平仮名・片仮名のバリエーションを入れることで、呼び出し精度を上げるためのもののようです。
今回は、空にしておきます。

さらに下に、「提供者区分」とあるので、「企業」か「個人」かを選択します。
できることはどちらも同じで、入力する内容が少し異なるだけです。

個人の場合には、「提供者名」と「担当者メールアドレス」を入力すれば良いです。
(スキルをストア公開するために申請する場合には、正確に入力してください。)

入力後に、ページ下の規約に同意できれば、チェックを入れて「作成」をクリックします。

作成に成功すると、さらに詳細な情報を入力できるようになります。
しかし、その辺りはストアへリリースする場合に必要になるものなので、今回は特にこれ以上入力は行ないません。

ここからは、インテントなどの対話情報を入力していきます。

「個人情報の保護および規約同意」のタブをクリックしてください。
必須項目のラジオボタンがありますが、無視して下の方にスクロールしていきます。

すると、「対話モデル」というボタンがあるので、これをクリックします。

対話情報を入力するウィンドウ(対話モデル画面)が開くので、こちらで作業を続けます。

では、まず「カスタムスロットタイプ」を追加します。「カスタムスロットタイプ」の右側の「+」をクリックしましょう。

スロットタイプの名前を入力するページになるので、「eventNameSlot」と入力して「作成」をクリックします。
続けてスロットに入る値を登録していきます。
今回も「クリスマス」と「お正月」を追加し、右上の「保存」ボタンをクリックします。

次は「カスタムインテント」を追加します。「カスタムインテント」の右側の「+」をクリックしましょう。

インテントの名前を入力するページになるので、「HowManyDaysIntent」という名前にしましょう。
「作成」をクリックすると、サンプル発話が登録できるようになります。

これも、Alexaの時と同様にいろんなパターンを入れておきましょう。

さて、上記のようにサンプル発話を登録するのですが、スロットの指定がまだですね。
ここがAlexaの時と大きく異なります。
「サンプル発話を登録後に、スロットにしたい場所を範囲指定する」と、そこをスロットに指定することができます。

Alexaでは、サンプル発話の登録時に{}で括ることでスロットの指定を行なっていましたね。
しかし、Clovaはサンプル発話登録後にマウスでの操作が必要です。
ここの操作方法が大きく異なるので、注意してください。

では、サンプル発話の eventName を範囲選択し、スロットタイプとして eventNameSlot を選択していきましょう。
すべてできたら、右上の「保存」をクリックしましょう。

これで、一通りの対話情報を入力できたので、左上の「ビルド」をクリックしましょう。
ビルドの完了まで少し時間がかかるので、待っている間に次に進みましょう。

開発ステップ3: バックエンド開発

バックエンド用のコード作成

次に、バックエンドの開発です。

先に書いた通り、今回はngrokを使ってローカルの環境でバックエンドを実行してみます。

では、スキルを実行するバックエンドのプログラムを作ってみましょう。
下記の内容を index.js として保存してください。

全体的な流れは、おおよそAlexaのバックエンドのコードと同じです。
(日数を計算するところは、そのままです。)

ざっくりとコードの説明をします。

  • 9-15行目: これは、最初に起動された時に使われる処理です。スキルの説明を返して、次のユーザーの発話を促します。
  • 22-50行目: ここが今回のスキルのメイン処理となります。イベント名をスロットとして受け取り、その内容によって残りの日数を計算して返すようにしています。
  • 57-60行目: スキル内でエラーが発生した場合にここで処理されますが、今回は省略しています。
  • 63-68行目: Clovaサービスから呼び出された時の、最初の窓口になります。/clova宛ての処理を、Clovaのスキルとして処理していくことになります。
  • 65行目: "YOUR_APPLICATION_ID" のところを、先ほどメモしておいた Extension ID にします。(忘れやすいので、注意を!)

ローカルで実行しngrokでトンネリング

では、まず作ったプログラムをローカルで実行してみましょう。

これで、実行できました。 3000番ポートで待ち受けしている状態です。

次に、もう一つターミナルを起動して、 ngrok を起動します。

こちらも実行できました。
https://[unique_name].ngrok.io 宛の通信を、 localhost:3000 へ繋げてくれるようになります。

さて、これでローカルの準備は完了です。

スキルとngorkの連携

最後に、ClovaスキルとngrokのURLを結びつけましょう。
Clova Developer Center に戻り、「サーバー設定」タブをクリックしましょう。

「ExtensionサーバーのURL」に、 ngrok を実行した時に表示されたhttpsのForwardingの内容を使います。

https://[unique_name].ngrok.io/clova
のようにしてください。
(後ろの /clova で値を受け付けるように実装しているので、忘れないようにしてください!)

入力できたら、「保存」ボタンをクリックしましょう。

開発ステップ4: 試してみる

これで、一通りの準備が整いました。
では、実際にスキルを試してみましょう!

まずは、 対話モデル画面 に戻ります。
ビルドが完了していることを確認して、サイドメニューの「テスト」をクリックしましょう。

表示できたら、テキストボックスに「クリスマスまで後何日」のように入力して「テスト」ボタンをクリックします。
うまくいけば、きちんと残り日数を返してくれるはずです。

ここまでできれば、あとは実機で試すだけです。
実際に試した動画を載せておきますので、みなさんも是非ご自分のClovaデバイスで試してみてください!


(2018年12月5日撮影)

開発する上での注意事項

Alexaと同じく、Clovaも開発のやり方は常に新しくなっているので、日々情報を追っていく必要があります。
このドキュメントについて - Clova Developer Center β

マネタイズ的な面では、スキルに広告などを入れることは可能なようですが、基本的にはLINE社との調整が済んだもののみ、という形ですね。(当然といえば当然の話ですが。)
Extensionのデザインガイドライン "4. ビジネス、広告"

Clovaも、イベント向けの専用スキル(ストアリリースしないで扱うもの)を作ってみる、といった使い方をしても楽しいものになるかなと思います。

また、LINE Developerでは Messaging API 用のチャネル(いわゆるBot)を作れて、Clovaスキルと簡単に連携を取れるようになります。
が、こちらで作成したチャネルは、友だちを「50人まで」しか登録できません。
(開発用のトライアル、という位置付けなので。)

そのため、ストアにリリースする場合には LINE@ で専用のアカウントを作成し、そちらと連携を取るようにしないといけないようです。

まとめ

ClovaはLINE社の製品なので、使うためにLINEのアカウント情報が必要です。
逆に言うと、Clovaを使う時点ですでにLINEアカウントと繋がっているので、スキルからLINE@を使ったユーザーとの連携も非常に行ないやすいです。

つまり、文字のインタフェースはLINE@経由で、声のインタフェースはClova経由で、というようなUI設計を行ないやすい環境がすでにあることになります。
これは、本当にClovaのアドバンテージです。

また、今後LINE GAMEで出ているゲームとClovaとの連携ができるようになったりすると、さらに面白くなってくるのでは、と思います。
ここは、個人的にかなり期待しているところですね。

見た目もかわいく、作ってすぐに反応も見れるので、プログラムをやり始めた初学者にもおすすめです。

Alexaも含め、これから私たちの生活を変えていくデバイス、皆さんもぜひ使ってみてください!

tacck Takuya KIHARA

エンジニア (モバイルアプリ、フロントエンド、バックエンド、インフラ) 得意なことは、領域をまたいで考え、開発すること。 ブログでは、主にAnsible、Docker、Raspberry Piのことを書いています。 好きなフィギュアスケートの技は、スプレッド・イーグルです。

「いいね」ボタンを押すと、最新情報をすぐに確認できます。