Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad

#lpf_revup #lpf_revup_t
あなたならどう使う?
最新 Azure レシピ for LINE Platform
平林 拓将(ひらりん)
himarin269 / himanago
LPF REV UP 2020
2020/1...

Ad

#lpf_revup #lpf_revup_t
About me
• name: 平林 拓将(ひらりん)
• work: テクニカルトレーナー&開発
• award/title:
- Microsoft MVP for Azure(2019.1...

Ad

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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 61 Ad
1 of 61 Ad

More Related Content

Slideshows for you (19)

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

[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 = ∞!

×