MS Tech Camp #3 での発表資料です。 https://mspjp.connpass.com/event/197110/

1. LINE API 紹介 ＆
LINE API Use Case（Azure編）
平林 拓将（ひらりん）
himarin269 / himanago
MS Tech Camp #3
2020/12/11

2. About me
• name： 平林 拓将（ひらりん）
• work： テクニカルトレーナー＆開発
• award/title:
- Microsoft MVP for Azure（2019.11～）
- LINE API Expert（2020.3～）
• like:
- C# / serverless / cross-platform
• book:
- LINE API 実践ガイド （第5章前半 Azure × CLOVA）
• social:
- Twitter：@himarin269
- GitHub：himanago
- Blog：https://himanago.hatenablog.com/

3. お話しすること（15分）
• LINE API の紹介
• LINE API 活用事例
• Azure での実現方法例

4. LINE API について
Messaging API
LINE ログイン
LIFF / LINE ミニアプリ
LINE Pay
LINE Bot の構築
LINE アカウントでのログイン機能
LINE 上で動作するWebアプリケーションの開発
LINE Pay による決済機能の実現

5. Messaging API
• 豊富なメッセージ形式
• テキストメッセージ
• スタンプメッセージ
• 画像メッセージ
• 動画メッセージ
• 音声メッセージ
• 位置情報メッセージ
• イメージマップメッセージ
• テンプレートメッセージ
• Flex Message
豊かな表現のメッセージが実現可能！
https://developers.line.biz/ja/docs/messaging-api/message-types/#flex-messages

6. LIFF（LINE Front-end Framework）
• LINE トーク画面内で使えるWebアプリを構築できる
• Botではカバーできないような入力インターフェース・
動きを提供するのに最適
• LINEとの連携機能も豊富
• ミニアプリも同様の技術で実現

7. LINE API を使うとこんなこともできる！
https://playroom.voiceapp-lab.com/

8. LINE API Use Case
• LINE 社よりサイトが公開されました
https://lineapiusecase.com/ja/top.html

9. LINE API Use Case
• LINE API の活用事例をデモアプリとともに掲載

10. No.1 お店の予約も、LINEから
デモアプリ
（ヘアサロン）
デモアプリ
（レストラン）
LIFFアプリで予約・LINEでリマインド
https://lineapiusecase.com/ja/usecase/reservation.html

11. https://lineapiusecase.com/ja/usecase/reservation.html

12. 私見ですが…
LINE API は Azure と相性抜群！
では、これを Azure で構築したら？

13. LINE
Messaging API
ユーザー
ユーザーからの
メッセージ
リマインド
LIFFアプリ（HTML/CSS/JavaScriptなど）のロード
店舗/スタッフ/予約可能日時の取得および設定
予約完了メッセージの送信
リマインド送信
Webhook
Change Feed
Azure Functions
（Timer trigger）
Azure Functions
（Http trigger）
Azure Functions
（Cosmos DB trigger）
Cosmos DB
ユーザー情報/店舗/スタッフ/
予約可能日時情報
Static Web Apps
Azure Functions
（Static Web Apps backend/
Http trigger）
LINE
スタッフ
スタッフからの
メッセージ
予約完了
メッセージ
LINE社
… … … …

14. LINE
Messaging API
ユーザー
ユーザーからの
メッセージ
Webhook
Azure Functions
（Http trigger）
Cosmos DB
ユーザー情報/店舗/スタッフ/
予約可能日時情報
LINE
スタッフ
スタッフからの
メッセージ
LINE社
… …
Azure Functions
• Azure のサーバーレスなコード
実行環境
• 単体でHTTPを受けられるため
手軽にWebhook エンドポイント
として利用可能
≪Webhookイベント≫

15. LINE
ユーザー
LIFFアプリ（HTML/CSS/JavaScriptなど）のロード
店舗/スタッフ/予約可能日時の取得および設定
Cosmos DB
ユーザー情報/店舗/スタッフ/
予約可能日時情報
Static Web Apps
Azure Functions
（Static Web Apps backend/
Http trigger）
Azure Static Web Apps（preview）
• 静的Webサイトホスティングサービス
• GitHub との統合による CI/CD により超効率的
な開発・運用を実現
• Azure Functions バックエンドを一体的に開発・
管理可能
Azure Cosmos DB
• NoSQL データベースサービス
• 無料枠により小規模なら無料で運用可能
≪予約画面（LIFF）≫

16. LINE
Messaging API
ユーザー
店舗/スタッフ/予約可能日時の取得および設定
予約完了メッセージの送信
Change Feed
Azure Functions
（Cosmos DB trigger）
Cosmos DB
ユーザー情報/店舗/スタッフ/
予約可能日時情報
Azure Functions
（Static Web Apps backend/
Http trigger）
LINE
スタッフ
予約完了
メッセージ
LINE社
…
変更フィード（Change Feed）
追加・更新のたびに Functions を
起動できる（順序保証あり）
≪予約完了メッセージ≫

17. LINE
Messaging API
ユーザー
リマインド
リマインド送信
Azure Functions
（Timer trigger）
LINE社
…
Cosmos DB
ユーザー情報/店舗/スタッフ/
予約可能日時情報
タイマートリガー
定期的に実行される Function
リトライポリシーなど設定可能
≪リマインド送信≫

18. LINE
Messaging API
ユーザー
ユーザーからの
メッセージ
リマインド
LIFFアプリ（HTML/CSS/JavaScriptなど）のロード
店舗/スタッフ/予約可能日時の取得および設定
予約完了メッセージの送信
リマインド送信
Webhook
Change Feed
Azure Functions
（Timer trigger）
Azure Functions
（Http trigger）
Azure Functions
（Cosmos DB trigger）
Cosmos DB
ユーザー情報/店舗/スタッフ/
予約可能日時情報
Static Web Apps
Azure Functions
（Static Web Apps backend/
Http trigger）
LINE
スタッフ
スタッフからの
メッセージ
予約完了
メッセージ
LINE社
… … … …

19. No.4 自治体でも使われています
https://lineapiusecase.com/ja/usecase/govtech.html
デモアプリ
LIFFで受け取りたい情報を設定すると該当メルマガの内容がLINEに配信

20. https://lineapiusecase.com/ja/usecase/govtech.html

21. これを Azure で構築したら？

22. LINE
Messaging API
ユーザー
LIFFアプリ（HTML/CSS/JavaScriptなど）のロード
アンケートの回答
Azure Functions
（Http trigger）
Cosmos DB
（アンケート回答）
Static Web Apps
Azure Functions
（Static Web Apps backend/
Http trigger）
LINE社
QnA Maker
（FAQ情報）
Bot Service
セグメント配信担当者
/メールマガジン配信担当者
Logic AppsSendGrid
（メール配信）
input binding

23. LINE
ユーザー
LIFFアプリ（HTML/CSS/JavaScriptなど）のロード
アンケートの回答
Cosmos DB
（アンケート回答）
Static Web Apps
Azure Functions
（Static Web Apps backend/
Http trigger）
≪アンケート回答（LIFF）≫

24. LINE
Messaging API
ユーザー
Azure Functions
（Http trigger）
Cosmos DB
（アンケート回答）
LINE社
セグメント配信担当者
/メールマガジン配信担当者
Logic AppsSendGrid
（メール配信）
input binding
≪メルマガ内容のLINEへの配信≫
Azure Logic Apps
• ノンコーディングでサービス間の連携を実現
• メール受信イベントで Function を呼び出す
入力バインディング
簡単な設定でDBのデータを
Function で利用できる

25. LINE
Messaging API
ユーザー
LINE社
QnA Maker
（FAQ情報）
Bot Service
≪FAQ 対応≫
Azure Bot Services
• チャットボット構築サービス
• 簡単な設定で LINE Messaging APIと接続可能
• ノンコーディングで対話フローを構築できる
「Composer」も
QnA Maker
• ナレッジベースをもとに質問に回答する
AIを作成
• FAQページ等から自動生成可能
• 精度を上げるためにカスタマイズできる
• Bot Serviceへの連携も簡単

26. LINE
Messaging API
ユーザー
LIFFアプリ（HTML/CSS/JavaScriptなど）のロード
アンケートの回答
Azure Functions
（Http trigger）
Cosmos DB
（アンケート回答）
Static Web Apps
Azure Functions
（Static Web Apps backend/
Http trigger）
LINE社
QnA Maker
（FAQ情報）
Bot Service
セグメント配信担当者
/メールマガジン配信担当者
Logic AppsSendGrid
（メール配信）
input binding

27. 参考動画
• LINE API Information
• https://youtu.be/VVVXml9miJk
• 本日紹介しきれなかった部分を含め、
LINE API の概要が学べます！
• あなたならどう使う？最新Azureレシピ for LINE Platform
• 動画：https://youtu.be/901joW1MCbU
• 資料：https://www2.slideshare.net/takumasahirabayashi/azureforlpfrevup2020/
• LINE 開発における Azure の使いドコロをまとめて紹介
※ フォローアップ記事を私のブログ(https://himanago.hatenablog.com/)に掲載予定です ※

28. まとめ
• LINE API でできることはたくさん
• Azure には LINE API と相性のよいサービスが
多い
• クラウドプラットフォームを活用しながら、
LINE API と組み合わせて便利で楽しいサービス
を創り出そう！