2016/11/20 LINE BOT ハッカソンハンズオン資料ver1.2

1. LINE Messaging API
ハンズオン資料2016/11/20 ©TSUNAGARU, OPT Inc. All Rights Reserved.
門田 明彦

2. 本日はご参加ありがとうございます
・右記LINEアカウントにて
随時質問を受け付けており
ます。お気軽に投稿くださ
い。回答は適時行います。
・LINEアカウント・画像・
投稿内容がモニタに表示さ
れることがあります！

3. 内容
1.自己紹介
2.LINE@,公式アカウントの紹介
3.MessagingAPIでできること
4.Messaging API 設定手順
5.サンプルコード・デモ
6.なぜBOT開発するのか？

4. 内容
1.自己紹介
2.LINE@,公式アカウントの紹介
3.MessagingAPIでできること
4.Messaging API 設定手順
5.サンプルコード・デモ
6.なぜBOT開発するのか？

5. 自己紹介
門田明彦(もんでん あきひこ)
Opt Technologies 所属
TSUNAGARU のPM
https://www.facebook.com/akihiko.monden

6. 自己紹介
趣味：写真撮影,レザークラフト,
オートキャンプ
スキル：Rails, MySQL, JAVA,
アプリ開発
AWS勉強中

7. 自己紹介
佐藤 一（さとう はじめ）
Opt Technologies 所属
TSUNAGARU の開発保守担当

8. 自己紹介
趣味：音楽鑑賞(主に70年代ロック)、ゲーム
(RPG、シミュレーションなど)
スキル：Rails, MySQL, JAVA, C, VB, PHP
Web系、SAPなどの業務系

9. 自己紹介
木村
Opt Technologies 所属
TSUNAGARU の開発保守担当

10. 自己紹介
趣味：語学
スキル：Rails, Ruby, MySQL, JAVA, NodeJS
アプリ開発, VB.net, VB6

11. 内容
1.自己紹介
2.LINE@,公式アカウントの紹介
3.MessagingAPIでできること
4.Messaging API 設定手順
5.サンプルコード・デモ
6.なぜBOT開発するのか？

12. LINEの「アカウントって？」
●一般ユーザーでない、企業などが保有す
るアカウント(LINEユーザー)
●大きく分けてLINE@, 公式アカウント の２
種類に別れる

13. LINE@と公式アカウントの公式管理画面
・公式アカウント・LINE@

14. LINE@とは
●一言で言えば実店舗向け
●個人やグループでも持てる
●あなたも持てる

15. LINE@と公式アカウント
種類 API タイプ
公式アカウント ビジネスコネクト+Messaging API
LINE@ Messaging API
詳細
https://business.line.me/ja/services/bot

16. LINE@と公式アカウント
本日の開発
対象
種類 API タイプ
公式アカウント ビジネスコネクト+Messaging API
LINE@ Messaging API

17. 種類 API タイプ
公式アカウント ビジネスコネクト+Messaging API
LINE@ Messaging API
LINE@と公式アカウント
TSUNAGARU
の守備範囲

18. https://business.line.me/ja/services/bot

19. 内容
1.自己紹介
2.LINE@,公式アカウントの紹介
3.MessagingAPIでできること
4.Messaging API 設定手順
5.サンプルコード・デモ
6.なぜBOT開発するのか？

20. できること(機能)
●reply (返信)
●push (配信)
●友だち追加時・ブロック時応答
●グループ・ルーム参加退席通知受信

21. できること(機能)
●reply (返信)
●push (配信)
●友だち追加時・ブロック時応答
●グループ・ルーム参加退席通知受信
※ フリープランで利用できるのはreplyのみとなります
本日はreplyをメイ
ンに説明

22. できること(機能)
●reply (返信)
・ユーザーが何か送信した後、数十秒以内に返信するための機能
(API)
・無料LINE@プランから利用可能
→ユーザーアクションに対して何か返信する場合は通常こちらを
利用する

23. reply (返信)
MessagingAPIサ
ーバ
(Webhook URL)
LINEアプリ LINE
Platform
(LINE API)
こんにちは！

24. reply (返信)
MessagingAPIサ
ーバ
(Webhook URL)
LINEアプリ LINE
Platform
(LINE API)
replyToken=ABC
「こんにちは！」

25. reply (返信)
MessagingAPIサ
ーバ
(Webhook URL)
LINEアプリ LINE
Platform
(LINE API)
replyToken=ABC
「ようこそ！」

26. reply (返信)
MessagingAPIサ
ーバ
(Webhook URL)
LINEアプリ LINE
Platform
(LINE API)
こんにちは！
ようこそ！

27. push型
Messaging APIサーバ
(WEBサーバ)
LINEアプリ LINE Platform
(LINE API)
Messaging APIアプリ
(WEBアプリ)
userId=0123
「スタンプを
プレゼント！」
「スタンプを
プレゼント！」

28. 友達追加時・ブロック時応答
Messaging APIサーバ
(WEBサーバ)
LINEアプリ LINE Platform
(LINE API)
Messaging APIアプリ
(WEBアプリ)
友達追加！
userId=XXXXX
userIdの通知が来る

29. グループ・ルーム参加退席通知受信
Messaging APIサーバ
(WEBサーバ)
LINEアプリ LINE Platform
(LINE API)
Messaging APIアプリ
(WEBアプリ)
友人同士の
グループにアカ
ウントを招待
groupId=XXXXX
groupIdの通知が来る

30. reply まとめ
●ユーザーがメッセージを送信すると、
LINEからWebhook URLに通知が届く。LINE
にはすぐに 200を返す
●LINEからはreplyTokenが付与されている
●replyTokenと返信メッセージを一定時間以
内にLINEに送信する
●replyしか利用できないLINE@プランあり

31. できること(メッセージタイプ)
●テキスト（絵文字）
●スタンプ
●音声 動画
●画像 イメージマップ テンプレート
https://devdocs.line.me/ja/#send-message-object

32. 内容
1.自己紹介
2.LINE@,公式アカウントの紹介
3.MessagingAPIでできること
4.Messaging API 設定手順
5.サンプルコード・デモ
6.なぜBOT開発するのか？

33. 全体手順
LINE Business
Center
アカウント作成
LINE@
アカウ
ント作
成
LINE@
Manage
r初期設
定
LINE
Developer
初期設定

34. Business Center アカウント作成
▶ 「https://business.line.me」を開き右上の
ログインを選択
クリック

35. Business Center アカウント作成
▶ LINE登録メアド、パスワードでログイン
ログイン

36. Business Center アカウント作成
スマホLINEアプリで表示された番号を入力
・認証

37. Business Center アカウント作成
▶ BUSINESS CENTERに戻りアカウント作成に
同意
クリック

38. Business Center アカウント作成
▶ メールアドレスへ認証URLが送信されるの
で、メールを開いてURLをクリック
クリック

39. Business Center アカウント作成
▶ プロフィール情報などを入力する。(
確認, 完了)
クリック

40. Business Center アカウント作成
▶ BusinessCenterアカウント作成完了
アカウントリス
トへ

41. LINE@アカウント作成
▶ LINE@アカウント作成開始。
▶ アカウントリストで「Messaging API」をクリック。
クリック

42. LINE@アカウント作成
▶ 「Developer Trialを始める」をクリッ
ク。
クリック

43. LINE@アカウント作成
▶ 「Developer Trialを始める」をクリック。
※表示されない人もいます
クリック

44. LINE@アカウント作成
▶ 会社事業者選択が表示された場合
使用するアカウントを選択

45. LINE@アカウント作成
▶ 「アカウント名」などを入力して「確認する」を選択。
クリック
入力
選択
クリック

46. LINE@アカウント作成完了
▶ 「LINE@MAGAGERへ」をクリック。
クリック

47. Messaging API設定手順（LINE@MANAGER）
▶ 「APIを利用する」をクリック。
クリック

48. Messaging API設定手順（LINE@MANAGER）
▶ 「APIを利用する」をクリック。
クリック

49. Messaging API設定手順（LINE@MANAGER）
▶ Webhook送信、自動応答メッセージなどのon / off
Webhook「利用する」
自動応答「利用しない」
（グループトーク、友だち
追加時は任意）

50. Messaging API設定手順（LINE@MANAGER）
▶ 「LINE Developerを設定する」をクリック
クリック

51. Messaging API設定手順（LINE Developer）
▶ 「Basic information」での設定1
アカウントの
ユニークID
メッセージ送信な
どで使用する
(SHOWを押すと表
示される)

52. Messaging API設定手順（LINE Developer）
▶ 「Basic information」での設定2(重要)。
このLINE@への
友達追加用QR
Messaging APIアプリへのURL
ユーザーへメッセージを送信する
ためのトークンを取得する
「ISSUE」を押してトークン発行

53. 内容
1.自己紹介
2.LINE@,公式アカウントの紹介
3.MessagingAPIでできること
4.Messaging API 設定手順
5.サンプルコード・デモ
6.なぜBOT開発するのか？

54. 開発対象
MessagingAPIサ
ーバ
(Webhook URL)
LINEアプリ LINE
Platform
(LINE API)
replyToken=ABC
「こんにちは！」

55. サンプルコード・デモ
▶ LINEのサンプルコード
https://github.com/line/line-bot-sdk-
ruby
をベースにrails4.xでのサンプル実装を
紹介します

56. サンプルコード・デモ
▶ Reply型のサンプル1（Rubyで作成されているがRuby以外、
JAVA, PHPなどでも可能）
require 'line/bot' ## Line BOTライブラリ(LINE ruby sdk)
class Bot2Controller < ApplicationController
skip_before_filter :verify_authenticity_token
def client
@client ||= Line::Bot::Client.new { |config|
config.channel_secret = ”999999b47f869bfbc462e533ba993fad" ## LineDeveloperの
channel_secretを設定する
config.channel_token =
”xxxxxxxxxxEqpYAMYbRQ8rrvcv1GQDzdRG8145R1F8HzsUMLVf7mPskeymz5RQcYnTRW74YKUhxt+
paH2UNh38ZmZZSMDnnST+X8P39YutPV4MmpwOqgc8wHTm9RFtYtEkY+cPRdRzNT7Lbb8cOi3gdB0
4t89/1O/w1cDnyilFU=" ## LineDeveloperのchannel_tokenを設定する
}
end

57. サンプルコード・デモ
def index
body = request.raw_post
signature = request.env['HTTP_X_LINE_SIGNATURE']
unless client.validate_signature(body, signature) ## Requestのチェック
render text: "Bad Request"
return
end

58. サンプルコード・デモ
events = client.parse_events_from(body)
events.each { |event|
case event
when Line::Bot::Event::Message
case event.type
when Line::Bot::Event::MessageType::Text ## Textメッセージのタイプ
message = execute(event) ## 応答メッセージの設定
when Line::Bot::Event::MessageType::Image ## 画像メッセージのタイプ
message = [{type: 'text', text: "画像送信ありがとうございます！"}]
end
client.reply_message(event['replyToken'], message) ## 応答を送信
when Line::Bot::Event::Postback # 次へ など選択
client.reply_message(event['replyToken'], execute_for_postback_event(event))
end
}
render text: "OK"
end

59. サンプルコード・デモ
private
def execute(event)
text = event.message['text']
## 送信されたメッセージに従って応答メッセージを設定する
if text == "こんにちは" then
msg = "こんにちは！今日もよろしく！"
elsif text == "こんばんは" then
msg = "こんばんは！今夜もがんばりましょう！"
elsif text == "さようなら" then
msg = "さようなら！また明日！"
elsif text == "はじめまして" then
msg = "LINE BOTです！よろしく！"
else
msg = "メッセージありがとうございます！"
end
## 応答メッセージ用JSONの作成
[{
type: 'text',
text: msg
}]
end
end

60. サンプルコード・デモ（サンプル実行）
▶ 以下のQRをLINE QRリーダーで読み込んでください。
▶ 「設定」->「友だち追加」->「QRコード」
▶ https://qr-official.line.me/sid/L/cwq7082r.png
追加 同意する

61. LINE API ドキュメントの場所
▶ https://developers.line.me/
APIに関する
ドキュメントは
API referenceを
参照ください

62. 開発・テスト
▶ LINE PCアプリを利用すると簡単にテストでき
ます（テンプレートメッセージには未対応）
▶ テンプレートメッセージは最新バージョンの
LINEを利用してください
▶ サーバー側のssl証明書はオレオレは不可です
。Let’s encrypt等をご利用ください。

63. 内容
1.自己紹介
2.LINE@,公式アカウントの紹介
3.MessagingAPIでできること
4.Messaging API 設定手順
5.サンプルコード・デモ
6.なぜBOT開発するのか？

64. BOT開発とエンジニア
●エンジニアは一度はBOT開発すべき？
●エンジニア以外も？
●LINE, FB 等でBOTが盛り上がるか？
●開発者へのマネタイズは？

65. BOT開発のメリット
●アプリ開発スキルが無い人でもサーバー
スキルセットでアプリ（のようなもの）
を開発可能
●UI, UXをあまり気にせずサービス提供可能
≒ デザイン不要のアプリ開発

66. BOT開発の特徴
●審査制度有無・基準はアプリ・サービス
で異なる
●AIの橋渡し

67. LINE BOT AWARDSについて
●詳細は以下のサイトを参照
https://botawards.line.me/ja/

68. 以上ご清聴ありがとうございました。
それでは開発スタート！