GOOGLE CLOUD BASICS
講師向けガイド:準備・支援・評価
アカウント操作を代行するのではなく、受講者が条件と影響を説明できるよう支援します。
アニメと具体例手順付き演習成果物とレビュー進捗保存・完了チェック
授業前に準備する
- 各PCでエディター・ブラウザー・配布ZIPを確認し、見本を開く。Windowsの拡張子とmacOSの作業場所を確認する。
- 公式資料の上限・対象用途・契約条件を受講日に再確認する。既存業務環境を使わず、教材専用の対象と所有者・片付け日を決める。
- アカウントのMFA・回復・最小権限を確認する。組織規則で外部連携ができない場合はローカル演習に切り替え、外部操作は未実施として扱う。
- 完成例と課題用の改変例を用意し、画像欠落・古いCSS・権限不足の原因表を配る。外部公開先を意図的に壊す演習はしない。
- 料金通知を自動停止と誤解していないか確認し、公開量と確認頻度を決める。
各章のつまずきと確認する成果物
| 章 | 支援する点 | 確認する証拠 |
|---|---|---|
| 1 完成見本と学習の全体像 | 見本をコピーしただけで完成にする:第7章で読み手に合わせて文章・構成を変える。 / 最初から実在する住所や顔写真を使う:練習は架空情報と配布素材から始める。 | 見本の「文章」「見た目」「画像」「公開先」を担当するファイル・サービスに分けた図を描く。自分のサイトの完成条件を3つ書く。 |
| 2 ホームページ、Firebase、Google Cloudの基本 | HTTPSなら何を掲載しても安全:公開ファイルは閲覧者が保存・調査できる。 / 保存したのにWebが変わらない:公開操作とキャッシュ確認が必要。 | 「CSSのファイル名を変更したのにHTMLのリンクを変えなかった」場合を図にして、どこで失敗するかを説明する。 |
| 3 制作環境の準備 | ファイルを2か所へ展開して別の方を編集:ブラウザーの場所とエディターの作業場所を照合する。 / 画像がない:assetsフォルダーを含めて展開したか確認する。 | エクスプローラーまたはFinderとエディターで同じ3ファイルの場所を示す。変更・保存・再読み込みの前後を記録する。 |
| 4 HTMLで文章・画像・リンクを配置する | 閉じタグの消し忘れ:直前の編集を戻し、小さな単位で変更する。 / 画像ファイル名の大小文字違い:公開先では別名として扱われる場合がある。 | 商品カードを1つ増やし、説明を2文追加する。主題を変えずに、見出しの階層とリンク先を保つ。 |
| 5 CSSで色・余白・レイアウトを整える | CSSが全く効かない:link href、保存場所、開発者ツールの404を確認する。 / 全部!importantにする:競合するセレクターを先に調べる。 | テーマ色を2色に絞り、カードの間隔と見出しの大きさを調整する。変更理由を「かわいい」だけでなく読み手の目的と結びつけて書く。 |
| 6 スマートフォンに対応する | overflow:hiddenで内容を隠すだけ:原因の固定幅を直す。 / 端末表示だけで完成とする:可能な範囲で実機・別ブラウザーも確認する。 | 意図的に画像へwidth:900pxを付けてはみ出す原因を観察し、width:100%へ戻す。390pxと1280pxで同じ情報が読めることを確認する。 |
| 7 見本を自分のオリジナルページに変更する | リンク先のidを変えてリンクだけ古い:名称変更時は参照元も確認する。 / 秘密をHTMLコメントへ隠す:コメントも公開されるため削除する。 | 見本から文章3か所以上、構成1か所以上、見た目2か所以上を変更する。変更の目的と、完成条件を満たした証拠を残す。 |
| 8 アカウントとプロジェクトの準備、無料条件とセキュリティの確認 | 既存の業務用プロジェクトを使う:専用IDと用途を照合する。 / 無料トライアルを始めないとHostingが使えないと思う:Spark基本課題では不要。 | 「Spark」「Blaze」「Cloudトライアル」「Cloud無料利用枠」の4枚のカードを作り、課金アカウントの要否・期間・上限後の扱いを整理する。 |
| 9 ローカル環境で動作を確認する | Port5000が使用中:他の自分の開発サーバーを停止するか、設定を5001へ変更してログのURLを開く。 / 初期化で上書きした:バックアップか配布ZIPのindex.htmlへ戻す。 | 画像を一度だけ間違った名前で参照し、開発者ツールに404が出ることを確認して修正する。公開前点検表に結果を残す。 |
| 10 ホームページをHTTPS公開する | Permission denied:ログイン本人とプロジェクト権限を確認し、必要権限は管理者へ依頼する。 / Welcome画面が出る:init時にpublic/index.htmlを上書きしていないか確認する。 | 初回公開のURLとローカル画面を比較し、同じ内容が見えることを確認する。未実施の場合は実施済みチェックを付けない。 |
| 11 内容の更新と、公開に失敗した場合の対処 | 連打で何度も公開する:先に最初のエラー原因を調べる。 / キャッシュだけを疑う:対象URLと実ファイル、公開成功ログを先に照合する。 | 存在しないCSS名を指定する失敗をローカルだけで再現し、404の場所から原因を修正する。実際の公開先をわざと壊さない。 |
| 12 利用状況・料金の確認と、不要な公開環境の削除 | 表示名だけを見て削除:必ずプロジェクトIDを照合する。 / Hostingを止めたのでCloud Runも消えたと思う:別サービスは別に確認する。 | 「公開停止」「古いリリース削除」「専用プロジェクト削除」の対象と影響を表にする。共有プロジェクトで削除してはいけないものを挙げる。 |
| 13 最終課題と完成チェック | 公開できたら終了:更新と利用確認、削除までが課題。 / スクリーンショットへ秘密を写す:メール・トークン・請求情報を伏せる。 | 3分のデモで、誰のためのサイトか、ファイル構成、公開ルート、変更方法、利用上限、片付け方法を説明する。 |
| 14 発展課題:Cloud Runによる公開 | Cloud Runを削除しただけで保存料金も止まると思う:Registryやソース保存を確認する。 / deployが権限エラー:利用者とビルド・実行IDは別なので、それぞれの必要権限を確認する。 | SparkとCloud Runの構成図を並べ、課金対象になり得る箇所を色分けする。実公開は任意で、未実施の場合も見積りと削除計画を提出する。 |
評価基準(各0〜2点、合計16点)
0:未実施または根拠なし/1:支援を受けて実施・説明/2:自分で実施し結果と理由を説明。合否の目安は12点以上かつ、安全・料金・片付けの必須項目に0がないこと。未実施の外部操作を完了扱いにしません。
| 観点 | 2点の基準 |
|---|---|
| 目的と独自性 | 対象を定め、文章・構成を目的に合わせて変更 |
| HTML | 見出し階層・画像alt・リンクが適切 |
| CSSとスマートフォン | 390pxと1280pxで内容と操作を確認 |
| 公開構成 | 基本ルート・対象ID・HTTPSを説明し確認 |
| 更新と切り分け | 変更前後と失敗の確認順を記録 |
| 安全(必須) | MFA・最小権限・公開情報・認証情報を点検 |
| 料金(必須) | 制度・上限・期限・通知の限界を区別 |
| 片付け(必須) | 専用対象を照合し停止・削除・残存を記録 |
授業後の確認
受講者ごとに「公開継続/停止/削除」「所有者」「対象ID」「次の確認日」を残します。共有リソースや他の授業のプロジェクトを削除しないよう照合します。サンプルZIPには実行環境や秘密情報を含めません。配布画像は独自SVGで、改変・公開に利用できます。
公式情報の確認日:2026年10月25日(日本時間)。画面・上限・契約条件は変わるため、実行前にも公式資料と自分の契約を確認してください。ログや画面の例は説明用で、実環境の操作結果ではありません。
- Firebase:料金プランとCloudプロジェクトの関係 ↗
- Firebase Hosting:容量・転送量・上限時の扱い ↗
- Firebase CLI:OS別導入・認証・コマンド ↗
- Firebase Hosting:初期化と公開 ↗
- Firebase:ローカル確認と公開前テスト ↗
- Firebase:リリースとバージョン管理 ↗
- Google Cloud:無料トライアルと無料利用枠 ↗
- Cloud Run:実行・通信料金 ↗
- Cloud Build:ビルド料金 ↗
- Artifact Registry:保存・通信・スキャン料金 ↗
- Cloud Billing:予算通知 ↗
- Cloud Run:ソースからの公開・必要権限 ↗
- Google Cloud CLI:インストール ↗
- Google Cloud:プロジェクトの終了 ↗
