Python＋LINEでオウム返し天気予報botを作る。前編

はじめに
プログラミングを始めたばかりの初学者に向けて解説してみました。
技術ブログを書くのは初なので生暖かい目で見てもらえると嬉しいです。

目的
Pythonの使い方に慣れる。
プログラミングにとりあえず触れてみる。
開発の楽しさを知る。

開発環境
Mac OS
Google Chrome
Visual Studio Code
Python
Heroku
LINE developers
Flask
Line-bot-sdk
GitHub

参考
簡単！Python & HerokuでLINEボットWebアプリを作ろう① LINE MessagingAPIの基本設定 - 初心者でもPythonを使ってみよう

PythonでLINEBotはじめました（冷やし中華的な）【後編】 - uepon日々の備忘録

GitHub登録

＜参考サイト＞
GitHubアカウント作成とリポジトリの作成手順 - Qiita
もう登録している方は飛ばしてください。

LINE developers 登録と設定

developers.line.biz
↑のリンクからLINE developers登録をします。

・普段使っている既存のLINEアカウントでログイン。

・プロバイダー作成→名前入力　(例)LINEアカウントテスト作成用

・チャンネル作成→名前入力　(例)Pythonoumugaeshi
・チャンネル説明→説明文入力　(例)チャットボットです

・メールアドレス→任意のメールアドレス入力

・利用規約同意するチェック

・作成したチャンネルを選択

・メッセージングAPI設定、に書いてある
チャンネルアクセストークンをコピーしてメモっておく(めっちゃ長いヤツ)

・基本設定、に書いてある
チャンネルの秘密をコピーしてメモっておく(英語と数字が並んでるヤツ)

・メッセージングAPI設定
→自動返信メッセージの”編集する”ボタンクリック
→別ページへ飛びます
→詳細設定
→応答メッセージを”オフ”
→Webhookを”オン”

Heroku 登録と設定

id.heroku.com
↑のリンクからHeroku登録をします。

・新規登録のために必要事項を記入、アカウント作成

・Visual Studio Codeの設定
Visual Studio Codeのインストール、Python環境構築をします。
VSCodeからフォルダ作成、Pythonファイル作成、ターミナル操作などをやって行きます。
＜参考サイト＞
daeudaeu.com

・アプリケーション用のフォルダ作成
Visual Studio Codeのターミナルからアプリケーションで使うフォルダを作成します。

cd desktop

デスクトップに移動。

mkdir ########

デスクトップ上に任意のアプリケーション名のフォルダを作成。
(########=任意のアプリケーション名)

cd ########

デスクトップ上から、アプリケーションフォルダに移動。

・Heroku CLIをインストール
Visual Studio Codeのターミナルから

brew tap heroku/brew && brew install heroku

インストールできます。

・Herokuにログイン
ターミナルから

heroku login

ログインします。
必要事項記入の際に設定したメールアドレスとパスワードを入力。
ログイン完了。

・Herokuにアプリケーションを登録
ターミナルから

heroku create #####

(任意のアプリケーション名=#####)

登録後、webとgitのアドレスが表示されるのでコピーしてメモっておく
(https〜〜.com/)
(https〜〜.git)

・クレジットカード登録
→webからherokuにログイン
→丸アイコンからアカウント設定をクリック
→Billingをクリック
→Add Credit Cardからクレジットカード情報入力

・Fixieアドオン
Visual Studio Codeのターミナルから

heroku addons:create fixie:tricycle --app #####

(herokuに登録したアプリケーション名=#####)
設定完了です。

FlaskとLine-bot-sdkをpipenvでインストール

先ほど作成したフォルダに移動した状態でインストールをします。

・VSCodeのターミナルから

pipenv install flask
pipenv install line-bot-sdk

実行すると、フォルダ内にPipfileとPipfile.lockファイルができます。

・構成の状態
任意のフォルダ名
├ Pipfile
└ Pipfile.lock

app.py作成

VSCodeのエクスプローラからフォルダ内に新しいファイルを作成します。

・名前の欄にapp.pyと入力。
任意のフォルダ名
├ app.py
├ Pipfile
└ Pipfile.lock

・コード
ネット上にサンプルコードがたくさんころがっているのですが、こちらより参照させて頂きました。
line-bot-sdk-python/app_with_handler.py at master · line/line-bot-sdk-python · GitHub
https://www.python-beginners.com/entry/20190221/1550754314#section2

import os
import sys
from argparse import ArgumentParser

from flask import Flask, request, abort
from linebot import (
    LineBotApi, WebhookHandler
)
from linebot.exceptions import (
    InvalidSignatureError
)
from linebot.models import (
    MessageEvent, TextMessage, TextSendMessage,
)

app = Flask(__name__)

# get channel_secret and channel_access_token from your environment variable
channel_secret = os.getenv('LINE_CHANNEL_SECRET', None)
channel_access_token = os.getenv('LINE_CHANNEL_ACCESS_TOKEN', None)
if channel_secret is None:
    print('Specify LINE_CHANNEL_SECRET as environment variable.')
    sys.exit(1)
if channel_access_token is None:
    print('Specify LINE_CHANNEL_ACCESS_TOKEN as environment variable.')
    sys.exit(1)

line_bot_api = LineBotApi(channel_access_token)
handler = WebhookHandler(channel_secret)


@app.route("/callback", methods=['POST'])
def callback():
    # get X-Line-Signature header value
    signature = request.headers['X-Line-Signature']

    # get request body as text
    body = request.get_data(as_text=True)
    app.logger.info("Request body: " + body)

    # handle webhook body
    try:
        handler.handle(body, signature)
    except InvalidSignatureError:
        abort(400)

    return 'OK'


@handler.add(MessageEvent, message=TextMessage)
def message_text(event):
    line_bot_api.reply_message(
        event.reply_token,
        TextSendMessage(text=event.message.text)
    )

if __name__ == "__main__":
    port = int(os.getenv("PORT", 5000))
    app.run(host="0.0.0.0", port=port)

Heroku環境変数の設定

LINE developers設定の際にメモっておいた
『チャンネルアクセストークン』と『チャンネルの秘密』を設定します。

・環境変数の設定
VSCodeのターミナルから

heroku config:set LINE_CHANNEL_SECRET="チャンネルの秘密" --app Herokuで設定したアプリ名
heroku config:set LINE_CHANNEL_ACCESS_TOKEN="チャンネルアクセストークン" --app Herokuで設定したアプリ名

これでherokuサーバーに、入力した環境変数が設定されます。
チャンネルアクセストークンは長いので入力ミスに注意しましょう。

・環境変数の確認

heroku config --app Herokuで設定したアプリ名

ちゃんと設定されているか確認してみましょう。

Procfile作成

VSCodeのエクスプローラからフォルダ内に新しいファイルを作成します。

・名前の欄にProcfileと入力。
任意のフォルダ名
├ app.py
├ Pipfile
├ Pipfile.lock
└ Procfile

・コード

web: python app.py

Procfileは、Heroku上にあるアプリを動かすのに使うコマンドを宣言する役割があります。
app.pyをHerokuが実行するように指示。

Heroku Deploy

デプロイをします。あと少しで完成です！

・コード
VSCodeのターミナルから

git init
git add .
git commit -am "make it better"
git push heroku master

LINE developersのWebhook設定

LINE developersのメッセージングAPIを開きます。

・『Webhookを使用する』をオンにします。

・Webhook URLの設定をします。

https://Herokuで設定したアプリ名.herokuapp.com/callback

更新します。
確認ボタンを押すとエラーが出ますが問題なくbotは動きます。(原因は分かりません)
※末尾にある『callback』の入力忘れに注意しましょう。

オウム返しする

LINE developersからQRコードを読み取り、友達申請をします。

・オウム返しができていれば完成です！！
(LINEをやっている時間帯へのツッコミはスルーして下さい)

確認事項

ログの確認

ターミナルから

heroku logs --app Herokuで設定したアプリ名

エラーメッセージの確認に使います。

Git メールアドレスとユーザーネームの確認

ターミナルから

git config --global user.email
git config --global user.name

実行すると登録してあるアドレスと名前が出てくるので、デプロイの際に要求があれば入力しましょう。

・設定がまだの場合
ターミナルから

git config --global user.email "メールアドレス"
git config --global user.name "ユーザーネーム"

アドレスと名前を登録しましょう。

まとめ

コピぺだけで簡単にLINE botは作れますね。
環境変数の設定でめっちゃ時間かかりましたが、普通にやれば数時間でできると思います。
お試し感覚でとにかくなんでもいいからアプリを作ってみることをおすすめします。
オウム返ししてくれた瞬間の嬉しさはなんとも言えません笑(半泣き)

次回

次回は天気予報の機能を追加実装してみたいと思います。