LINEBotCourse.pdf

Transcript

1. LINEBot X GAS
   

   View Slide

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

   View Slide

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

   View Slide

4. LINEBotとは？
   

   View Slide

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

   View Slide

6. GASとは？
   

   View Slide

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

   View Slide

8. 設計、仕組み
   

   View Slide

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

   View Slide

10. サンプル作成
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide