Webアプリケーション概論：資料修正 - #83
Open
2i-7 wants to merge 16 commits into
Open
Conversation
初日にWebアプリケーションを1つも作ったことがない学生を対象に、 用語の暗記ではなく全体像をつかむことを目的とした構成に書き換えた。 - 3つの役割（画面・処理・保存）を軸に、第2章から第3章まで一貫させた - 各章に問いのページと結論のページを置き、図を主・文字を補助にした - 本文は40pxを下限にし、1スライド1メッセージに整理した - 図はSVGで作り直し、3色（画面=紺青・処理=煉瓦・保存=深緑）を 役割にだけ使う規則で統一した - 範囲外の内容（HTTP・フレームワーク・デプロイ）は他の講義に譲った Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
- SVG のコメントを削除（1424行 → 875行） - CSS のコメントは壊しやすい4箇所だけ残した （3色の使い分け／40px下限／default テーマの table 打ち消し／絵文字の img 化） - 旧構成でのみ使っていた画像 10件を削除 - 描画結果は変わらないことを PNG 36枚の比較で確認済み Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
- 表紙から「jig.jp インターン 初日」を削除 - 副題がなくなった表紙で h1 が中央に来るよう、下余白を h1 + p 側に移した （質疑応答スライドの間隔 20px は変わらない） - インターンのあとで：「ほかにもある」→「ほかにも」 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Contributor
|
確認できました！ |
「ほかにも」列を具体例の羅列から「カテゴリ名 + 具体例」に変更した。 何のジャンルの技術なのかが先に伝わるようにするため。 - 画面：メタフレームワーク（Next.js・Nuxt・SvelteKit・Astro） - 処理：サーバーサイドフレームワーク（Hono・NestJS） - 保存：データベース（MySQL・PostgreSQL・MongoDB） - 動かす場所：クラウドの実行環境（Cloudflare Workers・AWS Lambda） 「動かす場所」は画面・処理・保存の役割ではないのでグレーにした。 今回側は deno 授業で使う Deno Deploy。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
役割をまたぐ技術が多く、表で1つに割り振ると不正確になるため。 Next.js は画面と処理の両方をやり、Firebase・Supabase は処理と保存を兼ねる。 画面と保存は重ねていない。画面から直接データベースを触ることはなく、 必ず処理を通るため。26枚目の3層構造と対応する。 「動かす場所」は画面・処理・保存の役割ではないので円の外に置いた。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
円は中に文字を詰めることになり、円の左右の余白が意味を持たないため。 役割を横軸の3列にし、各技術がどこまでを担うかをブロックの幅で示した。 - 2列にまたがるものはグラデーションで色が混ざる - 階段状になるので視線が画面→処理→保存に流れる - 「動かす場所」は全部の土台なので、下に全幅のブロックで置いた - 円のときに落とした Nuxt・SvelteKit・Astro・Svelte を戻せた Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
「動かす場所」だと31枚目の「動かす環境」（ブラウザ・Deno）と紛れるため。 deno 授業の「他の人に見てもらえるようにデプロイする」と対応させた。 文字は20pxで他の行（26px）より小さかったので揃えた。 ラベル部分だけ太字にして、技術名と区別している。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
31枚目の「動かす環境」（ブラウザ・Deno）と同じ軸の話なので、語を揃えた。 手元で動かすのが Deno、クラウドで動かすのが Deno Deploy という続きになる。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
「伝わるデザイン」「図解デザイン9つのポイント」の指針で検証して直した。 - テキストをブロック中央揃えから左揃えに変更 → 6行の左端が画面・処理・保存の列頭の3か所に揃う - 見出しを32px→36px（ジャンプ率 1.23→1.38） - ブロック内の上下余白を21px→22px、高さを68px→70pxに - 土台との間隔を12px→18px（ブロック間4pxと差をつけて別グループにした） Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
文字が26pxで読みづらかったため。他の図の本文と同じ32pxに上げた。 見出しも36px→40pxで、ジャンプ率は1.25。 階段状に並ぶので担っていない範囲が空くが、そこが「間が抜けている」ように 見えていた。マトリクス全体に薄い下地（#f7f6f3）を敷いて、 空白が「担っていない範囲」だと分かるようにした。 - ブロックの塗りは下地と差をつけるため 0.16→0.18 - 縦の境界線の下端を下地に揃えた（480→474） Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
文字だけだと読みづらかったため、各技術のロゴを Simple Icons から入れた。 階段状のレイアウトはロゴを入れると横幅が足りず（保存の行が列幅を超える）、 3段構成に変えた。 - 段1: 役割ごと（画面・処理・保存） - 段2: 1つで2役こなすもの（Next.js・Nuxt / Firebase・Supabase） - 段3: 動かす環境（Deno Deploy・Cloudflare Workers） 枠内の余白は実測して上下22〜25pxに揃えた（中心のずれは1px以内）。 MySQL → PostgreSQL に変更。MySQL のロゴは「MySQL」の文字入りで 隣のラベルと二重になり、横長で他のロゴより小さく見えるため。 SvelteKit と AWS Lambda は Simple Icons に登録がないので外した。 Next.js と Deno のロゴは真っ黒なので本文色（#1c2126）に寄せた。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
紹介するものを次の3つに絞った。役割ごとの分類（React・Vue・PostgreSQL 等）は外した。 - メタフレームワーク：Next.js / Nuxt / SvelteKit / Astro - サーバーサイドフレームワーク：Hono / NestJS - サーバーサイドのコードの実行場所：Cloudflare Workers / Deno Deploy / Vercel Functions / AWS Lambda ロゴと3段の帯は維持した。背景はカテゴリが担う役割に対応させている （メタフレームワークは画面＋処理のグラデ、サーバーサイドは処理、実行場所はグレー）。 SvelteKit は Svelte のロゴで代用。AWS Lambda は Simple Icons も Devicon も Lambda 単体のロゴがないので名前だけにした。 枠内の余白は実測して上下17〜20pxに揃えた（中心のずれ0.5px）。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
どちらを採用するか決めるため、一時的に両方をスライドに置いた。 - 36枚目「①カテゴリ別」: メタフレームワーク / サーバーサイドフレームワーク / サーバーサイドのコードの実行場所 - 37枚目「②役割別」: 画面・処理・保存 ＋ 1つで2役こなすもの ＋ 動かす環境 決めたら片方のスライドと SVG を消す。slide.md にもその旨をコメントで残した。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
比較用に置いていた2案のうち役割別を採用した。 未採用のカテゴリ別の SVG を削除し、比較用に付けていた -roles の サフィックスを外した。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
前年度のスライドの内容をもとに修正しました。授業時間60分想定で、初心者向けの解説がメインとなるように修正しました。