確認問題と演習問題に画像と動画を追加

Author: chvmvd

docs/3-web-servers/06-fetch-api/cafe-open-status-app.png

@@ -2,6 +2,9 @@
 title: Fetch APIによるデータの取得
 ---
 
+import exchangeRatesAppVideo from "./exchange-rates-app.mp4";
+import currencyConverterAppVideo from "./currency-converter-app.mp4";
+
 前頁では、Webサーバーが動作する仕組みと、ブラウザとWebサーバーの間で行われる基本的な通信の手順について学びました。この流れの中では、ブラウザは、次のような場合に<Term>HTTPリクエスト</Term>をWebサーバーに対して送信するのでした。
 
 1. アドレスバーにURLを入力したとき
@@ -69,7 +72,7 @@ JavaScriptにおける<Term>**非同期処理**</Term>とは、ファイルの
 
 サーバー側では、`/open-status`というパスに対するリクエストを受けたとき、`営業中`という文字列をレスポンスとして返すようにしてください。ブラウザ側では、`fetch`関数を用いて`/open-status`にリクエストを発行し、レスポンスを受け取って、`カフェは現在営業中です。`と表示するようにしてください。
 
-ここに画像を埋め込む
+![カフェの営業状況表示プログラム](./cafe-open-status-app.png)
 
 <Answer title="カフェ営業状況表示プログラム">
 
@@ -178,7 +181,7 @@ JSONでは、次のように、全てのキーをダブルクォーテーショ
 }
 ```
 
-ここに画像を埋め込む
+![カフェの営業状況表示プログラム](./cafe-open-status-json-app.png)
 
 <Answer title="カフェ営業状況表示プログラム">
 
@@ -230,7 +233,7 @@ fetchOpenStatus();
 
 次のように、定期的にサーバーから現在の為替レートを取得して表示するWebアプリケーションを作成してください。ただし、為替レートは、サーバー側で乱数を用いて生成してください。
 
-ここに動画を埋め込む
+<video src={exchangeRatesAppVideo} controls muted />
 
 サーバー側では、`/exchange-rates`に対するリクエストを受けたとき、次のように作成されたオブジェクトをJSON形式のレスポンスとして返すようにしてください。
 
@@ -295,7 +298,7 @@ setInterval(async () => {
 
 次のように、円の金額を入力してボタンをクリックすると、その時の為替レートで換算して表示する、通貨換算アプリケーションを作成してください。
 
-ここに動画を埋め込む
+<video src={currencyConverterAppVideo} controls muted />
 
 サーバー側は、演習問題1と同様です。
 

docs/3-web-servers/06-fetch-api/cafe-open-status-json-app.png

@@ -2,6 +2,10 @@
 title: Fetch APIによるデータの送信
 ---
 
+import coffeeSalesAppVideo from "./coffee-sales-app.mp4";
+import bookSearchAppVideo from "./book-search-app.mp4";
+import chatAppVideo from "./chat-app.mp4";
+
 Fetch APIを用いると、サーバーからデータを取得するだけでなく、サーバーにデータを送信することもできます。この節では、Fetch APIを用いてデータを送信する方法について学びます。実践的なアプリケーションの開発のためには、HTTPの仕組みについて、より深く理解する必要があります。まずは、HTTPリクエストとレスポンスの詳細な構造を確認しましょう。
 
 ## HTTPリクエストとレスポンスの構造
@@ -84,7 +88,7 @@ document.getElementById("withdraw-button").onclick = async () => {
 
 次のように、売れた杯数を入力することで、売上杯数と売上金額を計算するWebアプリケーションを作成してみましょう。
 
-ここに動画を埋め込む
+<video src={coffeeSalesAppVideo} controls muted />
 
 サーバー側では、`/sales`に対するPOSTリクエストを受けたとき、受け取った杯数とサーバーに保存されている一杯あたりの価格をもとに売上杯数と売上金額を更新し、これらをJSON形式で返すようにしてください。
 
@@ -157,7 +161,7 @@ document.getElementById("record-button").onclick = async () => {
 
 次のように、著者名を入力することで、その著者の本の一覧が表示される書籍検索アプリを作ってみましょう。
 
-ここに動画を埋め込む
+<video src={bookSearchAppVideo} controls muted />
 
 サーバー側では、`/search`に対するPOSTリクエストを受けたとき、受け取った著者名に一致する本のデータをJSON形式で返すようにしてください。
 
@@ -277,7 +281,7 @@ document.getElementById("search-button").onclick = async () => {
 
 次のようなチャットアプリを作ってみましょう。
 
-ここに動画を埋め込む
+<video src={chatAppVideo} controls muted />
 
 サーバー側では、これまでのメッセージを保存する配列`messages`を用意しましょう。`/messages`に対するGETリクエストを受けたとき、配列`messages`をJSON形式で返すようにしてください。また、`/send`に対するPOSTリクエストを受けたとき、`Array#push`メソッドで受け取ったメッセージを配列`messages`に追加するようにしてください。