毎年恒例イベントを Azure Media Services を使ってオンラインで

これが私のおすすめリモート開発事例 by Startup/MVP - MSTechNight #11 - 2020/07/20

毎年恒例イベントを Azure Media Services を使ってオンラインで
https://qiita.com/tetsuya-ooooo/items/d62a983da9887050c6ca

Transcript

1. 毎年恒例イベントを Azure Media Services を使ってオンラインで Tetsuya Odashima @TetsuyaOoooo Microsoft MVP for Microsoft Azure これが私のおすすめリモート開発事例 by Startup/MVP - MSTechNight #11 2020/07/20
2. 2 小田島 哲也 (おだしま てつや) ◦ Microsoft MVP for Microsoft Azure ◦ @TetsuyaOoooo ◦ Qiita https://qiita.com/tetsuya-ooooo ◦ SlideShare https://www.slideshare.net/tetsuyaodashima おしごと ◦ パーソルプロセス＆テクノロジー株式会社 Azure 導入コンサル/技術支援 コミュニティ ◦ ETソフトウェアデザインロボットコンテスト (ETロボコン) 実行委員会 https://www.etrobo.jp/ ✓ 「技術教育の機会を提供する」という歩みを止めてはいけない... 2020年はオンライン教育＆ヴァーチャル競技会で開催中!! ✓ 令和元年度 情報化促進貢献個人等表彰 経済産業大臣賞を受賞!! 自己紹介 June, 2018 -
3. 詳しくは Qiita 記事で 本日のゴール とくに伝えたいとこ ここがんばった ここ工夫したとか ポイント！ いろいろと かいつまんで やればできる！ 話を聞いて 感じてくれ!! 3 https://qiita.com/tetsuya-ooooo/items/d62a983da9887050c6ca 私が所属する事業部で毎年会場に集合して催していた キックオフをオンラインで開催しました。というお話
4. アジェンダ どうする？キックオフ いきさつ 要件を整理 配信方法を検討 システム構成と体制 毎年恒例イベントの オンライン化に向けて挑んだ システム構成と体制 ...とポイント アンケート結果 参加者からの声を紹介 まとめ 4
5. どうする？キックオフ いきさつ 要件を整理 配信方法を検討 5
6. 事業部キックオフの開催方法が決定 6 いままでは「とある会場に集合」して開催 コロナ渦の影響で、今年は「オンライン」で開催
7. 専門業者さんに頼むとお金かかる 7 撮影 編集 配信 • ”事業部らしさ” を出してやる！ • 当初の予定より (大幅に？) コスト を抑えてやる！ そんなのうちの小田島に頼めば、 自前で全部やれるぜ！ (ボス) (ちょっと) (そこそこ) 腕に覚えがあってやる気ある我々がやる！
8. 8 要件を整理する ◦ 事業部の社員「1,000人程度」がアクセス ◦ 事業部の全社員が自宅からリモート参加、デバイス はいろいろと想定 • 社内ネットワークに負荷はかけられない • 社内インフラは使わない想定で開催すること ◦ ライブ配信ではなく、撮影→編集→動画配信 ◦ YouTubeなどのパブリックな場所での公開はダメ！ • 限定公開もダメ！ • 認証は必須！ ◦ 動画配信は「当日 14:00～16:00」と期間限定 • 当日 (土曜日) は会社が定める出勤日 ◦ システムダウンはゼッタイダメ！ • 大事な話を伝える場だから
9. 9 配信方法を検討する 手間をかけずに実施できるならそれはそれで良い ですよね いろいろと検討した結果、 「Azure Media Services」をメインにシステムを 構築することにしました ◦ Zoom (有償版) で配信 • キャパ不足… (会社で所有するライセンスの問題で) ◦ Microsoft Teams ライブイベントで配信 • キャパは最大10,000人、イベント当たり最大4時間 • 当日、誰がどこでやるんだ問題 • 私たちが自由に触れる Microsoft 365 テナントでは 各々検証を行っているのでジャマしちゃダメ ◦ Azure Media Services を使って配信 • キャパ、開催日時・時間は気にしなくてOK (どうにかなる！) • 使った分だけお支払い • アプリをAzure ADと連携することで、アカウント管理も スッキリ
10. システム構成と体制 毎年恒例イベントのオンライン化に向けて挑んだ システム構成と体制...とポイント 10
11. システム構成&体制 11 ※事業戦略部＝Azure 触ったことない方たち
12. アカウント管理まかせたい – Azure Active Directory ◦ とにかくまかせたい！ • 出欠名簿を持っているなら、そちらで一元管理して... • けど、Azure ポータル触ったことないよな... • ダメ元でパスしてみるか！ ◦ 頼む側も準備する • 必要最小限のロールを割り当てる →Azure AD 「ユーザー管理者」 • こんな時はこれやって！とチュートリアル (Microsoft Docs) を渡す • 自主練習！できるように→やってみてもらう 12 ※事業戦略部＝Azure 触ったことない方たち
13. サクッと動画配信 – Azure Media Services ◦ Azure ポータルでカンタンにできる (*1) ◦ もっと詳しく知りたい (*2) 撮影 編集 アップロード エンコード 配信 13 (*1)…https://www.cloudou.net/azure-media-services/ams002/ (*2)…https://www.slideshare.net/dahatake/azure-media-services-114345700 ストリーミングエンドポイントは Standard + CDN で OK
14. 気になるアイツ – Blazor ◦ Blazor WebAssembly • クライアントサイドで C# コードが動く！ • いつも使っている開発環境！ • Azure AD 認証も実装できる！ • JavaScript 関数も呼び出せる！ • Microsoft Learn で学べる！日本語！ 14 https://docs.microsoft.com/ja-jp/learn/modules/build-blazor-webassembly-visual-studio-code/
15. ノンコーディングでビジネスレイヤー – Azure Logic Apps & SharePoint ◦ Azure Logic Apps • サーバーレス、使った分だけお支払い • ノンコーディング、手軽で便利 • ビルド、ホスティング、スケーリング、管理、監視、メンテナンスは Azure におまかせ • リソースは無限にあるわけではない...リミッター (制限) 有 可能な限り引き上げる術 → 「高スループットモード」 (*1) ※プレビュー機能 回避する策は他にもある →「Fan-out パターン」 (*2) ◦ データ格納場所は SharePoint リスト • 誰でもカンタンに操作できる • SharePoint コネクタがあり、カンタンに接続できる 15 (*1)…https://docs.microsoft.com/ja-jp/azure/logic-apps/logic-apps-workflow-actions-triggers#run-in-high-throughput-mode (*2)…親ロジックアプリが子ワークフローを生成して実行ロジックを完了する。作り方→ https://docs.microsoft.com/ja-jp/azure/logic-apps/logic-apps-http-endpoint 5分間に実行されるアクション数 に既定の上限が設定されている
16. アンケート結果 参加者の声を紹介 16
17. アンケート結果 17 81.7% 18.3% 集中して視聴できた 集中して視聴できなかった 18.5% 16.9% 15.2% 12.9% 12.9% 11.8% 7.3% 4.5% 通信環境が不安定だったため 一方通行感が強く飽きてしまったため 会場参加と比較して臨場感が欠けるため 資料が見づらかったため 周囲 (家族など) が気になったため 視聴時間が長かったため 音声が聞き取りづらかったため その他 集中して視聴できなかった理由 ※「集中して視聴できなかった」の内訳 Q.リモートによる動画視聴について お聞かせください。 一方通行感が強く飽きてしまった 会場参加と比較して臨場感が欠ける 会場での「一体感」や「臨場感」に近づけるための 工夫が必要だった
18. まとめ 18
19. まとめ ◦ 改めて、Azure Media Services のコスパを実感 • 1,000人程度に向けた動画配信が 30,000円くらい (超概算) でできるというオドロキ！ ◦ 参加者向けのフォローを Azure ポータルを触ったことがない方にまかせる • 必要最低限のロールを割り当て、事前に発生しうる事象とその対処法、やって欲しいことの操作手順を伝えて、自主練習 してもらって当日に備える • もしかして Azure ポータルがどんどん扱いしやすくなっている？(意識せずに使ってるから、気づいてない...汗) ◦ 新しいテクノロジーにチャレンジ • 社内イベントなので、ちょっとくらいチャレンジ要素を含めても良いでしょ！ ◦ 余分なコストをカット • 新たにかかる人件費はほぼゼロ、ランニングコストもせいぜい十数万円くらい？経験値上がるからプラスじゃね！ ◦ オンライン開催も「選択肢のひとつ」と示せた、そして「自分たちだけでもオンライン開催できる」と示せた 19
20. ありがとう ございました Tetsuya Odashima @TetsuyaOoooo これが私のおすすめリモート開発事例 by Startup/MVP - MSTechNight #11 2020/07/20
21. [Appendix] 参考文献 1/2 ◦ Azure Active Directory • Azure Active Directory での管理者ロールのアクセス許可 - Microsoft Docs https://docs.microsoft.com/ja-jp/azure/active-directory/users-groups-roles/directory-assign-admin-roles • Azure Active Directory でのユーザーの一括作成 - Microsoft Docs https://docs.microsoft.com/ja-jp/azure/active-directory/users-groups-roles/users-bulk-add ◦ Azure Media Services • 動画配信プラットフォーム「Azure Media Services」とは？ - くらう道 https://www.cloudou.net/azure-media-services/ams001/ • Azure Media Services で動画配信を試す！！ - くらう道 https://www.cloudou.net/azure-media-services/ams002/ • Azure Media Services 大全 Daiyu Hatakeyama – SlideShare https://www.slideshare.net/dahatake/azure-media-services-114345700 • Azure Portal を使用したオン デマンド コンテンツ配信の概要 – Microsoft Docs https://docs.microsoft.com/ja-jp/azure/media-services/previous/media-services-portal-vod-get-started • Azure Media Services のストリーミング エンドポイント (配信元) – Microsoft Docs https://docs.microsoft.com/ja-jp/azure/media-services/latest/streaming-endpoint-concept • CDN 統合を使用してコンテンツをストリーミングする – Microsoft Docs https://docs.microsoft.com/ja-jp/azure/media-services/latest/scale-streaming-cdn 22
22. [Appendix] 参考文献 2/2 ◦ Blazor WebAssembly • WebAssembly.org https://webassembly.org/ • Blazor https://blazor.net • ASP.NET Core Blazor の概要 – Microsoft Docs https://docs.microsoft.com/ja-jp/aspnet/core/blazor/get-started?view=aspnetcore-3.1&tabs=visual-studio • Secure an ASP.NET Core Blazor WebAssembly standalone app with Azure Active Directory - Microsoft Docs https://docs.microsoft.com/en-us/aspnet/core/security/blazor/webassembly/standalone-with-azure-active- directory?view=aspnetcore-3.1 • ASP.NET Core Blazor で .NET メソッドから JavaScript 関数を呼び出す - Microsoft Docs https://docs.microsoft.com/ja-jp/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-3.1 • Blazor WebAssembly を Azure Blob Storage でホストする – CloudSteady https://cloudsteady.jp/post/10344/ ◦ Azure Logic Apps • Azure Logic Apps のコネクタ - Microsoft Docs https://docs.microsoft.com/ja-jp/azure/connectors/apis-list • Azure Logic Apps でのトリガーとアクションの種類のスキーマ リファレンス ガイド - Microsoft Docs https://docs.microsoft.com/ja-jp/azure/logic-apps/logic-apps-workflow-actions-triggers 23