Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@TakeshiSaito(齋藤 雄士)

LINE Bot + Clova スキル開発 Python Django チュートリアル(Clova スキル 開発編)

Last updated at Posted at 2018-09-19

LINE Bot + Clova スキルを Python Django で作って動かす！

準備はこちら
LINE Bot + Clova スキル開発 Python Django チュートリアル(準備編)

Bot 開発はこちら
LINE Bot + Clova スキル開発 Python Django チュートリアル(LINE Bot 開発編)

続きです。

一つ前の記事で LINE Bot の動作確認まで行いました。
いよいよ、いよいよ、スキル の開発を行います。

前々回、前回の記事は読んでいただけている体で書いていきます。
ここだけ読みたかった方、お手数をおかけしますが少し遡って記事を見ていただけるとありがたいです。

LINE Devlopers にアクセスして スキル の設定

Bot 作成の時と同様です。

スキル の設定

Line Developers

上のリンクにアクセスするとこんな感じになっています。Clova をクリックしてください。

image.png

スキルを開発する をクリック

line_dev_1.jpg

LINE Developersでスキルチャネルを新規作成 をクリック

line_dev_2.jpg

こんな画面になるので、作成済みのプロバイダーを選んで 次のページ をクリック

line_dev_3.jpg

チャネル名は Bot と混同しないように サンプル占い Clova スキル にしました。
入力したら 入力内容を確認する をクリック！

line_dev_4.jpg

作成して Clova Developer Centerに移動 をクリック

line_dev_5.jpg

ハァハァ・・・あと少し。で前半終了

こんな画面になったと思います。

screencapture-clova-developers-line-me-cek-2018-09-19-19_32_12.jpg

項目 入力
タイプ カスタム
Extension ID リバースドメイン形式で。ハンズオン資料では、com.[あなたの氏名].uranai みたいな指示があった気がします。考えるの面倒ならそうしておいて大丈夫。なはず
スキル名 サンプル占い Clova スキル
スキル名(メイン) サンプル占い
スキル名(サブ) さんぷる占い
サンプル占いを
さんぷる占いを
提供者について よき感じに入力してください。ただし、Extensionと連携するLINEのアカウント には 前回 作成した サンプル占い Bot ちゃんを指定で！

スキル名(メイン、サブ)は実際に Clova にスキルの起動を依頼するためのキーワードです。
いくつかパターンを登録しているのは環境によって聞き取った文章が違ったりするのである程度のユレを吸収するためのものになっています。
動作確認時に影響するので上記の通りに設定してください。

下２つの規約に同意したらチェック入れて 作成 をクリック

サーバー設定は後回しにするので、ここで画面上の スキル設定 をクリック

image.png

そうすると出来立てほやほやのスキルが表示されているので 対話モデル 列の 修正 をクリック

line_dev_6.jpg

対話モデルを作る

こんな画面が別ウィンドウで表示されます。

image.png

ここでは対話モデルっちゅうものの設定を行います。
大きく分けてインテント、スロット、スロットタイプで構成されていて、これらをこれから定義していきます。
それぞれの説明も書こうかと思いましたが日本語がうまくなかったのでやめておきます。

インテント > スロット > スロットタイプ という感じなので枝葉の スロットタイプ から作っていきましょう。

カスタムスロットタイプ の右の + をクリック

image.png

スロットタイプのタイトル はお馴染みの zodiac_signs です。

image.png

最初にハンズオンで見たときから星座って意味なんやろなぁ。と思っていたのですが
Google 翻訳すると 十二支のサイン ってでてきますね。
十二支って世界共通で 子丑虎・・・ のあれなんですかね。

作成 をクリックしてください。

どんどん代表後を登録しましょう。

zodiac_signs(星座) って言うけどさ。Clova 何て聞こえたら 星座だ！って思えばいいわけ？

という Clova ちゃんからの至極まっとうな疑問に答える設定です。

image.png

同義語を設定しておくと、"双子座" と聞こえたら zodiac_signs = 双子座、"ふたご座" と聞こえても zodiac_signs = 双子座
みたいになります。同じ意味の単語なら同じ値でプログラム側は受け取りたいですもんね。

入力したら右上の 保存 をクリックするのを忘れずに

スロットタイプの登録が終わったら カスタム インテント 右の + をクリック

image.png

インテント名もお馴染みの FortuneIntent です。
フォーチューンは jojo で見た気がする。運勢って意味でしょう。疑う余地はありません。

image.png

入力したら 作成 をクリック

まずは、スロットを登録しましょう。下の部分です。

image.png

スロット名は zodiac_signs スロットタイプ には先ほど作った zodiac_signs を指定します。

少し上に戻ってサンプル発話を登録します。

image.png

こんな感じ。そしたら 星座 の部分を選択

image.png

すると、こんな感じ。この文章の中でこの部分が星座に該当するよ。って印をつけます。
選択後はこんな感じ。

image.png

発話リストもどんどん登録するべし

image.png

いや、星座が何なのかは大体わかったけどさ。そもそも運勢知りたい時 Clova に何て話しかけるの？

という Clova ちゃんの質問に解をあげましょう。

そんな感じなんだ。ちなみに、この文章の中で星座ってどこのことなの？

にも答えを教えてあげます。

OK ここまで来たら、忘れずに右上の 保存 をクリック、立て続けに左上の ビルド もクリック
そうするとグルグルとお勉強が始まります。

Python でスキルのプログラムを作る

次はプログラムの作成になるので PyCharm に戻ります。

uranai プロジェクトを 前々回 作ったんでした。
さらに
前回 Bot 作ったんでした。

最終的にこんな構成になってましたね

pycharm_16.jpg

では、同じような感じで clova packeage を作って urls.py と views.py もその下に作りましょう。

image.png

こんな構成になっていれば大丈夫、で中身は下の通り、はっつけてください。

clova\urls.py
from django.conf.urls import url
from clova import views

urlpatterns = [
    url(r'^webhook$', views.webhook, name='webhook'),
]
clova\views.py
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt

import json

from cek import (Clova, SpeechBuilder, ResponseBuilder,)

from linebot import LineBotApi, WebhookHandler
from linebot.models import TextSendMessage

clova = Clova(application_id='Extension ID', default_language='ja')

line_bot_api = LineBotApi(
    'Bot アクセストークン(ロングターム)'
)


@csrf_exempt
def webhook(request):
    request.META['SIGNATURECEK'] = request.META['HTTP_SIGNATURECEK']

    body_dict = clova.route(body=request.body, header=request.META)

    response = HttpResponse(json.dumps(body_dict), content_type='application/json; charset=UTF-8', status=200)

    return response


@clova.handle.launch
def launch_request_handler(clova_request):
    return clova.response('サンプル占いスキルを起動します。')


@clova.handle.default
def default_handler(clova_request):
    return clova.response('もう一度お願いします')


@clova.handle.intent('FortuneIntent')
def fortune_intent_handler(clova_request):
    zodiac_signs = clova_request.slot_value('zodiac_signs')

    if zodiac_signs is not None:
        if zodiac_signs == '双子座':
            response = clova.response('双子座の運勢は１２位です')
            line_bot_api.push_message(clova_request.user_id, TextSendMessage('双子座の運勢は１２位です'))
        elif zodiac_signs == '牡牛座':
            response = clova.response('牡牛座の運勢は１１位です')
            line_bot_api.push_message(clova_request.user_id, TextSendMessage('牡牛座の運勢は１１位です'))
        elif zodiac_signs == '牡羊座':
            response = clova.response('牡羊座の運勢は１０位です')
            line_bot_api.push_message(clova_request.user_id, TextSendMessage('牡羊座の運勢は１０位です'))
        else:
            response = clova.response('その星座は対応してないです')
    else:
        response = clova.response('星座がわかりませんでした。もう一度お願いします')

    return response


if __name__ == '__main__':
    pass

そしたら書き換えるところあるので修正していきましょう。

clova の URL を追加

config\urls.py
from django.contrib import admin
# , include を追加
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('bot/', include(('bot.urls', 'bot'),)),
    # 追加
    path('clova/', include(('clova.urls', 'clova'), )),
]

Extension ID と アクセストークン を変更、前者は Clova Developer Center で設定したやつ、後者は LINE Developers の サンプル占いにあったやつ

clova\views.py

# ... 略

clova = Clova(application_id='Extension ID', default_language='ja')
speech_builder = SpeechBuilder(default_language='ja')
response_builder = ResponseBuilder(default_language='ja')

line_bot_api = LineBotApi(
    'アクセストークン(ロングターム)'
)

# ... 略

これ
line_dev_7.jpg
と、これ
line_dev_5.jpg

ExtensionサーバーのURL の設定

Clova Developer Center サンプル占い Clova スキル で サーバー設定 を開きここを更新しましょう。
URL は ngrok の URL/clova/webhook です

line_dev_8.jpg

config\urls.py と clova\urls.py に定義したやつですね。
入力したら画面下の 保存 をクリック

Django を起動

Django の起動はこんな感じにするんでした。

右上で uranai が選択されていればいい感じ。
ついでに一度 起動してみましょう。
uranai の右側にある再生(三角)をクリック

pycharm_14.jpg

いざ動作確認

  • Extension ID、アクセストークン は clova\views.py に設定しましたか？
  • ExtensionサーバーのURL は サンプル占い Clova スキル に設定しましたか？
  • ngrok は起動していますか？
  • Django は起動していますか？
  • Bot と別日に作った場合、ngrok は再起動していませんか？ngrok を再起動すると URL が変わるので、前回 の Webhook URL の設定 を見直す必要があります。

では、Clova に話しかけてみましょう。

私)クローバ
Clova)ポンッ
私)サンプル占いを起動して
Clova)サンプル占いスキルを起動します
私)双子座の運勢を教えて
Clova)双子座の運勢は１２位です

ってなればイケテル！

で、スマホを見ると

WIN_20180919_21_59_16_Pro.jpg

って感じで占いの結果を文字でもお知らせ。そういう寸法

お疲れさまでした

これで、Python Django の環境で LINE Bot Clova スキルを作成し、その２つを連携することに成功しました。

この記事はチュートリアルとして進めてきたのですが、実は若干の問題提起も含んでいます。

それは
owari.png
ここだよ！

clova-cek-sdk の中で META、ようは Header 情報から 'signaturecek' というキーで何らかの値を取り出してるんです。
signature って書いてあるから予想はつくけど。

なんですが Django には
image.png
Django ドキュメント
こんな仕様がございまして clova-cek-sdk が 'signaturecek' ナイからエラーな！って言ってきます。

いやはやまさしくそのキーはナイので正常な動きだし
Web フレームワークはすごい多くて全部の違いを完全に吸収するのは無理だよ。
っていうのは分かる。本当に分かる。
でも、Header 書き換えたくないので何とか SDK 側で 'signaturecek' or 'http_signaturecek' から
値をとるようにしてもらえないだろうか。という話し。

どこにこの相談をするかは検討中、いったんまとめたから現状の話しはこれでできるはず。

2018/9/26 追記

上記の課題について LINE developers community に質問を投稿しました。
回答をいただけたら内容を追記する予定です。

準備はこちら
LINE Bot + Clova スキル開発 Python Django チュートリアル(準備編)

Bot 開発はこちら
LINE Bot + Clova スキル開発 Python Django チュートリアル(LINE Bot 開発編)

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?