基本情報

学部 IT総合学部
科目 Web応用
教員名 中島 俊治
年度 / 学期 2019年度春学期
開講期間 2019/4/4  ~  2019/8/8
科目履修区分 専門演習(選択)/専門応用(選択)/専門応用科目
単位 2
科目レベル 3

ページの先頭へ戻る

科目概要

本科目は、Webの技術のひとつである「HTML5」を学ぶ。HTML5は、Webページの制作だけではなく、ダイナミックなWebアプリケーションを制作することができる。例えば、コンテンツやデザインの動的なコントロール、音声や映像の再生停止、グラフや図形の描画、アニメーション、ゲーム、位置情報取得、加速度やセンサの値の取得など数限りない。本科目では、HTML5によるWebアプリケーション開発の概要を講義し、実際に制作演習することで、HTML5の技術を習得しWebの可能性を探求する。

ページの先頭へ戻る

科目目標

①HTML5におけるJavaScriptの概要と基礎的な仕様が理解できる
②JavaScriptによるページのコントロールの仕組みが理解できる
③Canvas APIによる描画の基礎理解と制作ができる
④組込オブジェクトの基礎を理解できる
⑤その他のAPIの基礎を理解できる

ページの先頭へ戻る

履修前提条件

・Web入門(旧:ウェブ入門)
の単位を修得済みであること

※この科目では「実習環境利用料」として授業料とは別に3,000円が徴収されます。

・演習中心なので、PC・ファイル・テキストエディタ・ブラウザなどの操作・テキスト入力等が行えること。
・必須ではないが、ネットに接続可能なスマートフォンやタブレットがあるとよい。

・この科目の授業コンテンツは主にテキスト形式です。この点をよく理解した上で、履修登録を行ってください。

ページの先頭へ戻る

授業教材

教科書 ※購入必須

なし

ツール

ツール名 発売元 バージョン 必要PCスペック 備考
ツール名
任意のテキストエディタ
発売元
バージョン
必要PCスペック
ツールが動作するPCであれば可
備考
ファイルを作成するためのツール。詳細は『第1回』授業内で案内する。
ツール名
Google Chrome ブラウザ
発売元
Google Inc.
バージョン
最新のバージョンであること
必要PCスペック
ツールが動作するPCであれば可
備考
作成したファイルを閲覧するために使用するブラウザ。
ツール名
Cyberduck
発売元
David Kocher
バージョン
最新のバージョンであること
必要PCスペック
ツールが動作するPCであれば可
備考
ファイルをサーバに転送するためのツール。詳しいことは授業内で案内する。

参考資料 ※購入任意

なし

その他の資料

なし

ページの先頭へ戻る

期末試験実施方法について

Webテスト形式

ページの先頭へ戻る

授業時間外の学修と評価について

■復習:受講した講義内容は繰返し視聴を行って復習してください。
■予習:次回の講義の学習資料をダウンロードするなどして講義内容を確認してください。学習資料中の専門用語等わかりにくいものについては、学内外の電子辞書サービスやWeb検索エンジン等を活用して調べましょう。
■受講後は、授業内で紹介したURLやサンプルを閲覧、そして実際にWebアプリケーションを制作し、学びを深めてください。

ページの先頭へ戻る

評価配分

ディベート レポート 小テスト 期末試験 その他 合計
20 % 20 % 40 % 20 % 0 % 100 %
 20 %   20 %   40 %   20 %   0 %   100 % 

ページの先頭へ戻る

各回の授業内容

授業内容および目次 小テスト他 備考(教科書、参考資料等)
第1回 1)タイトル:
WebページとHTML5

2)学習目標:
広義HTML5と狭義HTML5、そして関連技術の意味と概要を理解する。

3)目次:
第1章 オリエンテーション
第2章 受講するにあたって
第3章 Webページとは
第4章 HTML5とは

この回の課題
・ディベート
・小テスト
 
第2回 1)タイトル:
JavaScriptの基礎

2)学習目標:
変数や四則演算など、基本的なJavaScriptの文法を学ぶ。

3)目次:
第1章 「JavaScript」の概要
第2章 「JavaScript」の記述
第3章 変数
第4章 四則演算

この回の課題
・小テスト
 
第3回 1)タイトル:
Webページのコンテンツの制御1

2)学習目標:
Webを操作するJavaScriptの重要な機能「要素の取得」を解説し、コンテンツの書き換えによる出力方法を学ぶ。

3)目次:
第1章 「要素の取得」の概要
第2章 「要素の取得」の記述
第3章 ページ出力(1)
第4章 ページ出力(2)

この回の課題
・小テスト
 
第4回 1)タイトル:
Webページのコンテンツの制御2

2)学習目標:
データをJavaScriptに伝える入力の方法を学び、「計算機アプリケーション」の制作を目指す。

3)目次:
第1章 「計算機」の制作について
第2章 入力
第3章 計算
第4章 出力

この回の課題
・小テスト
 
第5回 1)タイトル:
Webページのデザインの制御

2)学習目標:
引き続き「要素の取得」を使い、今度はCSSの動的な変更を学び、簡単な「Webアプリケーション」の制作を目指す。

3)目次:
第1章 ページデザインをコントロール
第2章 記述方法(1)
第3章 記述方法(2)
第4章 計算機への応用

この回の課題
・ディベート
・レポート
・小テスト
 
第6回 1)タイトル:
日付の取得

2)学習目標:
日付のデータを扱うDateオブジェクトを学び、「時計」の制作を目指す。

3)目次:
第1章 日付のオブジェクト
第2章 Dateオブジェクトの記述
第3章 デジタル時計の制作
第4章 アナログ時計の制作

この回の課題
・小テスト
 
第7回 1)タイトル:
数学的な処理

2)学習目標:
数学的なデータを扱うMathオブジェクトを学び、「おみくじアプリ」の制作を目指す。

3)目次:
第1章 数学のオブジェクトの概要
第2章 Mathオブジェクトの記述
第3章 乱数の生成
第4章 おみくじアプリの制作

この回の課題
・小テスト
 
第8回 1)タイトル:
マルチメディアの操作

2)学習目標:
マルチメディアを扱う Audio API、Video APIを学び、「ビデオプレイヤ」の制作を目指す。

3)目次:
第1章 音声と映像のコントロール
第2章 audio、video要素
第3章 audio要素のコントロール
第4章 video要素のコントロール

この回の課題
・小テスト
 
第9回 1)タイトル:
マウスの座標位置の取得

2)学習目標:
ページ上のマウスの座標位置の取得を学び、「お絵かき」アプリの制作を目指す。

3)目次:
第1章 マウスの座標の取得の概要
第2章 制作の準備
第3章 マウスの座標の取得
第4章 タッチイベントでの座標の取得

この回の課題
・小テスト
 
第10回 1)タイトル:
Webページの図形の描画1~基本

2)学習目標:
HTML5の最大の立役者であるCanvas APIを使った図形描画の基礎を学ぶ。

3)目次:
第1章 「Canvas API」の概要
第2章 記述方法と矩形描画
第3章 多角形と直線の描画
第4章 円弧・文字・画像の描画

この回の課題
・小テスト
 
第11回 1)タイトル:
Webページの図形の描画2~グラフの制作

2)学習目標:
Canvas APIを使った棒、折れ線、円などのグラフの制作方法を学ぶ。

3)目次:
第1章 グラフ作成について
第2章 棒グラフ
第3章 折れ線グラフ
第4章 円グラフ

この回の課題
・小テスト
 
第12回 1)タイトル:
Webページの図形の描画3~アニメーション

2)学習目標:
Canvas APIでのアニメーションの方法を学び、簡単な「ゲーム」の制作を目指す。

3)目次:
第1章 「Canvas アニメーション」の概要
第2章 アニメーション機能の実装
第3章 カスタマイズ(1)
第4章 カスタマイズ(2)

この回の課題
・ディベート
・レポート
・小テスト
 
第13回 1)タイトル:
GPSを使った位置情報の取得

2)学習目標:
スマートフォンやPCのGPS機能を利用して位置情報を取得するGeolocation APIの理解を深める。

3)目次:
第1章 位置情報の取得の概要
第2章 ファイルの作成
第3章 Geolocation APIの実装
第4章 Googleマップとの連携

この回の課題
・小テスト
 
第14回 1)タイトル:
さまざまなAPI

2)学習目標:
HTML5と連携する様々なAPIについて理解を深める。

3)目次:
第1章 HTML5のAPIについて
第2章 WebStorage API
第3章 WebAudio API
第4章 WebSpeech API

この回の課題
・小テスト
 
第15回 1)タイトル:
Webの将来~IoTとWoT

2)学習目標:
IoTのJavaScript版WoTについて理解する。

3)目次:
第1章 WoTについて
第2章 WoT(1)
第3章 WoT(2)
第4章 総括

この回の課題
・ディベート
・小テスト
 

ページの先頭へ戻る

open

Now Loading