Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LINE botづくりの基礎

LINE botづくりの基礎

CloudTech × LINE Developer Communityコラボ

KMiura

July 11, 2021
Tweet

More Decks by KMiura

Other Decks in Technology

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. 飲食店の公式LINE(焼き肉
    のワタミ)
    • クーポンを配信したり、アンケートをメッ
    セージのやり取りでやっている
    • スタンプカードと通常のメニューでリッチ
    メニューを切り替えられている
    • 今までみた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