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

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

準備はこちら
**[LINE Bot + Clova スキル開発 Python Django チュートリアル(準備編)](https://qiita.com/TakeshiSaito/items/7d6874363427e5deb609)**

スキル開発はこちら
**[LINE Bot + Clova スキル開発 Python Django チュートリアル(Clova スキル 開発編)](https://qiita.com/TakeshiSaito/items/2fb23316a146a6aaf47e)**

続きです。

一つ前の記事で Django の起動確認まで行いました。
いよいよ、Bot の開発を行います。

## LINE Devlopers にアクセスして Bot の設定
LINE 様が各種開発を行うサイトを用意してくださっておりますので使っていきます。

### 初回アクセス
ログインしたりいくつか操作が必要です。
良い感じに入力 & 登録して下の画像と同じ画面までたどり着いてください。

### Bot の設定
[Line Developers](https://developers.line.me/ja/)

上のリンクにアクセスすると

![image.png](https://qiita-image-store.s3.amazonaws.com/0/276015/5dbcc9f1-3113-6d41-9cd5-d75185a05fee.png)

こんな感じになっております。

ズバリ Bot とは書かれていませんが、Messaging API が Bot を定義するところです。
クリックしてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/276015/25bdf382-d10b-d19a-e1a3-7fb5eba74e87.png)

今すぐはじめよう をクリック

![line_dev_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/288d7b9e-a94d-3740-ac20-e4999d597e37.jpeg)

最初は 新規プロバイダーの作成 しかないと思いますので、それを選んでプロバイダー名を入力 次のページ をクリック

![screencapture-developers-line-me-console-register-messaging-api-channel-2018-09-19-15_48_23.png](https://qiita-image-store.s3.amazonaws.com/0/276015/b9d9f963-5dde-2a6c-e06a-15711fdfe59f.png)

|項目|入力|
|---|---|
|アプリ名|サンプル占い|
|アプリ説明|よい感じに|
|プラン|Developer Trial|

こんな感じで入力してください。
本当のサービスを作る時はちゃんと入力しましょう。今回はお試しなのでホドホドに
入力内容を確認する をクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/276015/bc898506-f79d-b2d4-3ec1-922afc23b5ba.png)

内容がよければ 同意する をクリック

入力した内容が表示されるので下の方の利用規約を参照いただいて、よければ同意し 作成 をクリック
同意しないと先に進めません・・・

![image.png](https://qiita-image-store.s3.amazonaws.com/0/276015/d4929350-3f6f-ec3f-aa98-01c27736b804.png)

そうするとこんな画面になるはず

![line_dev_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/65dec27d-9d40-8fcc-ad44-c4c277296ff0.jpeg)

サンプル占い をクリック

するとこんな画面が表示されるので設定を変更します。

変更は、項目右の 編集 をクリック、値を変えたら項目右の 更新 をクリック
の２段階の操作をしないと反映されないので気を付けてください。

![screencapture-developers-line-me-console-channel-1608705087-basic-2018-09-19-16_09_36.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/c927409c-c087-1308-a964-b02ee305ec43.jpeg)


|項目|入力|
|---|---|
|利用可能な機能|REPLY_MESSAGE、PUSH_MESSAGE が表示されていれば大丈夫(プランで Developer Trial を選択していればそうなっているはず)|
|アクセストークン(ロングターム)|最初は未設定です。項目右の 再発行 をクリック、表示されたダイアログで OK をクリックで発行されます。|
|Webhook送信|利用する|
|Webhook URL|最初は未設定です。この後、設定するので今はこのまま。|
|Botのグループトーク参加|利用しない|
|自動応答メッセージ|利用しない|
|友だち追加時あいさつ|利用しない|

### Bot と友だちになる
では、LINEアプリへのQRコードの QR コードをスマホのアプリで読んでください。
普通に友だち追加する時と同じ手順です。

![WIN_20180919_16_32_02_Pro.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/796d3c31-2a43-737b-c93a-c53e3491be32.jpeg)
![WIN_20180919_16_34_36_Pro.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/725aab3c-4a64-3750-d955-bb9e45e757fd.jpeg)
![WIN_20180919_16_36_29_Pro.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/7518dbb2-4de6-de0c-82f9-f59a0adbb315.jpeg)

普通の友だちと同じ感じですね。

よすよす。これで、自分のアカウントと Bot が繋がりました。

LINE Developer の画面は、またすぐに使うのでそのままにしておきましょう。

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

uranai プロジェクトを [前回](https://qiita.com/TakeshiSaito/items/7d6874363427e5deb609) 作ったんでした。

![pycharm_13.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/66f27c69-66f1-9c2c-cced-52108526ea29.jpeg)

こんな状態でしたね。

### ngrok の起動
色々はじめる前に ngrok を起動しましょう。

![ngrok.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/120b608a-7d0d-84e8-e9a2-9324c6547734.jpeg)

こんな感じに [前回](https://qiita.com/TakeshiSaito/items/7d6874363427e5deb609) なってました。
これをコマンドプロンプトで動かします。
※コマンドプロンプトの起動は Win キー押して cmd が簡単

![ngrok_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/28ccfb74-5e3e-577d-c0d6-f3ffad3eb960.jpeg)

ngrok までのパスは通していないと思うので、その場合は ngrok.exe があるフォルダーまでコマンドプロンプト上で移動するか、exe までのフルパスを指定します。

つまり
ngrok exe のフォルダまで移動して `ngrok http 8000`
か
`~\Path\Path\ngrok http 8000`
みたいなコマンドになります。

8000 はポートの指定で Django が 8000 番ポートで口あけてるので、そこに ngrok にフォワードしてもらうための指定です。

![ngrok_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/7a0bf5da-e6db-cdde-1280-a0b0f92dade0.jpeg)

ngrok を動かすとこんな感じ。Forwarding にお外からアクセス可能な URL が書かれています。
隠しちゃいましたがランダムな英数があそこに入っていてみんなバラバラでしかも動かす度に変わります。
https://~.ngrok.io にアクセスすると localhost:8000 つまり今回で言う Django に Forwading って書いてありますね。
ちなみに、ngrok を停止するには右上に書いてある通り Ctrl+C します。

### プロジェクトに色々放り込む
少し話しが飛んでしまいますが以下の画像のような構成を作ってください。
Python ファイルは空のままでひとまず OK

![pycharm_16.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/ce3567ae-a255-59bb-f96a-3f1bf863695a.jpeg)

プロジェクト(uranai)右クリックから bot という名前で Python Package 作って
![pycharm_17.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/0b3a7280-29ef-caec-cd66-0498583e06f1.jpeg)

bot 右クリックから urls.py、views.py という名前で Python File 作って
![pycharm_18.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/951b7740-86b8-6882-dbda-19683865647d.jpeg)

で中身は下の通り、はっつけてください。

```python:bot\urls.py
from django.conf.urls import url
from bot import views

urlpatterns = [
    url(r'^webhook$', views.webhook, name='webhook'),
]

```

```python:bot\views.py
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt

from linebot import LineBotApi, WebhookHandler
from linebot.models import (MessageEvent, TextMessage, TextSendMessage,)

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

handler = WebhookHandler('Channel Secret')


@csrf_exempt
def webhook(request):
    signature = request.META['HTTP_X_LINE_SIGNATURE']

    body = request.body.decode('utf-8')

    handler.handle(body, signature)

    return HttpResponse(status=200)


@handler.add(MessageEvent, message=TextMessage)
def text_message_handler(event):
    if event.message.text in ['牡羊座', 'おひつじ座', ]:
        line_bot_api.reply_message(event.reply_token, TextSendMessage('１位です'))
    elif event.message.text in ['牡牛座', 'おうし座', ]:
        line_bot_api.reply_message(event.reply_token, TextSendMessage('２位です'))
    elif event.message.text in ['双子座', 'ふたご座', ]:
        line_bot_api.reply_message(event.reply_token, TextSendMessage('３位です'))
    else:
        line_bot_api.reply_message(event.reply_token, TextSendMessage('その星座は対応してないです'))


if __name__ == '__main__':
    pass
```

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

> さっき起動した ngrok に書かれている URL を書いてください。
> 
> ```python:config\settings.py
> ALLOWED_HOSTS = ['[ここに適宜].ngrok.io', ]
> ```
> 
> ![ngrok_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/eededda2-b987-726f-3a1b-00ef790bf741.jpeg)

> bot の URL を追加
> 
> ```python: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'),)),
> ]
> ```

> アクセストークンと Channel Secret を変更、LINE Developers の サンプル占いにあったやつ
> 
> ```python:bot\views.py
> 
> # ... 略
> 
> line_bot_api = LineBotApi(
>     'アクセストークン(ロングターム)'
> )
> 
> handler = WebhookHandler('Channel Secret')
> 
> # ... 略
> 
> ```
>
> これ
> ![line_dev_5.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/903f1403-f1e4-bebe-bab8-9766b7499e98.jpeg)
> と、これ
> ![line_dev_4.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/03d00c59-e4c9-0846-9bde-9aab17e74e19.jpeg)

### Webhook URL の設定
ここを更新しましょう。
URL は `ngrok の URL/bot/webhook` です

![line_dev_6.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/1c7a010d-eae5-f8d1-b3b3-074b9c208531.jpeg)

config\urls.py と bot\urls.py に定義したやつですね。

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

> 右上で uranai が選択されていればいい感じ。
> ついでに一度 起動してみましょう。
> uranai の右側にある再生(三角)をクリック
> 
> ![pycharm_14.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/d61c1d09-607e-c1bc-7b0e-0e7ecb547bf1.jpeg)

## いざ動作確認
- アクセストークン、Channel Secret は `views.py` に設定しましたか？
- Webhook URL は サンプル占い チャンネルに設定しましたか？
- ngrok は起動していますか？
- Django は起動していますか？

では、Bot と友だちになった画面を開いて話しかけてみましょう。
`views.py` のコードを見ていただくと分かるのですが対応している星座は３つだけ。
あとは、わからんって返事します。

![WIN_20180919_18_37_35_Pro.jpg](https://qiita-image-store.s3.amazonaws.com/0/276015/e12cd365-02bc-fa3b-c31e-855333be511d.jpeg)

こんな感じになれば成功！

**この記事ではここまでです。お疲れさまでした。**

準備はこちら
**[LINE Bot + Clova スキル開発 Python Django チュートリアル(準備編)](https://qiita.com/TakeshiSaito/items/7d6874363427e5deb609)**

スキル開発はこちら
**[LINE Bot + Clova スキル開発 Python Django チュートリアル(Clova スキル 開発編)](https://qiita.com/TakeshiSaito/items/2fb23316a146a6aaf47e)**