OkayTeacher
JA English 한국어 日本語 中文 हिन्दी বাংলা اردو Español Português Français Deutsch Русский العربية Bahasa Indonesia Tiếng Việt ไทย Türkçe

通知を有効にする方法

このブラウザーまたはアドレスでは通知を利用できません。対応ブラウザーで安全な接続のSONUBサイトを開いてください。

通知がブロックされている場合は、ブラウザーの設定で許可してください。

  1. アドレスバー横のサイト設定、またはブラウザーのサイト設定を開き、このサイトの通知を許可に変更してください。
  2. 端末の設定でブラウザーの通知を許可し、おやすみモードや集中モードを確認してください。
  3. SONUBに戻ってページを再読み込みし、ベルから通知を有効にしてください。

iPhoneやiPadではSONUBをホーム画面に追加し、そこから開いて通知を許可してください。
バイブコーディングの一覧へ

Webサーバー

が話しかけてくれるスクリプト20行。

Web サーバーは、リクエストを待ってレスポンスを返すプログラムにすぎません。bash と netcat の20行でサーバーを作って読み、HTTPS 付きの Caddy へ進みましょう。

小さな窓口の向こうの店員が、リクエストのメモを持って並ぶ客たち(ノートパソコン、スマホ、小さなロボット)の話を聞いている。窓口の上には、ぐるりと回る矢印がある。
Webは窓口の店員です。待って、リクエストを読み、ページを渡し、また待ちます。

シェルスクリプト一枚で作るWebサーバー

下がで書いた完全なWebサーバーです。を開き、を読み、記録を残し、をきちんとしたとして返します。二十行、なし、そしてブラウザーは違いに気付きません。

重い仕事は二つのが担います。(nc)がを話し、がを作って、書いた答えをncが握っている接続へ戻します。

server.sh
#!/bin/bash

PORT=8084
PIPE=simple-web-server-pipe

rm -f "$PIPE"
mkfifo "$PIPE"

response() {
    read -r method path _
    echo "[$(date)] $method $path" >&2
    index=$(cat index.html)
    printf 'HTTP/1.1 200 OK\r\nContent-Type: text/html; charset=utf-8\r\nConnection: close\r\n\r\n%s' \
      "$index"
}

while true; do
    response < "$PIPE" | nc -l "$PORT" > "$PIPE"
done

一行ずつ読む

  1. PORT=8084耳を澄ますポートです。1024より大きい番号は管理者なしで使え、8084なら既に動かしているものとぶつかりにくいでしょう。
  2. PIPE=simple-web-server-pipeファイルの名前です。フォルダーにはふつうのファイルのように現れますが、中に保存されるものはありません — 二つのコマンドの間をが通り抜けるだけです。
  3. mkfifo "$PIPE"名前付きパイプ(FIFO)を作ります。すぐ上の行が前回の残りを消しているのは、mkfifoが既にあるファイルへのを拒むからです。
  4. read -r method path _の一行目を読んで、・・残りに分けます。その後に続くブラウザーのは、このサーバーは読み飛ばします。
  5. echo "[$(date)] $method $path" >&2記録を一行残します。へ向きを変えているおかげで、この文がブラウザーへ行かずにだけ現れます。
  6. index=$(cat index.html)今いるフォルダーのindex.htmlを読んでに入れます。サーバーをそのファイルのあるフォルダーで起動しなければならない理由がこれです。
  7. printf 'HTTP/1.1 200 OK\r\n…'レスポンスを書きます。、中身の種類、ここで接続を終えるというヘッダー、そしてとページ。ヘッダーと中身を分けるのがその空行で、はすべての行末にとを求めます。
  8. response < "$PIPE" | nc -l "$PORT" > "$PIPE"これが動く仕掛けです。ncは|の前のresponseが書いたレスポンスを受け取ってブラウザーへ送り、ブラウザーのリクエストはFIFOファイル（$PIPE）に書き込みます。responseはそのFIFOからリクエストを読みます。両側が互いに餌を与え合う形です。
  9. while true; do … doneです。ncは接続を一つ処理すると終わってしまうので、この行がなければサーバーは訪問者を一人受けて止まります。
なぜ変数ではなくパイプなのか

リクエストがに届いて初めて、関数の答えがncに届きます — 輪の形です。ところがシェルのパイプラインは一方向にしか流れません。名前付きパイプがその輪を閉じます。レスポンスはパイプラインを通ってncへ、リクエストはFIFOを通って戻ってきます。二つのコマンドを双方向で会話させる、いちばん小さな方法です。

自分で動かす

をserver.shとして保存し、隣にindex.htmlを置いて起動します。そのターミナルは開いたままにして、二つ目のターミナルからリクエストを送ってみてください。

terminal
# 1. create an index.html in the same folder
echo '<h1>Hello</h1>' > index.html

# 2. save the script above as server.sh and start it
bash server.sh

# 3. open it in a browser (or check from a second terminal)
open http://localhost:8084
curl http://localhost:8084

ブラウザーを再読み込みしながら一つ目のターミナルを見てください。リクエスト一件ごとに記録が一行増えます。で止め、パイプファイルが残っていたら消します。のncはポートのまえにさらにPが要ることがあり、に標準で入っている版は書いたとおりに動きます。

ここで使ったシェルコマンドを学ぶ

自分で記録する欄です。ここで採点はしません。

この段階を理解したものとして記録しますか？

まだ取り消せないので、本当に理解できたときだけ記録してください。

理解したものとして記録しました

自分で記録する欄です。ここで採点はしません。

次の一歩