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

通知を有効にする方法

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

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

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

iPhoneやiPadではPESをホーム画面に追加し、そこから開いて通知を許可してください。

わたしの学習進度
  1. 人工知能の使い方
  2. ターミナル命令
  3. 人工知能の応用
  4. バイブコーディング
  5. 人工知能資格 準備中
  6. キーボード
バイブコーディングの一覧へ
バイブコーディング

Webサーバー

ブラウザーが話しかけてくれるシェルスクリプト20行。

Webサーバーはリクエストを待ってレスポンスを送るだけのプログラムです。それを証明するために、bashとnetcatと名前付きパイプだけでサーバーを作ります — 一行残らず読めます。そのあと、実際のサイトをHTTPS込みで動かすCaddyへ進みます。

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

下がbashで書いた完全なWebです。を開き、リクエスト行を読み、記録を残し、index.htmlをきちんとしたレスポンスとして返します。二十行、なし、そしては違いに気付きません。

重い仕事は二つのコマンドが担います。netcat(nc)がネットワークを話し、mkfifoが名前付きパイプを作って、書いた答えを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…'レスポンスを書きます。ステータス行、中身の種類、ここで接続を終えるというヘッダー、そして空行とページ。ヘッダーと中身を分けるのがその空行で、HTTPはすべての行末にキャリッジリターンと改行を求めます。
  8. response < "$PIPE" | nc -l "$PORT" > "$PIPE"これが動く仕掛けです。ncはパイプからこちらのレスポンスを読み、ブラウザーのリクエストをそのパイプへ書き戻します。両側が互いに餌を与え合う形です。
  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

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

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

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

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

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

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

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

ガイドライン

人工知能

人工知能資格

勉強

バイブコーディング

ゲーム開発

練習

チューター

チャット

掲示板

制作

コミュニティ

その他

用語辞典

知らない言葉を選んでみましょう。やさしい説明と関連用語が見られます。

その用語はまだありません。

用語を選ぶと説明が表示されます。