「Clova＆LINEで絵本読み聞かせ」技術解説

はじめに

本記事は「LINE BOOT AWARDS 2018」にエントリーさせていただいた「Clova＆LINEで絵本読み聞かせ」の技術解説記事です。
「Clova＆LINEで絵本読み聞かせ」は、ClovaスキルとLINE Botを組み合わせて、絵本の読み聞かせを実現するものです。

システムの概要

LINE Botを組み合わせたClovaの絵本読み聞かせスキルです。
絵本や紙芝居のような感覚で、文章の読み上げを聞きながら、LINEに対応する絵が送られてきます。
また、登場人物ごとに異なる声や話し方で絵本を読んでくれます。
本文の内容も読み上げと同時にLINEに送られてくるので、トーク画面であとから絵本を読み返すこともできます。

使い方

Clovaアプリでスキル登録＆Bot友だち追加をした状態でClovaスキルを起動し、読み上げてもらう絵本を音声で指定すると、読み聞かせを開始してくれます。

その他、利用可能な絵本一覧をClovaに依頼するとLINEに送ってくれたりもします。
また、絵と文章がLINEのトークに残るので、絵本をあとから読み返すこともできます。

絵本の読み聞かせが終了すると、5段階評価の簡易レビューが行えます（絵本一覧で評価の平均点が表示される）。

絵本について

今回は選択できる絵本として用意したのは『桃太郎』とそのくだものを変えただけの『りんご太郎』『みかん太郎』です。
短期間で一人で構築したためにコンテンツ制作に時間がかけられず、ロイヤリティフリー＆二次加工/利用OKの素材を組み合わせて即席で用意したものですが、ちゃんとした絵と文章を用意してコンテンツを増やしていけたらよりおもしろくなるのでは、と考えています。
既存の絵本/紙芝居や、作家/クリエイターさんに新規に作成いただいたコンテンツを有料で販売したりすることも考えられます（LINE Payによる追加コンテンツ購入の機能も実装してみました）。

システム構成図

各部の説明

Clovaからの読み上げと画像送信の同期～AITalk WebAPIによる音声合成

本システムの肝はClovaから流れる文章の読み上げと、対応する画像のプッシュ送信の同期です。
これは、Clovaのオーディオ関連イベントを用いて再生終了のタイミング（PlayFinishedイベント）で行います。
Clovaにそのまま読み上げてもらうのではこのイベントは使えず、オーディオ再生を行う必要があるため、今回は読み上げ部分をAITalk WebAPIを用いてオーディオファイルを生成することで実現しています。

AITalk WebAPIではさまざまな話者を選択でき、速度、ピッチ、抑揚を設定できます。また、話者によっては感情のパラメータを設定し話し方に変化をつけられるので、絵本の読み聞かせにおいては、登場人物ごとに話者を変えたり、セリフに応じて感情パラメータを変えたりすることができ、相性抜群です。

また、AITalk WebAPIのレスポンスは非常に速く、Clovaに合成用のURLをそのまま渡すだけでちゃんと喋ってくれます。
もし時間がかかる場合は合成後にいったんStorageにおいてから送るようにしないとかな、なども考えたのですが（実運用時にこれをやる場合は一番下のプランだとだめなようです）、Clovaのタイムアウトもなく合成音声の再生ができたので、その必要はありませんでした。
スマートスピーカーへの利用もしやすい、とてもすばらしいAPIだと感じました。

＜追記＞
ナレーション部分の読み手を変更する処理を追加で実装しています。
Botのリッチメニューから、デフォルトの「のぞみ」さんから「琴葉葵」「琴葉茜」に変更できるようにしています。
特に「琴葉茜」は関西弁のイントネーションになるので、通常とは一味違った読み聞かせが体験できるようになりました。

Microsoft Azure

システムはAzureを利用して構築しています。

Azure Functions

ClovaスキルのExtensionサーバー兼LINE Botのバックエンドです。
コードはすべてC#で記述しています。下記のコミュニティSDKを利用させていただいていますが、現時点で対応されていない部分は一部自前で処理を実装しています（Clovaのオーディオ関連イベントなど）。
LINE Messaging API for .Net
C# SDK for Clova Extension Kit

また、主にClovaのタイムアウト対策として、Azure Functionsはレスポンスを速くするために常時起動のApp Serviceプランで作成し、そこに複数Functionを乗せています（従量課金プランで作成すると呼び出し時に起動が行われますが、起動にかなり時間がかかるため）。

Azure Cosmos DB

本文データおよびユーザーによる評価点数はCosmos DB（モデルはMongoDB）に格納しています。
1コンテンツに対して文章が複数紐付きますが、文章のデータ構造は以下の通りです。

"speeches" : [
	{
		"key" : "01",
		"text" : "昔々あるところに、おじいさんとおばあさんが住んでいました。",
		"hasImage" : true,
		"speaker" : "nozomi_emo",
		"speed" : 1,
		"pitch" : 1,
		"range" : 1.7,
		"joy" : 0.4,
		"sadness" : 0,
		"anger" : 0
	},
	{
		"key" : "02",
		"text" : "ある日。おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に行きました。",
		"hasImage" : true,
		"speaker" : "nozomi_emo",
		"speed" : 1,
		"pitch" : 1,
		"range" : 1.7,
		"joy" : 0.4,
		"sadness" : 0,
		"anger" : 0
	},
	（略）
]

この文章を読み上げる際に画像送信を行うか否かと、読み上げのスピードやピッチ、感情、話者などの各種パラメータを合わせて持たせています。
このパラメータをもとに、前述した「AITalk WebAPI」で音声合成を行います。

Azure Blob Storage

Blob Storageには音声読み上げにあわせて送信する画像を格納しています。
画像をMessaging API経由でプッシュ送信する際は、通常の画像メッセージではなく、イメージマップを利用しています。イメージマップで送信することでトーク画面に横幅いっぱいに画像を出してあげることができます（この点は締切直前に参加したもくもく会にてアドバイスいただきました）。
※アクションは1px四方のタップできない領域にダミーのアクションをいれています

Blob Storageでは格納したデータに対しURLでアクセスできるように設定できますが、イメージマップの場合は240/300/460/700/1040の各サイズ分の画像を用意する必要があるので、拡張子を外し「240」などのファイル名で画像ごとに階層を分けて格納し、そのまま利用できるようにしました。

応用例

今回応募させていただいたのは「絵本読み聞かせ」ですが、今回使用した音声とプッシュ通知による画像の送信の仕組みはシンプルゆえ、さまざまなものに応用可能だと考えています。

応用例１「バーチャルツアー」

観光名所の写真＋解説をClova＆LINEで届けます。
公共クラウドシステムのAPIなどを用いれば簡単に構築可能だと思います。

応用例２「バーチャルミュージアム」

美術館の展示のように、絵画などの美術品の画像と解説をClova＆LINEで届けます。
作者や特定のテーマごとにいくつかの作品をまとめ、絵画などを解説音声とともに楽しめます。
美術に興味のある人にはもちろん、詳しくない人の勉強にもちょうどよいかと思います。
著作権の切れていない作品は権利的な部分で採用がしづらいですが、たとえば実際の美術館の展示をテーマに展開できれば、その美術館に足を運んでもらうきっかけにもできそうです。
（トークに保存された画像＋解説を現地で見返せるのも便利かと思います）

おわりに

今回は、かなり駆け込みでの応募となってしまいました。
スキル/Botを作ってみようと思ったのも、Cogbot勉強会のセッションを聞いた2,3日後にふと思いついての参加だったので、詰め切れていない部分も多く悔いの残るところもありますが、はじめてのスマートスピーカースキル開発に楽しく取り組むことができました。このような機会をつくっていただき、ありがとうございます。
プラットフォームとしてのLINEやClovaの発展は開発者としてもユーザーとしてもとても楽しみなので、今後も積極的に新しい技術に挑戦したいと思います。