Python×LINE - Speaker Deck

Slide 1

Slide 1 text

Python  LINE  略してパイライ  エンジニアカフェ主催中高生・初心者向けコーディングイベントエンジニアカフェスタッフ　永石　好

Slide 2

Slide 2 text

今回のイベントは、2023年9月23日に行われた「Pythonのキホン」をベースにしたものとなっています。前回参加していなくても出来るように努めていますが、 Pythonの基本的な部分の解説などは行いませんのでご了承ください。また、LINEアカウント、Googleアカウントを取得したことを前提に進めて参ります。 ※Googleドライブの容量を100KB程度使う予定です。ドライブ容量にもご注意ください。お手元にそれぞれのアカウントが紐づいたスマートフォンをご用意ください。

Slide 3

Slide 3 text

今回目指すのは、Pythonを使ったプログラミングで LINEのチャットBotを作成するというものです。そのために、まずは準備を行います。必要となるのは以下の通り。・LINE Developersの登録(公式アカウントの取得 ) ・ngrok(エングロック)アカウント・ChatGPTアカウント・Google Coraboratory まずは、LINE Developersへ登録します。

Slide 4

Slide 4 text

LINEDevelopersで検索をかけ、MessagingAPI取得のページに移動し、「今すぐはじめよう」をクリックします。 (「ドキュメント」から移動できます )

Slide 5

Slide 5 text

画面に従って入力し、ログインしてください。

Slide 6

Slide 6 text

プロバイダーというのはいわゆる会社名のようなものになります。管理者権限が付与された大元となるものですので、慎重に名付けてください。プロバイダーは増やすことも削除もできます。プロバイダーごとにチャネルを作成します。

Slide 7

Slide 7 text

チャネルというのがトーク画面を指します。今回は「テストBOT」のように、分かりやすい名前を入力します。チャネルの説明も入力します。

Slide 8

Slide 8 text

LINEDevelopersのアカウント取得、チャネル設定が出来たら、次は Google Colaboratryの導入です。

Slide 9

Slide 9 text

Google Colaboratoryの導入についてまずは、Google Chromeブラウザを立ち上げます。自分のアカウントでログインし、「ドライブ」を開きます。「新規」をクリックすると、ダイアログが表示されいくつかのアプリが見えますが「その他」を選びます。

Slide 10

Slide 10 text

既に追加したことのある人はここの一覧の中に「 Colaboratory」が表示されますが、ここに表示されない人は「アプリを追加」をクリックします。

Slide 11

Slide 11 text

検索ボックスに「Coraboratory」と入力して検索し、出てきたらインストールします。

Slide 12

Slide 12 text

権限のリクエストを求めるダイアログが表示されたあと、電話番号の入力などを求められます。アカウントで紐づいているスマートフォンの番号を入力し、スマートフォンに届いたパスワードをダイアログ画面で入力します。

Slide 13

Slide 13 text

追加できていれば成功です！まだ開かなくて大丈夫です。

Slide 14

Slide 14 text

Colaboratoryとは何か Google社が、機械学習の教育・研究を目的として開発した、 Pythonコードを記述するためのノートブック。 Jupyterをベースにしているため、 Jupyter愛用者にはありがたい存在。 Googleドライブの仮想環境内で動くので、ダウンロードやインストールの手間がだいぶ省けるものとなっています。最大の特徴は無料で GPUが使えること。深層学習や機械学習などに非常に重宝します。最大使用容量制限もありますが、自分のスキル学習に用いる程度であれば特にストレスなく使えます。しかしながら、90分ルールと12時間ルールというものがあるため、学習用の域を出ない事に注意が必要です。つまりは、本運用には向いていません。・90分ルールとはコードの実行が始まった時からカウントする。 90分の間PCに触らずにいる、あるいはタブを開いたまま何もしないと、自動的に停止します。・12時間ルールとは同じくコードの実行が始まった時からカウントします。折りに触れてPCに触る、あるいはシャットダウンしない仕組みを導入するなどしても、 12時間経つと強制的に初期化されます。学習したデータもリセットされるので、その前に保存することをおすすめします。保存すれば、そこから実行することができますので、また 12時間学習させることができます。

Slide 15

Slide 15 text

記述方法で違う点を言えば、パッケージのインストールをする際には文頭に「!」の記述が必要な点です。これはColaboratory特有の表記です。あらやだ  スペースがこんなに余ってる～ 

Slide 16

Slide 16 text

次にngrok(エングロック)のアカウント取得について。 ngrokとは、ローカルPC上で稼働しているローカルサーバー (localhost:8080 のようなサーバー)を一時的に外部公開できるサービスです。開発中のWebサイトなど、外部から確認、共有などが簡単にできるようになります。何故それが必要になるのかは後述します。ひとまず登録をお願いします。また、のちほどChatGPTの仕組みも利用したいと思いますので、 OpenAIも登録します。どちらもGoogleアカウントで登録できますので、それで登録した方が早いかと思います。登録が済んでない場合、登録を行ってください。

Slide 17

Slide 17 text

アカウント取得が必要なものはこれで終わりですが、まだまだ下準備が必要になります。何のための準備なのかというと …LINEのチャットボットを作るためです。どうして必要になるのか、まずはこれを作るための仕組みについて、順に説明していきます。通常、ユーザー(LINEアプリ利用者)は公式LINEに友達登録(追加)したうえで、チャットボットとのやりとりを行いますね。ということは、まず友達登録が先になります。開発者も一旦は自分のアカウントで友達登録し、チャットボットが正常に動いているかを確かめます。ということでまずは第一段階。ユーザー(利用者)がチャネル(公式LINE)に友達登録を申請します。承認やIDの発行等は公式LINE側で行われます。あいさつ返しなどの設定の他は特にすることはありません。ユーザー QRコードから友達登録のリクエスト　承認公式LINE ここでの動きはユーザーから見た画面と同じですので、分かりにくい部分がないかもチェックしてみましょう。

Slide 18

Slide 18 text

ユーザー次に第二段階。友達登録した人からメッセージが送られてきたら、送られた言葉をオウム返しする仕組みについて。公式LINEには、予め設定したキーワードに応じて自動返信を設定できるなど、公式LINEを運営するうえで必要な機能はほとんど揃っています。【例】「住所を知りたい」→(送信)→「住所」でワードを検知 →「〇〇市〇〇-〇〇」と返信メッセージ (予め設定しておいたものを自動返信 ) 公式LINE お店の住所はどこ？住所検知〇〇市〇〇-〇〇です。ご来店をお待ちしております！メッセージ (リクエスト) 予め登録したワード

Slide 19

Slide 19 text

ユーザーメッセージ (受信したものと同一のもの ) 公式LINE 最終目標はChatGPTを利用したチャットボット作成ですが、まずは試しにオウム返しするプログラムを組んでみます。送信されたメッセージをそのままオウム返しする仕組みの場合、公式LINE側で受け取る際にWebhookというトリガーを用意しておき、一度プログラムに渡します。渡された内容をコピーし、なおかつそのまま返すというプログラムに従い、 Python側で生成、そして公式LINEを介してユーザーに表示する仕組みとなっています。このトリガーとなるWebhookを作成するために、ngrokを利用します。リクエストレスポンス

Slide 20

Slide 20 text

今回フレームワークとして Flask(フラスク、フラスコ)を使用します。 Flaskではローカルホストを (0.0.0.0)として設定すれば外部ネットワークからのアクセスを許可しますが、ネックになるのがエンドポイント (末端の端末機器などを示す )。 LINEアプリはネットワーク上にあるので、今回で言えばネットワーク上のアドレスが必要になります。そのアドレスを一時的にネット上に公開してくれるのが ngrokです。そのため、まず下準備として、 LINEMessagingAPIのチャネルシークレットキーとアクセストークン、 ngrokのAUTHトークンが必要になります。まずはこれを変数に代入し、格納しておきます。 Google Colaboratory(以下colab)を新しいタブで開いてください。

Slide 21

Slide 21 text

最初のコードボックスには以下の通りに記述してください。 # LINEのチャネルシークレット LINE_CHANNEL_SECRET = '＃' # LINEのチャネルアクセストークン LINE_ACCESS_TOKEN = '＃' # ngrokのAuthtoken NGROK_AUTHTOKEN = '＃' ＃の部分は後から差し替えます。シングルクォーテーションはダブルクォーテーションでも OKです。

Slide 22

Slide 22 text

次は新しいタブでLINEDevelopersを開きます。自分で作成したプロバイダーのチャネルを開き、設定画面からチャネルシークレットを取得します。 (チャネル設定画面の下のほうです ) コレコピーしておく

Slide 23

Slide 23 text

取得したチャネルシークレットは、さきほどの変数代入と差し替えておきます。 # LINEのチャネルシークレット LINE_CHANNEL_SECRET = '＃' ↑オレンジの＃の部分を消して、コピーしたチャネルシークレットをペーストします。次はチャネルアクセストークンについて。チャネル基本設定の横の、「 MessagingAPI設定」のタブを開きます。

Slide 24

Slide 24 text

下のほうに、チャネルアクセストークン (長期)と書かれたものがあると思いますので、こちらの「発行」を押したあと値をコピーします。

Slide 25

Slide 25 text

# LINEのチャネルアクセストークン LINE_ACCESS_TOKEN = '＃' 取得した値を＃と差し替えます。アイコンと名前次にngrokのAuthtokenについて。 ngrokのwebサイトを開き、ログインします。左側にあるメニューから、「Your Authtoken」を開き、値をコピーしてください。 # ngrokのAuthtoken NGROK_AUTHTOKEN = '＃' 同じように、こちらも＃をコピーした値と差し替えます。

Slide 26

Slide 26 text

次に、チャットボットを作成するためのパッケージをインストールします。しかし、このパッケージは、現在 (2023年9月時点)tensorflowとtyping-extensionsの最新バージョンでは依存関係が競合するバージョンとなっています。このままではエラーが発生し、正常に動きませんので、まず先にグレードダウンする必要があります。新しいコードボックスを「＋コード」から開き、次のように記述してください。 !pip uninstall tensorflow !pip install tensorflow==2.12.0 次に、もうひとつ新しいコードボックスを増やして次のように記述します。 !pip uninstall typing-extensions !pip install typing-extensions<4.6.0 記述したら、どちらも実行します。途中、アンインストールしてもいいか？と尋ねられますので、文字列横をクリックして「 Y」を入力し、エンターキーで決定して実行結果を待ちます。

Slide 27

Slide 27 text

どちらも正常にグレードダウン出来たのを確認できたら、次にラインでのチャットボットを作るためのライブラリ、line-bot-sdkをインストールします。また、今回はFlaskという、小規模のWebアプリ作成のフレームワークを使用しますので、そちらも併せてインストールします。次のように記述してください。 !pip install flask !pip install line-bot-sdk 次に、ngrokの初期化を行います。これにより外部からのアクセスを可能にします。新しいボックスではなく、そのままコードを記述してください。 !pip install pyngrok !ngrok authtoken $NGROK_AUTHTOKEN 記述できたら実行します。

Slide 28

Slide 28 text

次に、新しいコードボックスを追加して次のように記述してください。 import os from pyngrok import ngrok from pyngrok.conf import PyngrokConfig os.system('kill -9 $(pgrep ngrok)') webhook_url = ngrok.connect(addr='127.0.0.1:5000', pyngrok_config=PyngrokConfig(start_new_session=True)) print (webhook_url) 解説は次のページで！

Slide 29

Slide 29 text

これは、pythonでngrokを制御するためのコードです。 import os from pyngrok import ngrok from pyngrok.conf import PyngrokConfig os.system('kill -9 $(pgrep ngrok)') webhook_url = ngrok.connect(addr='127.0.0.1:5000', pyngrok_config=PyngrokConfig(start_new_session=True)) print (webhook_url) 標準ライブラリのosモジュールをインポートし、 ngrokの設定を管理するクラスを呼び出しています。そして、ここでngrokのプロセスを強制終了しています。そうすることで、ログが残っていた場合に誤作動することを防ぎます。それから新しくngrokでトンネリングを行い、外部からのアクセスを可能にします。生成した公開URLをここで表示させます。これが Webhookとなります。

Slide 30

Slide 30 text

コードを実行し、生成した公開 URLをコピーします。そのコピーした値は、 LINEDevelopersのWebhook設定に貼り付けます。コピーした値をここに貼り付ける ONにするのを忘れずに！また、応答メッセージはオフに設定します。 ※この下のほうにあります。

Slide 31

Slide 31 text

それではいよいよチャットボットの中身をプログラミングしていきます。新しいコードボックスを足して、以下のように記述してください。まずは必要となるモジュールのインポートです。

Slide 32

Slide 32 text

次に改行してスペースを空け、以下を記述します。 Flaskクラスのインスタンス化を行い、 Webアプリとして動きますよ～という宣言のようなもの。 __name__というのはPythonのプログラムを実行した時に自動的に作られる変数です。実行しているプログラムのモジュール名が自動的に格納されます。これを引数にすることで、 Flaskがルートやテンプレートの場所を見つけるのに役立ちます。下段のコードは、最初に格納したアクセストークンとチャネルシークレットを渡しています。

Slide 33

Slide 33 text

次はこちら。これは、Flaskアプリケーション内で特定の URLパスに関連付けられたビュー関数を定義しています。具体的には、”/test”パスに対するHTTP GETリクエストが送信された場合に test関数を呼び出し、格納している文字列 ”TEST OK”を返します、というような動きをします。例えばhttp://localhost:5000/test にアクセスすると、ブラウザに "TEST OK" というテキストが表示されます。ちなみに@から始まるのは「デコレータ」と呼び、 Pythonの特定の機能や振る舞いを、変更・拡張するために使用される概念です。デコレータは、他の関数やクラスに装飾を追加するために、関数やクラスに適用される特別な関数です。デコレータは、コードの再利用性、可読性、保守性を向上させるのに役立ちます。

Slide 34

Slide 34 text

ちょっと見辛いので、少しずつ拡大します。

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

LINEから、受信したメッセージを処理するためのプログラムです。ルートURL　”/”　に対してPOSTリクエストを受け付けます。リクエストのヘッダー情報から値を取得します。これは署名の検証に使われます。

Slide 37

Slide 37 text

インデントを忘れないように続けてください。

Slide 38

Slide 38 text

ユーザーが送信したメッセージをテキストとして取得します。この中には、MessagingAPIのイベントデータも含まれます。インデントを忘れないように続けてください。リクエスト本文をログに記録します。これはデバッグおよびトラブルシューティングのために使用されます。

Slide 39

Slide 39 text

ここが長いので省略して拡大してみます。これは署名の検証を行った結果、違った時にエラーを返すもの。問題ない時には”OK”と返します。

Slide 40

Slide 40 text

新しいデコレータを使う時はスペースなしで詰めます。解説は次のページで！

Slide 41

Slide 41 text

handlerオブジェクトに対し、 MessageEvent と TextMessage タイプのメッセージを処理するハンドラー関数を定義します。上記のデコレータで定義された条件を満たすイベントが発生した場合、この関数が呼び出されます。 event パラメータは、受信した LINEメッセージイベントに関する情報を含むオブジェクトです。受信したメッセージに対する応答を生成するコードです。この場合、TextSendMessage を使用して、同じテキストメッセージを返信するように設定されています。これにより、ユーザーが送信したテキストメッセージに対して、同じメッセージが返信されます。

Slide 42

Slide 42 text

アプリケーションが直接実行された場合に、 Flaskアプリケーションを実行します。この行は通常、スクリプトが直接実行された場合にのみ実行され、モジュールとして他のスクリプトからインポートされた場合には実行されません。また、自動的に終了することはなく、切断するまで終了しません。

Slide 43

Slide 43 text

それでは実行ボタンを押して、問題なく動くか確認してください。友達登録したアカウントとのトーク画面で、ためしに言葉を入力して送信してください。そのままオウム返しをしてきたら成功です！何度か試してみてくださいね。この時、colabのコンソール欄に送信された情報がありますので、それも同時に確認してください。 colabを閉じてしまうと当然ですがサーバーが停止してしまいます。また、実行中であっても最大使用時間は 12時間です。 12時間経過すると初期化されますので永久的に使用はできない事に注意してください。そのため、コード実行中の警告文には「本番導入へは別のサーバー利用を推奨します」というような旨の文章が表示されています。 colabは無料版でも有料版でも、学習用として使用するのが正しい使い方です。

Slide 44

Slide 44 text

オウム返しプログラムが正常に動いていることが確認できたら、いよいよ ChatGPTを導入し、自然言語で応答するようにプログラミングしていきます！まずはOpenAIのAPIキーを取得します。 OpenAIで検索をかけてページを表示します。ログインして進みます。

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

アカウント名メールアドレスここを選んで進んだ先のページでと書いてあるマークを押して発行しますがここで注意する点があります！ APIキーは有料です。 OpenAIのアカウントを登録した時、お試し用として18クレジット分付与されますが、有効期限は3ヶ月です。もし、先に登録していた人は無効になっていないか確認してください。また、有効期間内であっても、クレジットカードの支払い情報の紐づけがないと使用できないように制限がかかっています。

Slide 47

Slide 47 text

APIキー有料のおはなし未成年者は必ず保護者の許可を得てからクレジットカード情報の登録を行ってください。 OpenAI側で使いすぎを防ぐための上限額の設定もできます。現在はネット上で使えるプリペイド式のクレジットカードも登場していたりするので、こちらも保護者とよーーーーく相談したうえで導入を考えてみてください。このイベントのために契約する必要は全くありません。今回のイベントはこういう使い方もあるんだよ～程度です。

Slide 48

Slide 48 text

それでは、APIキーを取得したという体で進めていきます。以下のコードは、さきほどまで書いていたボックスの中に追加していきます。場所はこの間で。改行してスペースを空け、次のページで提示するコードを入力してください。 2、3行改行してください。

Slide 49

Slide 49 text

まずはOpenAIのインストールとインポート。こちらは別のコードボックスに記述するもよし、 Flaskをインストールしたボックスに追記するもよしです。別のコードボックスに記述する場合は、 Flaskのインストールよりも先になるよう配置してください。

Slide 50

Slide 50 text

次にグローバル変数の宣言を行っておきます。変数には大まかに言ってグローバル変数とローカル変数があります。 (その他にもクラス変数やインスタンス変数、組み込み変数なんていうのもありますがそれはまた別のお話 …) グローバル変数とローカル変数についての違いは、プログラム全体で扱える値であるか否かです。ローカル変数にはローカル変数でしか行えない動きがあり、グローバル変数はグローバル変数でしか行えない動きがあります。状況に応じて選びましょう。 ansはanswerの略称として。名前に縛りはありませんが (予約語以外)、分かりやすい名前を心がけましょう。

Slide 51

Slide 51 text

ChatGPTを呼び出して応答ができる定義を作ります。まずは取得したAPIキーを格納します。また、ユーザーが送信した内容はテキストパラメーターとして渡します。インデントに注意しながら、さきほど格納した値を open.api_keyへと渡してOpenAIへ接続します。

Slide 52

Slide 52 text

openai.Completion.create() メソッドを使用して、ChatGPTモデルに質問を送信します。含まれる情報は ①使用するエンジンの指定 ②渡す内容のパラメーター ③返ってくる内容を取得する時のトークン最大値 (文字数制限) トークンは1単語で1つ、というような感じに近いですが、日本語だと 1文字1トークンが近いです。日本語は単語の成り立ちだけではなく文章で量が変わっていく特性を持つため、このあたりの計算は難しいです。

Slide 53

Slide 53 text

ChatGPTからの応答が response オブジェクトに格納されます。応答のテキストは response.choices[0].text.strip() を使用して取得され、 ans グローバル変数に格納されます。 return関数でChatGPTからの応答を結果として返します。

Slide 54

Slide 54 text

これだけでは、オウム返しのプログラムと競合してしまうので、オウム返しのプログラムの一部にコードを追加したり、書き換えたりします。まず追加する場所。ここを改行して追加する

Slide 55

Slide 55 text

追加する一文はこちら。 ans = ask_gpt3(event.message.text) LINEから返すための関数呼び出しです。また、コンソールで内容を表示し、出力したことを分かりやすくしてみます。 print("---------------") print(ans) print(type(ans))

Slide 56

Slide 56 text

また、ここがLINEからの返答を返す動きとなっていますので、 TextSendMessage(～)はコメントアウトし、 ChatGPTからの返答のコードと書き換えます。拡大

Slide 57

Slide 57 text

修正前

Slide 58

Slide 58 text

修正後

Slide 59

Slide 59 text

さて、それではいよいよ実験してみます！ Webhookが間違っていないか LINEDevelopersで、応答に問題がないことを確認し、公式LINEに何か質問を呼びかけてみます。ここからは実機で実演します！

Slide 60

Slide 60 text

いかがでしたか？コードを見返してみれば、意外と短くスリムであることが分かります。また、JupyterやColaboratoryで記述した場合、特にランサーバーを立ち上げたままにしたい場合、何度も読み込む手間もなく、 Webhookは一度の設定でできます。 Colaboratoryはgoogle社の提供するアプリケーションのため、スプレッドシートをデータベースの代わりにして動かすことも可能です。データベースの導入に関しては知識が必要だったり、追加するソフトも多いなど障害も多く立ちはだかりますが、学習やテスト程度であれば googleの機能だけで完結します。こういった導入の簡単なものから学習を始め、徐々にスキルアップしていくことで、挫折することなく続けていけると思います。勉強を続けるうえで大事なことは、「難しい問題に立ち当たった時、誰かに相談する環境があること」です。エンジニアカフェでは、いつでもご相談に応じています！！専門的な分野に関しても、現役エンジニアによる「ハッカーサポータ―」への相談も可能です！まずは一度、エンジニアカフェにお越しください！また、Discordで「オンライン・エンジニアカフェ」も運営中！定休日(毎月最終月曜日と年末年始 )以外の10時から21時まで受付スタッフが常駐していますので、ぜひご参加ください！

Slide 61

Slide 61 text

オンライン・エンジニアカフェは現在ユーザー数が規定数を超えたため公開サーバーとして機能しています！ Discord上で検索もできますが、こちらからもアクセス可能です！ https://discord.gg/onrainenziniakahue-online-engineer-cafe-705718844400074784

Slide 62

Slide 62 text

本日はイベントへのご参加ありがとうございました！！それでは、お疲れ様でした！！