第1回 - 湘南工科大学

Ｗｅｂプログラミング２
2012年版
第１回 ガイダンス／Webプログラミング概要（１）
担当： 斉藤典明
（ＮＴＴ セキュアプラットフォーム研究所）
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
ガイダンス
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
自己紹介
◆現職： 日本電信電話（株） セキュアプラットフォーム研究所 主任研究員
◆これまでの経歴：
・グループウェア系ネットワークサービス、知識共有の研究
・ATM交換機のソフトウェア開発のリアルタイムオペレーションシステムの拡張OSの
開発、同システムのUNIXによるオペレーションシステムの設計・開発
・コンテンツ流通系ネットワークサービスの研究開発
・電話系システムのサービスオペレーションシステムの開発
・セキュリティソリューションのSIビジネスの推進
・セキュリティ系プラットフォーム技術の研究
◆社会貢献：
・情報処理学会
グループウェアとネットワークサービス研究会幹事
・情報処理学会・電子情報通信学会
論文査読委員
・非常勤講師
◆その他：
・育ちは茅ヶ崎市（湘南工科大学の比較的そば）
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
参考書
“Ｗｅｂプログラミング１ “の範囲
“Ｗｅｂプログラミング２“の範囲
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
授業方法
・方針：Webプログラミングの現場で役に立つことを中心に講義と実習
・前提：HTMLの記述ができること
プログラミングが多少できること
⇒「Webプログラミング１」を履修していること
・進め方：講義（講義ノート）＋実習＋最終課題
・評価方法：実習レポート（５個）＋最終課題（レポート）
・単位：出席８０％以上＋評価点
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
課題提出にあたっての留意事項
・課題は大学、または自宅のＰＣで作成
⇒講義の時間に所定の共有フォルダに提出するので
ＵＳＢメモリなどを各自準備してください。
（課題の保存、提出の際にＵＳＢメモリなどを使用してください。）
・課題は、原則、翌週の講義までに提出ですが、それより遅れても
回答の解説をする講義の回までに提出すれば有効です。
（出せなかったからといってあきらめないでください。）
・課題は、完璧な回答でなくても、とにかく取り組んでください。
（友人と相談して回答してもよいです。）
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
授業内容
--------------------------◆10/3 第１回：Webプログラミングの概要（１） ⇒ 本日
ガイダンス
講義：Webプログラミング１の範囲の復習
参考書： Web基礎技術 1章、応用Web技術 1章
--------------------------◆10/10 第２回：Ｗｅｂプログラミングの概要（２）
講義：Webプログラム１の範囲の復習
参考書： Web基礎技術 1章、応用Web技術 1章
実習レポート１
--------------------------◆10/17 第３回：Webプログラミングの心得
講義：プログラミング開発手法、Webサーバの運用
実習レポート２
--------------------------◆10/24 第４回：javascriptによるプログラミング演習（１）
参考書：Web基礎技術 4章
ひな形の提示
--------------------------◆10/31 第５回：javascriptによるプログラミング演習（２）
参考書：Web基礎技術 4章
改造実習
--------------------------◆11/7 第６回：javascriptによるプログラミング演習（３）
参考書： Web基礎技術 4章
改造実習・発表
実習レポート３として提出
--------------------------2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
授業内容
--------------------------◆11/14 第７回：ＪＳＰ／Servlet
JSPとServletによるプログラミング概要
実習レポート４
--------------------------◆11/21 第８回：JSP（１）
JSPによるプログラミング演習（１）
--------------------------◆11/28 第９回：JSP（２）
JSPによるプログラミング演習（２）
--------------------------◆12/5 第１０回：JSP（３）
JSPによるプログラミング演習（３）
--------------------------◆12/12 第１１回：JSP（４）
JSPによるプログラミング演習（４）
実習レポート５として提出
最終課題出題
---------------------------
参考書：応用Web技術 2章
参考書：応用Web技術 2章
参考書：応用Web技術 2章
参考書：応用Web技術 2章
参考書：応用Web技術 2章
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
授業内容
--------------------------◆1/9 第１２回：セキュリティ対策
講義 PKI、NW、ログ管理
--------------------------◆1/16 第１３回：マルチメディアコンテンツ
講義 HTML5
1/16は休講 ⇒別途補講
--------------------------◆1/23 第１４回：マッシュアップ
講義
--------------------------◆1/30 第１５回：まとめ
最終課題の提出
---------------------------
参考書：応用Web技術 ４章
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
単位をとるポイント
・講義に出席する、実習をやる、やったことをレポートとして提出する
・最終課題を得意なことで頑張る：
デザイン、内容、技術どれでも丁寧にやってあれば評価
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
Webプログラミングの概要
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
（１）Ｗｅｂとは
様々な利用シーン
・学校案内／会社案内
・オンラインショップ
・ブログ／掲示板／SNS／Twitter／Facebook
・学内／社内システム
・スケジューラ／カレンダー／Webメール
様々なデバイス／ブラウザ
・パソコン
・携帯電話
・ゲーム機／ＴＶ
・電子ブックリーダー
Webブラウザ
・様々なサイト
Internet
Webサーバ
電子ファイル
プログラム
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
社会基盤
コラボレーション
コミュニケーション
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
（２）Webサイト例
・主にInternet系
情報公開(企業案内、広告など）
サーチエンジン（ポータルサイト、情報ナビゲーション系）
コミュニティ（掲示板、ブログ、アルバム、オークションなど）
eコマース（オンラインショッピング、ネットバンキングなど）
ＣＲＭ（アフターサービスなど）
電子自治体（電子申請、電子投票など）
コンテンツ系（電子図書館、ＶＯＤなど）
Ｗｅｂメール
カレンダー
・主にIntranet系
ポータル/情報共有
Webグループウェア（スケジューラ、掲示板、ファイル共有など）
eラーニング
社内/学内システム（電子申請、物品管理、人事管理など）
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
（３）Ｗｅｂの仕組み
様々なブラウザ、端末がある
・端末：ＰＣ（Windows、Mac、Linux）、携帯電話(i-mode、Android、iOS）、
ゲーム機、ＴＶ・・・
・ブラウザ：Internet Explorer、Fire Fox、Safari、Chrome・・・
様々な機器で動作するが、あまり多くない
・サーバ：PC系、ルータ系、家電系
・基本的なサーバプログラム：httpd
・製品：Apache HTTP Server、(Apache)tomcatなど
Webブラウザ
Internet
Webサーバ
コンテンツ：様々なファイル
HTMLファイル、画像ファイル・・・
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
東京IT新聞
2012年8月28日号
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
（４）Ｗｅｂを理解するための必須キーワード
・基本キーワード
HTTP(HyperText Transfer Protocol)
HTML(HyperText Markup Language)
URL (Uniform Resource Locator)
・関連キーワード
HTTPS(HyperText Transfer Protocol Security)
XHTML(Extensible HyperText Markup Language)
HTML5(HTML Ver.5)
URI(Uniform Resource Identifire)
URN(Uniform Resource Name)
FQDN(Fully Qualified Domain Name)
・関連キーワード
ＩＥＴＦ http://www.ietf.org
ＲＦＣ
Ｗ３Ｃ http://www.w3c.org
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
（５）専門用語で説明するＷｅｂのしくみ
・Server/Client方式
サーバ：Webサーバ、httpd
→ Apache HTTP Server、Apache Tomcatなど
クライアント：Webブラウザ
→ InternetExplorer、FireFox、Safari、Chrome など
通信プロトコルは HTTP
スキーム（プロトコル）
ファイルパス
サーバ名 ポート番号
ファイル名
http://xxx.xxx.jp:yyy/ddd/ddd/index.html?123
Webブラウザ
Internet
クエリ
Webサーバ
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
（６）なぜＷｅｂプログラミングか？
・Ｗｅｂを用いて複雑なことをするにはプログラムが必要。
・誰でも簡単にＷｅｂサーバをたちあげられる。
（普及している。）
・誰でも簡単にネットワークアプリケーションを作れる。
（機能拡張が容易。）
⇒ 需要が多い。多くの可能性がある。
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
（７）Ｗｅｂプログラミングとは？
・Ｗｅｂブラウザでの入出力／動作を制御する
データの整形・出力
⇒ 生データをＨＴＭＬ形式で出力
複数のデータを組み合わせて出力 など
データの入力・保持
⇒ ブラウザからのデータをサーバで保持など
データの入出力の補助
⇒ 入力制限
見た目を良くする など
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
（８）Webアプリケーションの実現方式
★：授業で扱う範囲
SSI (Server Side Include) → C-Shellなど
JSP (Java Server Pages)★
PHP
など
Done
Webブラウザ
Internet
Webサーバ
Done
Done
JavaApplet
JavaScript★
Active-X
Flash
など
CGI(Common Gateway Interface)
→ Perl、C言語、C-Shell など
JavaServlet (★)
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
（９）Ｗｅｂプログラミングの現状
・仕組みは簡単だった・・・追加拡張が多い。
・栄枯盛衰が激しい・・・現在も進化中。
⇒ 基本はあまり変化していないが取捨選択は必要。
・目新しいものも多数・・・飛びつくのも良い。
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
（１０）どうマスターするか？
Internet
の仕組み
最初のWeb
HTTP/UR
Lの仕組み
UNIX
Windows
の仕組み
HTMLの
言語体系
現在のWeb
Perlの言語体系
CGI
HTML５の CSSの体系
言語体系
XML
の言語体系
RDFの体系
JavaScriptの
言語体系
Javaの言語体系
Servlet/JSP
⇔ どの系列の話なのかをよく見極める。
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
（１１）トレードオフを考える
コンテンツ
対応デバイス
対応ブラウザ
不具合
高機能
（リッチ）
基本機能
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
（１２）実習の流れ
課題の提出先
（共有フォルダ）
プログラム作成
実行（ブラウザ・Ｗｅｂサーバ）
演習室ＰＣ
学内ＬＡＮ
（湘南工科大）
教卓ＰＣ・サーバ
演習データの保持
復習・レポート作成など
自宅ＰＣ
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明
（１３）用意するもの・知っておくべきこと
◆用意するもの
◆知っておくべきこと
・ＵＳＢメモリ
・Windows
・参考書
指定のもの
指定以外のもの
・Webブラウザ
・メモ帳の使い方
・HTMLタグ
2012年 Webプログラミング 湘南工科大学講義資料 斉藤典明