ツール4・5日目の index.html を作る
サイトを制作
部品（エッセンス）を選んで並べ、色や文字の設定（CSS）を変えていくと、Webページ1枚分の index.html ができあがります。プレビューには、変更がその場で反映されます。できたファイルは、4・5日目のNginxでそのまま配信できます。
ひな形から始める押すと、ページの中身が入れ替わります
部品を足すいちばん下に入ります
ページの組み立て上から順に表示されます
部品がありません。上の「部品を足す」から選んでください。
使い方
- ひな形を選ぶ：「実験のサーバー紹介」は、4・5日目の指導書にある
T3 Lab Web Serverのページを、部品を組み合わせて作り直したものです。「AIチャット」は、6・7日目に作るAIチャットのWebサイトの画面です（下の説明）。白紙から始めることもできます - 部品を足して並べる：「部品を足す」のボタンを押すと、選んでいる部品のすぐ下に入ります。並べ替えは、部品の左端のつまみをドラッグするか、矢印のボタンで行います
- 中身を書く：部品の名前を押すと、書き込む欄が開きます。プレビューの中の部品を押しても、その部品の欄が開きます
- 見た目を整える：「デザイン（CSS）」で、色・書体・文字の大きさ・幅・角の丸みなどを変えます。欄の横の
--accentやfont-sizeは、変わるCSSの名前です。「自分でCSSを書く」欄に、CSSを直接書くこともできます - 書き出す：「書き出す」でページの題名を決め、「index.html を保存」または「コピー」を押します。サーバーに置く方法は下の説明のとおりです
文章を書く欄では、**ここを太字** のように ** で囲むと太字に、[文字](https://example.com) と書くとリンクになります。空の行を1行入れると、段落が分かれます。表は、1行が表の1行で、マスとマスの間を | で区切ります（Excelからコピーして貼り付けてもかまいません）。
作業の内容の保存について
作業の内容は、このブラウザの中（localStorage）に自動で保存され、どこにも送信されません。ブラウザのデータを消すと消え、ほかのPCやブラウザには引き継がれません。学校のPCなどで続きを別の日にするときは、「書き出す」の「作業データを保存」で .json ファイルに残しておき、次に「作業データを読み込む」で開きます。画像を埋め込むとデータが大きくなり、ブラウザに保存しきれないことがあります。
できた index.html をサーバーに置く
4・5日目の手順3で書いた /opt/nginx/html/index.html を、このツールで作ったものに置き換えます。Nginxのコンテナはこのディレクトリをそのまま配信しているので（バインドマウント）、ファイルを置き換えるだけで反映され、コンテナを作り直す必要はありません。方法は2つあります。画像を埋め込んだファイルは長くなるので、方法2が確実です。
方法1：コピーして nano に貼り付ける
コードをコピーする
「書き出す」の「コピー」を押します。
ファイルを空にしてから開く
sudo truncate -s 0 /opt/nginx/html/index.html
sudo nano /opt/nginx/html/index.htmltruncate -s 0 は、ファイルの大きさを0にする（中身を空にする）コマンドです。前の中身が残ったまま貼り付けると、2つのページが混ざってしまいます。
貼り付けて保存する
Ctrl+Shift+V（または右クリック）で貼り付けます。Windows Terminalが「複数の行」や「大きなテキスト」を貼り付けようとしているという確認を出したら、「貼り付け」を選びます。Ctrl+O → Enter で保存し、Ctrl+X で閉じます（nanoの操作）。
方法2：ファイルを scp で送る
ファイルを保存する
「書き出す」の「index.html を保存」を押すと、Windowsの「ダウンロード」フォルダに index.html ができます。同じ名前のファイルがすでにあると index (1).html のような名前になるので、その場合は下のコマンドのファイル名を合わせてください。
Ubuntuのホームディレクトリへ送る
scp "$HOME\Downloads\index.html" t3admin@192.168.100.xxx:~/index.html$HOME は、PowerShellが自分のユーザーフォルダ（C:\Users\自分の名前）に置き換えてくれる書き方です。/opt/nginx/html へ直接送らないのは、そのディレクトリがrootの持ち物で、一般のユーザーでは書き込めないからです（パーミッション（権限））。
配信する場所へコピーする
sudo cp ~/index.html /opt/nginx/html/index.html
ls -l /opt/nginx/html一覧に index.html があり、日時が今になっていれば置き換わっています。
表示を確かめる
Windowsのブラウザで http://192.168.100.xxx/ を開きます。前のページが表示されたままなら、ブラウザが古いページを覚えている（キャッシュ）ので、Ctrl+F5 で読み込み直します。サーバーの中で確かめるなら、次のコマンドでHTMLの先頭の5行が表示されます。
curl -s http://localhost | head -n 5画像を埋め込まず、ファイル名（photo.jpg など）で指定したときは、画像のファイルも同じ方法で送り、/opt/nginx/html に置きます。Linuxはファイル名の大文字と小文字を区別するので、Photo.JPG と photo.jpg は別のファイルとして扱われます。
レポートで使うとき
指導書の手順は「簡単な見出しと本文を記述する」ことで、このツールを使う必要はありません。使った場合も、ブラウザに表示された画面は4・5日目のエビデンス1として使えます。ただし、レポートの中で「HTMLを自分で書いた」と説明するときは、このツールで組み立てたことを正直に書いてください。
AIチャットのページを作る（6・7日目）
6・7日目の最後（手順8）では、入力フォームのある index.html（フロントエンド）と、その入力をOllamaのAPIへ転送するプログラム（バックエンド）を組み合わせて、AIチャットのWebサイトを作ります。ひな形「AIチャット」は、このうちフロントエンドのページです。中心になる部品「AIチャット」が、質問の入力欄と会話の表示を受け持ち、質問をJSONにしてバックエンドへ送り、返ってきた答えを吹き出しで表示します。バックエンドは、このツールでは作れないので、手順8のたたき台などで別に用意します。
プレビューではAIにつながず、送った質問と送り先を入れた決まった文を、少し待ってから返します。プレビューの入力欄に質問を書いて「送信」を押すと、画面の動き（考え中の表示、吹き出し、かかった秒数）を確かめられます。
/chat/api/chat へ送り、Nginxがバックエンドへ取り次ぎ、バックエンドがOllamaへ転送する。送るJSONの形を選ぶ
部品「AIチャット」の「送るJSONの形」で、バックエンドとのやりとりの形を選びます。自分のバックエンドが受け取る形に合わせてください。
| 送るJSONの形 | ページが送るJSON | 答えを読む場所 | 合うバックエンド |
|---|---|---|---|
| たたき台の形（最初の設定） | {"prompt": "質問"} | answer | 手順8のたたき台（Flask）。PHPなどで同じ形に作ったもの |
| Ollama /api/generate の形 | {"model": "qwen2.5:0.5b", "prompt": "質問", "stream": false} | response | 受け取ったJSONを、そのままOllamaの /api/generate へ転送するもの |
| Ollama /api/chat の形 | {"model": …, "messages": [これまでの会話], "stream": false} | message.content | 受け取ったJSONを、Ollamaの /api/chat へ転送するもの。前のやりとりをふまえた答えになる |
送り先は、最初は api/chat です。先頭に / がないので、ページを http://192.168.100.xxx/chat/ で開いていれば /chat/api/chat へ送られ、Nginxがバックエンドへ取り次ぎます。ブラウザから直接 http://192.168.100.xxx:11434 のOllamaへ送る書き方は、ブラウザの制限（CORS）で止められるうえ、Ollamaを外に見せることになるので、バックエンドをはさんでください。
ページを置いて開く
バックエンドと取り次ぎを用意する
6・7日目の手順8のたたき台の (1) バックエンド、(3) コンテナの定義、(4) Nginxの取り次ぎを作ります。(2) の index.html は、代わりにこのツールで作ったものを使います。
書き出して送る
「書き出す」の「index.html を保存」を押し、上の方法2と同じく、Ubuntuのホームディレクトリへ送ります。
scp "$HOME\Downloads\index.html" t3admin@192.168.100.xxx:~/index.htmlたたき台の場所へコピーする
sudo cp ~/index.html /opt/chat-app/index.htmlたたき台のバックエンドは、ページを開くたびに /opt/chat-app/index.html を読むので、コンテナを起動し直す必要はありません。4・5日目の /opt/nginx/html ではない点に注意します。
開いて話しかける
ブラウザで http://192.168.100.xxx/chat/ を開き、質問を送って答えが表示されれば完成です。質問・答え・URL欄が1枚に写るように撮ると、6・7日目のエビデンス5になります。「答えが返るまでの時間を表示する」を入れておくと、答えの下に秒数が出ます。質問の長さやモデルによって時間がどう変わるかは、考察の材料になります。
エラーが表示されたとき
うまくいかないときは、吹き出しに「エラー：」から始まる文が出ます。その文をエラーを特定に貼り付けると、原因と直し方を探せます。よく出るものは次のとおりです。
- サーバーに届きませんでした（TypeError: Failed to fetch）
- 送信そのものが失敗した。バックエンドが動いていない、送り先のURLが違う、ページをパソコンのファイルのまま開いている（URLが
file://で始まる）、のどれか - サーバーの応答：405 Not Allowed
- ページを
/opt/nginx/htmlに置いて開いたため、送り先がバックエンドではなくファイルの置き場所になっている。/opt/chat-appに置き、/chat/から開く - サーバーの応答：502 Bad Gateway
- Nginxからバックエンドへ届かない。
cd /opt/chat-appでsudo docker compose psを実行し、chat-backendが動いているか確かめる - サーバーの応答：504 Gateway Time-out
- AIの答えが遅く、Nginxが待ちきれなかった。取り次ぎの設定に
proxy_read_timeout 300s;があるか確かめる - Ollamaに接続できません
- バックエンドからOllamaへ届かない。6・7日目の手順2の
OLLAMA_HOSTの設定と、ufwの設定を見直す - 返ってきたJSONに答えが見つかりません
- 「送るJSONの形」が、バックエンドの返すJSONと合っていない。バックエンドが返す名前（
answerなど）に合わせて選び直す
HTMLとCSSのしくみ
HTMLはページの中身と構造を、CSSは見た目を受け持ちます。このツールの「部品」はHTMLのタグの組み合わせで、「デザイン」はCSSの値です。書き出したファイルでは、CSSは <head> の中の <style> にまとめて入っています。CSSは、次のように「どこに」「何を」「どうする」の組で書きます。
h2 {
color: #0f172a;
border-bottom: 2px solid var(--accent);
}h2セレクタ。どの部分に効かせるか（ここではすべての h2 見出し）colorプロパティ。何を変えるか（文字の色）#0f172a値。どうするか（色を16進数で書いたもの）var(--accent)変数。:root で決めた --accent の値を使う書き出したCSSの最初にある :root { … } には、背景の色（--bg）やアクセントの色（--accent）などが変数としてまとめてあり、ページのあちこちから var(--accent) の形で使っています。ここの値を1つ変えるだけで、ページ全体の色がそろって変わります。「デザイン（CSS）」の設定は、主にこの変数を書き換えています。
| 部品 | 主なタグ | 意味 |
|---|---|---|
| メニュー | <nav> <ul> <a> | ほかの場所へのリンクの集まり |
| 見出しと導入 | <header> <h1> | ページの冒頭。<h1> はページにつき1つが基本 |
| 見出し | <h2> <h3> | 節の見出し。h1 → h2 → h3 の順に階層を作る |
| 文章 | <p> <strong> <br> | 段落、強調、段落の中の改行 |
| 箇条書き | <ul> <ol> <li> | 順番のないリスト、番号付きのリスト、その項目 |
| 画像 | <figure> <img> <figcaption> | 画像と、その説明。alt は画像が出ないときの代わりの文 |
| 表 | <table> <caption> <th> <td> | 表、その題名（表の上に出る）、見出しのマス、ふつうのマス |
| カードを並べる | <div> | 意味を持たない入れ物。CSSで見た目のまとまりを作るために使う |
| お知らせの枠 | <aside> | 本文を補う情報 |
| 引用 | <blockquote> | ほかから引いてきた文 |
| コード | <pre> <code> | 書いたとおりの空白と改行で表示する |
| プロフィール | <dl> <dt> <dd> | 「項目」と「内容」の組の並び |
| 区切り線 | <hr> | 話題の区切り |
| フッター | <footer> | ページの末尾（作った人、著作権の表示など） |
タグの中の class="card" は、CSSで「この部分」をねらうための名前です（CSSでは .card と書く）。id="about" はページの中の場所の名前で、リンク先に #about と書くとその場所へ移動します。<head> の <meta charset="utf-8"> は文字化けを防ぐ宣言、<meta name="viewport" …> はスマホで正しい大きさに表示させる宣言です。
うまくいかないとき
403 Forbiddenになる/opt/nginx/htmlにindex.htmlがない、または名前が違う（index (1).html、index.html.txtなど）。ls -l /opt/nginx/htmlで確かめる- 変更が反映されない
- ブラウザが古いページを覚えている。Ctrl+F5 で読み込み直す。
~/index.htmlに送っただけで、/opt/nginx/htmlにコピーし忘れていないかも確かめる - 文字化けする
- このツールの書き出しには
<meta charset="utf-8">が入っている。nanoに貼り付けたとき、先頭の行が欠けていないか確かめる - 画像が出ない
- ファイル名で指定した画像は、
index.htmlと同じ場所に置く。名前の大文字と小文字もそろえる。埋め込んだ画像なら、ファイルを送る必要はない - 書体が変わらない
- Google Fontsの書体は、ページを見る側のPCがインターネットにつながっている必要がある。つながっていないと、PCに入っている書体で表示される
- 作業の内容が消えた
- ブラウザのデータを消した、別のブラウザで開いた、プライベートウィンドウで作業した、のどれか。保存しておいた作業データ（
.json）を「作業データを読み込む」で開く
そのほかのエラーは、画面に出た文をエラーを特定に貼り付けて調べられます。