LINE botづくりの基礎

CloudTech × LINE Developer Communityコラボ

Transcript

1. LINE botづくりの基礎
   Koki Miura(@k_miura_io)
   

   View Slide

2. • 今回話すこと
   • LINE botの概要
   • Messaging APIの使用例
   • 話さないこと
   • 具体的な実装、開発環境の話(今回のハンズオンで一例を学びましょう)
   はじめに
   

   View Slide

3. 自己紹介
   • 三浦 耕生（こうき）
   • 名古屋のゲーム会社
   のサーバーエンジニア
   @k_miura_io koki.miura05
   

   View Slide

4. LINE botについて
   • LINE上でメッセージ
   のやり取りを行う
   bot
   • 自前でサーバーを
   用意してAPIを使っ
   て開発
   

   View Slide

5. LINE bot = Chatbot
   LINE bot = LINE bot
   

   View Slide

6. LINE bot = LINE bot?
   • チャットボットでは実現できないことができる
   • ビーコン、Webアプリとの連携など
   • コミュニケーションベースのアプリを作れる
   

   View Slide

7. LINE botでできること(Beacon)
   • LINE Beaconを使って施設の混み具合
   を可視化するシステム
   • LIFFやリッチメニューも盛り込まれている
   https://prtimes.jp/main/html/rd/p/000000039.000023122.html?fbclid=IwAR0
   A_aG5lA2JKNscJl3zadn_Tt1oMRQ8M8a5rsvV8gfC7lpnGwS4iJXJ7Ic
   

   View Slide

8. 飲食店の公式ＬINE(焼き肉
   のワタミ)
   • クーポンを配信したり、アンケートをメッ
   セージのやり取りでやっている
   • スタンプカードと通常のメニューでリッチ
   メニューを切り替えられている
   • 今までみたLINE botの中で一番イケてる
   Bot
   

   View Slide

9. Messaging API
   • LINE botを動かすために使うAPI
   • 基本的に無料
   • 各言語に対応したSDKが提供されている
   いいLINE bot
   Messaging API
   を使いこなす
   

   View Slide

10. - Message(text, image, video,
    file, location, sticker)
    - Follow / Unfollow
    - Join / Leave(botのグループ
    参加、退出)
    - Member Joined / Member
    Left(ユーザーのグループ参加、
    退出)
    - Post Back
    - Beacon
    - Video Play Complete(動画
    視聴完了)
    - Unsend(送信取り消し)
    - Text
    - Sticker
    - Image
    - Video
    - Audio
    - Location
    - Image Map
    - Template
    - Flex
    Messaging APIのカテゴリ(受信・送信)
    Webhook
    Reply
    Send
    

    View Slide

11. Image Map
    • 画像の中に領域を指定してアクションを割り
    振ることができる
    • サイトへのアクセス、メッセージ送信など
    • 割り振りはJSONで行う
    

    View Slide

12. Template Message
    • JSON形式のテンプレートで簡単にUI入りの
    メッセージを作成できる
    • 簡単にリッチなメッセージを入れたいときに
    便利
    • スマホ版のLINEアプリにしか対応していない
    

    View Slide

13. Flex Message
    • CSS Flexible Box Layoutを利用したメッセージ
    • Template Messageよりも自由度の高いUIを
    作れる
    • PC版のLINEでも見れる
    • レイアウトには多少のHTMLの知識が必要
    

    View Slide

14. - Create / Delete
    - Set Image
    - Set Default
    - Delete Default
    - Link Rich Menu to User
    - Unlink Rich Menu
    - Download Image
    - Get List
    - Get Rich Menu
    - Get Profile
    - Group Summary
    - Get Group Member Profile
    - Group Member Count
    Messaging APIのカテゴリ(UI・UX)
    Rich Menu
    User
    Group
    

    View Slide

15. リッチメニュー
    • トーク画面の下に表示させることのできるメニュー画面
    • LINE公式アカウントマネジャーでもMessaging APIで
    も設定できる
    • Messaging APIなら細かい設定ができるがAPIで行う
    ので、知識が必要
    

    View Slide

16. Messaging APIを使うと
    • 表示、非表示の操作はAPIで行う
    • チャットのやり取りの中でユーザごとにメニューを切り替える機能を実
    装することもできる
    

    View Slide

17. まとめ
    • Messaging APIを使いこなすことでLINE botがただのチャットボットに
    ならない
    • 基礎的なUIの知識だけでオリジナリティのあるLINE botができる
    • LIFFを入れるとbotだけでできないこともできて◎
    LINE bot = LINE bot
    

    View Slide

18. END
    

    View Slide