de:code 夏まつり
クイズ クライアント作ったよ！
de:code夏まつり
～よりコミュニティを楽しくするためのコミュニティのすすめ #3
https://msdevjp.connpass.com/event/175983/
#decode夏まつり

Introduction
自己紹介とコミュニティトピック

Self introduction
• 大平かづみ / Kazumi OHIRA
• フリーランスエンジニア、リモートワーク
• Microsoft Azure を用いた開発、Infrastructure as Code 好き。
• サーバーサイド開発、OSSメンテ、ほか。IoTも好き。
• さまざまなコミュニティの運営参加。
• Twitter: @dz_
• GitHub: @dzeyelid

書籍「実践 Node-RED 活用マニュアル」
https://www.amazon.co.jp/dp/4777521117
コミュニティのみんなで書きました🙌
Node-RED を活用数ノウハウが詰まっています

Node-RED Con 2020 スピーカー公募！
https://nodered.jp/noderedcon2020/#speaker
CfP のご応募
お待ちしております！

Cogbot x くらでべ
Bot Framework はじめの一歩詰込みSP!
https://cogbot.connpass.com/event/181896/

Serverless Meetup Japan Virtual #2
https://serverless.connpass.com/event/181523/
我らが
三宅さんセッション！

コードネーム Guiding stars あらため、

Code Polaris
• 女性が安心して学べる技術コミュニティ
• アプリケーション開発を主軸とした支援
• 現役エンジニアを交え、みなで解決するQA
• OSS開発を通じ、実践を学ぶ
• 基本無料
https://code-polaris.connpass.com/

クイズ webクライアント詳解
Azure サーバレスを駆使

クイズ webクライアント構成
Static Web App
SignalR Service
Log Analytics
workspace
Application
Insights
Logic App
Power Apps
りなたむさん担当dz 担当
Azure Monitor

クイズ webクライアント構成
Static Web App
SignalR Service
Log Analytics
workspace
Application
Insights
Logic App
Power Apps
りなたむさん担当dz 担当
Webアプリ表示
Azure Monitor

クイズ webクライアント構成
Static Web App
SignalR Service
Log Analytics
workspace
Application
Insights
Logic App
Power Apps
りなたむさん担当dz 担当
Azure Monitor
リアルタイムで
問題通知

クイズ webクライアント構成
Static Web App
SignalR Service
Log Analytics
workspace
Application
Insights
Logic App
Power Apps
りなたむさん担当dz 担当
Azure Monitor
回答送信

リファレンス
• Azure Static Web Apps とは | Microsoft Docs
• A14 | 「あつまれ フロントエンドエンジニア」 Azure Static Web
Apps がやってきた | de:code (decode) 2020
• JavaScript を使って Azure Functions と SignalR Service を使
用するチャット ルームを作成する | Microsoft Docs
• Azure Monitor の概要 - Azure Monitor | Microsoft Docs
• OpenAPI Initiative

開発中の気付き

API だけ取り決めて、あとは各自実装！
Static Web App
SignalR Service
Log Analytics
workspace
Application
Insights
Logic App
Power Apps
りなたむさん担当dz 担当
Azure Monitor
それぞれのつなぎの部分の、API定義だけはしっかり取り決め
• URL、レスポンス、データ構造
すんなり結合できました🤝

まさかの公開トラシュー！
トラブルシューティングさえも楽しむ気持ち！😱😇

クイズ画面が表示されない…！？

クイズ画面が表示されない…！？
自動で回答画面に切り替わるはずなのに、
ほとんどの人が切り替わらない…
20人くらいしか回答できていない…
コンソール画面ではエラーが…

クイズ画面が表示されない…！？
自動で回答画面に切り替わるはずなのに、
ほとんどの人が切り替わらない…
20人くらいしか回答できていない…
コンソール画面ではエラーが…
SignalR service のプラン、
Free から上げ忘れてました！！！！！！

クイズ画面が表示されない…！？
自動で回答画面に切り替わるはずなのに、
ほとんどの人が切り替わらない…
20人くらいしか回答できていない…
コンソール画面ではエラーが…
SignalR service のプラン、
Free から上げ忘れてました！！！！！！
Free プランは、20接続まで

ZEN Geeks の神対応！
@kazuyukimiyake
Supported by Zen Architects https://zenarchitects.co.jp/
@shibayan

しばやん雑記という名の救いの書
https://blog.shibayan.jp/entry/20200625/1593058177

Sprint 2 でのアップデート
アジャイル開発さながらのスケジュール感

Sprint 2
• 配点対応
• ニックネーム対応
• カテゴリ表示
• 問題の位置表示対応
• 途中参加対応
https://github.com/dzeyelid/decode20-azure-quiz-client/pull/10
Pull request

プロトタイプからの脱却構想

構想
• Azure Static Web Apps の API 機能
• Azure Functions のような host key/function key 機能は使えない
• プロバイダーによる認証ができる
• Azure Static Web Apps の認証と承認 | Microsoft Docs
• Azure Static Web Apps はまだプレビューなので、 現時点で機能を求め
るには Azure Functions に切り離した方がよさそう
• Azure Static Web Apps + Azure Functions
• CI/CD を組んでしまえば、普段の使用感は同じで、よりたくさんの機能を使
えるようになるので、検討したい

Version ? - 改善案
Static Web App
SignalR Service
Log Analytics
workspace
Logic App
Power Apps
Azure Monitor
Function
Application
Insights

他にやりたいこと
セルフペースドハンズオンができるレベルまで、コンテンツを充実させた
い！
項目 目標
ローカル環境構築手順 最低限は README に記載済み、見直して最適化
デプロイ手順 ざっくり対応済み。より分かりやすく改善予定
ソースコードリファクタ ZEN Geeks のみなさまにアドバイスいただいて反映したい！
API仕様書 関連するAPIについては、 OpenAPI で定義済み
https://github.com/dzeyelid/decode20-azure-quiz-client/
ソースコードはこちら

他にやりたいこと
セルフペースドハンズオンができるレベルまで、コンテンツを充実させた
い！
項目 目標
ローカル環境構築手順 最低限は README に記載済み、見直して最適化
デプロイ手順 ざっくり対応済み。より分かりやすく改善予定
ソースコードリファクタ ZEN Geeks のみなさまにアドバイスいただいて反映したい！
API仕様書 関連するAPIについては、 OpenAPI で定義済み
TypeScript と Vue.js のプロ
にがっつりレビューしてもらいたい！
@nahokomatsui
https://github.com/dzeyelid/decode20-azure-quiz-client/
ソースコードはこちら

クイズも復習したい！

ちょまどちゃんのクイズ大会 問題解説！
#decode夏まつり
のタグでツイート予定！

Have fun, tech geeks! 🐱‍🏍
Thanks for watching!