aKuad

<h2 id="%E5%AE%8C%E6%88%90%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%83%9D%E3%83%B3%E3%83%81%E7%B5%B5" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%8C%E6%88%90%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%83%9D%E3%83%B3%E3%83%81%E7%B5%B5" aria-hidden="true"></a> 完成イメージポンチ絵</h2>
<ul data-line="2" class="code-line">
<li data-line="2" class="code-line">運営がサーバ (これから作るアプリ) を立ち上げる</li>
<li data-line="3" class="code-line">運営はコントロールページにアクセスする
<ul data-line="4" class="code-line">
<li data-line="4" class="code-line">コントロールページで、回答開始がでる</li>
<li data-line="5" class="code-line">画面は人数ディスプレイになっているので、モニタやプロジェクターで会場に見せる</li>
</ul>
</li>
<li data-line="6" class="code-line">回答者は回答ページにアクセスする
<ul data-line="7" class="code-line">
<li data-line="7" class="code-line">QR コードなどでサーバへの URL を配る</li>
</ul>
</li>
</ul>
<p data-line="9" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/f91746ba2168-20241116.png" alt="Draw-Waiting" loading="lazy" class="md-img"></p>
<ul data-line="11" class="code-line">
<li data-line="11" class="code-line">運営が回答開始を実行すると、数秒間回答の受付が開始される
<ul data-line="12" class="code-line">
<li data-line="12" class="code-line">回答者のスマホ画面が切り替わり、回答ができる</li>
</ul>
</li>
<li data-line="13" class="code-line">数秒経つと回答受付が終了し、該当すると答えた人数が表示される
<ul data-line="14" class="code-line">
<li data-line="14" class="code-line">回答者のスマホ画面が待機中に戻る</li>
</ul>
</li>
</ul>
<p data-line="16" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/c65d92f1b17a-20241116.png" alt="Draw-Questioning" loading="lazy" class="md-img"></p>


<h2 id="%E5%85%A8%E4%BD%93%E3%82%B7%E3%83%BC%E3%82%B1%E3%83%B3%E3%82%B9-%26-%E3%82%A8%E3%83%B3%E3%83%89%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E6%A4%9C%E8%A8%8E" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E5%85%A8%E4%BD%93%E3%82%B7%E3%83%BC%E3%82%B1%E3%83%B3%E3%82%B9-%26-%E3%82%A8%E3%83%B3%E3%83%89%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E6%A4%9C%E8%A8%8E" aria-hidden="true"></a> 全体シーケンス &amp; エンドポイント検討</h2>
<span class="embed-block zenn-embedded zenn-embedded-mermaid"><iframe id="zenn-embedded__642bdb2ea5da1" src="https://embed.zenn.studio/mermaid#zenn-embedded__642bdb2ea5da1" data-content="sequenceDiagram%0A%20%20actor%20M%20as%20Moderator%0A%20%20actor%20R%20as%20Respondents%0A%20%20participant%20S%20as%20Server%0A%0A%20%20Note%20over%20R%3A%20Event%20starting%0A%20%20M%20-%3E%3E%20S%3A%20Access%20to%20control%20page%3Cbr%3EEndpoint%3A%20%2Fcontrol%0A%20%20M%20-%3E%3E%20S%3A%20Start%20websocket%20connection%3Cbr%3EEndpoint%3A%20%2Fapi%2Fcontrol%0A%0A%20%20loop%20For%20each%20respondents%0A%20%20%20%20R%20-%3E%3E%20S%3A%20Access%20to%20response%20page%3Cbr%3EEndpoint%3A%20%2F%0A%20%20%20%20R%20-%3E%3E%20S%3A%20Start%20websocket%20connection%3Cbr%3EEndpoint%3A%20%2Fapi%2Frespond%0A%20%20%20%20S%20-%3E%3E%20M%3A%20Update%20respondent%20count%0A%20%20end%0A%0A%20%20Note%20over%20R%3A%20Question%20starting%0A%20%20M%20-%3E%3E%20S%3A%20Question%20start%0A%20%20M%20-%3E%3E%20M%3A%20Page%20update%0A%20%20S%20-%3E%3E%20R%3A%20Responding%20start%0A%20%20R%20-%3E%3E%20R%3A%20Page%20update%3Cbr%3E(enable%20responding)%0A%0A%20%20alt%20If%20respondent%20controled%0A%20%20R%20-%3E%3E%20S%3A%20Response%20update%3Cbr%3E(true%2Ffalse)%0A%20%20S%20-%3E%3E%20S%3A%20True%20count%20update%0A%20%20end%0A%0A%20%20Note%20over%20R%3A%20Question%20end%0A%20%20S%20-%3E%3E%20S%3A%20Timeout%20dispatched%0A%20%20S%20-%3E%3E%20R%3A%20Responding%20end%0A%20%20R%20-%3E%3E%20R%3A%20Page%20update%3Cbr%3E(disable%20responding)%0A%0A%20%20S%20-%3E%3E%20M%3A%20Result%20(count%20of%20true)%0A%20%20M%20-%3E%3E%20M%3A%20Page%20update(view%20true%20count)" frameborder="0" scrolling="no" loading="lazy"></iframe></span>

Deno + プレーン JS で、いいとも！の 100人中 1人システムを作るぞ

完成イメージポンチ絵

全体シーケンス & エンドポイント検討