LINE Botで「しりとり」を作ろう

LINEBOTで「しりとり」をつくろう！

tonoyama 導入部分を説明 ohara プログラム説明 ami サポート主なメンバーの紹介 kamitani サポート

わからないことがあった場合コードがうまく動かない... この操作がよくわからない... など質問がある場合、挙手でサポートが駆けつけます！

本勉強会の背景あまりプログラムを組んだことがない方でもプログラムを作る楽しさを感じて頂きたい！

今回の目標今回は、しりとりゲームを作ります。作る過程にあるアプリ開発の流れを知り今後、応用していただければ幸いです。私たちも初心者ですが、一緒に頑張っていきましょう！

今回作成するしりとりゲームを説明

「アニメタイトル」でしりとり今回はアニメタイトル約8000件を使ったしりとりゲームを作成します最後に「ん」がついたり同じ言葉を使うと負けです

実際に皆さんの手元で体験してみましょう

しりとりの始め方 LINE BotのQRコードを読み取りプレイ「ゲームスタート」と入力すると始まります

しりとりの始め方このゲームの語彙は、アニメタイトルだけで作られていますそのため、アニメタイトルでのみしりとりができます

このしりとりゲームは何からできているの？

このしりとりゲームは LINE Botやその他のシステムで動いています

LINE Bot napkin.io deta.sh 画面表示サーバ (返事の候補を選択) データベース (使われた単語を保存) 返信
(例:ごりら) ユーザ使った単語の登録取り出し (例:りんご) しりとりBotの構成図 Python ユーザ入力 (例:りんご)

画面表示・LINE Bot 返事の候補を選択するサーバ・napkin.sh 使われた単語を保存するデータベース ※データベースとは、情報を整理して保存するもの・deta.sh しりとりBotは何からできてる？

LINE BOTって何？

LINE Botを作ったり触ったことがありますか？

会話AI「りんな」マイクロソフトが開発。まるで女子高生と話しているようなリアルな会話を楽しめる有名なLINE Botの例

ワクチン接種用 LINE Bot 自治体向けの業務支援ツールワクチン情報や予約までできる有名なLINE Botの例

つまり、 LINE Botとはなにか？ LINEから送られてくる特定のメッセージに対して返信を返すBot(プログラム)

返事の候補を選択するサーバについて

ブラウザ上でスクリプト(ソースコード)を実行してくれるWebサービス特定の処理を実行できるようになる。今回は、しりとりの勝ち負け判定に使います。現在、・Python 3.8 ・Node.js 14.x
に対応 napkin.ioについて

使われた単語を保存するデータベースについて

データベース、ストレージを無料で提供してくれるサービス。スクリプトの実行も可能。使われた単語を保存するためのデータベースとして使用。データベースを使うことで情報を整理して保存する deta.shについて

SQLについて

データベースを操作するための言語 SQLについてこの出欠表の場合、表に当たるのが「テーブル」列に当たるのが「カラム」と呼ばれます。

SELECT文でカラム名（列の名前）を指定。続けて FROM テーブル名 SELECT~FROM文

文字列の処理を端的に表現する方法として「正規表現」があります。例えば、*（アスタリスク）をつけると全てのカラム(列)を選択できます。正規表現

WHEREで特定の条件を満たす行を取り出せます。 LIKE で文字列を検索することができます。 WHERE~LIKE文

最後に今回使用するプログラミング言語の紹介

今回使用するプログラミング言語の紹介今回は、主にPythonという言語を使います。

「Python」とはプログラミング言語の1つ・C言語などと比べシンプルな文法・第3者が作った専門的なライブラリ(便利な関数) が豊富

「Python」のシンプルな文法 Python C言語

Pythonでは、コードのブロックをインデント(字下げ) で表しているタブ1つ or スペース4つで表す C言語での、{}と同じ意味を持つ Pythonではインデント(字下げ)に注意インデント(字下げ)が必要

C言語では、以下のどちらの書き方でもOK OK OK

Pythonのインデントが違うと(2) Pythonでは、インデントで適切なコードブロックを作らないとエラーになってしまうインデント(字下げ)がない場合正しい場合(字下げしている)

第3者が配布しているPython用ライブラリをインストールするためのツールライブラリとは、よく使われる関数やパッケージをまとめたもの「pip」について「pandas」というライブラリをインストールするコマンド例：

TensorFlow(テンサーフロー): Googleが開発している機械学習用ライブラリ。 Django(ジャンゴ): Webアプリを作るための枠組み(フレームワーク) 開発に必要なものは全部入りなので安心！こんなライブラリもインストールできる

ここまでで質問などはありませんか？挙手でおねがいします！

では早速、作成していきましょう！

これから、notion(サイト)を見ながら作業を行います

notionに書かれている手順通り進めていくので自力でどんどん進めていってOKです！スライドで注意点などを説明するので一緒に進めていくことをオススメします

ピクチャインピクチャを使いながらのー画面の方は作業が便利ですコピーを何度か使うのでメモ帳などを開いておくと便利です

わからないことがあった場合コードがうまく動かない... この操作がよくわからない... など質問がある場合、挙手でサポートが駆けつけます！再掲

全体の流れ LINE Developers deta napkin.io 設定やインストールなど。プログラムを書く登録 LINEとの連携実際に動かす

「LINE Developersへの登録」 LINE Botを使うためにはを行う必要があります

「LINE Developersへの登録」の流れサイトへログインプロバイダーを作成する https://developers.line.biz/ja/ プロバイダーとはサービスの提供者のこと

「LINE Developersへの登録」 1 LINE Developersのサイトにアクセスする URL → https://developers.line.biz/ja/

「LINE Developersへの登録」 2 右上の「ログイン」ボタンを押す

「LINE Developersへの登録」 3 LINEアカウントでログインを押す 4 メールアドレスまたはQRコードでログインする

「LINE Developersへの登録」初めての方は、入力しましょう

「LINE Developersへの登録」 5 日本語になっていない場合は、右下から日本語に変更する

「LINE Developersへの登録」 6 プロバイダー横の「作成」を押す

「プロバイダー作成をする」１プロバイダー名を入力する 7 今回は「しりとりbot」と入力しましょう ※自由な名前で問題ありません

「プロバイダー作成をする」 2 Messaging API を押す 7

「プロバイダー作成をする」 3 チャネル名とチャネル説明を入力する 7 「しりとりbot」と入力します。 ※自由なチャンネル名で問題ありません ※自由な説明で問題ありません「LINEのAPIを用いて
しりとりを行うbotです。」と入力します。

「プロバイダー作成をする」 4 大業種と小業種を選択する 7 しりとりを行う「ゲーム」を作成するため！

「プロバイダー作成をする」 5 メールアドレスを入力する 7 自分のメールアドレスの入力をオススメします

「プロバイダー作成をする」 6 利用規約に同意し、チェックを入れます 7

「プロバイダー作成をする」 7 「作成」を押す 7

「プロバイダー作成をする」 8 この画面までいけたら作成完了です 7 後でこのサイトを使うので開いたままにしましょう

使用した単語を保存する場所を行っていきましょう「Detaへの登録」

注意点 Detaへログイン完了後すぐに表示される画面を閉じないでください

「Detaへの登録」 1 Detaのサイトにアクセスする URL → https://deta.sh

「Detaへの登録」 2 ページ内の「Join Deta」ボタンを押す

「Detaへの登録」 3 ユーザー名とメールアドレス、パスワードを入力するユーザー名メールアドレスパスワード ※記号を含める必要あり ※このアドレスにメールが送信されるため、利用できるメールアドレスを入力

「Detaへの登録」 4 「Sign Up」を押すパスワードに記号を含めてくださいメールアドレスにメールが送信されました 3 からやり直してください

「Detaへの登録」 5 メールアドレスの認証を行う登録成功画面

「Detaへの登録」 6 Detaにログインするユーザー名パスワード

「Detaへの登録」 7 Project Keyをメモする閉じないここをメモする

LINEからのメッセージに返事をするを行っていきましょう「napkin.ioへの登録」

「napkin.ioへの登録」 1 napkin.ioのサイトにアクセスする URL → https://www.napkin.io/

「napkin.ioへの登録」 2 右上の「Sign Up」ボタンを押す

「napkin.ioへの登録」 3 任意のサービスでログインする

「napkin.ioへの登録」 4 任意のユーザー名を入力する記号は入力しないこと

「napkin.ioへの登録」 5 この画面までいけたら登録完了です

「Functionを作成」 1 「New Function」を押す

「Functionを作成」 2 Function(名前)を入力するしりとりを作成するので LINE-Shiritori-Bot Python 3.8を選択

「Functionを作成」 3 この画面まで行けたら作成完了

「設定やインストールを行う」 1 Modulesを選択する

「設定やインストールを行う」 2 pip installに「jaconv」と入力し、「Install」を押すカタカナに変換するのに使用します

「設定やインストールを行う」 3 pip installに「deta」と入力し、「Install」を押すデータベースを使うのに使用します

「設定やインストールを行う」 4 Otherを選択する

「設定やインストールを行う」 5 Environment Variablesにあるaddを押す

「設定やインストールを行う」 6 「key」に「token」と入力

「設定やインストールを行う」 LINE Developersからアクセストークンを取得する「Messaging API設定」を選択する一番下までスクロールするこれをコピーする

「設定やインストールを行う」 7 「token」にアクセストークンを入力する

「設定やインストールを行う」 9 「key」に「secret」を入力

「設定やインストールを行う」 LINE Developersからチャンネルシークレットを取得する下にスクロールする「チャンネル基本設定」を選択これをコピーする

「設定やインストールを行う」 10「secret」にチャンネルシークレットを入力する

「設定やインストールを行う」 12 「key」に「projectKey」を入力

「設定やインストールを行う」 DetaからProject Keyを取得するこれがProject Keyです

「設定やインストールを行う」 13「projectKey」にDETAのProject Key を入力する

「設定やインストールを行う」 14「Code」を選択する

「設定やインストールを行う」 15「Code」の枠内に下記のプログラムを貼り付ける notionからコピーできます

「設定やインストールを行う」 16 貼り付け完了後、「Run」を押す

「設定やインストールを行う」 17 これをコピーするボットのユーザーIDをコピーする

「設定やインストールを行う」 18 「other」を選択する

「設定やインストールを行う」 20 「key」に「userID」を入力

「設定やインストールを行う」 21 「userID」にボットのユーザーIDを入力貼り付け

「設定やインストールを行う」 22 少しスクロールして「Files」の場所を開いておくスクロールする

「設定やインストールを行う」 23 Googleドライブからファイルをダウンロードする URL → https://bit.ly/anime-db-dl ダウンロードを押す

ダウンロードしたanime.dbにはアニメのタイトル(作品名)が入っています一覧はnotionにあります

「設定やインストールを行う」 24 anime.dbファイルをアップロードするドラッグ＆ドロップダウンロードしたファイルは anime.dbという名前で保存されています

napkin.io 設定やインストールなど。全体の流れ LINE Developers deta プログラムを書く登録 LINEとの連携実際に動かす

ユーザが入力した単語に返信を行うプログラムを書いていきます

全て入力していると時間がかかるため notion(サイト)よりプログラムをコピーすることができます main部分は問題形式になっているので是非考えてみてください

プログラムを書く場所削除してよい

Pythonでは、コードのブロックをインデント(字下げ) で表しているタブ1つ or スペース4つで表す C言語での、{}と同じ意味を持つ Pythonではインデント(字下げ)に注意インデント(字下げ)が必要再掲

プログラムを書いていくその１ 1 使用するライブラリーをインストールするコード napkin.io LINE Developers deta サービスを利用するためや、プログラムを動かすための
ライブラリをインポートします

プログラムを書いていくその１ 2 アクセストークン、チャンネルシークレット、ボットのユーザーID、データベースの読み取りを行うコード設定やインストールで入力した値の読み取りとデータベースの接続

プログラムを書いていくその１ 3 捨て仮名と長音符を変換するコードイヌヤシャ例イヌヤシヤ捨て仮名が含まれている捨て仮名が変換される

プログラムを書いていくその１ 4 LINEからのデータかを確認するコード署名署名一致するかを確認しているリクエストから署名を求めている

プログラムを書いていくその１ 5 ランダムに1文字目を決めるコードアイウエオカ・・・レロワヲ「カ」一文字を選択する例

プログラムを書いていくその２ 6 次の単語を決めるコード anime.db アニメのタイトルが入ったデータベース一つ選ぶ「イヌヤシャ」例

プログラムを書いていくその２ 7 anime.dbに単語が存在するかを確認するコード anime.db SQLを使い判断

LINE Bot プログラムを書いていくその３ 8 LINEに返信するコード「イヌヤシャ」イヌヤシャ例

プログラムを書いていくその３ 9 虫食いになっているmain()をnotionからコピーして貼り付けましょうこの画像は上部のみ記載しています

プログラムを書いていくその３問題は①から⑦まであるので是非考えてみてください問題番号問題文ですヒントあります！

プログラムを書いていくその３ 9 問題① メッセージが「ゲームスタート」かを判断

ヒント LINEから送られてきたメッセージは　 message["text"]　に格納されている。＝＝を使用してメッセージが「ゲームスタート」を判定することができる。例問題①

答え問題①

プログラムを書いていくその３ 9 問題② すでに使われているかを判断

ヒント一度使用したワードはusedWordsに格納されている。例 in演算子を使用してリストに特定の要素が含まれているかを判定する。問題②

答え問題②

プログラムを書いていくその３ 9 問題③ 単語リストに存在しないかを判断

ヒント前にnotをつけることで条件の結果が Falseの時に実行するようにできる search関数を使用してアニメのリストに、送られてきたメッセージの単語があるか判断する問題③ 例

答え問題③

プログラムを書いていくその３ 9 問題④ 「ン」で終わっているかを判断

ヒント正規表現を使用しており「"ル$"」の意味は対象の最後の文字が「ル」であるか？ということである re.search関数を使用して対象の文字列の最後の文字を判断する問題④ 例

答え問題④

プログラムを書いていくその３ 9 問題⑤ しりとりになっていないかを判断

format関数を使うことで{}を文字に置き換えることができるヒント① 「"^{}"」の意味は対象の初めの文字が「{}」であるか？ということである。(正規表現) 問題⑤ 例

ヒント② しりとりの最後の文字の取り出し方問題⑤ 例

答え問題⑤

プログラムを書いていくその３ 9 問題⑥ 使用済みのワードリストに追加する

ヒント append関数を使用して配列に要素を追加することができる問題⑥ 例

答え問題⑥

プログラムを書いていくその３ 9 問題⑦ Botが負けた時のメッセージ

ヒント chosedWord["title"]にはBotが選択した作品名が格納されている chosedWord["ruby"]にはBotが選択した作品名（カタカナ）が格納されている問題⑦ 例

答え問題⑦

プログラムを書いていくその３ 10 最後の行にmain関数を実行するコードを書く main()をここに書く

LINEで利用するために napkin.ioとLINE Developers の連携を行います連携

コードが完成していることを確認 main()を忘れてませんか？虫食いは残っていませんか？

napkin.ioとLINEとの連携 1 「Deploy」を押す

napkin.ioとLINEとの連携 2 Deploy完了後、URLをコピーする

napkin.ioとLINEとの連携 3 LINE Developersで登録「Messaging API」を選択下にスクロール「更新」を押す「編集」を押す napkinのURLを貼り付ける
1 2

napkin.ioとLINEとの連携「有効なhttps URLを入力してください」と表示された場合は、最後に半角スペースが入っていないかを確認してください。半角スペースを削除すればOKです。ここの半角スペースを削除左の画像のように表示された場合は、名前を変更する必要があります。サポートを呼びましょう

napkin.ioとLINEとの連携 4 「Webhookの利用」を有効に変更開発者がLINEなどのプラットフォームを介して独自のスクリプトを実行するために使う URLのことを「Webhook URL」と言います。

napkin.ioとLINEとの連携 5 しりとりbotの設定を変更応答メッセージを「オフ」に切り替える応答メッセージ横の「編集」を押す 1 2

ユーザがLINE Botに単語を送信できるようにしましょう

LINEで友達登録して実際に動かす QRコードを読み込み、友達追加を行います

LINEで友達登録して実際に動かす「ゲームスタート」と入力して単語が返ってきたら成功です！

今回の開発はいかがでしたか？

しりとりBot以外にも応用できますしりとりBOTを作る過程にあるアプリ開発の流れを学んでいただけましたか？応用するとゴミ出しの日を教えてくれるBOT や家計簿を付けられるBOTなども作れます今後、より一層プログラムを楽しんで頂ければ幸いです。

ありがとうございました！もしよろしければTwitterのフォローもおねがいします @OECU_Point

本日はありがとうございました！解散していただいて構いません質問がある方やまだ作業したい方は残って頂けると対応します

LINE Botで「しりとり」を作ろう

LINE Botで「しりとり」を作ろう

More Decks by Tonoyama

Other Decks in Technology

Featured

Transcript