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