Tweet
Tweet

Slide 1

Slide 1 text

LINEBot X GAS

Slide 2

Slide 2 text

本講座の目的 • Webアプリ、通信の基礎を理解し、LINEBotを作成すること。 • 自学習を行い、機能追加を行えるようになること。

Slide 3

Slide 3 text

自己紹介 • 名前：佐々木陽貴 • 学年：学部4年 • やってること：Pythonでのサーバーサイド、Next.jsでのフロ ント • 実績？：カプコンオープンカンファレンスRE2022 セガプログラマーインターン マーベラスインターン 技育博2022,2023

Slide 4

Slide 4 text

LINEBotとは？

Slide 5

Slide 5 text

LINEBotとは？ • LINEアカウントの挙動をプログラムで制御したも の。 • 運送情報の確認、クーポン券の配布など企業にも使 われている。

Slide 6

Slide 6 text

GASとは？

Slide 7

Slide 7 text

GASとは？ • Google Apps Scriptの略 • 簡易的なスクリプトを組むことができる • gsと呼ばれる独自の言語ではあるが、ほぼJavaScriptと同じ • これを使ってLINEBotを作成していく

Slide 8

Slide 8 text

設計、仕組み

Slide 9

Slide 9 text

設計、仕組み Bot APIサーバー メッセージ メッセージイベント 送られてきたイベントを基に処理をプロ グラムで書く！！

Slide 10

Slide 10 text

サンプル作成

Slide 11

Slide 11 text

LINE Developer にアクセス • ログインして開発者情報を登録しましょう

Slide 12

Slide 12 text

プロバイダー作成 • 好きな名前で結構です。入力したら作成をクリックしてください。

Slide 13

Slide 13 text

チャネル作成 • 新規チャネル作成をクリックし、Messaging APIを選択。

Slide 14

Slide 14 text

チャネル作成 • 入力項目(必須項目のみ) • 会社・事業者の所在国・地域 日本 • チャネル名 Botのアカウント名(お好きなように) • チャネル説明 プロフィール欄です。必須なので何か埋めてください。 • 大業種 個人 • 小業種 個人(学生) • 規約に同意して作成

Slide 15

Slide 15 text

Messaging API設定 • こんな画面がでる。Messaging API設定に遷移。 • QRコードから友達追加が可能。

Slide 16

Slide 16 text

Messageing API • 以下のように設定しておく

Slide 17

Slide 17 text

Messaging API設定 • チャネルアクセストークン LINEBotを動かす際に必要。発行ボタンで発行。 GAS側で使うので控えておく。 ※絶対に外部に流失させないでください。

Slide 18

Slide 18 text

Messaging API設定 • GASのURL Botの情報を送信するところ。 (まだサーバー側を作成していないので)後に指定する。

Slide 19

Slide 19 text

GASでの作成 • Googleドライブに移動し、選択。 • ない場合はアプリを追加から追加する。

Slide 20

Slide 20 text

GASでの作成 • エディタが起動。 • サンプルコードをコピペしよう。(QRから) コード内のLINE_BOT_TOKENに先ほどのアクセストークンを 入れること！ https://github.com/maguro- alternative/line_callback_bot_for_gas

Slide 21

Slide 21 text

GASでの作成 • デプロイをクリック→新しいデプロイ。 • 以下の図のように設定。

Slide 22

Slide 22 text

GASでの設定 • 警告が出る。 • 左下の安全ではないページに移動。 • 認証画面に遷移するので、認証。 ※自分が作ったものなので怪しくな いです。

Slide 23

Slide 23 text

GASでの作成 • ウェブアプリURLが出るのでコピーする。 • LINE developerに戻り、WebHook設定にURLを貼り付ける！

Slide 24

Slide 24 text

完成！！ • テキストを送ると返信！！