2025年度前期Ｗｅｂプログラミング・実習

曜日・時限 金曜日３時限,金曜日４時限 期別 前期 週時間数 0
ナンバリング HB430711,HW430715
開講学科等 総合情報学部-デジタルゲーム学科
総合情報学部-ゲーム＆メディア学科
教員名 西田　憲司
西田　憲司
職務履歴

目的

ショッピングサイトや日記サイトなど、インタラクティブなウェブサイトの構築に必要な技術を基礎から学ぶ。また動的なWebページを作成する方法について学び、その過程においてセキュリティ問題についても考察する。HTMLとCSSの書き方の基礎から、インタラクティブなサイトをデザインするために必要なサーバサイドの技術まで、総合的な知識を獲得し理解することを目的とする。

授業計画

授業回 形式 学修内容 学修課題
1 A 授業ガイダンス
Webアプリケーションの基礎技術		 事前学修 シラバスをよく読んでおく。(0.5時間)
分かる範囲で良いのですべての教科書に目を通しておく。(1時間)
事後学修 Webページの構成要素についてよく調べる。(0.5時間)
授業内で解説した箇所を教科書で確認し、復習しておく。(1時間)
2 A,C HTMLの基礎知識(基本的なタグ、画像の挿入とリンクの設定、表の作成) 事前学修 HTMLの教科書の該当箇所を分かる範囲で読んでおく。(1時間)
事後学修 授業内で解説した箇所を教科書で確認し、復習しておく。(0.5時間)
画像やリンクなどの入ったウェブページを自分で作ってみる。機会があれば公開する。(1時間)
3 A,C CSSによる装飾(CSSの基礎、よく使われるCSS技法) 事前学修 CSSの教科書を分かる範囲で読んでおく。(1時間)
事後学修 既存のウェブページのデザインを実現するためのCSSについて考え調査する。(0.5時間)
さまざまなCSSの技法を繰り返し使用して、CSSの文法に慣れる。(1時間)
4 A,C アニメーション(マウスオーバーによる画像切り替え、ナビゲーションバーの作成)
レスポンシブデザイン		 事前学修 CSSの教科書の該当箇所を分かる範囲で読んでおく。(1時間)
事後学修 HTMLとCSS、必要な画像リソースを作成して自分で動くものを実装し動作を確認する。(0.5時間)
これまでの実習で作ったWebページをレスポンシブ化する。(1時間)
5 A,C 動的なウェブページの作成1(ブログ等の既存サービスの利用、PHPの基礎) 事前学修 ブログサービスやWikiといったウェブサービスを利用してみる。(0.5時間)
教科書を読んでPHPの基礎の文法と用法について予習しておく。(0.5時間)
事後学修 サンプルコードを動かす環境を構築できるように授業の内容を自分で何度も繰り返すこと。(1時間)
6 A,C 動的なウェブページの作成2(カウンタの作成、ファイルのロック、フォームによるデータ送受信) 事前学修 PHPでカウンタやフォームを作成する方法について、ウェブや教科書で予習しておく。(1時間)
事後学修 ファイルの読み書きについての注意点をよく復習しておくこと。(0.5時間)
ウェブ上のさまざまなフォームを自分で模倣して作成してみること。(1時間)
7 A,C 動的なウェブページの作成3(ログイン処理) 事前学修 PHPでログイン処理を行う方法について、ウェブや教科書で予習しておく。(1時間)
事後学修 授業ノートを読み返してクッキーとセッションの概念をよく理解する。(1.5時間)
8 A,C 動的なウェブページの作成4(データベースの利用とセキュリティの確立) 事前学修 データベースの基本的な概念について、ウェブや教科書で予習しておく。(1時間)
事後学修 普段利用しているウェブサービスにおけるパスワード入力のタイミングについて注意して観察するようにする。(1.5時間)
9 A,C REST API (概要、設計、実装、実行) 事前学修 REST APIの基本的な概念とサービス設計について、ウェブや教科書で予習しておく。(1時間)
事後学修 REST APIによるサービス設計を考え、プログラム仕様を考える。これまでの実習で作ったWebページをREST API化する。(1時間)
10 A,C Docker 1(概要、Docker Desktop、コンテナの起動) 事前学修 Dockerの基本的な概念について、ウェブや教科書で予習しておく。(1時間)
事後学修 Docker Hubにあるコンテナを探り、実際に起動して確かめてみる。(1時間)
11 A,C Docker 2(コンテナのビルドとコンテナリポジトリ、docker-compose) 事前学修 コンテナによるアプリケーションを設計を予習しておく。(1時間)
事後学修 これまでの実習で作ったWebサービスをコンテナ化する。(1時間)
12 A,C Kubernetes 1(概要、kubectlの使い方) 事前学修 Kubernetesの基本的な概念について、ウェブや教科書で予習しておく。(1時間)
事後学修 kubectlを使って何ができるのかを試してみる。(1時間)
13 A,C Kubernetes 2(設定yamlの書き方、Kustomize) 事前学修 Kubernetesによるサービス設計を考えてみる。(1時間)
事後学修 これまでの実習で作ったコンテナをKubernetesで運用する。(1時間)

授業形式記号

  • A:一斉授業（通常の講義）
  • B:問題発見・解決学習、プロジェクト学習
  • C:体験、実験、実習、演習など
  • D:調査 分析、解析など
  • E:ものづくり、作品制作
  • F:グループワーク（ディスカッション・ディベートを含む）
  • G:プレゼンテーション
  • H:地域・企業　連携型学習
  • I:その他

到達目標

○習得する資質・能力：　知識・理解力、応用力 【DP-W-1-1】【DP-W-1-1】
　1. HTMLとCSSを使った現代的なウェブページの制作ができる能力を身に付け、動的なウェブページの仕組みを理解することを目標とする。
　2. コンテナによるWebアプリケーション構築についての知識を身につけ、KubernetesでWebアプリケーションをデプロイすることができる。

評価方法と評価観点

評価方法 配点合計知識・理解力応用力コミュニケーション力態度・志向性創造力 合計
定期試験またはレポート試験 0%
小テスト、小論文 0%
グループワーク 0%
プレゼンテーション 0%
レポート、宿題 0%
授業での姿勢（ノート、質疑など） 0%
作品、パフォーマンス（実技、実演） 100% 70% 30% 100%
その他1(具体的に： 0%
その他2(具体的に： 0%
100% 70% 30% 0% 0% 0% 100%

教科書・参考書

教科書：
・オリジナルテキスト

参考書:
・「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」(Mana (著)、ISBN-10: 4797398892) ※購入は任意
・「仕組みと使い方がわかる Docker&Kubernetesのきほんのきほん」(小笠原種高 (著)、ISBN-10: 4839972745) ※購入は任意

オフィスアワー

質問等がある場合、授業終了後、直接対話をします。
電子メールでの相談は、授業開始時に提示するメールアドレスに送ってください。

その他

・ウェブブラウザの基本的な使い方を理解しておくこと。
・端末エミュレーターとVimの基本的な使い方を理解しておくこと。
・テキストエディタを使ったHTMLの編集と、Photoshopを使った簡単な画像編集を行うため、各アプリケーションが使えるようになっておくこと。
・理解できる範囲でよいので、教科書を事前に読んでおくこと。
・課題はGoogle Classroomにて出題と回収を行い、答え合わせまでに採点・フィードバックを行います。

実務経験のある教員による授業科目

現役ゲームプログラマーが、25年超の業界経験と最新の知見を生かした講義を行います。
戻る