webプログラミング2 -...
TRANSCRIPT
![Page 1: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/1.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
Webプログラミング2
3. Webプログラミングの心得
![Page 2: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/2.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
(1)Webアプリケーション開発とは?
・個人で自分の目的のためにつくる
→思うままに作れる、自分さえわかればよい
・個人で誰か(お客様)のために作る
→思うままに作れるが、今後の手直しのために後で修正
できる必要がある
作る内容はお客様と相談する必要がある
・チームで誰か(お客様)のためにつくる
→チームメンバーで分担できる必要がある
今後の手直しのために後で修正できる必要がある
作る内容はお客様と相談する必要がある
![Page 3: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/3.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
(2)アプリケーション開発の落とし穴
仕様・納期・予算
見積もり
納品
分業
出来上がらない
合わせてみたらつながらない
思ったものと違う
開発チーム
発注者 開発者
費用超過
①
② ③
④
⑤
![Page 4: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/4.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
発注者 開発者
開発チーム
数年後・・・
発注者 開発者
何を作るのか
どうやって作るのか
どうなっていたか?
利用者
(3)開発手法の必要性
![Page 5: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/5.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
(4)ソフトウェア開発手法
・ウォーターフォール型 開発段階を順次実施してゆく方法 大規模開発向きの基本的な開発手法 ・プロトタイピング型 まずは動作するものを作ってみる方法 ・スパイラル型 設計とプロトタイピングを反復してゆく方法 ・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法 比較的小規模の開発チーム向き
![Page 6: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/6.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
基本検討
基本設計
機能設計
詳細設計
製造
単体試験
結合試験
総合試験
要件定義 画面設計 機能設計
典型的なソフトウェア開発の流れ (ウォーターフォール型)
(5)典型的(古典的)なソフトウェア開発の流れ
コーディング
![Page 7: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/7.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
(6)設計/要件定義
仕様・納期・予算
見積もり
開発チーム
発注者 開発者
![Page 8: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/8.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
・発注者と開発者で意識あわせのポイント: 開発内容 → システムのコンセプトなど 動作条件 → 完成したときの誤解を防ぐ 開発期間 費用 納品物 など →仕様書としてまとめる
(7)設計/発注者側⇔開発者側
・ソフトウェアの見積もりのポイント: (1)伝統的な指標 ・期間と開発者の人数 →人月 ・開発コード(行数)、開発画面数 (2)抑えるべき項目 ・開発言語、開発内容の難易度、開発範囲、作業員のランク ・品質レベル
![Page 9: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/9.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
(8)設計/開発チーム
開発チーム
発注者 開発者
分業
![Page 10: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/10.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
開発チームメンバーで作業分担・意思の疎通をするために、 チーム構成、開発環境、開発手法などを決める。
(9)設計/要件定義
今回の課題の例では、設計として、要件定義と画面設計 機能設計を設計書としてまとめる。
プロジェクトマネージャ
プログラマ
開発チーム
![Page 11: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/11.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
(10)コーディング
開発チーム
発注者 開発者
分業
![Page 12: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/12.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
(11)コーディングの留意点
(a)記述スタイルは統一する(コーディング規約がある場合はそれに従う) →中カッコ、タブの使い方を統一的にする (b)著作権、改版履歴、処理内容、パラメータの意味などを明記する →コメントアウトを有効に使う
if (var==1){ var=var+1; }
if (var==1) { var=var+1; }
(a)
(b) // 表示関数 function printhello ( input ) { var input, output, i; //変数の宣言 ・・・ return output; //戻り値 }
<!-- --> HTMLのコメントアウト
<% %>JSPのコメントアウト
/* */ javaのコメントアウト
// javaのコメントアウト
![Page 13: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/13.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
(c)
function aaa ( a1 ) { var a1, b1, c; ・・・ return b1; }
function changeimage ( imgfilename ) { var imgfilename, status, i; ・・・ return status; }
(c)可読性、再利用性を考慮して記述する →変数名、関数名は用途がわかる名前にする
![Page 14: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/14.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
(d)
function printhello ( input ) { var input; // 確認用 alert ( “input”); ・・・ }
function printhello ( input ) { var input; // 確認用 // alert ( “input”); ・・・ }
(d)デバッグ用のコードと本番用のコードを使い分ける →デバッグ用に print 文などを使う、本番ではコメントアウトする
![Page 15: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/15.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
(12)プログラミング(コーディング)上達の秘訣
・図などを使って下書きをしてみる ⇒“やり方がわからないけどプログラムをすればうまくできる”はずがない ・不具合をバグのせいにしない ⇒なぜ思ったように動作しないのか、冷静に考える ・人のコードを読む ⇒見通しの良い書き方、変数の使い方など ・同じコードでも何回も書き直す ⇒モジュールの単位を体感する ・複数の実行環境で動作させてみる ⇒移植性の良いコードがかけるようになる
![Page 16: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/16.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
(13)レビュー・試験
・品質の高いソフトウェアとは? ⇒要求仕様どおりに動作するソフトウェア =バグのないソフトウェア ⇒バグはなくせるのか? ⇒バグのないソフトウェアはつくれない 一定規模のソフトウェアの中には一定量のバグが必ずある ⇒バグを減らすことはできる ◆レビューの実施: 各工程で必要な生産物が正しいかを複数人で検査し早い 段階でバグを見つけてなくす ◆計画的な試験: ソフトウェアの特性・規模に応じた試験項目を定めておき 試験項目に対するバグの摘出率が安定してきたら、一定 品質に達したと判断
![Page 17: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/17.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
ユーザ端末(クライアント)
Webサーバ
・正常に動作し続けること ・パフォーマンスの確保 ・コンテンツの改善/メンテナンス ・脅威への対応
(14)運用
![Page 18: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/18.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
DB
Web
負荷
負荷分散 想定利用者 想定利用シーン
レスポンス時間
ピーク値 平均値
CPU使用率 メモリ使用率
プロセス数 コネクション数
Web
Web
ボトルネックを見つける
スループット
負荷分散
・ハイスペックにする ・機能を分ける ・処理を分ける
(3)コンテンツ/Webプログラムでの対策: ⇒プロセス数を減らす、コネクションを早く開放するなど。画像、別ファイルなどを減らす。 ⇒仕組みの見直し。アルゴリズムの見直しや、素のHTMLに展開する、オンメモリ化するなど。
(2)Webサーバの設定: デフォルト値になっていないか?⇒セッション数などを確認
(1)システム的対策:
(15)負荷対策
![Page 19: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/19.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
Web
ユーザの行動がわかるのか!?
(16)ログからの状況把握 用途: ・アクセス数 ・ユーザ認証 ・ユーザ特性
/usr/contrib/www/log/ht.log
生ログ例
![Page 20: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/20.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
アクセス元のIPアドレス アクセス日時
リクエストごと
メソッド
アクセス先ファイル
プロトコル ステータスコード
転送データ量
参照元URL ブラウザ種類
(17)ログファイル
![Page 21: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/21.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
IPアドレス IPv4では⇒約42億個のアドレス
Class A:0~127.Free.Free.Free Class B:128~191.Fix.Free.Free Class C:192~223.Fix.Fix.Free Class D:ブロードキャスト用 224~239.Free.Free.Free Class E:試験用 240~255.Free.Free.Free 予約アドレス:ローカルアドレス 10.X.X.X 127.0.0.1 192.168.X.X
8bit 0~255 ・
8bit 0~255 ・ ・
8bit 0~255
8bit 0~255
第1オクテッド 第2オクテッド 第3オクテッド 第4オクテッド
(18)IPアドレス
![Page 22: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/22.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
ICANN/IANA
ARIN ・・・ 北米 ftp://ftp.arin.net/pub/stats/arin/delegated-arin-latest
RIPE-NCC ・・・ ヨーロッパ・中東・中央アジア ftp://ftp.ripe.net/pub/stats/ripencc/delegated-ripencc-latest
APNIC ・・・ アジア・太平洋地域 ftp://ftp.apnic.net/pub/stats/apnic/delegated-apnic-latest
LACNIC ・・・ 中南米 ftp://ftp.lacnic.net/pub/stats/lacnic/delegated-lacnic-latest
AfriNIC ・・・ アフリカ ftp://ftp.afrinic.net/pub/stats/afrinic/delegated-afrinic-latest
(19)IPアドレスの配布状況
![Page 23: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/23.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
Web
ユーザの行動がわかるのか!?
■ ログファイルの特徴: ・ユーザを特定する情報はない ・一連のアクセスがばらばらに記録 ■ 何に基づいて解析するのか?: ・アクセスパターン ・ネットワークの仕組みを考慮した仮説 ■ わかってどうするのか?: ・コンテンツのつくり方の工夫 ・システムの改善
(20)ログからの状況把握
![Page 24: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/24.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
Web
Webサイトのログ Y-Page HTML
Z-Page
jpg
jpg
CSS
見た目のページ 実態のファイル
HTML
jpg
jpg
CSS
・・・ Host1 Date/Time GET yyy.html Host1 Date/Time GET yyy.css Host1 Date/Time GET yy1.jpg Host1 Date/Time GET yy2.jpg Host2 Date/Time GET yyy.html Host1 Date/Time GET zzz.html Host2 Date/Time GET yyy.css Host1 Date/Time GET zzz.css Host2 Date/Time GET yy1.jpg Host1 Date/Time GET zz1.jpg Host2 Date/Time GET yy2.jpg Host1 Date/Time GET zz2.jpg
・・・
host1
host2
ビジット数=2 PV数=3
ヒット数=12
混在している
滞留時間
(21)利用動向の把握 アクセス数の計測方法
![Page 25: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/25.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
Cookieの許容で、識別の精度が上がる
アクセス数、ユーザ識別の考え方
用途: ・アクセス数 ・ユーザ認証 ・ユーザ特性
Webサイトのログ
Proxy または NAT
端末:ユーザ自らが操作
Web
DHCP
動的IPが多い
実態どおり1人が1人して見える
実態は複数人:1人として見える
実態は一人:複数人として見える
同じIPアドレスが同じ人とは限らない
(22)Webのログの見かた
ロボット:自動巡回 または
ダウンローダ
ウィルス感染端末などからの 偵察・攻撃アクセス
![Page 26: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/26.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
■ ブラウザからの情報 ユーザの利用環境に関する情報が判る JavaScriptの利用でさらにとれる情報もある →ブラウザや端末の種類を考慮して画面設計など
(23)さらなるユーザ情報の取り方(その1)
![Page 27: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/27.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
■ Cookie の利用 セーブ型/非セーブ型 →ユーザや、セッションの識別に使用 同一の人物であることがわかれば良い →行動を分析する Webページの構造の改善に活用 ※CookieをOFFしている人もそれなりに多い →URL埋め込み型でIDを付与 →本格的にやるならユーザ認証ではっきりと識別する
(24)さらなるユーザ情報の取り方(その2)
![Page 28: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/28.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
■ Web bug 複数サイトをわたるユーザの行動を正確に把握 →スパイウェアに近い方法なので賛否両論あり
Web Web Web
ファイル名 “xxx.gif” 実体は CGIプログラム
MIMEヘッダは gif 引数にIDを付与
ログを吐き出す処理
解析を依頼:画像埋め込み 自分のサイトしか解析できない
横断的な解析結果
(25)さらなるユーザ情報の取り方(その3)
![Page 29: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/29.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
(26)ログ情報を用いた利用促進
○利用分析 参照頻度、利用者数、滞留時間 ○利用傾向 参照パターン、相関 ○利用者分析 ヘビーユーザ、ライトユーザ、リピータ、・・・ ⇒コンテンツの入れ替え、ページ構成の変更・・・ ○関連: ・SEO(Serch Engine Oprimization)の活用 ・ログ情報の取り扱い
![Page 30: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/30.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
実習レポート2
Webのログの有効な活用方法を考えて述べよ。(1~3個程度あげる。) Webのログ分析とプライバシー問題について意見を述べよ。
http://itpro.nikkeibp.co.jp/article/COLUMN/20090302/325787/?ST=keitai
(10点)
メモ帳でテキストファイルに記入
HTMLのタグをつけて書いてみる(拡張子は.html)
書いた文章をブラウザで表示して確認
所定の場所に提出
¥¥10.4.83.90¥kadai¥20121017¥(学籍番号)
評価ポイント: ・問題の意味を正しく理解して回答していること
・自分なりの見解を述べること
![Page 31: Webプログラミング2 - shonan-it.ac.jp・エクストリーム・プログラミング(XP)、アジャイルソフトウェア開発 小さな動作するプログラムをベースに、順次追加し、大きくしてゆく方法](https://reader036.vdocuments.net/reader036/viewer/2022070711/5eca4c424f6cf267fb24c254/html5/thumbnails/31.jpg)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
補足
拡張子を.htmlでセーブ
ダブルクリックしてブラウザから確認
<PRE>~</PRE>タグ <BR>タグ
も併用すると見栄えが よくなる
レポートなので学籍番号・氏名も忘れずに記述