最終課題について

狙い

SFCでは問題発見・解決型の学習を目指しています。まだ実際の問題を解決できるわけではありませんが、次のような方法論を意識しながら課題に取り組んでください。

企画
いろいろなアイデアを出して議論し、目標を設定する。
調査
目標を実現するために必要な知識・技術を調査する。
実装
実際に動くものを作り、目標が達成できたか検証する。

課題

  • HTML, CSS, JavaScript, 画像の4種類のファイルを組み合わせてウェブページを作る。
  • JavaScriptプログラムには、場合分けと繰り返し(自動的な繰り返し、または人間がボタンを繰り返しクリックすることで何かが変化していく)を含むこと。
  • 必ず複数ページをリンクで繋いだ構造にする。
  • 既製のHTMLテンプレートやJavaScriptライブラリを使ってもよい。その場合は、何を使ったか、自分で書いた部分はどこか、を明記すること。
  • http://web.sfc.keio.ac.jp/~ログイン名/info1/final.htmlで誰でもアクセス可能にすること。
    • 特別教室のiMacで作る場合は、public_htmlフォルダの中に入れる(第3回 インターネットへの公開参照)。
    • 自分のPCで作る場合は、次のスライド資料を見て、ファイル転送をする。

(PPT版ダウンロード)

テーマの例

ショッピングサイト
商品の画像と説明を表示する。数量を入力して「買う」というボタンをクリックすると、商品ごとの単価×数量を計算して合計金額を表示する。合計が一定以上だと送料無料にするとか、おまけの商品が付くとかしてもよい。
動く絵本、ゲームブック
適当なお話を書き、文中の「大きな桃が流れてきました」というところをクリックすると、桃の絵が表示され、その絵をクリックすると赤ん坊の絵に変わる、などの動きを付ける。あるいは、話の途中にボタンやテキスト入力欄があり、その入力によって結末が変わる。
性格判断、占い
質問がいくつか表示され、その答を入力すると何かの結果が表示される。
ゲーム
表のマス目をクリックして進行するタイプのゲーム。例えば神経衰弱や宝探し(サンプルプログラム)など。タイマーイベントを駆使すればもぐら叩きなども可能(ただしかなり難しい)。

次の作品は、実際の過去の履修者の作品を教材用に再構成したものです。

実装の進め方

  1. 全体の構成と、各ページのラフスケッチを描く。
    • 例えばショッピングサイトなら、商品写真、説明、数量入力欄や合計金額表示などの配置を決める。
  2. 動きがあるところは、「入力→処理→出力」が何かを決める。
    • 例えば、入力は数量入力欄と購入ボタン、処理は合計金額の計算、出力は合計金額の表示。
    • 複数の商品に数量を入力して一回だけ購入ボタンを押すのか、商品ごとに購入ボタンを押してカートに追加するのか、によって処理の内容は違ってくる。
  3. 画面の固定部分をHTMLとCSSで制作する。動きがある部分については、最初に表示される状態を書いておくとよい。
    • 大学の授業は、教室で習ったことは出発点にすぎないので、必要なことはどんどん自分で調べよう。
    • 「○○したい」と思ったら、「HTML ○○」や「CSS ○○」で検索すればたいてい出てくる。読んでも理解できなかったら先生やTA/SAに質問しよう。
    • 情報が古い場合や、特定のブラウザ向けの情報などもあるので、注意。
    • 既存のウェブページを参考にして作った場合は、ファイルの中にコメントとして何を見て作ったかを書くこと。
  4. 動きをJavaScriptで制作する。
    • 「入力→処理→出力」の流れごとに関数を作る。
    • 動かない場合、動きがおかしい場合は:
      1. jsファイルが読めているか確認。デバッガでjsファイルが表示されなければ読めていない。ファイル名は合っているか?ディレクトリが違わないか?script要素はちゃんと書けているか?編集後に保存したか?
      2. デバッガで関数の中にブレークポイントを設定して動かしてみる。ブレークポイントで停止しない場合は、呼び出されていない。関数名は合っているか?onclickなどのイベントハンドラはちゃんと書けているか?
      3. ブレークポイントで停止したら、変数の値を確認。変数への代入は正しく書けているか?
    • 既存のソースコードを参考にして作った場合は、ファイルの中にコメントとして何を見て作ったかを書くこと。

具体的に「桃太郎」を作る場合の手順は最終課題「桃太郎」実装について(準備中)を参照。

レポートの書き方

何かを作る時は、それをどうやって作ったかをレポートにまとめて、他人に正しく伝えることも重要です。レポートは最後に書こうとすると細かいところを忘れてしまったりしますから、作業中にメモや下書きを作るようにしましょう。

レポートの構成はだいたい次のようになります。

  1. はじめに:これを作ろうと思った動機や背景など。実際に作ったものだけでなく、企画段階でボツになった案についても、なぜボツになったか、採用された案とは何が違ったのかを説明するとよい。
  2. 設計:企画案の説明。実際に作ったものと違っていてもよい。文章だけではわかにくいので、図を使って説明するとよい。
  3. 実装:作ったものの説明。HTMLファイルの構造の概略、JavaScriptプログラムの動きの説明など。特にJavaScriptプログラムについては、自分の書いた部分に1行ずつ説明を書くこと。グループでやった場合は作業分担を書くこと。
  4. 評価:最初に設計した通りにできたか、できなかった場合は原因は何か。実際に動かしてみて、満足のいく出来か。改良するとすればどうするか。
  5. 参考文献:SFC GUIDE Vol.2 p.33-34 の説明に従って書く。
  6. 謝辞:友達に教えてもらった場合は、「○○君には××について教えてもらいました。ここに感謝の意を表します。」というようなことを書く。

提出に当たっての注意

  • グループで制作する場合は、ページごとに分担を決め、レポートに自分の分担範囲を書くこと。採点は、グループ単位ではなく個人単位で行う。
  • 既存のウェブページやサンプルコードを利用して作った場合は、ファイルの中にコメントとして何を見て作ったかを書くこと。自分で書き加えた部分だけが加点項目の対象になる。
  • テキスト第11回までの練習問題を元にして作ってもよいが、最終課題として書き加えた部分だけが加点項目の対象になる。
  • JavaScriptプログラムについては、レポートに1行ずつ説明を書く。適切な説明が付いていない部分については採点の対象としない。

採点基準

(この基準は暫定的なもので、採点結果が極端に高得点または低得点に偏ってしまった場合は修正することがあります)

  • 提出しなければ0点。
  • 提出されたものが次の3項目を満たしていれば20点。満たしていなければ1項目ごとに5点減点。したがって、HTMLだけでもとにかく提出すれば5点。
    • HTML, CSS, JavaScript, 画像の4種類のファイルを使用する。ページを全部合わせて4種類あればよい(あるページはHTML, CSS, JavaScript、別のページはHTML, 画像、でもよい)。
    • 複数のページをリンクでつないだ構造とする。
    • 少なくとも1ページは、JavaScriptを使ってインタラクティブな(ユーザの入力によって表示が変化するような)ページとする。
  • 次の項目に該当する場合には減点する。点数に幅がある場合は、程度に応じて決める。
    • HTMLに構文的なエラーがある:-1〜-3点
    • CSSに構文的なエラーがある:-1〜-3点
    • JavaScriptに構文的なエラーがある:-1〜-3点
    • JavaScriptが意図した通りの動作をしない:-1〜-2点
    • 引用なのに出典を明記していない:-3点(ただし、ページ全体を丸写しなど悪質な場合は不正行為として学習指導に報告)
    • レポートが提出されていない、あるいは内容が不十分である:-1〜-5点
  • 次の項目に該当する場合には加点する。点数に幅がある場合は、程度に応じて決める。
    • HTMLで見出し、段落などの基本的な文章の構造に関する要素を適切に使い分けている:+1点
    • 授業で扱わなかったHTML要素を自分で調べて使用している:+1〜+3点
    • 同一ディレクトリでない相対パスを使用している:+2点
    • CSSのセレクタでclass指定を使用している:+2点
    • 授業で扱わなかったCSSの機能を自分で調べて使用している:+1〜+3点
    • 画像のalt属性が適切に指定されている(代替情報が必要でなければ空文字列でよい):+2点
    • JavaScriptの関数を複数個定義している:+1点
    • 引数のある関数を定義している:+2点
    • if文を使用している:+1点
    • while文またはfor文を使用している:+2点
    • 実行が進むにつれて値がだんだん増える(あるいは減る)ような変数を使用している:+2点
    • 配列を使用している:+2点
    • innerHTMLまたはinput要素のvalueに代入することでウェブページの表示を変更している:+2点
    • 授業で扱わなかったJavaScriptの機能を自分で調べて使用している:+1〜+4点
    • アイデアまたは表現が優れている:+1〜+5点
  • 合計が0点以下または40点以上になる場合は、それぞれ0点と40点にする。