[REV UP] あなたならどう使う？最新Azureレシピ for LINE Platform

#lpf_revup #lpf_revup_t
あなたならどう使う？
最新 Azure レシピ for LINE Platform
平林拓将（ひらりん）
himarin269 / himanago
LPF REV UP 2020
2020/11/14

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/

はじめに
Microsoft Azure 使ってますか？
進化し続ける
サービス
LINE Platform
との相性もバッチリ

本セッションのゴール
• LINE Platform と組み合わせて使える Azure の
サービスとその利点をざっくり知る
• Azure で LINE Bot/LIFF/ミニアプリ開発を大幅
に進化させられることを理解する
• 各サービスの活用レシピ・実装例を通して、
「あなたならどう使う？」を考えてみる

本日お話しすること（30分）
• Azure × LINE Bot（Messaging API）
• メイン編 … 対話処理のバックエンド
• サブ編 … 上記と組み合わせて使うもの
• Azure × LIFF / ミニアプリ
• その他便利な Azure サービス
• [実装例] チャットシステムの構築
※2020/11/14現在の情報です

Azure × Messaging API
（メイン編）
あなたならどう使う？最新 Azure レシピ for LINE Platform

Messaging API の Webhook エンドポイント
• Bot のバックエンドは好きなサーバーが使える
Bot
backend
server
HTTPS で JSON のやりとりができれば OK
→ Azure で構築する場合の選択肢もたくさん

Azure での選択肢
• ノーコード/ローコードなら…
• Logic Apps
• Bot Framework Composer & Bot Service
• コードを書いて開発するなら…
• Web Apps / Bot Service
• Azure Functions

Azure
Logic Apps
• GUI でフローを作成し、
Azure内外のサービスを
連携させるローコードサービス
• 豊富なアクション・トリガー
• HTTP 送受信・JSON 操作が可能
★ ドキュメント
https://docs.microsoft.com/ja-jp/azure/logic-apps/

Logic Apps のメリット
• JSON を簡単に扱える
• Messaging API も簡単
サンプルのJSONを
貼り付けて定義
JSON内の個別データを
以降のアクションで使用できる

Logic Apps のメリット
• Azure 内外のサービスとの接続が簡単
• ドキュメントによればコネクタは数百種類
• サービス連携中心の Bot なら
コードを書くより断然おすすめ
★ Azure Logic Apps のコネクタ
https://docs.microsoft.com/ja-jp/azure/connectors/apis-list

どんなときに Logic Apps？
• 他サービスとの連携を手軽に行いたい場合
• Bot システムの一部への採用も便利
• 対話をせず1往復で済むような Bot の場合
• 複雑な対話フローの管理はちょっと大変

Bot Framework
Composer
• Bot Framework 製チャットボットを
ローコードで開発できる GUI ツール
• Azure Bot Service へデプロイ可能
• 標準で LINE Bot への接続にも対応
• 自然言語処理や FAQ 対応も統合可能

Composer の画面
GUI で対話フローを定義

Bot Framework Emulator による確認

Composer 注意点
• 開発環境構築は Git などを使用
• Azure 関連サービスを使った開発を知っておく
ことが望ましい？
• Azure にデプロイして使用する場合、LUIS や
Cosmos DB などが裏で作られている
• そのままデプロイすると有料プラン/USリージョン
になっている
★ 詳細はドキュメント参照（現在日本語未対応）
https://docs.microsoft.com/ja-jp/composer/

Azure Web Apps
• Web アプリケーション実行環境
• 開発したアプリをデプロイするだけで
すぐ利用できる
• Azure AD認証の統合が手軽
• Web API の公開も可能

Web Apps
• 利用可能なOS
• Windows, Linux
※Docker コンテナーも利用可能
• 利用可能な言語・フレームワーク
• Windows ：.NET, Java, Node.js, PHP, Python
• Linux：.NET, Java, Node.js, PHP, Python, Ruby
https://docs.microsoft.com/ja-jp/azure/app-service/

Azure Functions
• サーバーレスなコード実行環境
• さまざまな言語に対応＆カスタムハンド
ラー
• 豊富なトリガーと入出力バインディング

Azure Functions のメリット
• HTTPトリガーは単体ですぐにバックエンドにできる
• ローカル実行・デバッグが手軽
• ngrok を使えばローカル環境と直接 Messaging API をつな
いでデバッグできる
• 豊富なトリガー・入出力バインディングで実装が楽々
• 拡張機能「Durable Functions」で
ステートフルな処理も実現できる
https://docs.microsoft.com/ja-jp/azure/azure-functions/

ホスティングプランを選ぶ
★ ドキュメント：Azure Functions のスケールとホスティング
https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-scale
Consumption プラン
（従量課金）
App Service プラン Premium プラン
• 実行単位の課金
＆無料枠（100万回）
• 負荷に応じてスケール
• コールドスタートあり
• Web アプリ同様の動作
（常時接続可）
• 常に料金がかかる
• Consumption プランと
App Service プランの
いいとこどり
• 負荷に応じてスケール
• コールドスタートなし
• 常に料金がかかる

Durable Functions
関数チェーン
ファンアウト/ファンイン
非同期 HTTP API
監視
人による操作
複雑＆ステートフルなワークフローをシンプルに実装可能
"Durable"な（＝持続性のある/丈夫な）処理をシンプルな関数コードの組み合わせだけで作れる！

Durable Functions
• 関数を組み合わせてステートフルな処理を実現する
Azure Functions の拡張機能
スターター関数
オーケストレーター
関数
アクティビティ関数
• HTTPトリガーなど通常の関数
• オーケストレーターを起動する
• ステートフルな処理をとりまと
める関数オーケストレーション
を担当
• 裏で何度も再実行され、持続的
な処理としてふるまう
• オーケストレーターからの実行
指示で起動する関数
• アプリケーションの機能を担当
履歴などの実行情報をストレージに書き込んで勝手に管理してくれる！
https://docs.microsoft.com/ja-jp/azure/azure-functions/durable/durable-functions-overview?tabs=csharp

各関数で使用する代表的なメソッド
• 関数同士を連携させて"Durable"な処理を作る部品が揃っている！
関数メソッド名処理内容
スターター関数 StartNewAsync オーケストレーターを開始する。
TerminateAsync オーケストレーターを終了する。
GetStatusAsync オーケストレーターの状態を取得する。
RaiseEventAsync 任意の名前のイベントを発火する。
オーケストレーター関数 CallActivityAsync アクティビティを呼び出して実行する。パラメータで
好きな値を渡せる（タプルやコレクションも使える）。
CallActivityWithRetryAsync 失敗した場合にリトライするCallActivityAsync。
ContinueAsNew 今回実行した際の情報をパラメータとして渡して状態
を維持し、自身を再実行する。
WaitForExternalEvent 指定した名前のイベントが起きるまで待機する。
GetInput 呼び出し元から渡されたパラメータを取得する。
アクティビティ関数 GetInput 呼び出し元から渡されたパラメータを取得する。

Bot
LIFF
エンド
ポイント
HTTPトリガーオーケストレーター
LIFFのURLを返却イベント待機
WaitForExternalEvent
アクティビティ
インスタンスID（LINEユーザー
ID）とイベント名を指定
LIFFの入力を
前提とした処理
何らかの処理
＋
RaiseEventAsync
LINEユーザーIDを
インスタンスIDとして起動
LIFFの入力データ
イベント発火
Durable Functionsによる LIFF 連携
レシピ

Coming soon...
• Azure Functions 用 C# 向け Bot 開発フレーム
ワーク「DurableBotEngine」鋭意開発中
• Durable Functions の「エンティティ関数」で
対話コンテキストを管理
※ 単独で状態を保持できる一意なIDで特定可能な「持続エンティティ」を操作
現在 0.0.2-alpha が
NuGet で公開中です

Azure × Messaging API
（サブ編）

Azure Cosmos DB
• 惑星規模のアプリケーションにも
対応
• Free Tier 登場で小規模向けにも
使いやすく
• サーバーレスへの対応

Change Feed（変更フィード）
• データの変更があった場合にFunctionをトリガー
• 追加・変更に対応（順序保証あり）
★ Azure Cosmos DB の変更フィードの設計パターン
https://docs.microsoft.com/ja-jp/azure/cosmos-db/change-feed-design-patterns

リッチメニューの切り替え
• Cosmos DB × Functions
レシピ
Bot
メッセージ送信
データ登録
Change Feed
変更内容に合わせて
リッチメニューを切り替え
rich menu[変更]
ユーザーの状態に沿った
リッチメニュー管理を
独立した処理で実装可能

Azure SignalR
Service
• Webページなどのクライアント
をリアルタイム更新するための
サービス
• 出力バインディングで
Functions と簡単に統合できる
https://docs.microsoft.com/ja-jp/azure/azure-signalr/

データの更新をリアルタイムに反映
出典： Azure Functions で SignalR Service バインドを使用したリアルタイムのサーバーレスアプリケーション
https://azure.microsoft.com/ja-jp/blog/real-time-serverless-applications-with-the-signalr-service-bindings-in-azure-functions/

LINE Botからのメッセージをリアルタイム表示
• Cosmos DB × Functions × SignalR Service
レシピ
※上記構成を組むハンズオン資料を公開中
https://github.com/himanago/azure-serverless-event-driven-bot-hands-on
Bot
データ
登録
メッセージ
送信
Change
Feed
更新出力
バインディング
Bot からのメッセージを
リアルタイムに表示する
Webサイトを開発できる
Web画面

Azure Cognitive Services
• コグニティブ（認知）機能を実現する AI パーツ
• REST APIやクライアントSDKで簡単に利用可

LINE Bot におすすめ①
QnA Maker
ナレッジベースをもとに質問に回答するAIを作成
★ドキュメントはこちら
https://docs.microsoft.com/ja-jp/azure/cognitive-services/qnamaker/
• FAQページ等から自動生成可能
• 精度を上げるためにカスタマイズできる
• 回答の文章の雰囲気を選べる
• Bot Serviceへの連携も簡単

LINE Bot におすすめ②
LUIS（Language Understanding）
自然言語処理のための AI 機能を提供
★ドキュメントはこちら
https://docs.microsoft.com/ja-jp/azure/cognitive-services/luis/
GUI でサンプル発話と
その意図等を設定し
自然言語のテキストを
理解できるようにする

LINE Bot におすすめ③
★ Computer Vision のドキュメント
https://docs.microsoft.com/ja-jp/azure/cognitive-services/computer-vision/
★ サムネイル生成について
https://docs.microsoft.com/ja-jp/azure/cognitive-services/computer-vision/concept-generating-thumbnails
Computer Vision
画像分析のためのAI機能を提供
★ 画像メッセージ送信におすすめな「サムネイル生成」
"関心領域"を特定し、
重要な部分を残してトリミング
プレビューとオリジナルの
2種類の画像を指定する
画像メッセージに最適！

Azure Blob
Storage
• テキストやバイナリなどの
データを格納するサービス
• 「ストレージアカウント」
の中にコンテナーを作成し
て使用
https://docs.microsoft.com/ja-jp/azure/storage/blobs/

Bot が利用する静的リソースの置き場に最適
• アクセスポリシーを変更すれば公開 URL を得られる
• LINE Bot では画像・動画メッセージや Flex Message
に使用する画像などで URL を指定するので便利

SAS でセキュアに運用する
• SAS（Shared Access Signatures）で Azure Storage のへの
アクセス制限をかける
• リクエストの有効性を確認する「SAS トークン」をBlob単位・アクセ
ス単位で生成し、URL に付与して使う
• Blob コンテナーのパブリックアクセスレベルが「プライベート」に
なっていても SAS トークンがあればアクセス可
★ ブログ：Azure Blob Storage の SAS トークンを使って LINE Bot でセキュアに画像を送る
https://himanago.hatenablog.com/entry/2020/11/09/103926
https://docs.microsoft.com/ja-jp/azure/storage/common/storage-sas-overview

画像メッセージ用リソースの作成
• Logic App × Computer Vision × Blob Storage
レシピ
システムの一部とするのは
もちろん、開発ツールとして
用意しておくのも便利
画像送信
サムネイル作成
オリジナルとサムネイルを両方格納

Azure × LIFF/ミニアプリ

LIFF は Web アプリ
• サーバーサイドで動作する通常の Web アプリで
あれば Web Apps で開発可能
※ 静的サイトなら専用サービスがあるのでそちらを使う
• Azure AD B2C の認証を統合すると便利
★ Azure AD B2C のドキュメント
https://docs.microsoft.com/ja-jp/azure/active-directory-b2c/
＋

Azure AD B2C
• Facebook, Google やその他の
ID プロバイダーでのソーシャル
ログインをアプリケーションに
統合するための基盤
• LINE ログインの統合は「カスタム
ポリシー」を作成すれば実現可能
★ カスタムポリシーの概要
https://docs.microsoft.com/ja-jp/azure/active-directory-b2c/custom-policy-get-started

Azure
Static Web Apps
• 静的Webサイトホスティングサービス
• カスタムドメイン・SSL 対応
• GitHub との統合による CI/CD
• ステージング環境での PR レビュー
Preview
https://docs.microsoft.com/ja-jp/azure/static-web-apps/

Azure で静的サイトホスティングといえば…
•Blob Storage
• HTMLファイルを置くとWebページ
として使える機能がある
• 単純な用途なら十分なものの、
本格的なサイトの実運用には物足りない
※その他 Web App にも
Node.js アプリとしてホスト可
https://docs.microsoft.com/ja-jp/azure/storage/blobs/storage-blob-static-website

Azure Static Web Apps の特徴
リポジトリ
Static Web App
</>
Push/PR
連携（強制）
自動ビルド
デプロイ
GitHubとの統合による自動ビルド・デプロイ

Azure Static Web Apps の特徴
</>
ブラウザ
API クロスオリジン制約を
気にすることなく
アクセス可能
/front
/api
バックエンドAPI（Azure Functions）を
同一リポジトリで開発・デプロイ

その他便利な Azure サービス

Key Vault
• キー情報（チャネルシークレット
等）を安全に管理できる
• App Service（Web App や
Functions）からアプリケーション
設定と同様の方法で参照できる
https://docs.microsoft.com/ja-jp/azure/key-vault/general/

Azure DevOps
• Pipelines による CI/CD をはじめ、
全体のワークフローを管理できる
• Azure に限らず使える
• 5 人まで無料
Azure Boards
Azure Pipelines
Azure Repos
Azure Test Plans
Azure Artifacts

Application Insights
• Azure Monitor のひとつ
• Bot や LIFF など関連リソースのログをまとめる
ことができる
• アプリケーションマップで障害発生箇所が
ひと目でわかる
★ アプリケーションマップについて
https://docs.microsoft.com/ja-jp/azure/azure-monitor/app/app-map?tabs=net
★ Azure Monitor のドキュメント
https://docs.microsoft.com/ja-jp/azure/azure-monitor/

[実装例]
Azure × LINE Platformによる
チャットシステムの構築

Botの友だちとリアルタイムチャット
じろう
たろう
さぶろう
しろう
ごろう
はなこ
2
元気ですか？
送信
こんにちはー
こんにちは！
個別トーク
（リアルタイム
チャット）
友だちの一覧
新着通知も
リアルタイム

Bot
エンド
ポイント
個別トーク管理画面
（ブラウザ）
メッセージを保存 Change Feed
（Cosmos DB Trigger）
出力バインディン
グ
SignalR Service
HTTPトリガー
Cosmos DB
Functions リアルタイム更新
LINE とチャットできる“リアルタイムWeb”

Bot
エンド
ポイント
個別トーク管理画面
（ブラウザ）
Push Message
メッセージ保存
メッセージ送信
Web → LINE も同じしくみ

Azure
Communication Services
• Microsoft Teamsの裏側のしくみ
• チャット・ビデオ通話アプリを開発できる
• SMS送信機能
• Azureサービスとの統合＆SDK
Preview
https://docs.microsoft.com/ja-jp/azure/communication-services/

Demo
Azure Communication Services による
チャットアプリと LINE Bot の対話

参考
★ 実装の詳細（ブログ）
https://himanago.hatenablog.com/entry/2020/11/06/231038
★ 元となったサンプルアプリ
https://docs.microsoft.com/ja-jp/azure/communication-services/samples/chat-hero-sample

おわりに

まとめ
• PaaS を中心に Azure には LINE Platform との
相性の良いサービスがたくさんある
• それぞれの特徴と組み合わせ方を知り、作りたい
ものにあわせた最適なアーキテクチャを選ぶこと
が重要
• LINE Platform × Azure ＝ ∞！

[REV UP] あなたならどう使う？最新Azureレシピ for LINE Platform

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to [REV UP] あなたならどう使う？最新Azureレシピ for LINE Platform

Similar to [REV UP] あなたならどう使う？最新Azureレシピ for LINE Platform (20)

More from 拓将平林

More from 拓将平林 (10)

Recently uploaded

Recently uploaded (9)