Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie 勉強会資料①
Ähnlich wie 勉強会資料① (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (7)
勉強会資料①
- 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．描画
- 6. Webアプリケーションとは 表示内容を動的に生成する仕組み プログラムを通してHTMLや画像等を生成すること
- 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でもFireFoｘでも何であれ動作に関係はない つまり作成するHTMLやJSに変わりはない クライアントサイド（HTMLやJS）から見るとWEB アプリがPHPでもJavaでも動作に関係はない つまり動作するHTMLやJSに変わりはない
- 20. まとめ WEBアプリケーションとは、表示内容を動的に生成 する仕組み サーバサイド、クライアントサイド共に WSで利用するサーバサイドのプログラミング言語 はPHP、Javaがほとんど クライアントサイドはHTML、JS、Flashなど レイヤリングによって問題の切り分け、影響範囲の 特定ができる “レイヤリングを意識した設計・製造”により ”拡張性・保守性の高いシステム”が構築できる