2024年度
ヨーロッパ学 ICT IIA (火5時限 前期1単位)
ヨーロッパ学 ICT IIB (火5時限 後期1単位)
担当: 永田善久
授業形態: 演習

課題（後期）［2024-11-19 情報開示］

  1. HTML/CSS そして JavaScript を使って「動的な Web サイト」を作成（作業は「クライアント（ローカル）」側で行い，完成したらコンテンツを福大の「サーバ（ホスト）」へアップロードする）し
  2. 全作業を終えたら ynagata@fukuoka-u.ac.jp まで「Web ページの URL」を知らせるメールを送付すること
  3. 永田のメールアドレス（課題の宛先）には ＠ の後に cis が付かない ことに注意！
  4. 締切は「2025-01-15（水）の 18:00」（必着）
  5. 課題を受け取り次第，永田から提出者へ「確かに受け取りました」という内容のメールを「一両日中」に送信するので，各自必ず永田からの送信メールを確認すること．これにより一連の「課題提出」が完結する
  6. 永田からの「課題受け取りメール」が届かない場合，メール送受信に関して何らかの事故が起きた可能性があるので，大至急永田までメールで問い合わせること．その場合でも再提出の猶予は「2025-01-17（金）昼 12:00」まで. それ以降は「受け付けない」ので，できる限り余裕を持って課題を提出すること
  7. FURIKA（授業アンケート）への回答（12/11 水 から 1/14 火 まで）も，宜しくおねがいいたします！
ヨーロッパ学 ICT 課題ファイル置き場

EURO ICT Emacs & TeX のインストール法（Windows）

EURO ICT Emacs & TeX のインストール法（Mac）

目次
  1. シラバス
    1. 概要
      1. 前期: ヨーロッパ学 ICT IIA
      2. 後期: ヨーロッパ学 ICT IIB
    2. 授業の進行・方法［ヨーロッパ学 ICT IA・IBとも］
    3. アクティブ・ラーニング［ヨーロッパ学 ICT IA・IBとも］
    4. 到達目標
      1. 前期: ヨーロッパ学 ICT IIA
      2. 後期: ヨーロッパ学 ICT IIB
    5. 授業時間外の学習(予習・復習) ［ヨーロッパ学 ICT IIA・IIBとも］
    6. 成績評価基準および方法［ヨーロッパ学 ICT IIA・IIBとも］
    7. テキスト［ヨーロッパ学 ICT IIA・IIBとも］
    8. 参考書［ヨーロッパ学 ICT IIA・IIBとも］
    9. 履修上の留意点［ヨーロッパ学 ICT IIA・IIBとも］
    10. 授業計画
      1. 前期: ヨーロッパ学 ICT IIA
      2. 後期: ヨーロッパ学 ICT IIB
  2. 授業進度表
    1. 前期: ヨーロッパ学 ICT IIA
    2. 後期: ヨーロッパ学 ICT IIB

1　シラバス

1-1　概要

1-1-1　前期: ヨーロッパ学 ICT IIA

この授業は御自身のノート PC（Windows または Mac）を教室に持参していただく BYOD 形式，かつ実践演習を伴う授業です。スマートフォンやタブレットは不可ですので注意してください。

この授業ではヨーロッパ学 ICT IA/IB で学んだ事柄を前提とし，さらに高度な「テキスト主義 ICT」を身に付けます。具体的には，多言語処理を視野に入れた HTML/CSS による Web サイトの作成および公開法について学びます。

この授業ではまず HTML5 における文字コードや言語指定の方法から始め，文字参照（数値文字参照と文字実体参照）の仕方や各種の基本タグを用いた HTML の構文規則を学び，最後に習作的な Web ページを作成し，本学ウェブサーバを介してインターネットに公開してみます。

1-1-2　後期: ヨーロッパ学 ICT IIB

この授業は御自身のノート PC（Windows または Mac）を教室に持参していただく BYOD 形式，かつ実践演習を伴う授業です。スマートフォンやタブレットは不可ですので注意してください。

この授業ではヨーロッパ学 ICT IA/IB/IIA で学んだ事柄を前提とし，HTML5 に CSS3 を絡めた見栄えの良い多言語 Web ページの作成法について学びます。終盤では，ブラウザ向けのスクリプト系プログラミング言語である JavaScript を使って HTML/CSS を動的に制御する方法も学びます。最終的には自らの Web サイト（多言語仕様）を本学ウェブサーバを介してインターネットに公開します。

contents目次に戻る

1-2　授業の進行・方法［ヨーロッパ学 ICT IIA・IIBとも］

授業は講義と演習を組み合わせて実施します。講義は担当教員持参 PC の画面を教室のスクリーンに投影しながら行います。授業の進行における割合は，およそ講義（50%），演習（50%）です。

contents目次に戻る

1-3　アクティブ・ラーニング［ヨーロッパ学 ICT IIA・IIBとも］

アクティブ・ラーニング「対応」授業です。

contents目次に戻る

1-4　到達目標

1-4-1　前期: ヨーロッパ学 ICT IIA

  1. マークアップ言語（HTML）の原理を理解し，ソースコードを記述できる［DP: B-3 技能］
  2. HTML の基本的なタグを使える［DP: B-4 技能］
  3. 本学「内」そして「外」から本学ウェブサーバにコンテンツを転送できる［DP: B-4 技能］
  4. HTML においてリスト，表，画像を取り扱える［DP: B-4 技能］
  5. 理解の不確かな事柄をWebで検索し，自ら解決することができる［DP: C-2 態度・志向性］
  6. 学友と互助的な関係を保ち，協力し合いながら行動できる［DP: C-2 態度・志向性］

1-4-2　後期: ヨーロッパ学 ICT IIB

  1. Web サイトを作成する際「論理構造」（HTML）と「視覚デザイン」（CSS）を分離することの意義を理解し，ソースコードを記述できる［DP: B-3 技能］
  2. ナビゲーション，ポジション，フロート，CSS の各種セレクタ等を使って Web ページのレイアウトや編成を制御できる［DP: B-4 技能］
  3. 多言語 Web サイトをインターネットに公開できる［DP: B-4 技能］
  4. JavaScript を用いた簡単な「動的 Web ページ」を作成できる［DP: B-4 技能］
  5. 理解の不確かな事柄をWebで検索し，自ら解決することができる［DP: C-2 態度・志向性］
  6. 学友と互助的な関係を保ち，協力し合いながら行動できる［DP: C-2 態度・志向性］

contents目次に戻る

1-5　授業時間外の学習(予習・復習)［ヨーロッパ学 ICT IIA・IIBとも］

予習: 前もってアナウンスされた「学習範囲」の「実践演習」（60分）。
　復習: 学習事項のその都度の点検および確認。その上で「予習」に取り組むこと（60分）。

contents目次に戻る

1-6　成績評価基準および方法［ヨーロッパ学 ICT IIA・IIBとも］

本授業は各到達目標の達成度を基準として，平常点（出席状況・授業への参加姿勢など）60点（到達目標: 1, 2, 3, 4, 5, 6），期末課題40点（到達目標: 1, 2, 3, 4）という配分で成績を出します。授業開始の定刻時間から15分以内の遅刻であれば認めますが，この場合の平常点に関わる評価は1/2とし，それ以降の遅刻は欠席とみなします。ただし，後日証明になる書類が呈示された場合に限り，欠席・遅刻扱いを取り消します。

定期試験を実施しないため，再試験を受験することはできません。

contents目次に戻る

1-7　テキスト［ヨーロッパ学 ICT IIA・IIBとも］

授業で用いるテキスト，および，演習用ファイルは，以下のページよりダウンロードしてください。

ヨーロッパ学 ICT ファイル置場

contents目次に戻る

1-8　参考書［ヨーロッパ学 ICT IIA・IIBとも］

contents目次に戻る

1-9　履修上の留意点［ヨーロッパ学 ICT IIA・IIBとも］

この授業では御自身の「ノートPC」（Windows や Mac）を教室に持参していただきます。スマートフォンやタブレット端末（iPad 等）は不可です。

本授業では「出席」を厳密に取り扱います。学生証をカードリーダーにかざし忘れた場合は，必ずその授業の直後までに申し出てください。

自分の PC にインストールした GNU Emacs を日常的に使いこなすことが「テキスト主義 ICT」習得における一番の近道です。

IA → IB → IIA → IIB といった段階を経ない受講は知識・理解・技能の点から不可能です。

contents目次に戻る

1-10　授業計画

1-10-1　前期: ヨーロッパ学 ICT IIA

1（スタートアップ授業）Emacs の HTML+ モード
2HTML と CSS の基礎
3HTML5 における文字コード・言語指定
4文字実体参照と数値文字参照
5FileZilla を使った SFTP
6ブロックレベル要素 1: h, p, pre, blockquote
7ブロックレベル要素 2: ul, ol, dl, table, caption
8ブロックレベル要素 3: form, hr, address, div
9インラインレベル要素 1: a, b, br, em
10インラインレベル要素 2: i, img, q
11インラインレベル要素 3: sub, sup, tr, span
12div と span
13リスト
14表
15総括と FURIKA 授業アンケート

contents目次に戻る

1-10-2　後期: ヨーロッパ学 ICT IIB

1（スタートアップ授業）CSS セレクタの活用 1
2CSS セレクタの活用 2
3CSS セレクタの活用 3
4文字，見出しの制御
5段落の制御
6セレクタの活用
7文字・見出し・段落の制御
8ナビゲーション
9リンクと画像
10フォーム
11ポジションとフロート
12Web ページのレイアウトと Web サイトの編成; Web サイトの公開
13JavaScript の有効化
14DOM（Document Object Model）による年月日・時刻のコントロール
15DOM によるイベント処理（Ajax）と総括; FURIKA 授業アンケート

contents目次に戻る

2　授業進度表

2-1　前期: ヨーロッパ学 ICT IIA

1—スタートアップ授業 [クリックして視聴！]. テキスト pp.30–32, 特に「第14講 HTML の基礎」をよく読んでおくこと（分からない術語が出てきたとしても，現段階では，無問題）.
24/16(火)EURO ICT Emacs & TeX のインストール法（Windows）の「4-6. Emacs を簡便に呼び出すための Windows のカスタマイズ」まで済み. 次回は「4-7. Emacs のフレーム調整」からと FileZilla のインストールなど.
34/23(火)FileZilla のインストールと「福大の内から」fuhp サーバへアクセスするための設定完了. 次回は「福大の外から」fuhp サーバへアクセスするための設定（秘密鍵・公開鍵の作成）など.
44/30(火)「福大の内から」fuhp サーバへアクセスする「2つの方法: CUI(CLI) と GUI」. 「秘密鍵・公開鍵」の作成と（福大の内から）fuhp サーバの然るべき場所（~/.ssh）へ「公開鍵」（id_rsa.pub を authorized_keys という名前でコピーしたもの）をアップロード. ファイル・パーミッション（chmod 700 ~/.ssh）の変更. authorized_keys はデフォルトで 644 で OK. 次回は「福大の外から」fuhp サーバへ「CUI および GUI で」アクセス.
55/7(火)「福大の外から」fuhp サーバへ「CUI および GUI で」アクセス. 次回にもう一度.
65/14(火)「福大の外から」fuhp サーバへ「CUI および GUI で」アクセスの実践（成功！）. fuhpサーバに「ict2b」コンテンツ一式をアップロード，.htaccess.fukuoka-u と .htaccess.deny_All の（中身）チェック，fuhpサーバへのアクセステスト（PCから，スマホから，RWD: Responsive Web Design）.
75/21(火)index.html と test.css を「0から作成」して「fuhp サーバに upload」. インターネット上で確認. C-x C-; でコメントの toggle.
85/28(火)css/responsive.css を使えるように設定. 「箇条書き」（番号付き，番号なし，入れ子，混合），C-x RET C-\ RET latin-prefis で input method を latin-prefix へ. C-\（現在の input-method を on/off［toggle キー］）. 自ら選択した「画像（jpg/png）」そして「動画（mp4）」を今のうちから用意しておくこと.
96/4(火)responsive.css の編集（h2, footer セレクタに関して），レギュラーな表（table, caption, tr, th, td タグ）とイレギュラーな表（動かない電卓．colspan, rowspan）.
106/11(火)20190609_lc_2.jpg

「静画」の扱い方（RWD），C-x 8 RET を使った「ユニコード名」もしくは「コードポイント」による「文字の直接入力法」について，メールアドレスを「HTMLコメントを使って分断」する方法.

<h2>静画</h2>
<figure style="text-align: center;">
  <img src="./img/20190609_lc_2.jpg" style="width: 100%;" alt="ヨーロッパミヤマクワガタの画像" />
  <figcaption>ヨーロッパミヤマクワガタ <b><i>Lucanus cervus</i></b> ♂</figcaption>
</figure>
116/18(火)HTMLにおける16進数コードポイントを用いた文字の入力法，表の拡張練習.
126/25(火)20100822_lc.mp4

「動画」の扱い方（RWD），「字幕」の付け方（WEBVTT）. なお，ローカル環境「（Apache などの）ウェブサーバ」が使えるようになっていなければ，WEBVTT（字幕）は「ホスト（ウェブサーバ）」にコンテンツをアップロードし，インターネット上で確認する必要がある．また，ブラウザによっては「デフォルトで字幕がオフ」となっている場合もあるので注意すること.
137/2(火)「課題」に関する質問受付.
147/9(火)「課題」に関する質問受付.
157/16(火)「課題」に関する質問受付と提出締切に関する注意喚起. FURIKA.

contents目次に戻る

2-2　後期: ヨーロッパ学 ICT IIB

1—スタートアップ授業 [クリックして視聴！]. テキスト pp.30–32, 特に「第14講 CSS の基礎」をよく読んでおくこと（分からない術語が出てきたとしても，現段階では，無問題）.
29/17(火)probe.zip

local/client で作業，host/server へコンテンツをアップロード（またはそこからローカルへダウンロード）の説明，福大の「中」からと「外」からでは「アクセスするポートが異なる」ことの説明，「外」からアクセスするためには「公開鍵・秘密鍵」ペアを作る必要があるので，これらを PowerShell 上で作成（ssh-keygen -t rsa -b 2048 -f id_rsa），公開鍵を authorized_keys へリネーム，FileZilla（GUI のファイル転送ソフト）のインストール，FileZilla の設定（途中）まで済み. 宿題: FileZilla の設定を自分で（学友の力も借りながら），できるところまで，完遂せよ.
39/24(火)FileZilla「中から」と「外から」のアクセス設定済み，永田スマホをルーターとし「仮想的な外から接続」のテスト済み，fuhp ウェブサーバへの接続成功確認，ict2b.zip ダウンロード，アップロード，Web 確認.
410/1(火)受講生全員の fuhp_inside, fuhp_outside の ssh 通信設定完了，接続テストもクリア. ict2b.zip をローカルにダウンロードし展開，これを fuhp サーバにアップロード. サーバ側で .htaccess を .htaccess.denyfromall とファイル名変更することで https://www.cis.fukuoka-u.ac.jp/~学籍番号/ict2b/ でインターネットアクセスできることを確認. GNU Emacs のインストール（一部受講生）.
510/8(火)教員の忌引により休講.
610/15(火)probe.zip をクライアントの work に展開. その中のコンテンツをサーバ public_html 直下にアップロード. h1 タグ内の編集（自分の名前に変更）. クライアントサイドで動くプログラミング言語 JavaScript を使って「英語での今日」を出力. index.html をサーバにアップロードし，今日・明日のように日を変えて「インターネット上」で確認すること！
710/22(火)index.html を編集し，JavaScript コード箇所を「日本語」対応に変更. ウェブサーバに index.html をアップロードしインターネット上でも（ブラウザで）確認. インターネット上で https://wem.hum.fukuoka-u.ac.jp/~ynagata/ict2b/ajax_jquery.html（サーバサイドで動くプログラミング言語 PHP 稼働）と https://www.cis.fukuoka-u.ac.jp/~ynagata/ict2b/ajax_jquery.html（サーバサイドで動くプログラミング言語 PHP なし）の違いを確認［Ajax を用いた非同期通信のテスト］.
810/29(火)HTML/CSS（静的: static），動的（dynamic）なWeb構築には「プログラミング言語の併用」が必要. サーバサイドのプログラミング言語: PHP, Ruby, Python, Perl 等々. クライアントサイドのプログラミング言語: JavaScript. ssh を使って fuhp サーバへ「学内から」アクセス. which php, ruby, python3, perl 等のコマンドを使って，これらが「存在」はしているものの，Web では使用できないことを確認. uname -a や httpd -v で Linux や Apache のバージョンも確認. responsive.css の .ol_var や .ul_var といった「クラス指定」の css を index.html へ応用するテスト.
8'11/9(土)10/8(火)の補講. 3限，A613教室.
911/12(火)index.html を second.html へコピー. h1 タグ箇所を除き，コンテンツを全削除して保存. 次に ict2b/javascript.html から「白雪姫」（多言語テキスト変換の JavaScript コード箇所）の部分を second.html へ貼り付け. 編集開始. HA: JavaScript コード箇所を Deutsch, English, 日本語の3言語に変更し，テキスト箇所をそれぞれ Grüß Gott!, Good day!, こんにちは！ に書き直せ.（次回は index.html と second.html 間のハイパーリンク化から）
1011/19(火)responsive.css（置き換え用）

ict2b ディレクトリ内の multilang.html を「見本」とし，その中にある *.css ファイル箇所，nav 箇所，script 箇所を index.html と second.html へコピーし，fonts, jpg, js, png, webfonts ディレクトリも全て public_html 直下へコピーすることで「ナビゲーション・バー & ハイパーリンク」を RWD で実現.
1111/26(火)
1212/3(火)
1312/10(火)
1412/17(火)
1512/24(火)

contents目次に戻る

classes_html授業のページに戻る