ウェブページがHTML(骨組み)・CSS(装飾)・JS(動作)・API(データ通路)で構成されていることをブラウザで直接確認し、「画像は数字(ピクセル)」とオブジェクト認識の概念を掴んで、次のビジョンラボへと繋げます。
S4-01 ウェブとは何か:画面に結果が表示される理由
ウェブは、誰でもアドレスさえ知っていれば開くことができる結果画面です。ウェブページはHTML(骨組み)・CSS(装飾)・JS(動作)の3つの言語で構成されています。それはまるで、人間の体の骨格・服・筋肉のようなものです。今回のセッションの目標である「写真をアップロードするとボックスで囲んでくれるミニウェブ」の全体像を描きます。
S4-02 HTML:ウェブページの骨組み作り
HTMLは「ここがリビング、ここがキッチン」と決める設計図。内容はタグ(包装紙)で囲み、index.htmlはダブルクリックするだけでブラウザが開きます。シンプルなページを作成し、見出しの文字を自分で書き換えてみます。
S4-03 CSS: 味気ない骨組みに服を着せる
CSSは骨組みの上に着せる服やメイク。セレクタ(何を)とプロパティ(どのように)がペアになって一行が完成します。ボタンの色だけをピンポイントで変えてもタイトルはそのままなのを見て、セレクタの力を体感します。
S4-04 JavaScript:ボタンを押したときに動作が起きるようにする
JavaScriptは動作を司る筋肉。「イベント(いつ)→動作(何を)」という流れで、「チャイムが鳴ったらドアを開ける」といったルールを作ります。ボタンを押すと文字が変わるように作り、実際に押してみます。
S4-05 フロントエンド・バックエンド・API:見えるものと裏で動くもの
ウェブはレストランです。フロントエンドは客が座るホール、バックエンドは実際に料理が行われる厨房、APIは注文窓口です。重い分析はなぜバックエンドの役割なのかについて触れます。
S4-06 画像は数字だ:コンピューターが写真を見る方法
写真はピクセル(小さな四角い点)の格子であり、ピクセル一つの色はRGBの3つの数字(0〜255)です。色さえも数字であるため、コンピュータが計算によって「分析」することができ、これが物体認識の出発点となります。
S4-07 物体認識:コンピューターがボックスで囲みラベルを貼る方法
物体認識は、位置(ボックス)+名前(ラベル)+確信度を一度に見つけ出す作業です。代表的なモデルであるYOLOは、写真全体を一度にスキャンするため高速で、リアルタイムカメラに適しています。結果の形式を手書きで描いて予測します。
S4-08 全体の流れをつなぐ:1枚の写真がボックスになるまで
写真選び → ボタン → API → モデル分析 → 結果 → ボックス描画、の6段階で各段階の担当(フロント・API・バックエンド)を確認します。複雑なアプリも「6マスの手順」で見れば一目で理解できます。
S4-09 AIに指示してミニウェブの骨格を作成し、構造を読み解く
画面の枠組みは整えつつ、核となる機能の部分は空けておいた「骨組み」を作ります。実際の分析が入る場所はTODOコメントで正直に表示し、「どこまでが本物なのか」を率直に示す姿勢を身につけます。
S4-10 セッションまとめ:ウェブと映像認識、1枚にまとめる
Webの3要素・構造・画像を3つのグループにまとめ、「準備中」を正直に表示する誠実な案内(honest UI)の姿勢で骨組みを締めくくります。次のビジョンラボへと繋げます。