新ゼミ生募集中!  入ゼミ相談も随時受付
 
プログラミング/情報処理I 授業計画

お知らせ>

・この計画は進捗に応じて変更される可能性があるため常に確認すること。
・PC等の設定により古いキャッシュデータが表示されることがあるため、ブラウザの更新ボタン等をクリックするか、キーボードの[F5]キーを押して表示内容を更新して確認する。
・大学のパソコン(ネットワークフォルダ)に資料やファイルを保存する場合は、マイドキュメント以下とする(デスクトップやその他の場所に保存すると自動で削除される)。
・演習は、毎回与えられるミッションをクリアしていく形で実施する。(1)まずは自力で解説を読み課題に取り組む。(2)うまくいかない場合は解説を丁寧に読みプログラムに間違いがないか繰り返し調べる(自己解決に努める)。(3)どうしても解決できない場合は隣席のチームメンバーに、それでも解決できない場合は他のチームメンバーに聞く。(4)チーム内で解決できない場合は教員に聞く。(5)作業が終了しチームで最初であれば教員からチェックを受け、OKが出れば、ミッションコンプリートを報告し、その後はチームメンバーを支援したり他メンバーのミッション完了をチェックする。(6)チームで2番目以降に作業が終了した人は、既にミッションコンプリートした人からチェックを受け、OKが出れば、ミッションコンプリートを報告し、その後はチームメンバーを支援したり他メンバーのミッション完了をチェックする。という流れで進める。
・授業時間終了20分前以後、チーム全員がミッションコンプリートしたら、チーム単位で退室して構わない。
・授業時間内にミッションコンプリートできなかった人や、授業を欠席した人は、未完のミッションを次回までの宿題とし、次の授業日の前夜までに課題を完了させ、自分の判断でミッションコンプリートを報告する。報告遅れは減点、未実施は得点なし(報告忘れも同様に扱う)。
・先に課されるミッションは、後のミッションの前提となるため、先のミッションを終わらせてから、後のミッションに着手すること。ミッション完了順序が異なる場合、既に演習したポイントでつまづくことになり、評価も下がることになる。
・授業期間後半で、サイトのデザインや構築に各自取り組む予定である。各回のミッションの理解が不十分な場合や、自信がない人は、ミッションの条件を変えて実施するなどして、理解を深めておくこと。
・教員使用の発表順ランダマイザー(IEで不具合:別ブラウザで使用)
・成績評価は最終課題等が終わり集計されるまで確定しないが、各自の自己評価情報を用いてこちらで成績評価を見積もることができる。あくまでも自己管理を支援する参考情報として捉えること。

    オリエンテーション
     授業をはじめるにあたり、計画、評価方法について説明する。 また、こちらにアクセスして、以下を報告する(括弧の中から選択)。
    (1)HTMLのレベル(全く経験なし、経験はあるが書けない、簡単なものなら書ける、自力でかなり書ける)
    (2)CSSのレベル(全く経験なし、経験はあるが書けない、簡単なものなら書ける、自力でかなり書ける)
    (3)パソコンレベル(友人一般と比べて苦手、得意ではない、少し得意、かなり得意なほう)
    環境設定とひな形ファイル
     初回授業として、今後プログラミング演習を行っていくための環境設定を行う。本日のミッションは以下。全て完了し、チーム内にコンプリートメンバーがいたらそのメンバーから、いなければ教員からチェックを受けること。
    1. こちらを参照して、演習(開発)環境、Terapadの設定、webkisoフォルダの作成、画面設定を実施せよ。なお、大学のパソコン(ネットワークフォルダ)にwebkisoフォルダを作成する場合は、マイドキュメント以下とすること(デスクトップ等に保存すると自動削除される)。
    2. こちらを参照して、HTMLとは何か、基本タグとは何か、入れ子構造とは何か、理解せよ。
    3. 基本タグを作成し、ひな形ファイルhina.htmlとして保存せよ。
    4. hina.htmlをコピーしてpro01.htmlを作成し、タイトルタグを「名城公園キャンパス学食紹介」とせよ。
    5. pro01.htmlの本文として「〜名城公園キャンパス学食紹介〜名城公園キャンパスの学食を紹介します。Byあなたの名前」と表示させよ。
    6. こちらを参照して、インライン要素とブロックレベル要素の違いは何か理解せよ。
    7. こちらを参照して、本文の2つめの「名城公園キャンパス」を太字に、「学食を紹介します」に下線を引き、「byあなたの名前」をイタリックにせよ。
    8. 本文の「〜名城公園キャンパスの学食紹介〜」のサイズを大きくし、それ以降の文字全ての色を「navy」にせよ。
    9. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    インライン要素の使い方
     よく使うインライン要素について演習する。前回のミッションを終わらせていない人は、前回分のミッションを終わらせてから以下を実施すること(前回知識をベースとしているため、クリアミッションの順番が異なる場合、評価が下がる可能性がある)。
    全て完了し、チーム内にコンプリートメンバーがいたらそのメンバーから、いなければ教員からチェックを受けること。
    1. 演習ファイルをダウンロードして、前回作成したwebkisoフォルダに保存(webkisoフォルダ未作成の人は前回ミッションが終わっていないことになるため前回のミッションを先にコンプリートすること)。演習ファイルは、こちら。webkisoフォルダに保存できたら、joho102a.exeをダブルクリックして解凍。
    2. 「pro02フォルダ」ができていることを確認し、できていたら、joho102a.exeは削除。
    3. webkisoフォルダの中に、pro02フォルダがあるか、もう一度確認し、違うフォルダにある場合は、pro02フォルダをドラッグ&ドロップでwebkisoフォルダの中に移動させよ。
    4. 前回作成したひな形ファイルhina.htmlをコピーしてwebkisoフォルダ内(pro02フォルダではないことに注意)に貼り付け、「pro02.html」と名前を変更せよ。その上で、Terapadでpro02.htmlを開き、前回の通り演習(開発)環境を整えよ。
    5. こちらを参照して、改行の方法、画像の表示方法、リンクの張り方を理解せよ。
    6. 理解できたら、pro02.htmlを編集し、タイトルに「メニュー」、本文に「メニュー一覧」と表示せよ(前回の復習)。
    7. pro02.htmlを編集し、「愛知学院大学ウェブサイト」という文字で書かれたリンクを追加し、クリックすると大学ウェブサイトのトップページが表示されるようにせよ(トップページのURLは検索するなどして調べること)。また、リンクの前で改行すること。
    8. 続けてpro02.htmlを編集して、「名城公園学食紹介」という文字で書かれたリンクを作成し、クリックすると前回作成したpro01.html(前回ミッションを完了していればwebkisoフォルダにpro01.htmlがあるはず)が表示されるようにせよ。また、リンクの前で改行すること。
    9. さらにpro02.htmlを編集し、「日進キャンパスの思い出」という文字で書かれたリンクを追加し、クリックすると先に解凍してできた「pro02フォルダ」の中のomoide.htmlが表示されるようにせよ。その際、リンクの設定は、こちらを参照して、相対パスで指定すること(omoide.htmlの保存フォルダは変えないこと)。
    10. 次に、解凍してできたpro02フォルダの中のomoide.htmlをTerapadで開いて編集し、「メニューに戻る」という文字で書かれたリンクを追加し、クリックするとpro02.htmlが表示されるようにせよ。リンクの設定は、先と同様、相対パスで指定すること。
    11. さらに、omoide.htmlを編集して、pro02フォルダに格納されているkeyaki.jpgとkoudou.jpgが表示されるようにせよ。画像の間は改行せよ。
    12. 表示された2つの画像に設定を追加して、(1)枠有り、(2)サイズ200×200で、(3)alt属性をそれぞれ「ケヤキテラス」「記念講堂」とせよ。
    13. omoide.htmlを続けて編集して、pro02フォルダの中のokunaiフォルダの中にある2つのファイルが表示されるようにせよ。その際、画像の設定は、先のリンクと同様、相対パスを使うこと(画像ファイルの保存フォルダは変えない)。画像の間は改行せよ。
    14. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    ブロックレベル要素の操作
     ブロックレベル要素について学び演習する。前回のミッションを終わらせていない人は、前回分のミッションを終わらせてから以下を実施すること(前回知識をベースとしているため、クリアミッションの順番が異なる場合、評価が下がる可能性がある)。
    全て完了し、チーム内にコンプリートメンバーがいたらそのメンバーから、いなければ教員からチェックを受けること。
    1. ひな形ファイルをコピーし「pro03.html」と名前を変更せよ。その上で、Terapadでpro03.htmlを開き、前回の通り演習(開発)環境を整えよ。
    2. こちらを参照して、ブロックレベル要素とは何か、前回演習で取り組んだインライン要素との違いは何か、理解せよ。
    3. こちらを参照して、見出しタグについて理解し、こちらの仕様書(文字データはpdfからコピー可)の見だし部分を作成せよ。
    4. こちらを参照して、段落タグと改行タグとの違い、区切りタグ、中央寄せのタグについて理解した上で、上記の仕様書1の見出し以外を完成させよ。
    5. この画像ファイルをダウンロード(右クリックして画像を保存)し、上記仕様書1の目次一覧の下(「沿革」の下)に表示させよ(インライン要素の復習)。その際、画像ファイルを段落タグで囲むこと。なお、画像表示の方法は、前回を思い出すこと(忘れた人はこちらを参照)。
    6. こちらを参照して、箇条書きの作成方法を理解した上で、上記の仕様書1の目次の「本学の使命」「行学一体」「報恩感謝」「沿革」を箇条書きにせよ。なお、箇条書きの各項の先頭の記号は四角とする。
    7. 上記の箇条書きの4つの項目の内、「本学の使命」「行学一体」「報恩感謝」をクリックすると、ページ内の詳細内容の箇所にジャンプするよう、ページ内リンクを設定せよ。なお、ページ内リンクの方法は、前回を思い出すこと(忘れた人はこちらを参照)。
    8. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    ブロックレベル要素の操作2
     前回に続きブロックレベル要素を演習する。前回のミッションを終わらせていない人は、前回分のミッションを終わらせてから以下を実施すること(前回知識をベースとしているため、クリアミッションの順番が異なる場合、評価が下がる可能性がある)。全て完了し、チーム内にコンプリートメンバーがいたらそのメンバーから、いなければ教員からチェックを受けること。
    1. ひな形ファイルをコピーし「pro04.html」と名前を変更せよ。その上で、Terapadでpro04.htmlを開き、これまでの通り演習(開発)環境を整えよ。
    2. こちらを参照してTABLEタグと、画面デザインの考え方について理解せよ。
    3. TABLEタグの理解を踏まえ、横3×縦9セルの表を作成せよ(各セルは未入力で良い)。
    4. 作成した横3×縦9セルの表を修正して、こちらの仕様書1の表を作成せよ(文字データはpdfからコピー可、TABLEタグの資料の属性の箇所をよく確認すること)。なお、ライムやオレンジの色指定はこちらの色見本を参照。
    5. この画像ファイルをダウンロード(右クリックして画像を保存)しpro04.htmlと同じフォルダに保存した上で、「表全体」の背景に設定せよ(背景色を設定したセルは背景色がそのまま残る形になる、TABLEタグの資料の属性の箇所をよく確認すること)。
    6. こちらを参照してdivタグの意義について理解せよ。
    7. divタグについての理解を踏まえ、pro04.htmlに続けて、こちらの仕様書2を作成せよ(文字データはpdfからコピー可)。
    8. 先のdivタグの説明資料を参照してスタイルシート適用のサンプルを確認し、pro04.htmlの適切な位置に以下をコピーせよ(スタイルシートの詳細は後日確認する)。作詞作曲者が緑に、歌詞が紺色になることを確認せよ。
    9. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    スタイルシートの基礎
     スタイルシートCSSの演習を行う。前回のミッションを終わらせていない人は、前回分のミッションを終わらせてから以下を実施すること(前回知識をベースとしているため、クリアミッションの順番が異なる場合、評価が下がる可能性がある)。全て完了し、チーム内にコンプリートメンバーがいたらそのメンバーから、いなければ教員からチェックを受けること。
    1. こちらを参照してスタイルシートCSSについて理解せよ。
    2. 以前作成したwebkisoフォルダに、演習ファイルをダウンロードして保存し(右クリックしてリンク先を保存)、ダブルクリックして解凍せよ(解凍後exeファイルは削除可)。
    3. 解凍されたフォルダpro05を参照し、pro05.html、pro05.cssと、imgフォルダの中に2つの画像ファイルがあることを確認せよ(なお以後これらのフォルダ構造や格納フォルダなど移動したりコピーしたりしないこと)。確認できたら、HTMLファイルとCSSファイルをTerapadで開き、これまで通り演習(開発)環境を整えよ。
    4. こちらを参照して、HTMLにCSSを適用する3つの方法を確認した上で、外部ファイルのCSSを読み込む方法で、pro05.cssをpro05.htmlに適用せよ。成功すると一部の文字が緑色に変化する。
    5. こちらこちらを参照してCSSの基本的な書き方を理解し、Terapadで開いたCSSファイルpro05.cssに、h1タグの文字色を青色(blue)に設定するCSSを追記し、確かにh1タグで囲まれた箇所が青色になることを確かめよ。
    6. Terapadで開いたCSSファイルpro05.cssに、上記のh1タグへの設定をそのまま応用し、ulタグ(箇条書き)の文字色を赤色(red)に設定するCSSを追記し、変化を確かめよ。
    7. こちらを参照し、pro05.cssを編集して、h1タグに、下線とフォントサイズ14ピクセルのスタイルを設定せよ。
    8. 同じ資料を参照し、pro05.cssを編集して、pタグに30ピクセルのインデントとフォントサイズ14ピクセルを設定せよ。
    9. 上記の資料とこちらの資料を参照し、pro05.cssを編集して、pro05.htmlにある箇条書きタグのフォントサイズ14ピクセル、太字、箇条書きのマークを■とするスタイルを設定せよ。
    10. こちらを参照し、pro05.cssを編集して(htmlファイルやCSSファイル、画像ファイルが格納されたフォルダを移動したりコピーせず)、pro05.htmlの背景全体に、解凍後のpro05フォルダの中のimgフォルダに格納されているstripe.jpgを、相対パスで設定せよ(ヒント:背景全体=body)。
    11. 同じ資料を参照し、pro05.cssを編集して(htmlファイルやCSSファイル、画像ファイルが格納されたフォルダを移動したりコピーせず)、pro05.htmlのh1タグに、解凍後のpro05フォルダの中のimgフォルダに格納されているbar.gifを、横方向への繰り返しモードで相対パスで設定せよ。
    12. idにスタイルを設定する方法を参照し、HTMLファイルを編集して「目次」のh1タグに「mokuji」というIDを設定する一方、CSSファイルを編集して、「mokuji」のIDに「太字、フォントサイズ20px、下線なし」のスタイルを指定せよ。目次の項目名のみが太字で大きなサイズとなることを確認すること。
    13. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    スタイルシートの基礎2
     前回に続きCSSの演習を行う。前回のミッションを終わらせていない人は、前回分のミッションを終わらせてから以下を実施すること(前回知識をベースとしているため、クリアミッションの順番が異なる場合、評価が下がる可能性がある)。全て完了し、チーム内にコンプリートメンバーがいたらそのメンバーから、いなければ教員からチェックを受けること。
    1. 以前作成したwebkisoフォルダに、演習ファイルをダウンロードして保存し、ダブルクリックして解凍せよ(解凍後exeファイルは削除可)。
    2. 解凍するとフォルダpro06ができるので、その内容を参照し、pro06.htmlとimgフォルダ(内容は画像ファイル2つ)、pdfファイル(2つ)があることを確認せよ。確認できたら、HTMLファイルをTerapadで開き、これまで通り演習(開発)環境を整えよ。この時点でpro06.htmlをブラウザで開くと構造のない文の羅列が表示される。
    3. pro06.htmlを編集して、解凍された仕様ファイルjoho06spec1.pdfに示されるように、見出しタグh2、段落タグp、divタグを設定せよ。設定後、pro06.htmlをブラウザで開くと、「経営学部の教育目標」の中見出しではじまり、「実力主義で、行く。」という大見出しで終わる、構造化されたシンプルなページが表示されることを確認せよ。
    4. pro06.htmlと同じフォルダに、「pro06.css」というCSSファイルがあればTerapadで開き、編集できるようにせよ(なければ作成する)。
    5. pro06.htmlを編集し、こちらに掲載されている「外部のCSSファイルを適用する方法」で、作成した「pro06.css」を読み込むようにせよ(この時点ではブラウザ上変化なし)。
    6. こちらを参照して、ウェブデザインのボックスモデルを理解せよ。特に、ボックス内の構造をよく確認すること。
    7. 作成したCSSファイルpro06.cssを編集して、もう一つの仕様ファイルjoho06spec2.pdfの説明(赤字部分)の最右上のdivボックスの設定をせよ。設定方法は、スタイル設定の基本idにスタイルを設定する方法背景の設定方法文字色等の設定方法を参照せよ。成功すると、キャンパスの写真を背景に白地で文章が表示された青枠のボックスができる。
    8. 上記と同様、CSSファイルpro06.cssを編集して、仕様ファイルjoho06spec2.pdfの残りの説明(赤字部分)を実現せよ。先と同様、スタイル設定の基本idにスタイルを設定する方法背景の設定方法文字色等の設定方法を参照せよ。成功すると、中サイズのボックスが2つ、小サイズのボックスが3つ、最下部に横長のボックスが一つ縦に並ぶ。
    9. 文字が溢れているボックスについて、こちらを参照して、overflowプロパティをscrollに設定し、文字溢れの問題を解消せよ。
    10. こちらを参照して、floatとclearによるボックスの配置方法を理解した上で、pro06.cssを編集して、上から2つめと3つめのdivボックスにfloatプロパティを設定し、設定したdivボックスが左に、続くdivボックスが右に回り込むことを確認せよ(ボックスが縦一列に並ばずfloat leftを設定したボックスが右に回り込めばOK)。
    11. 同様に、pro06.cssを編集して、上から4つめのdivボックスにclearプロパティを設定し、設定したdivボックスが、上で設定されたfloatの影響を逃れ、回り込まなくなることを確認せよ(複数のdivボックスをまとめてスタイル設定している場合は、まとめずに別々にスタイル設定することで対応する)。
    12. 同様に、pro06.cssを編集して、上から4、5、6つめのdivボックスにfloatプロパティを設定し、設定したdivボックスが左に、続くdivボックスが右に回り込むことを確認せよ。
    13. 同様に、pro06.cssを編集して、最後のdivボックス(id="message")にclearプロパティを設定し、設定したdivボックスが、上で設定されたfloatの影響を逃れ、回り込まなくなることを確認せよ。結果、ページ全体として、解凍されたフォルダ内の「最終完成図.jpg」のように(ボックス数が最上位1つ、2段目が2つ、3段目が3つ、4段目が1つ)になっているか確かめよ。
    14. pro06.cssでは、最上位のwidthが600px、2段目の2つのボックスのwidthが、いずれもその半分の300pxに設定されているはずだが、実際には「最終完成図.jpg」とは異なり、ボックスの右端が不揃いとなっている(2段目の右端が1段目より長くなっている)。2段目の2つのボックスのwidthだけを(300pxから)均等に短くして(それ以外は修正せず)、1段目と2段目のボックスの右端が直線的に揃うよう調整せよ。なお、ボックスサイズの計算は、こちらを参考にすること(ヒント:ボックス幅の合計はwidth+margin×2+padding×2+border-width×2)。
    15. 同じく、pro06.cssでは、3段目の3つのボックスのwidthはいずれも200pxに設定されているが、やはり「最終完成図.jpg」とは異なり、ボックスの右端が不揃いとなっている。3段目の3つのボックスのwidthだけを(200pxから)均等に(誤差1px以内)短くして(それ以外は修正せず)、3段目のボックスの右端が他の段の右端と直線的に揃うよう調整せよ。
    16. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    ウェブページデザインの実装
     これまで学んだHTMLとCSSの技術を総合して、ウェブページの実装に取り組む。前回のミッションを終わらせていない人は、前回分のミッションを終わらせてから以下を実施すること(前回知識をベースとしているため、クリアミッションの順番が異なる場合、評価が下がる可能性がある)。全て完了し、チーム内にコンプリートメンバーがいたらそのメンバーから、いなければ教員からチェックを受けること。
    1. こちらを参照してウェブページデザインの基本を理解せよ。
    2. 以前作成したwebkisoフォルダに、演習ファイルをダウンロードして保存し、ダブルクリックして解凍せよ(解凍後exeファイルは削除可)。
    3. 解凍されたフォルダpro07を参照し、pro07.htmlとpro07.css、imgフォルダ(中身は画像ファイル数個)あることを確認せよ。確認できたら、HTMLファイルとcssファイルをTerapadで開き、これまで通り演習(開発)環境を整えよ。
    4. pro07.htmlを編集し、スタイルシートを外部から読み込む形でpro07.cssを設定せよ。なお、これまで使用した説明資料は、こちらにまとめてあるので忘れた人は確認すること(以下同じ)。
    5. 完成図をイメージして以下の作業を行う。
    6. 資料1を参照し、pro07.htmlとpro07.cssを編集して、資料1と同じようにウェブページデザインの初期化と、全体領域の設定を実施せよ。
    7. 資料2を参照し、pro07.htmlとpro07.cssを編集して、資料2と同じように、ヘッダー表示とメインビジュアルを実装せよ。
    8. 資料3を参照し、pro07.htmlとpro07.cssを編集して、資料3と同じようにナビゲーション領域を実装せよ。
    9. 資料4を参照し、pro07.htmlとpro07.cssを編集して、資料4と同じようにコンテンツ領域とフッター領域を実装せよ。
    10. 全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    ウェブページデザインの実装2
     次回以降、ウェブサイト開発に取り組むにあたって必要ないくつかの事柄を理解した上で、 これまで学んだHTMLとCSSの技術を総合して、ウェブページの実装に取り組む。前回のミッションを終わらせていない人は、前回分のミッションを終わらせてから以下を実施すること(前回知識をベースとしているため、クリアミッションの順番が異なる場合、評価が下がる可能性がある)。全て完了し、チーム内にコンプリートメンバーがいたらそのメンバーから、いなければ教員からチェックを受けること。

    1. こちらを参照し、HTMLやCSSにコメントをつける方法を確認し理解せよ。
    2. こちらを参照し、デバッグ方法について確認し理解せよ。
    3. こちらを参照し、検索エンジン対策SEOについて確認し理解せよ。
    4. 以上で学んだ3項目について、コメントは以下の演習で使ってみること。デバッグ方法は必要なら使う。SEOについては後日の最終制作で使うこと。
    5. 以前作成したwebkisoフォルダに、演習ファイルをダウンロードして保存し、ダブルクリックして解凍せよ(解凍後exeファイルは削除可)。
    6. 解凍されたフォルダpro08を参照し、pro08.htmlとpro08.css、imgフォルダ(中身は画像ファイル数個)あることを確認せよ。確認できたら、cssファイルをTerapadで開き、これまで通り演習(開発)環境を整えよ。
    7. これまでの総復習として、pro08.cssのみを編集して(HTMLファイルは編集不要)、完成図を作成せよ。ヒントは、前回作成したcssファイルで、かなり似た構造になっている。なお、HTMLファイルにあるidとclassの使い分けは、こちらを見て思い出すこと。
    8. メンバー全員が終了したと相互に確認できたら、メンバーで揃ってこちらからミッションコンプリートを報告。
    最終制作1
     これまでに学んだことを踏まえ、最終制作課題としてチームでウェブサイトを構築する。経営学部の授業として、経営課題ないしはそれに準じる問題解決を狙いとしたウェブサイトとして、初めて名城公園キャンパスを利用する学生や来訪者が「便利に」「お得に」昼食をとれるようにすることを目的とした「名城公園キャンパスのランチサイト」を企画、設計し、構築する(キャンパスの外には出ないことを想定)。設計はチームで協力して行い、実装はひとり1ページ以上を担当して分担作業する。最終的に、各自が作成したファイルをまとめて一つのサイトとする。なお、チームで作業を進めるため、欠席者がいる場合でもミッションを遂行できるよう、ファイルを共有したり、相互に連絡できる体制を整えるなど配慮すること。最終課題=最終試験や最終レポートに相当するため、欠席者のため課題が完成しなかった場合など、全体の評価が下がる可能性がある。
    1. チームの代表操作者を決め、代表操作者の席に集まって作業せよ。代表操作者は、設計書のサンプルをこちらからダウンロードして保存せよ。この設計書には、基本的な(地味な)設計サンプルしか掲載されていない。
    2. ダウンロードした設計書ファイルを開き、チームで相談、協力して、まずは「サイト全体の共通事項のページまで」を作成せよ。設計するページ数は、チームメンバーひとり最低1ページは担当できるよう人数以上にすること。なお、画面や遷移(リンクのつなぎ方)については、こちらを参照する。これまで使用した説明資料や色見本などは、こちらにまとめてあるので必要があれば利用すること。設計は、見易さ、使い易さ、美しさ、独自性を評価する。当然、演習成果であり、テンプレートやウェブ作成のソフトやサービスは使わないこと(ソースを見ればわかる)。
    3. 続けて、チームで協力して、設計書ファイルの「ディレクトリ設計」のページを作成せよ。設計方法については、こちらを参照すること。なお、HTMLファイルやCSSファイル、画像ファイルなどがごちゃごちゃにならないように、また、分担開発するページ単位に別々に作業できるように、ファイル名やディレクトリ(フォルダ)名、それらの格納構造を決めること(最終的にはフォルダ構造ごと提出してもらうことになる)。
    4. ここまでの設計内容を踏まえて、設計書ファイルの「WBSと役割分担」のページを作成せよ。ひとり1ページ以上開発に取り組めるよう分担すること。また、次回、設計したウェブページの共通部分のHTMLとCSSを実装するため、必要な写真や情報(コンテンツ)があれば、次回までに用意できるよう担当者と計画を決めておく(授業中の退室は不可、また、写真などを撮影する場合は個人情報などに注意し、各所に迷惑をかけないよう十分配慮すること、ネット上のコンテンツ等を使う場合は権利を侵害しないよう注意すること)。
    5. 終了したらチェックを受け、OKが出たら、以後、個別作業ができるようメンバー間で設計書ファイルを共有せよ(USBメモリやメール送付等を利用)。
    6. ファイル共有後、チームメンバーのひとりが代表して、設計書をレポート提出システムから提出せよ。
    7. ファイルの共有と提出が終わったら、チーム全員がこちらからミッションコンプリートを報告。
    最終制作2
     最終制作に取り組む。前回作成した設計書に基づき、チームメンバーで協力して、ウェブサイトを構成するページの共通部分を「ひな形ファイル&共通のCSSファイル」として構築する。本日のミッションは以下、全て完了したら教員のチェックを受けること。
    1. 前回作成した設計書ファイルを参照し、ページ間の共通部分(通常コンテンツ部分以外)を確認せよ。
    2. チームメンバーで協力して、これまで使用した資料を参考にしたり、これまでに作成したHTMLファイルやCSSファイルを参考にして、共通部分だけの(コンテンツ部分のない)HTMLファイルと、そのスタイルを定義するCSSファイル(ひな形HTMLファイルと共通CSSファイル)を作成せよ。ひな形HTMLファイルは「kyotsu.html」、共通CSSファイルは、前回作成した設計書ファイルの「ディレクトリ設計」で決めた名称にすること。進め方としては、kyotsu.htmlに、基本タグと、外部CSSファイルの読み込みを設定し、以前利用した資料、実装1実装2実装3実装4のように、ページ全体設定→コンテナボックス形成→内部の個々の領域を上から下へ追加作成、という順で構築していくとわかりやすい。
    3. 画像については著作権に配慮して勝手にコピーなどしないこと。自ら撮影するか、画像を使わないかは各チームで決める。一部の画像はこちら(林撮影)を使ってもよい。
    4. 完成したらチェックを受け、OKが出たら、以後、個別作業ができるようメンバー間でひな形HTMLファイルと共通CSSファイルを共有せよ(USBメモリやメール送付等を利用)。
    5. ファイルの共有が終わったら、チーム全員で揃ってこちらからミッションコンプリートを報告。
    最終制作3
     前回の続きを行う。前々回作成した設計書に基づき、前回作成した「ひな形HTMLファイル&共通CSSファイル」を利用して、チームメンバー各自が、担当するページを構築する。
    1. 前々回作成した設計書の「ディレクトリ設計」のスライドを参照し、webkisoフォルダの内部に、設計書と同じディレクトリ(フォルダ)構造を作成せよ。ディレクトリ(フォルダ)の作成方法は、エクスプローラ等でwebkisoフォルダを開き、フォルダ内で右クリック→「新規作成」→「フォルダー」として名称を設定することで実現できる。このディレクトリ(フォルダ)構造は、設計書通りに作ればチームメンバー全員が同じ形になるはずである。各メンバーのフォルダ構造が異なると統合した際にリンクが切れるなど不具合が起こるため、でき次第チーム内で確認し合うこと。
    2. 前回作成した「ひな形HTMLファイル&共通CSSファイル」のうち、共通CSSファイルを、設計書の「ディレクトリ設計」の通りのディレクトリ(フォルダ)にコピーペーストせよ。
    3. 「ひな形HTMLファイル&共通CSSファイル」のうち、「kyotsu.html」については、担当するウェブページの保存ディレクトリ(フォルダ)にコピー・ペーストして名前を変更した上で、Terapadで開き、開発を進めよ。
    4. 構築を担当するHTMLファイルをダブルクリックするなどしてブラウザで確認し、共通CSSのスタイルが適用されてるか確かめよ。適用されていない場合は、外部CSSファイルの読み込み設定の箇所を修正して、スタイルを適用せよ。但し、共通CSSは、他のメンバーが担当する他のページと共通であるため、修正しないこと(不具合などで修正する場合は他のメンバーと相談し修正後は全員と共有することが必要)。
    5. 各メンバーが担当するページ用に、共通CSSとは別のCSSファイルを作成せよ。構築を担当するHTMLファイルと同じディレクトリ(フォルダ)に「担当するHTMLファイル専用のCSSファイル」を作る(共通CSSを編集しないこと)。作成方法は、エクスプローラ等で担当するHTMLファイルが保存されたフォルダを開き、フォルダ内で右クリック→「新規作成」→「テキスト文書」として名称を「〜.css」に変更することで実現できる(CSSファイル名はどのページ用のCSSかわかるようにしておくと混乱がない)。
    6. 作成した専用CSSファイルが、担当するHTMLファイルに反映されるよう、読み込む外部CSSファイルの設定を追加せよ(共通CSS用のタグをコピー・ペーストして追加し、CSSファイル名を変更する。結果、各HTMLファイルでは、共通CSSファイルと専用CSSファイルの2つを読み込むことになる)。設定方法は、こちらを参照のこと。
    7. 共通CSSとページ専用CSSが読み込めたら、担当するHTMLファイルと追加した専用CSSファイルを編集し、「設計書ファイル」に基づき、担当ページのコンテンツ部分を作成せよ。
    8. チーム全員がコンテンツ部分の作成に着手し、授業終了時刻となったら、チーム全員で揃ってこちらからミッションコンプリートを報告(来週もコンテンツ部分の作成を続ける)。
    最終制作4
     引き続き、最終制作に取り組み、個々のウェブページを完成させ、相互のリンクなどを作成し、ウェブサイトとして完成させる。
    1. 個々の担当ページの完成に向け作業せよ。自分の担当ページが完成したメンバーは他のメンバーを支援してもよいが、代わりに作成しないこと(替え玉作成は不正対象)。
    2. チームメンバー全員がほぼ完成したら、分担開発したウェブページのHTMLファイルやCSS、画像ファイルなどを、相互に受け渡し(USBメモリやメールを使う)、各自のディレクトリ(フォルダ)に集約せよ。
    3. メンバーは、集約したウェブページを相互にチェックし、設計書通りに作られているか(修正したものは良い)、ページ間のデザインに一貫性があるか、情報に漏れや間違い、作りかけはないか、リンクが切れていないか、などを確認せよ。
    4. 次回、最終発表準備を行うとともに、ウェブサイトの完成度を高めたり、修正するために、もう1コマだけ時間がある。最終評価は、より完成度の高いもの(充実度、使い易さ、不具合のなさ、授業で学んだことが活かされているか)を評価するので、それに向けて修正点などがないか、追加情報などが必要ないか検討し、次回までに実施しておくことがあれば実施しておくこと。
    5. 上記で確認した完成度を高めるための改善箇所や修正箇所について、終了時間まで対応せよ。
    6. 時間が来たら、チーム全員で揃ってミッションコンプリートを報告。報告はこちら
    最終制作5
     これまでチームで取り組んできたウェブサイト構築の最終回として、完成度を高めるとともに、来週の報告に向けて準備せよ。
    1. チームで協力して、ウェブサイトの完成度を高めよ。前回出された改善点や修正点に未対応のものがあれば、対応せよ。
    2. 改善点や修正点が対応され、発表できるレベルに達したら、次回の発表に向けて準備せよ。発表は、(1)代表者がサイト全体の特徴や工夫した点についてと、(2)各ページの担当者がそれぞれのページの特徴や工夫した点について、全員が前に出てトータル5分程度で発表する。いずれかのメンバーのPCをスクリーンに投影してサイトを表示して発表するため、パワーポイント等の資料は使わない。発表チームはランダムに指示する。
    3. なお、評価は、内容が充実しているか、ユーザーが使い易く見やすいか、機能や情報に不具合はないか、授業で学んだことが活かされているか、といった点を重視し、チーム全体および個々人について行う。なお、作成したファイルは、次回の授業内に全て提出する。
    4. 次回、発表がすぐにできるようになったとチーム内で合意が得られたら、チーム全員がこちらからミッションコンプリートを報告。授業内で発表準備が整わなかった場合は、次回授業までにすぐ発表できるよう準備しておくこと。また、メンバーの欠席時などの対応方法もあらかじめ確認しておく(欠席時、欠席者の代理発表は不要)。
    最終発表とまとめ
     前回までに構築したウェブサイトについて発表し、作成したウェブサイトを提出する。授業開始後すぐ、チーム毎にランダムに発表していく。
    1. 発表は、いずれかのメンバーのPCのブラウザでサイトを立ち上げた上で(教員がスクリーンに投影)、前方に並び立って行う。(1)代表者がサイト全体の特徴や工夫した点についてと、(2)各ページの担当者がそれぞれのページの特徴や工夫した点について、合計5分程度で発表する。各担当者は自分が話し始めるタイミングで名乗ること。
    2. 授業時間中、他のチームが報告している間に、作成したウェブサイトを提出する。個別提出ではなくチーム単位で提出するためチームの誰かが代表して作業する。提出方法は以下。
      1. 最終的な担当リストファイルをダウンロードし作成。保存する。
      2. エクスプローラーやデスクトップで右クリックし、[新規作成]-[フォルダー]とし、チーム名のフォルダを作成する。
      3. 完成したウェブサイトの全てのHTMLファイル、CSSファイル、画像ファイルと、作成した担当リストファイルを選択し、作成したチーム名のフォルダーに、そのままドラッグ&ドロップしてコピーする(フォルダ構造などは変えないこと)。
      4. コピーができたら、作成したチーム名のフォルダーを、PC室パソコンのデスクトップ画面にある「Lhaplus」アイコンにドラッグ&ドロップする。
      5. 圧縮形式を訪ねられるので「zip」を選択。
      6. 出力先フォルダを訪ねられるので、デスクトップなどわかりやすいフォルダを選択して「OK」
      7. 指定した出力先フォルダに、チーム名.zipというファイルができているので、それをレポート提出システムから提出。
    3. 全チームの発表が終了し、作成したウェブサイトのファイルを提出し終えたら、チームで揃って、こちらからファイナルミッションコンプリートを報告。

  page bottom
 
 
 
PCを使う大学生に
オススメ情報!

「家のPCで資料作ったのに忘れた」「ファイルを保存したUSBがなくなった」ということはよく起こります。それを防いでくれるのがDropbox(ドロップボックス)!

家のPCにインストールしてDropboxフォルダにファイルを保存すれば、ネット上に自動バックアップ。大学のPCなどネット接続できるPCからファイルをダウンロードできます。閲覧だけならスマホやipadからもOK!

無料で2GBまで使えますので大学の資料であれば余裕です。下のリンクから登録すると2.5GBまで無料になります。オススメです!

dropbox.com

 

 

 
ゼミで作った新愛学キャラ
「あぐ太」です!よろしく!

LINEスタンプSHOPから
「あぐ太」で検索
page top