Webプログラミング2Servlet/JSP JavaScriptの言語体系 CSSの体系 XML の言語体系 RDFの体系現在のWeb ⇔ どの系列の話なのかをよく見極める。2012年

2012年 Webプログラミング湘南工科大学講義資料斉藤典明

Ｗｅｂプログラミング２

担当：斉藤典明（ＮＴＴセキュアプラットフォーム研究所）

2012年版

第１回ガイダンス／Webプログラミング概要（１）


ガイダンス


◆現職：日本電信電話（株）セキュアプラットフォーム研究所主任研究員 ◆これまでの経歴：・グループウェア系ネットワークサービス、知識共有の研究・ATM交換機のソフトウェア開発のリアルタイムオペレーションシステムの拡張OSの開発、同システムのUNIXによるオペレーションシステムの設計・開発・コンテンツ流通系ネットワークサービスの研究開発・電話系システムのサービスオペレーションシステムの開発・セキュリティソリューションのSIビジネスの推進・セキュリティ系プラットフォーム技術の研究 ◆社会貢献：・情報処理学会グループウェアとネットワークサービス研究会幹事・情報処理学会・電子情報通信学会論文査読委員・非常勤講師 ◆その他：・育ちは茅ヶ崎市（湘南工科大学の比較的そば）

自己紹介


“Ｗｅｂプログラミング１ “の範囲 “Ｗｅｂプログラミング２“の範囲

参考書


授業方法

・方針：Webプログラミングの現場で役に立つことを中心に講義と実習・前提：HTMLの記述ができることプログラミングが多少できること ⇒「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章改造実習・発表実習レポート３として提出 ---------------------------

授業内容


--------------------------- ◆11/14 第７回：ＪＳＰ／Servlet 参考書：応用Web技術 2章 JSPとServletによるプログラミング概要実習レポート４ --------------------------- ◆11/21 第８回：JSP（１）参考書：応用Web技術 2章 JSPによるプログラミング演習（１） --------------------------- ◆11/28 第９回：JSP（２）参考書：応用Web技術 2章 JSPによるプログラミング演習（２） --------------------------- ◆12/5 第１０回：JSP（３）参考書：応用Web技術 2章 JSPによるプログラミング演習（３） --------------------------- ◆12/12 第１１回：JSP（４）参考書：応用Web技術 2章 JSPによるプログラミング演習（４）実習レポート５として提出最終課題出題 ---------------------------

授業内容


--------------------------- ◆1/9 第１２回：セキュリティ対策参考書：応用Web技術４章講義 PKI、NW、ログ管理 --------------------------- ◆1/16 第１３回：マルチメディアコンテンツ講義 HTML5 1/16は休講 ⇒別途補講 --------------------------- ◆1/23 第１４回：マッシュアップ講義 --------------------------- ◆1/30 第１５回：まとめ最終課題の提出 ---------------------------

授業内容


単位をとるポイント

・講義に出席する、実習をやる、やったことをレポートとして提出する・最終課題を得意なことで頑張る：デザイン、内容、技術どれでも丁寧にやってあれば評価


Webプログラミングの概要


様々なデバイス／ブラウザ・パソコン・携帯電話・ゲーム機／ＴＶ・電子ブックリーダー

Webブラウザ Webサーバ Internet

（１）Ｗｅｂとは

・様々なサイト

様々な利用シーン・学校案内／会社案内・オンラインショップ

・ブログ／掲示板／SNS／Twitter／Facebook ・学内／社内システム・スケジューラ／カレンダー／Webメール

電子ファイルプログラム


コミュニケーション

コラボレーション

社会基盤


・主にInternet系情報公開(企業案内、広告など）サーチエンジン（ポータルサイト、情報ナビゲーション系）コミュニティ（掲示板、ブログ、アルバム、オークションなど） eコマース（オンラインショッピング、ネットバンキングなど）ＣＲＭ（アフターサービスなど）電子自治体（電子申請、電子投票など）コンテンツ系（電子図書館、ＶＯＤなど）Ｗｅｂメールカレンダー・主にIntranet系ポータル/情報共有 Webグループウェア（スケジューラ、掲示板、ファイル共有など） eラーニング社内/学内システム（電子申請、物品管理、人事管理など）

（２）Webサイト例


（３）Ｗｅｂの仕組み


様々なブラウザ、端末がある・端末：ＰＣ（Windows、Mac、Linux）、携帯電話(i-mode、Android、iOS）、ゲーム機、ＴＶ・・・・ブラウザ：Internet Explorer、Fire Fox、Safari、Chrome・・・

様々な機器で動作するが、あまり多くない・サーバ：PC系、ルータ系、家電系・基本的なサーバプログラム：httpd ・製品：Apache HTTP Server、(Apache)tomcatなど

コンテンツ：様々なファイル HTMLファイル、画像ファイル・・・


東京IT新聞 2012年8月28日号


・基本キーワード 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

（４）Ｗｅｂを理解するための必須キーワード


・Server/Client方式サーバ：Webサーバ、httpd → Apache HTTP Server、Apache Tomcatなどクライアント：Webブラウザ → InternetExplorer、FireFox、Safari、Chrome など通信プロトコルは HTTP

Webブラウザ Webサーバ

http://xxx.xxx.jp:yyy/ddd/ddd/index.html?123

スキーム（プロトコル）

サーバ名ポート番号ファイル名

Internet

ファイルパス

（５）専門用語で説明するＷｅｂのしくみ

クエリ


（６）なぜＷｅｂプログラミングか？

・Ｗｅｂを用いて複雑なことをするにはプログラムが必要。・誰でも簡単にＷｅｂサーバをたちあげられる。（普及している。）・誰でも簡単にネットワークアプリケーションを作れる。（機能拡張が容易。） ⇒ 需要が多い。多くの可能性がある。


（７）Ｗｅｂプログラミングとは？

・Ｗｅｂブラウザでの入出力／動作を制御するデータの整形・出力 ⇒ 生データをＨＴＭＬ形式で出力複数のデータを組み合わせて出力などデータの入力・保持 ⇒ ブラウザからのデータをサーバで保持などデータの入出力の補助 ⇒ 入力制限見た目を良くするなど



Done

Done

Done JavaApplet JavaScript★ Active-X Flash など

SSI (Server Side Include) → C-Shellなど JSP (Java Server Pages)★ PHP など

CGI(Common Gateway Interface) → Perl、C言語、C-Shell など JavaServlet (★)

（８）Webアプリケーションの実現方式

★：授業で扱う範囲


・仕組みは簡単だった・・・追加拡張が多い。・栄枯盛衰が激しい・・・現在も進化中。 ⇒ 基本はあまり変化していないが取捨選択は必要。・目新しいものも多数・・・飛びつくのも良い。

（９）Ｗｅｂプログラミングの現状


（１０）どうマスターするか？

Perlの言語体系

CGI HTTP/UR

Lの仕組み

UNIX

Windows

の仕組み

HTML５の

言語体系

Internet

の仕組み

最初のWeb

HTMLの

言語体系

Javaの言語体系

Servlet/JSP

JavaScriptの

言語体系

CSSの体系

XML

の言語体系

RDFの体系

現在のWeb

⇔ どの系列の話なのかをよく見極める。


高機能（リッチ）

基本機能

対応ブラウザ対応デバイスコンテンツ不具合

（１１）トレードオフを考える


（１２）実習の流れ

課題の提出先（共有フォルダ）

学内ＬＡＮ（湘南工科大）

教卓ＰＣ・サーバ

演習室ＰＣ

プログラム作成実行（ブラウザ・Ｗｅｂサーバ）

演習データの保持

自宅ＰＣ

復習・レポート作成など


（１３）用意するもの・知っておくべきこと

◆用意するもの・ＵＳＢメモリ・参考書指定のもの指定以外のもの

◆知っておくべきこと・Windows ・Webブラウザ・メモ帳の使い方・HTMLタグ

Documents

Webプログラミング2Servlet/JSP JavaScriptの 言語体系 CSSの体系 XML の言語体系 RDFの体系 現在のWeb ⇔ どの系列の話なのかをよく見極める。2012年

Webプログラミング2Servlet/JSP JavaScriptの言語体系 CSSの体系 XML の言語体系 RDFの体系現在のWeb ⇔ どの系列の話なのかをよく見極める。2012年