Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

LINE公式アカウントで作るチャットボット&スマフォアプリとしての可能性

2,030 views

Published on

「Cogbot 勉強会 Special ★ LINE から話せる楽しいチャットボットを作ろう!」
の登壇資料です!
https://cogbot.connpass.com/event/124711/

Published in: Internet
  • Be the first to comment

LINE公式アカウントで作るチャットボット&スマフォアプリとしての可能性

  1. 1. LINE公式アカウントで作るチャットボット&スマフォアプリとしての可能性! Hiroyuki Hiki, LINE
  2. 2. About Me 皆様のLINEの技術を利用したビ ジネスの成功がミッション Background ・AWS Serverless Solution Architect ・モバイル端末開発 Symbian OS Architect Certification ・JAWS-UG MVP 2013 ・AWS SAMURAI 2014 ・LINE API Expert 2018 Hiroyuki Hiki LINE株式会社 Developer Relationsチーム Solution Architect https://twitter.com/UniOce OMO/MaaS周りを注視しています!
  3. 3. AWSとAzureを同時活用、先端技術を駆使したボットで番宣 https://tech.nikkeibp.co.jp/it/atcl/column/14/346926/101901172/ 20万人がLINE交換、「安室透チャットボット」に“執行”される理由 https://www.sbbit.jp/article/cont1/35151
  4. 4. 1. LINEのプラットフォーム戦略 2. ビジネスにおけるメリット 3. LINE上で提供可能なサービス Agenda
  5. 5. LINEについて 国内MAU 7,900万人 85% DAU/MAU比率 +OVER トップ4MAU 1億6400万人 +OVER(JP)
  6. 6. LINEのプラットフォーム戦略
  7. 7. オープンプラットフォーム化 皆様と共にLINEを 「生活に溶け込み役立つ」インフラへ
  8. 8. & W e b スマホアプリ以外への進出
  9. 9. ビジネスメリット
  10. 10. インストールされない問題緩和
  11. 11. プッシュ通知
  12. 12. デザイン工数減
  13. 13. オススメ・拡散
  14. 14. 埋もれない
  15. 15. 無料で多くの機能利用可能 低料金でのスモールスタートも可能
  16. 16. • インストール障壁が低い • メッセージが届きやすい • 同じ機能でも開発工数が段違い • 特殊な開発言語の習得不要 • オススメ/拡散してもらいやすい • たくさん入れても埋もれない • 無料でも多機能&低料金から
  17. 17. LINE上で提供可能なサービス
  18. 18. • Messaging API&リッチメニュー • LINE Login • LINE Front-end Framework(LIFF)&ロー カルブラウザ表示 • LINE Beacon • LINE Pay • LINE Things • Clova
  19. 19. 【公式】BOT & THE NEW WORLD by LINE https://www.youtube.com/watch?v=C7ZuzJe24y4
  20. 20. Messaging API • ユーザーにメッセージ送信 • ユーザーからのメッセージに返信 • 多彩なフォーマットのメッセージ • 後述する様々な機能を組み込み新たなユーザー体験を提供
  21. 21. Messaging API
  22. 22. Messaging API • テキストやスタンプから位置・カルーセル・Flex Messageなどの多 彩なUIをJSONで記載することにより、表現可能。 • LINEのUI上で実装する為、画面全体をデザインする必要がないので 内容に集中できる。 • iOSとAndroidで互換が保たれている為、OSや機種特有の実装は不要 テキスト スタンプ 画像 動画 音声 位置 イメージ マップ ボタン 確認 カルーセル Flex Message 例・テキスト送信のJSON {"type": "text","text": "Hello, world"} 例・画像送信のJSON {"type": "image","originalContentUrl": "画像のURL","previewImageUrl": "画像のURL"} https://developers.line.biz/ja/docs/messaging-api/ クイックリプライ
  23. 23. Redesign プッシュメッセージ • ユーザーからのアクション以外でのメッセージ配信 • プランごとの無料メッセージ通数を超えると重量課金 • 友だち数が増加しただけでは利用料は発生しない(例・フリープランで 100万人のユーザーがいてもプッシュメッセージを使わない限り無 料)
  24. 24. 応答メッセージ • ユーザーからのメッセージに返信するケースは応答メッセージで • システムのWeb hooksでリプライトークンがWEBサーバー側に渡さ れるので、トークンを使ってユーザーに返信する。 • リプライトークンは有効時間があり、それを超えての返信はプッシュ メッセージを使う必要がある
  25. 25. リッチメニュー • ユーザーが簡単にボットとやりとりできるように、トーク画面に表示 • メニュー項目をカスタマイズして、さまざまなアクションに対応 • APIでチャットボットの現在の状況に合わせたメニューを表示する事 が可能(最大1000メニューまで)
  26. 26. LINE Bot Designer • LINE Bot Designerを使えば、プログラミングの知識がなくても簡 単かつ短時間でLINE Botのプロトタイプを作成可能。 • LINE Bot Designerは利用料無料 https://developers.line.biz/ja/services/bot-designer/
  27. 27. LINE Login • LINEのIDを利用したOAuth2.0によるログイン機能の提供 • チャットボットだけでなく、WEBやスマートフォン・iOSのアプリに 組み込み可能 • WEBやスマートフォン・iOSの初回ログイン時に関連するLINEのア カウントと友だちになるように促す事が可能 • PCのブラウザ上でのWEB画面のLINE Login時にQR codeを表示さ せ、スマフォ端末のLINEからQR codeを読み込ませ承認することに より、ユーザーIDとパスワードを入力せずにWEB画面でログインが 可能 • ログイン後のWEB画面から関連したチャットボットに向かって通知を 行う事も可能 https://developers.line.biz/ja/docs/line-login/overview/
  28. 28. LINE Login(WEB) ログイン後 WEB画面 ユーザーIDとパス ワードを入力 チャネルにリンクされた ボットが存在する場合 友だちを追加すると 自身のLINEに友だ ちが追加されログイ ンの後画面に遷移 チャネルにリンクされたボットが存在しない場合 キャンセルだと、ログイ ン後の画面に遷移 WEBでログイン用のQR codeが表示され、LINEの 友だち追加でQR codeを 読込む 友だちになった アカウントへシステム からメッセージ送信 読込み成功 QR code login選択 • WEBからのQR code Login • 初回のLINE Login時の友だ ち追加
  29. 29. LINE Front-end Framework(LIFF) • LINE Front-end Framework(LIFF)は、LINE内で動作するウェ ブアプリのプラットフォーム • LIFFに登録したウェブアプリ(LIFFアプリ)をLINE内で起動すると、 LINEのユーザーIDなどをLINEプラットフォームから取得可能 • ユーザー情報を活用した機能を提供したり、ユーザーの代わりにメッ セージを送信が可能
  30. 30. ローカルブラウザ表示 • LINEのチャットボット画面から、ローカルブラウザでWEBを表示す る事が可能 • LINE Loginの機能などを利用し、企業様の会員制サイトの機能と チャットボットを連携させる事が可能
  31. 31. LINE Beacon • 店舗に設置されたLINE Beacon端末に紐づけられたアカウントに対 して、Beacon端末の電波の範囲に入った時と出た時にメッセージ通 知が可能。 • メッセージはチャットボットで表現できる内容が可能 • オプション機能で友だちになってないアカウントでも、Beaconの範 囲内に入ったら、LINE上で友だちになりませんか?と促す事が可能
  32. 32. LINE Pay • 規約に同意するだけで簡単登録 • ウォレットレスで支払い口座番号いらず • 手数料無料で送金、割り勘 • API提供されているので、LINE上だけではなくWEB上にも組み込む事が 可能 • 決済時に、関連するLINEのアカウントと友だちになるように促す事が可能 https://pay.line.me/jp/developers/documentation/download/tech?locale=ja_JP
  33. 33. LINE Things
  34. 34. LINE Things • LINE アプリ上で Bluetooth LE 接続可能な LINE Things 対応デバ イスを登録 • LINE(LIFF) 上から JavaScript API を経由して LINE Things 対 応デバイスを操作 • LINE アプリがデバイスに対して自動で通信を行い、対象の Bot に情 報を送信(対応予定) LINE
  35. 35. Clova • ユーザーとの音声対話 • ユーザーアカウント連携 • チャットボット連携 • ディスプレイ表示(Clova Desk​のみ) • ホームIoT連携(Clova Home Extension)
  36. 36. リデザインから始めるチャットボット開発
  37. 37. リデザイン? • アカウントの種類の統一 • 0円スタート・従量課金の料金プラン • レポート機能の強化 • 最適なメッセージ配信のための追加機能 • プロダクトを横断したデータ活用
  38. 38. アカウントの種類の統一 LINEアカウントの種類には、 従来「LINE公式アカウント」「API型公式アカウン ト」「LINEビジネスコネクトアカウント」「LINEカスタ マーコネクトアカウント」「LINE@」の5種類あり、そ れぞれ料金体系や使える機能が異なったが、今回 のリデザインにより、アカウント間の機能の差はなくな る。
  39. 39. 0円スタート・従量課金の料金プラン これまで、LINE公式アカウントを開設・維持するた めには月額250万円の固定費が必要でしたが、新 しい料金プランは、一律0円からスタートが可能な 従量課金制となりました。 固定費を廃止したことでアカウントの維持コストも小 さくなるため、複数アカウントの開設と併用が容易に なります。
  40. 40. 1. AzureのポータルサイトでWeb App Botの登録を行う。 2. LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う 3. LINE Official Account Managerでチャットの項目を修正 4. LINE Developersサイトのチャネル基本設定でChannel Secretをメモし、アクセス トークンを再発行しメモする。 5. AzureのポータルサイトでWeb App Botで4でメモした内容でLINEのチャネルを登録し 登録後にできたweb hookの情報をメモする 6. LINE DevelopersサイトでWebhook送信を利用するにして5でメモしたWebhook URLを設定する 7. LINE official Account Managerで友だち追加を選択し、友だち追加で表示されて いるQRコードをLINEの友だち追加画面でQRコードを選択し読み込んでBotを友だちに する Chatbot 作成の流れ(Web App Bot版)
  41. 41. 1.AzureのポータルサイトでWeb App Botの登録 画面を貼り付ける ブラウザーで Azure Portal (https://portal.azure.com) を開き、 Azure サブスクリプションが紐づいている Microsoft アカウントでサインイン。 Azure Portal から左端ナビゲーションバーから [+リソースの作成] をクリック。 クリック
  42. 42. 1.AzureのポータルサイトでWeb App Botの登録 新規 ペインの検索欄に Web App Bot" と入力し、表示される **Web App Bot をクリックします。Web App Bot ペインで [作成] をクリックして作成に進む。 クリック
  43. 43. 項目 入力内容 ボット名 お好みの名前を入力 サブスクリプショ ン デフォルト リソースグループ お好みのグループを新規作成 or 既存のリソースグルー プを選択 場所 Japan East (東日本) ボットテンプレー ト クリックして、ボットテンプレート ペインを開き、作 る言語とSDK選んでください LUISアプリの場 所 言語解析のコグニティブサービスの場所 国内でサービス提供してないので国内以外を選択 App Service プ ラン そのまま利用する or 新規作成 1.AzureのポータルサイトでWeb App Botの登録 入力
  44. 44. • Web アプリボット ペイン の一番下にある [作成] をク リックするとアプリが作成。 • アプリの作成(デプロイ)が成功した旨のメッセージが表 示されたら、[リソースに移動] をクリックして作成した Web アプリボット を表示。 1.AzureのポータルサイトでWeb App Botの登録 項目 入力内容 Azure Storage Bot の状態 (ステート) やログを保存するストレージを 設定。新規作成 or 既存のストレージを選択 Application Insights デフォルトのON Application Insights の場所 Japan East (東日本) Microsoft アプリ ID とパスワード デフォルトのまま アプリIDとパスワードの自動作成 クリック 入力
  45. 45. 2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う https://www.linebiz.com/jp クリック
  46. 46. 2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う クリック
  47. 47. 2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う
  48. 48. 2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う クリック
  49. 49. 2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う 必要項目を入力し「確認する」ボタ ンをクリック 「完了する」をクリック 「LINE Official Account Managerへ」をクリック
  50. 50. 2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う クリック
  51. 51. 3.LINE Official Account Managerでチャットの項目を修正 画面右上部の「設定」をクリック クリック
  52. 52. 3.LINE Official Account Managerでチャットの項目を修正 画面左部の「応答設定」をクリックし、応答設定画面で応答モードをBotに変更 し応答メッセージをオフ ②BOTに ③オフに ①クリック
  53. 53. 3.LINE Official Account Managerでチャットの項目を修正 ①クリック ②クリック
  54. 54. 3.LINE Official Account Managerでチャットの項目を修正 ②クリック ①プロバイ ダー名を入力
  55. 55. 3.LINE Official Account Managerでチャットの項目を修正 ①クリック
  56. 56. 3.LINE Official Account Managerでチャットの項目を修正 ①クリック
  57. 57. 3.LINE Official Account Managerでチャットの項目を修正 Messaging API画面下部の「その他の設定はLINE Developerから行えます」の緑で強調されて いる部分をクリック ①クリック
  58. 58. LINE Developers画面で右上のログインアイコンをクリックしてログインし設定画面へ ①クリック 4.LINE Developersサイトのチャネル基本設定で Channel Secretをメモし、アクセストークンを再発行しメモする。
  59. 59. 4.LINE Developersサイトのチャネル基本設定で Channel Secretをメモし、アクセストークンを再発行しメモする。 ①作成したプロ バイダーをク リック ②作成したアカ ウントをクリッ ク
  60. 60. 4.LINE Developersサイトのチャネル基本設定で Channel Secretをメモし、アクセストークンを再発行しメモする。 メモ Channel Secretをメモ
  61. 61. 4.LINE Developersサイトのチャネル基本設定で Channel Secretをメモし、アクセストークンを再発行しメモする。 ①クリック アクセストークンを再発行してメモ ②メモ
  62. 62. 5.AzureのポータルサイトでWeb App Botで4でメモした内容で LINEのチャネルを登録し、登録後にできたweb hookの情報をメモする リソースグループを選択し、先ほど作成したWeb App Botのグループを選択する クリック クリック
  63. 63. 5.AzureのポータルサイトでWeb App Botで4でメモした内容で LINEのチャネルを登録し、登録後にできたweb hookの情報をメモする Web App Botを選択する クリック
  64. 64. 5.AzureのポータルサイトでWeb App Botで4でメモした内容で LINEのチャネルを登録し、登録後にできたweb hookの情報をメモする チャンネルを選択し、チャンネルに接続画面でLINEをクリック ①クリック ②クリック
  65. 65. 5.AzureのポータルサイトでWeb App Botで4でメモした内容で LINEのチャネルを登録し、登録後にできたweb hookの情報をメモする チャンネル シークレットとチャンネル アクセス トークンを登録し、webhook の URLをメモし保存ボタン を押下する ①入力 ②入力 ③メモ
  66. 66. 6. LINE Developersサイトのチャネル基本設定でWebhook送信を利用する にして、5でメモしたWebhook URLを設定する Webhook送信を利用するにセット 5でメモしたwebhook の URLを設定し、接続確認ボタンを押下して疎通確認を行う ④入力 ③クリック⑤疎通確認 ①クリック ②利用する
  67. 67. 7. LINE Official Account Managerで友だち追加を選択し、友だち追加で表示されている QRコードをLINEの友だち追加画面でQRコードを選択し読み込んでBOTを友だちにする LINEの友だち追加画面でQRコードをタップし LINE official Account Managerに表示されているQRコードを読み込むと友だち追加完了 ①QRコード ②タップ
  68. 68. bit.ly/linedevslack LINE developers community Q&A https://www.line-community.me/questions LINE Developers FAQ https://developers.line.biz/ja/faq/ Slack
  69. 69. 75

×