ウェブプログラミング演習 ウェブプログラミングとは？ 授業の概要 この

ウェブプログラミングとは？
ウェブプログラミング演習


ウェブ（World Wide Web）を基盤とするアプリケー
ション開発において必須となる技術
複数のプログラミング技術を複合的に用いる
STEP 0
ガイダンス
授業の概要




この演習で扱う技術
基礎的な知識・経験を得るための演習
複数のプログラミング技術を体系的に理解するこ
とも目的とする
これまでに学んだプログラミングの知識の活用
ウェブに関する／ウェブを利用した研究のための
基礎







ウェブアプリケーション技術の体系
演習の進め方

HTML拡張
HTML(XHTML)
HTTP
CSS
JavaScript HTTPS
Applet, Flash
ブラウザ
（クライアント）
XML XSLT
SSI, PHP
XML
CGI
Perl, 他
Webコンテナ
ウェブサーバ
具体的な事例システム（詳細は検討中，昨年度ま
ではblog）の開発に沿って，各プログラミング技術
を体験する
–
ODBC
JDBC
–
XSLT
Servlet, JSP, ASP
HTML (Hyper Text Markup Language)
Perl / CGI (Practical Extraction and Report
Language / Common Gateway Interface)
PHP(PHP: Hypertext Preprocessor)
JavaScript
CSS (Cascading Style Sheets)
XML (Extensible Markup Language)
XSLT (XSL(Extensible Stylesheet Language)
Transformations)
–
データベース
–
–
–
–
HTMLによるユーザインタフェース設計
Perl/CGIを用いたページ遷移
JavaScriptによるクライアント側のデータ管理
CSSを用いたページレイアウト
PHPを用いたサーバサイドプログラミング
XML＋XSLTを用いたサーバ側のデータ管理
その他
1
注意事項


プログラミング技術の基礎知識（文法等）の解説は
しない。各自で予習すること
評価対象


課題への取り組み（出席状況含む）
レポートの内容
演習手順はすべて示すので、要素技術を理解しな
くてもプログラムは動くでしょう。それでいいの？
ウェブアプリケーション開発に
利用される基礎技術
目的

ウェブアプリケーションを作成したことが無い人向
けに基礎技術を簡単に解説する
–
–
–
目次

ウェブアプリケーションのアーキテクチャ
主なサーバサイド技術

主なクライアントサイド技術

–
–
–

JavaScript, XMLHttpRequest
RIA（Rich Internet Application）
クライアント・サーバ間の技術
–
–

CGI, Servlet, JSP, PHP
3層アーキテクチャ
サーバサイド技術
クライアントサイド技術
ウェブアプリケーション

ウェブ（World Wide Web）をプラットフォームとして
実装されたソフトウェアアプリケーション
–
–
通信プロトコルにHTTPを利用したクライアント・サーバ
モデル
クライアントはウェブブラウザ


標準化されたUIモジュール
ほとんどのPCでインストール済
SOAP, REST
Cookie
フルスタックの技術
2
ウェブアプリケーションの
アーキテクチャ

サーバサイドの技術（１）
3層アーキテクチャ

CGI（Common Gateway Interface）
–
プレゼンテーション層
ファンクション層
データ層
–
httpサーバからプログラムを呼び出す仕組み
プログラムの記述言語は問わない

ビジネスロジック
ブラウザ
DB
C, Java, Perl, Python, Ruby, ...
プログラム DBコネクション
ビジネスロジック
（ODBC,JDBCなど）
ブラウザ
フォーム
データ
ｈｔｔｐサーバ
クライアントPC
ウェブサーバ
データベースサーバ
サーバサイドの技術（2）

ウェブサーバ
データベースサーバ
サーバサイドの技術（2）
(Java) Servlet
–
ブラウザとのやりとりを主目的としたJavaプログラム

–

CGI
ｈｔｔｐサーバ
クライアントPC
DB
HTML
Javaクラス
GET,POSTの処理、HTML出力の生成など
Javaクラス
ウェブコンテナ(Tomcatなど)で管理・実行される
JSP（JavaServer Pages）
–
HTML記述中にJavaコードを埋め込んだもの
–
実行時にコンテナ上でServletに変換

DB
ビジネスロジック
Servlet
JSP
プレゼンテーションロジックの表現
変換
Servlet
ｈｔｔｐサーバ
サーバサイドの技術（3）

PHP: Hypertext Preprocessor
–

3層アーキテクチャの実現が容易
Smaty
–
–
HTMLに埋め込まれるスクリプト言語



–
JavaScriptなどのクライアントサイドスクリプトで利用可
能なHTTP通信オブジェクト

プレゼンテーションロジックの分離

テンプレートをコンパイルしてPHPを生成
ブラウザの動的な制御が可能
DHTML（Dynamic HTML）の実現し、ユーザビリティ向上
XMLHttpRequest
PHPのためのテンプレートエンジン

–
JavaScript
C, Java, Perlなどから構文を転用
自動型変換により、変数の型宣言不要
DBMSインタフェースを標準で提供



HTMLを動的に生成するためのスクリプト言語

–
クライアントサイドの技術（１）
ページ遷移なしにデータ送受が可能
データ受信はコールバック割り込みによる
＝非同期通信
3
クライアントサイドの技術（２）

クライアント・サーバ間の技術（1）
RIA（Rich Internet Application）
–


–

直感的な操作性やレスポンス向上を目指したウェブア
プリケーション


リッチなクライアントユーザインタフェース（UI）を持つ
HTML（ピュアなウェブ言語）だけでは実現できない
–
Ajax（Asynchronous JavaScript + XML）
– Prototype, jQuery, Dojo, Adobe Spry, GWT, ...
Adobe Flex
– MXMLによるUI記述 + ActionScript
Microsoft Silverlight
– XAMLによるUI記述 + .NETプログラム

–

–

HTTP通信において、ブラウザとサーバとの間で状態を
管理するためのプロトコル
HTTPヘッダに状態を識別するためのコード（これも
Cookieと呼ぶ）を埋め込む

HTTPメソッド（GET, POST, PUT, DELETE）のみを
（本来の意味で）利用してウェブ上のリソース（情報の断
片）を管理するアーキテクチャ
フルスタック（Full Stack）の技術
（HTTP） Cookie
–
HTTP通信をベースに、クライアント・サーバ間で手続き
呼び出し（リモートプロシジャコール）を行うための専用
プロトコル
SOAPメッセージ（XMLで実現）によって手続き呼び出し
を抽象化する
REST（Representational State Transfer）
–
クライアント・サーバ間の技術（２）

–
代表的な実装技術

SOAP
ブラウザはサーバから送られてきたCookieを保存
次回同じサーバと通信する際に与えられたCookieを含める
ステートレスなHTTP通信においてセッション管理を行う
方法
ウェブアプリケーション開発に必要な要素技術を
ひとまとめにして提供するもの
–
–

⇔Glue：個別の技術を組み合わせて利用
相性問題を回避
Java EE（Java Platform, Enterprise Edition）
–
Java SEをフルスタックに拡張


–
Rubyで実装されたフルスタック

ウェブアプリケーション開発

作成したプログラムをサーバ
上に配備（デプロイ）
ActionView, ActionController, ActiveRecordなど
本日の課題

プログラム
A803

ビジネスロジック
DB
この演習で扱うウェブプログラミングの技術につい
て，その概要を調べて報告せよ．
–
開発環境
ブラウザ
Servlet, JSP, EJB（Enterprise JavaBeans）などなど
Ruby on Rails

書籍・雑誌や，Wikipediaなどのウェブサイトを参照した
場合は，必ず出典を明記すること．
報告先（電子メール）
[email protected]
締切 次回授業開始時まで
ｈｔｔｐサーバ
ウェブサーバ（実行環境）
（webdesign.center.wakayama-u.ac.jp）
4