f:id:amthgfonger-nk:20190220141802j:plain

こんにちは。SHOWROOM Tech Studioインターン生の伊藤です。

昨年末に社内でスマートスピーカーハッカソンが開かれるなど、スマートスピーカーを使用してSHOWROOMをより便利にできないかという取り組みをしていました。今日はその成果物についてブログを書いて行きたいと思います。

どんなアプリか

SHOWROOMの配信操作 (配信スタート/ストップ、テロップの変更) をClovaに話しかけるだけで可能にするアプリ

(リリースするかは未定です)

誰の何を解決するか

楽器を使用した配信で、両手が塞がっている配信者さん
ダンスなどのパフォーマンスでカメラ(配信端末)から離れたところで配信する配信者さん
カメラに顔を近づけることが億劫な配信者さん
その他、何らかの理由で手を使用することができない配信者さん(配信中に手が汚れる等)

などが、「声だけで」「配信端末から離れた場所から」配信操作ができるようになる。

技術仕様

Python 3.7

Flask 1.0.2

line-bot-sdk-python 1.8.0

clova-cek-sdk-python 1.0.1

シーケンス図

f:id:amthgfonger-nk:20190227163221p:plain

利用手順と技術解説

1. Clovaスキルのインストール

LINE Clovaアプリのスキルストアから「SHOWROOM 配信サポート」というスキルをインストール(利用開始)します。

f:id:amthgfonger-nk:20190130175102p:plain

ちなみにClovaスキル自体は、GUIツールを使って、1行もプログラムを書くことなく作成可能になっていました。

具体的には、まず「カスタムスロットタイプ」と呼ばれる「Clovaが認識できる単語」を設定します。

f:id:amthgfonger-nk:20190130182323p:plain

その後、カスタムスロットタイプを使用して、実際にトリガーとなる文章を設定していきます。

f:id:amthgfonger-nk:20190130181437p:plain

この文章がインテントと呼ばれ、ユーザーが Clovaに話しかけると、アプリのサーバーに、「呼ばれたインテントの種類」と「そのインテントに含まれるカスタムスロットタイプ」をパラメータとして保持したリクエストが飛んでくるという仕組みになっています。

2. LINE Botを友達追加

Clovaスキルの詳細画面もしくはQRコードなどからLINEのメッセンジャーアプリで、「SR配信者向けBot」を友達追加します。

f:id:amthgfonger-nk:20190130180303p:plain

アカウント連携メニューは、Rich menuという機能を使用して表示しており、この機能は、画像上のユーザーがタップする場所によって、異なるリクエストをサーバーに飛ばすことができると言うものです。詳細はLINE Messaging API 公式リファレンスをご覧下さい。今回はPostback messageを使用しました。

3. SHOWROOMとのアカウント連携を行う

アカウント連携メニューをタップすると、SHOWROOMとのアカウント連携用のリンクが送られてくるので、リンクをタップするとSHOWROOMのOAuth認証に遷移します。

f:id:amthgfonger-nk:20190130180338p:plain

SHOWROOMのID、パスワードを入力してログインし、このBotアプリとのアカウント連携を許可します。

これでSHOWROOMとのアカウント連携完了です。

f:id:amthgfonger-nk:20190130180419p:plain

チャット画面に戻ると、Rich menuがアカウント連携済みのメニューに変更されているようにしています。

f:id:amthgfonger-nk:20190130191202p:plain

また、Clovaスキル起動時にRefresh tokenの利用によってAccess tokenが自動更新される処理を以下のように書いているため、アカウント連携済みでRefresh tokenが有効な状態であれば、いつでもClovaに話しかけるだけで配信サポートが利用できます。

@clova.handle.launch
def launch_request_handler(clova_request):
............
............

    if user_authorization and user_authorization.access_token_expired_at < now:
        refresh_token = user_authorization.refresh_token
        headers = {
            'Content-Type': 'application/x-www-form-urlencoded',
        }
        .................
        .................
        .................

        user_authorization.access_token = access_token
        user_authorization.access_token_expired_at = access_token_expired_at
        user_authorization.refresh_token = refresh_token
        db.session.add(user_authorization)
        db.session.commit()

このSHOWROOMとのアカウント連携の細かい実装は、弊社エンジニアシミズさんの以下の記事が詳しいので、是非こちらも読んで見て下さい。

tech.showroom.co.jp