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.

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

469 views

Published on

LPF REV UP 2020 での発表資料です。
https://linedevelopercommunity.connpass.com/event/188903/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. #lpf_revup #lpf_revup_t あなたならどう使う? 最新 Azure レシピ for LINE Platform 平林 拓将(ひらりん) himarin269 / himanago LPF REV UP 2020 2020/11/14
  2. 2. #lpf_revup #lpf_revup_t 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. 3. #lpf_revup #lpf_revup_t はじめに Microsoft Azure 使ってますか? 進化し続ける サービス LINE Platform との相性もバッチリ
  4. 4. #lpf_revup #lpf_revup_t 本セッションのゴール • LINE Platform と組み合わせて使える Azure の サービスとその利点をざっくり知る • Azure で LINE Bot/LIFF/ミニアプリ開発を大幅 に進化させられることを理解する • 各サービスの活用レシピ・実装例を通して、 「あなたならどう使う?」を考えてみる
  5. 5. #lpf_revup #lpf_revup_t 本日お話しすること(30分) • Azure × LINE Bot(Messaging API) • メイン編 … 対話処理のバックエンド • サブ編 … 上記と組み合わせて使うもの • Azure × LIFF / ミニアプリ • その他便利な Azure サービス • [実装例] チャットシステムの構築 ※2020/11/14現在の情報です
  6. 6. #lpf_revup #lpf_revup_t Azure × Messaging API (メイン編) あなたならどう使う? 最新 Azure レシピ for LINE Platform
  7. 7. #lpf_revup #lpf_revup_t Messaging API の Webhook エンドポイント • Bot のバックエンドは好きなサーバーが使える Bot backend server HTTPS で JSON のやりとりができれば OK → Azure で構築する場合の選択肢もたくさん
  8. 8. #lpf_revup #lpf_revup_t Azure での選択肢 • ノーコード/ローコードなら… • Logic Apps • Bot Framework Composer & Bot Service • コードを書いて開発するなら… • Web Apps / Bot Service • Azure Functions
  9. 9. #lpf_revup #lpf_revup_t Azure Logic Apps • GUI でフローを作成し、 Azure内外のサービスを 連携させるローコードサービス • 豊富なアクション・トリガー • HTTP 送受信・JSON 操作が可能 ★ ドキュメント https://docs.microsoft.com/ja-jp/azure/logic-apps/
  10. 10. #lpf_revup #lpf_revup_t Logic Apps のメリット • JSON を簡単に扱える • Messaging API も簡単 サンプルのJSONを 貼り付けて定義 JSON内の個別データを 以降のアクションで使用できる
  11. 11. #lpf_revup #lpf_revup_t Logic Apps のメリット • Azure 内外のサービスとの接続が簡単 • ドキュメントによればコネクタは数百種類 • サービス連携中心の Bot なら コードを書くより断然おすすめ ★ Azure Logic Apps のコネクタ https://docs.microsoft.com/ja-jp/azure/connectors/apis-list
  12. 12. #lpf_revup #lpf_revup_t どんなときに Logic Apps? • 他サービスとの連携を手軽に行いたい場合 • Bot システムの一部への採用も便利 • 対話をせず1往復で済むような Bot の場合 • 複雑な対話フローの管理はちょっと大変
  13. 13. #lpf_revup #lpf_revup_t Bot Framework Composer • Bot Framework 製チャットボットを ローコードで開発できる GUI ツール • Azure Bot Service へデプロイ可能 • 標準で LINE Bot への接続にも対応 • 自然言語処理や FAQ 対応も統合可能
  14. 14. #lpf_revup #lpf_revup_t Composer の画面 GUI で対話フローを定義
  15. 15. #lpf_revup #lpf_revup_t Bot Framework Emulator による確認
  16. 16. #lpf_revup #lpf_revup_t Composer 注意点 • 開発環境構築は Git などを使用 • Azure 関連サービスを使った開発を知っておく ことが望ましい? • Azure にデプロイして使用する場合、LUIS や Cosmos DB などが裏で作られている • そのままデプロイすると有料プラン/USリージョン になっている ★ 詳細はドキュメント参照(現在日本語未対応) https://docs.microsoft.com/ja-jp/composer/
  17. 17. #lpf_revup #lpf_revup_t Azure Web Apps • Web アプリケーション実行環境 • 開発したアプリをデプロイするだけで すぐ利用できる • Azure AD認証の統合が手軽 • Web API の公開も可能
  18. 18. #lpf_revup #lpf_revup_t 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/
  19. 19. #lpf_revup #lpf_revup_t Azure Functions • サーバーレスなコード実行環境 • さまざまな言語に対応 & カスタムハンド ラー • 豊富なトリガーと入出力バインディング
  20. 20. #lpf_revup #lpf_revup_t Azure Functions のメリット • HTTPトリガーは単体ですぐにバックエンドにできる • ローカル実行・デバッグが手軽 • ngrok を使えばローカル環境と直接 Messaging API をつな いでデバッグできる • 豊富なトリガー・入出力バインディングで実装が楽々 • 拡張機能「Durable Functions」で ステートフルな処理も実現できる ★ ドキュメント https://docs.microsoft.com/ja-jp/azure/azure-functions/
  21. 21. #lpf_revup #lpf_revup_t ホスティングプランを選ぶ ★ ドキュメント:Azure Functions のスケールとホスティング https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-scale Consumption プラン (従量課金) App Service プラン Premium プラン • 実行単位の課金 &無料枠(100万回) • 負荷に応じてスケール • コールドスタートあり • Web アプリ同様の動作 (常時接続可) • 常に料金がかかる • Consumption プランと App Service プランの いいとこどり • 負荷に応じてスケール • コールドスタートなし • 常に料金がかかる
  22. 22. #lpf_revup #lpf_revup_t Durable Functions 関数チェーン ファンアウト/ファンイン 非同期 HTTP API 監視 人による操作 複雑&ステートフルなワークフローをシンプルに実装可能 "Durable"な(=持続性のある/丈夫な)処理をシンプルな関数コードの組み合わせだけで作れる!
  23. 23. #lpf_revup #lpf_revup_t Durable Functions • 関数を組み合わせてステートフルな処理を実現する Azure Functions の拡張機能 スターター関数 オーケストレーター 関数 アクティビティ関数 • HTTPトリガーなど通常の関数 • オーケストレーターを起動する • ステートフルな処理をとりまと める関数オーケストレーション を担当 • 裏で何度も再実行され、持続的 な処理としてふるまう • オーケストレーターからの実行 指示で起動する関数 • アプリケーションの機能を担当 アクティビティ関数 アクティビティ関数 履歴などの実行情報をストレージに書き込んで勝手に管理してくれる! ★ ドキュメント https://docs.microsoft.com/ja-jp/azure/azure-functions/durable/durable-functions-overview?tabs=csharp
  24. 24. #lpf_revup #lpf_revup_t 各関数で使用する代表的なメソッド • 関数同士を連携させて"Durable"な処理を作る部品が揃っている! 関数 メソッド名 処理内容 スターター関数 StartNewAsync オーケストレーターを開始する。 TerminateAsync オーケストレーターを終了する。 GetStatusAsync オーケストレーターの状態を取得する。 RaiseEventAsync 任意の名前のイベントを発火する。 オーケストレーター関数 CallActivityAsync アクティビティを呼び出して実行する。パラメータで 好きな値を渡せる(タプルやコレクションも使える)。 CallActivityWithRetryAsync 失敗した場合にリトライするCallActivityAsync。 ContinueAsNew 今回実行した際の情報をパラメータとして渡して状態 を維持し、自身を再実行する。 WaitForExternalEvent 指定した名前のイベントが起きるまで待機する。 GetInput 呼び出し元から渡されたパラメータを取得する。 アクティビティ関数 GetInput 呼び出し元から渡されたパラメータを取得する。
  25. 25. #lpf_revup #lpf_revup_t Bot LIFF エンド ポイント HTTPトリガー オーケストレーター LIFFのURLを返却 イベント待機 WaitForExternalEvent アクティビティ インスタンスID(LINEユーザー ID)とイベント名を指定 LIFFの入力を 前提とした処理 何らかの処理 + RaiseEventAsync LINEユーザーIDを インスタンスIDとして起動 LIFFの入力データ イベント発火 Durable Functionsによる LIFF 連携 レシピ
  26. 26. #lpf_revup #lpf_revup_t Coming soon... • Azure Functions 用 C# 向け Bot 開発フレーム ワーク「DurableBotEngine」鋭意開発中 • Durable Functions の「エンティティ関数」で 対話コンテキストを管理 ※ 単独で状態を保持できる一意なIDで特定可能な「持続エンティティ」を操作 現在 0.0.2-alpha が NuGet で公開中です
  27. 27. #lpf_revup #lpf_revup_t Azure × Messaging API (サブ編) あなたならどう使う? 最新 Azure レシピ for LINE Platform
  28. 28. #lpf_revup #lpf_revup_t Azure Cosmos DB • 惑星規模のアプリケーションにも 対応 • Free Tier 登場で小規模向けにも 使いやすく • サーバーレスへの対応
  29. 29. #lpf_revup #lpf_revup_t Change Feed(変更フィード) • データの変更があった場合にFunctionをトリガー • 追加・変更に対応(順序保証あり) ★ Azure Cosmos DB の変更フィードの設計パターン https://docs.microsoft.com/ja-jp/azure/cosmos-db/change-feed-design-patterns
  30. 30. #lpf_revup #lpf_revup_t リッチメニューの切り替え • Cosmos DB × Functions レシピ Bot メッセージ送信 データ登録 Change Feed 変更内容に合わせて リッチメニューを切り替え rich menu[変更] ユーザーの状態に沿った リッチメニュー管理を 独立した処理で実装可能
  31. 31. #lpf_revup #lpf_revup_t Azure SignalR Service • Webページなどのクライアント をリアルタイム更新するための サービス • 出力バインディングで Functions と簡単に統合できる ★ ドキュメント https://docs.microsoft.com/ja-jp/azure/azure-signalr/
  32. 32. #lpf_revup #lpf_revup_t データの更新をリアルタイムに反映 出典: Azure Functions で SignalR Service バインドを使用したリアルタイムのサーバーレス アプリケーション https://azure.microsoft.com/ja-jp/blog/real-time-serverless-applications-with-the-signalr-service-bindings-in-azure-functions/
  33. 33. #lpf_revup #lpf_revup_t LINE Botからのメッセージをリアルタイム表示 • Cosmos DB × Functions × SignalR Service レシピ ※上記構成を組むハンズオン資料を公開中 https://github.com/himanago/azure-serverless-event-driven-bot-hands-on Bot データ 登録 メッセージ 送信 Change Feed 更新出力 バインディング Bot からのメッセージを リアルタイムに表示する Webサイトを開発できる Web画面
  34. 34. #lpf_revup #lpf_revup_t Azure Cognitive Services • コグニティブ(認知)機能を実現する AI パーツ • REST APIやクライアントSDKで簡単に利用可
  35. 35. #lpf_revup #lpf_revup_t LINE Bot におすすめ① QnA Maker ナレッジベースをもとに質問に回答するAIを作成 ★ドキュメントはこちら https://docs.microsoft.com/ja-jp/azure/cognitive-services/qnamaker/ • FAQページ等から自動生成可能 • 精度を上げるためにカスタマイズできる • 回答の文章の雰囲気を選べる • Bot Serviceへの連携も簡単
  36. 36. #lpf_revup #lpf_revup_t LINE Bot におすすめ② LUIS(Language Understanding) 自然言語処理のための AI 機能を提供 ★ドキュメントはこちら https://docs.microsoft.com/ja-jp/azure/cognitive-services/luis/ GUI でサンプル発話と その意図等を設定し 自然言語のテキストを 理解できるようにする
  37. 37. #lpf_revup #lpf_revup_t 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種類の画像を指定する 画像メッセージに最適!
  38. 38. #lpf_revup #lpf_revup_t Azure Blob Storage • テキストやバイナリなどの データを格納するサービス • 「ストレージアカウント」 の中にコンテナーを作成し て使用 ★ ドキュメント https://docs.microsoft.com/ja-jp/azure/storage/blobs/
  39. 39. #lpf_revup #lpf_revup_t Bot が利用する静的リソースの置き場に最適 • アクセスポリシーを変更すれば公開 URL を得られる • LINE Bot では画像・動画メッセージや Flex Message に使用する画像などで URL を指定するので便利
  40. 40. #lpf_revup #lpf_revup_t 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
  41. 41. #lpf_revup #lpf_revup_t 画像メッセージ用リソースの作成 • Logic App × Computer Vision × Blob Storage レシピ システムの一部とするのは もちろん、開発ツールとして 用意しておくのも便利 画像送信 サムネイル作成 オリジナルとサムネイルを両方格納
  42. 42. #lpf_revup #lpf_revup_t Azure × LIFF/ミニアプリ あなたならどう使う? 最新 Azure レシピ for LINE Platform
  43. 43. #lpf_revup #lpf_revup_t LIFF は Web アプリ • サーバーサイドで動作する通常の Web アプリで あれば Web Apps で開発可能 ※ 静的サイトなら専用サービスがあるのでそちらを使う • Azure AD B2C の認証を統合すると便利 ★ Azure AD B2C のドキュメント https://docs.microsoft.com/ja-jp/azure/active-directory-b2c/ +
  44. 44. #lpf_revup #lpf_revup_t Azure AD B2C • Facebook, Google やその他の ID プロバイダーでのソーシャル ログインをアプリケーションに 統合するための基盤 • LINE ログインの統合は「カスタム ポリシー」を作成すれば実現可能 ★ カスタムポリシーの概要 https://docs.microsoft.com/ja-jp/azure/active-directory-b2c/custom-policy-get-started
  45. 45. Azure Static Web Apps • 静的Webサイトホスティングサービス • カスタムドメイン・SSL 対応 • GitHub との統合による CI/CD • ステージング環境での PR レビュー Preview ★ ドキュメント https://docs.microsoft.com/ja-jp/azure/static-web-apps/
  46. 46. #lpf_revup #lpf_revup_t Azure で静的サイトホスティングといえば… •Blob Storage • HTMLファイルを置くとWebページ として使える機能がある • 単純な用途なら十分なものの、 本格的なサイトの実運用には物足りない ※その他 Web App にも Node.js アプリとしてホスト可 ★ ドキュメント https://docs.microsoft.com/ja-jp/azure/storage/blobs/storage-blob-static-website
  47. 47. #lpf_revup #lpf_revup_t Azure Static Web Apps の特徴 リポジトリ Static Web App </> Push/PR 連携(強制) 自動ビルド デプロイ GitHubとの統合による自動ビルド・デプロイ
  48. 48. #lpf_revup #lpf_revup_t Azure Static Web Apps の特徴 </> ブラウザ API クロスオリジン制約を 気にすることなく アクセス可能 /front /api バックエンドAPI(Azure Functions)を 同一リポジトリで開発・デプロイ
  49. 49. #lpf_revup #lpf_revup_t その他便利な Azure サービス あなたならどう使う? 最新 Azure レシピ for LINE Platform
  50. 50. #lpf_revup #lpf_revup_t Key Vault • キー情報(チャネルシークレット 等)を安全に管理できる • App Service(Web App や Functions)からアプリケーション 設定と同様の方法で参照できる ★ ドキュメント https://docs.microsoft.com/ja-jp/azure/key-vault/general/
  51. 51. #lpf_revup #lpf_revup_t Azure DevOps • Pipelines による CI/CD をはじめ、 全体のワークフローを管理できる • Azure に限らず使える • 5 人まで無料 Azure Boards Azure Pipelines Azure Repos Azure Test Plans Azure Artifacts
  52. 52. #lpf_revup #lpf_revup_t 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/
  53. 53. #lpf_revup #lpf_revup_t [実装例] Azure × LINE Platformによる チャットシステムの構築 あなたならどう使う? 最新 Azure レシピ for LINE Platform
  54. 54. #lpf_revup #lpf_revup_t Botの友だちとリアルタイムチャット じろう たろう さぶろう しろう ごろう はなこ 2 元気ですか? 送信 こんにちはー こんにちは! 個別トーク (リアルタイム チャット) 友だちの一覧 新着通知も リアルタイム
  55. 55. #lpf_revup #lpf_revup_t Bot エンド ポイント 個別トーク 管理画面 (ブラウザ) メッセージを保存 Change Feed (Cosmos DB Trigger) 出力バインディン グ SignalR Service HTTPトリガー Cosmos DB Functions リアルタイム更新 LINE とチャットできる“リアルタイムWeb”
  56. 56. #lpf_revup #lpf_revup_t Bot エンド ポイント 個別トーク 管理画面 (ブラウザ) Push Message メッセージ保存 メッセージ送信 Web → LINE も同じしくみ
  57. 57. #lpf_revup #lpf_revup_t Azure Communication Services • Microsoft Teamsの裏側のしくみ • チャット・ビデオ通話アプリを開発できる • SMS送信機能 • Azureサービスとの統合&SDK Preview ★ ドキュメント https://docs.microsoft.com/ja-jp/azure/communication-services/
  58. 58. #lpf_revup #lpf_revup_t Demo Azure Communication Services による チャットアプリと LINE Bot の対話
  59. 59. #lpf_revup #lpf_revup_t 参考 ★ 実装の詳細(ブログ) https://himanago.hatenablog.com/entry/2020/11/06/231038 ★ 元となったサンプルアプリ https://docs.microsoft.com/ja-jp/azure/communication-services/samples/chat-hero-sample
  60. 60. #lpf_revup #lpf_revup_t おわりに あなたならどう使う? 最新 Azure レシピ for LINE Platform
  61. 61. #lpf_revup #lpf_revup_t まとめ • PaaS を中心に Azure には LINE Platform との 相性の良いサービスがたくさんある • それぞれの特徴と組み合わせ方を知り、作りたい ものにあわせた最適なアーキテクチャを選ぶこと が重要 • LINE Platform × Azure = ∞!

×