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

門田 明彦

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

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

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

自己紹介門田明彦 ( もんでんあきひこ )Opt Technologies 所属TSUNAGARU の PM

https://www.facebook.com/akihiko.monden

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

自己紹介 佐藤 一（さとうはじめ）

Opt Technologies 所属TSUNAGARU の開発保守担当

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

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

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

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

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

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

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

LINE@と公式アカウント種類 API タイプ公式アカウント ビジネスコネクト +Messaging API

LINE@ Messaging API

詳細https://business.line.me/ja/services/bot

LINE@と公式アカウント

本日の開発対象

種類 API タイプ公式アカウント ビジネスコネクト +Messaging API

LINE@ Messaging API

種類 API タイプ公式アカウント ビジネスコネクト +Messaging API

LINE@ Messaging API

LINE@と公式アカウント

TSUNAGARU の守備範囲

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

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

できること (機能 )

●reply (返信 )●push (配信 )●友だち追加時・ブロック時応答●グループ・ルーム参加退席通知受信

できること (機能 )

●reply ( 返信 )●push (配信 )●友だち追加時・ブロック時応答●グループ・ルーム参加退席通知受信

※ フリープランで利用できるのは replyのみとなります

本日は replyをメインに説明

できること (機能 )

●reply ( 返信 )

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

reply (返信 )

MessagingAPIサーバ(Webhook

URL)

LINEアプリ LINE Platform

(LINE API)

こんにちは！

reply (返信 )

MessagingAPIサーバ(Webhook

URL)

LINEアプリ LINE Platform

(LINE API)

replyToken=ABC「こんにちは！」

reply (返信 )

MessagingAPIサーバ(Webhook

URL)

LINEアプリ LINE Platform

(LINE API)

replyToken=ABC「ようこそ！」

reply (返信 )

MessagingAPIサーバ(Webhook

URL)

LINEアプリ LINE Platform

(LINE API)こんにちは！ようこそ！

push型Messaging APIサーバ

(WEBサーバ )LINEアプリ LINE Platform

(LINE API)

Messaging APIアプリ(WEBアプリ )

userId=0123「スタンプをプレゼント！」「スタンプをプレゼント！」

友達追加時・ブロック時応答Messaging APIサーバ

(WEBサーバ )LINEアプリ LINE Platform

(LINE API)

Messaging APIアプリ(WEBアプリ )友達追加！

userId=XXXXX

userIdの通知が来る

グループ・ルーム参加退席通知受信Messaging APIサーバ

(WEBサーバ )LINEアプリ LINE Platform

(LINE API)

Messaging APIアプリ(WEBアプリ )

友人同士のグループにアカウントを招待 groupId=XXXXX

groupIdの通知が来る

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

できること (メッセージタイプ )

●テキスト（絵文字）●スタンプ● 音声 動画● 画像 イメージマップ テンプレート

https://devdocs.line.me/ja/#send-message-object

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

全体手順

LINE Business Centerアカウント作成

LINE@アカウント作成

LINE@Manager初期設定

LINE Developer初期設定

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

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

ログイン

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

Business Center アカウント作成▶BUSINESS CENTER に戻りアカウント作成に同意

クリック

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

クリック

Business Center アカウント作成▶プロフィール情報などを入力する。

( 確認 , 完了 )

クリック

Business Center アカウント作成▶BusinessCenter アカウント作成完了

アカウントリストへ

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

クリック

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

クリック

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

クリック

LINE@アカウント作成▶会社事業者選択が表示された場合

使用するアカウントを選択

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

クリック入力

選択 クリック

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

クリック

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

クリック

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

クリック

Messaging API設定手順（ LINE@MANAGER）▶Webhook 送信、自動応答メッセージなどの on / off

Webhook「利用する」

自動応答「利用しない」（グループトーク、友だち追加時は任意）

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

クリック

Messaging API設定手順（ LINE Developer）▶「 Basic information 」での設定 1

アカウントのユニーク ID

メッセージ送信などで使用する(SHOWを押すと表示される )

Messaging API設定手順（ LINE Developer）▶ 「 Basic information 」での設定 2( 重要 ) 。

この LINE@ への友達追加用 QRMessaging APIアプリへのURL

ユーザーへメッセージを送信するためのトークンを取得する「 ISSUE」を押してトークン発行

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

開発対象

MessagingAPIサーバ(Webhook

URL)

LINEアプリ LINE Platform

(LINE API)

replyToken=ABC「こんにちは！」

サンプルコード・デモ▶LINEのサンプルコード

https://github.com/line/line-bot-sdk-ruby

をベースに rails4.xでのサンプル実装を紹介します

サンプルコード・デモ▶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+cPRdRzNT7Lbb8cOi3gdB04t89/1O/w1cDnyilFU=" 　 ## LineDeveloperのchannel_tokenを設定する } end

サンプルコード・デモ 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

サンプルコード・デモ 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

サンプルコード・デモ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 }] endend

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

追加 同意する

LINE API ドキュメントの場所▶https://developers.line.me/

APIに関するドキュメントはAPI referenceを参照ください

開発・テスト▶LINE PCアプリを利用すると簡単にテストできます（テンプレートメッセージには未対応）▶テンプレートメッセージは最新バージョンの

LINEを利用してください▶サーバー側の ssl 証明書はオレオレは不可です。 Let’s encrypt 等をご利用ください。

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

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

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

能 ≒ デザイン不要のアプリ開発

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

LINE BOT AWARDSについて●詳細は以下のサイトを参照

https://botawards.line.me/ja/

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