Más contenido relacionado
勉強会資料①
- 2. 目次
Webアプリケーションとは
サーバーサイドの技術
クライアントサイドの技術
WEBアプリケーションレイヤー
- 3. Webアプリケーションとは
ウェブの機能や特徴を利用したアプリケーションソフト
ウェアのこと
デスクトップアプリケーションとの比較
ユーザー毎の端末へのインストールが不要
Webサーバー上のファイルを更新するだけで全ユーザーに対して
アップデートが可能
ユーザーの環境が異なっていてもWebブラウザが動作すればよい
Webサーバーやネットワークに障害が発生した場合は利用不可
Webブラウザによっては描写や動作が異なる場合がある
基本的にはサーバーサイドでユーザーからの入力や、DB
からのデータに応じて、HTMLなどのリソースを動的に
生成する仕組みを備えているものを指す
- 4. Webアプリケーションとは
基本的なWebの動作
1. ブラウザでURLを入力
2. WebサーバーがURLに該当するリソース(HTMLや画像な
ど)を返却
3. ブラウザが受け取った内容を描画(レンダリング)
1.http://www.nsw.co.jp/index.html
2./var/www/html/index.html
3.描画
- 5. Webアプリケーションとは
クライアントサイドとサーバーサイド
1. 【クライアント】ブラウザでURLを入力
2. 【サーバー】WebサーバーがURLに該当するリソース
(HTMLや画像など)を返却
3. 【クライアント】ブラウザが受け取った内容を描画(レンダ
リング)
1.http://www.nsw.co.jp/index.html
2./var/www/html/index.html
3.描画
- 7. Webアプリケーションとは
HTMLの動的な生成を含む場合の動作
1. 【クライアント】ブラウザでURLを入力
2. 【サーバー】WebサーバーがURLに該当するプログラムを実
行し、作成したリソース(HTMLや画像など)を返却
3. 【クライアント】ブラウザが受け取った内容を描画(レンダ
リング)
1.http://www.nsw.co.jp/index.cgi
2./var/www/cgi-bin/index.cgiの実行結果
3.描画
- 8. Webアプリケーションとは
起点(この場合はURL)は同じだが生成物(この場合は
HTML)が異なる状態を動的な生成という
起点と生成物が常に同じ場合は静的という
- 9. Webアプリケーションとは
例えば・・・
Web上で会員登録を行う場合、ユーザーは自分の個人情報を入
力する
多くの場合、登録内容の確認画面としてユーザーが入力した内
容を表示して、ユーザーに内容を確認させる
この画面は
動的!
- 10. サーバーサイドの技術
動的に生成する手段(簡単に言うとプログラミング言
語)は無数にあるが、代表的なものは以下のとおり
Java、PHP、Perl、VB(.NET)、Ruby、Python
それぞれ特徴はあるが高級言語であることがほとんど
ちなみに・・・
WSの実績としてはJava、PHP、Perlがほとんど
新規の案件ではJava、PHPのどちらかにしている
低級言語(C、Lispなど)を使う場合もある
高速化のために
基本的にサーバーサイドの処理時間はネットワーク遅延より短いた
め、特に現在では選択することはほとんどない(全くないと言って
もいいぐらい)
厳密に手段を定義すると、CGIとインタープリタに大別
される
CGI=Common Gateway Interface
インタープリタ=mod_php(Apacheモジュール)、Java Servlet
(APサーバ)など
- 11. クライアントサイドの技術
クライアントサイドの機能を活かしてページを動的に変
化させる技術
Javascript、Adobe Flash、Microsoft Silverlight、Java FXなど
近年のクライアントのスペック向上にしたがって利用機会は増
えている
主にユーザーインターフェース(UI)を強化する目的で
使用される
見た目が格好良かったり、入力補助をしたり
英語ではUser Experience(和訳は体験)と表記されることが多
い
リッチインターネットアプリケーション
クライアントサイドの技術を活かした、柔軟なインターフェー
スをもつWebアプリケーションを“リッチ・インターネット・ア
プリケーション(RIA)”と呼ぶことがある
最近ではWebアプリケーションがクライアントサイドの技術を内包
することが当たり前になりつつあるので、呼ぶ機会は減っている
- 12. (参考)レイヤーとは
技術、物体などを動作あるいは管理する範囲を階層(レ
イヤー)に分けて定義した場合に、物理的な階層を低い、
仮想的な階層を高いとする概念
低レベル(=簡単)、高レベル(=複雑)という意味ではない
OSI参照モデル、TCP/IP参照モデルが代表的な階層分け(レイヤ
リング)
OSI参照モデルとは
コンピュータの持つべき通信機能を階層構造に分割したモデル
TCP/IP参照モデルとは
インターネットで稼働するプロトコルの階層(プロトコルス
タック)と、それを実装する通信プロトコルの一式(プロトコ
ルスイート)
要するにインターネットを実現するためのレイヤリングのこと
階層名がOSI参照モデルと同じだが、直接の関連はない
- 13. (参考)OSI参照モデル
7階層が定義されており、上にいくほど高い、下に
行くほど低いと表現される
階層 OSI 役割 例
参照モデル
7 アプリケーション 具体的な通信サービス ブラウザ、メーラー
層
6 プレゼンテーショ データの表現方法 EBCDIC⇔ASCII変換
ン層
5 セッション層 通信の開始から終了までの手 RPC
順
4 トランスポート層 エラー訂正、再送制御 TCP、UDP
3 ネットワーク層 通信経路の選択 ルーティング
2 データリンク層 通信機器間の信号の受け渡し イーサネット、P2P
1 物理層 物理的な通信機器 ルーター、LANケーブ
- 14. (参考)TCP/IP参照モデル
Webアプリケーションに登場するクライアント、サー
バーは通信機器といえるが、厳密にはOSI参照モデルで
はなくTCP/IP参照モデルに準拠している
アプリケーション層
トランスポート層
ネットワーク層
データリンク層
クライアン
ト ルーターA ルーターB サーバー
- 15. (参考)レイヤリングの利点
各レイヤーで役割が決まっている
隣のレイヤーから渡されるデータと、渡すデータを知っていれ
ば良い
相手の同じレイヤーと直接やり取りしているようにみなせる
私はブラウザです 私はWEBサーバーで
す
http://www.google.co.j ここが直接に見える
p/ OK
アプリケーション層 を見たいよ HTMLを返すよ
通信開始 データを受け取ったよ
データを送るよ
トランスポート層
www.google.co.jp
www.google.co.jp
はX.X.X.Xにあるよ はX.X.X.Xにあるよ
ネットワーク層
X.X.X.Xに行くには X.X.X.Xに行くよ
ルーターAを通るよ
データリンク層
クライアン
ト ルーターA ルーターB サーバー
データをルーターAに
送るよ
- 16. WEBアプリケーションレイヤー
クライアント サーバ
ソフトウェア WEBアプリケーション
ブラウザ PHP Java Perl
HTML JS
フレームワーク
CSS 画像
Tomcat ミドルウェア Mysql
APPサービス
ネットワーク DBMS
Apache WEBサービス
SSL
ネットワーク
Firewall iptables
Firewall
LAN Proxy LAN TCP/IP
- 17. 問題の切り分け
ブラウザが表示するエラー
ネットワークに問題がある場合がほと
んど
・ping、traceroute(tracert)
・netstat、iptables
Apacheのデフォルトエラー
・404 Not Found
・403 Forbidden
・500 Internal Server Error
WEBアプリのエラー
- 18. 動作主体の切り分け
http://・・・/index.php
作成する
<html>
HTML
<head> レイヤーが
<meta ・・・> JS CSS 違う!
<title>・・・</title>
<link ・・・>
<style type=“text/css”>
・・・
</style>
<script type=“text/javascript”>
・・・
実行する
</script>
</head>
<body>
・・・
</body>
</html>
- 19. 動作主体の切り分け
サーバーサイド(PHPやJava)から見るとブラウザ
がIEでもFireFoxでも何であれ動作に関係はない
つまり作成するHTMLやJSに変わりはない
クライアントサイド(HTMLやJS)から見るとWEB
アプリがPHPでもJavaでも動作に関係はない
つまり動作するHTMLやJSに変わりはない
- 20. まとめ
WEBアプリケーションとは、表示内容を動的に生成
する仕組み
サーバサイド、クライアントサイド共に
WSで利用するサーバサイドのプログラミング言語
はPHP、Javaがほとんど
クライアントサイドはHTML、JS、Flashなど
レイヤリングによって問題の切り分け、影響範囲の
特定ができる
“レイヤリングを意識した設計・製造”により
”拡張性・保守性の高いシステム”が構築できる