情報処理概論(IIS） 第12回 12/11
Introduction to the Information Systems
前回の要約
- Ruby言語で書かれたプログラムをWebサーバで動かす過程を再度おさらいした。
［システム的情報活用 - Web関連技術を実体験する(6)］
Webのしくみ
基本
Web技術は、HTTPとHTMLがその中核を構成している。
HTTPヘッダを確認する
概要
- WebブラウザとWebサーバが HTTPで通信を行う。（右上図がその概要）
- 基本的なHTTPは一往復のやりとり（一回のセッションと言う）
リクエスト（ブラウザ→サーバ）、レスポンス（ブラウザ←サーバ）
- それぞれの通信内容は、以下のものから成る
リクエストまたはレスポンスの、本文（一行）
ヘッダ（複数行）
空行（本体がある場合）
本体（GETリクエストやエラーレスポンスでは省略される）
- ブラウザがヘッダを適切に解析する（ので通常は表示されない）
使える方法
- ブラウザの機能（内蔵またはアドオン）で確認する
hidehara氏の記事がよくまとまってます。
自分のブラウザで使える方法を実施して見て下さい。
- プロキシ型ツールを使う
Fiddlerが有用です。
（ネットワークプログラミングで使いましたが、本科目では紹介にとどめておきます）
実習(1)
（この実習はHTTPに関するものである）
IE（９以降）の機能を使ってみる。
他のブラウザ（chrome, firefox等）でも使い方はほぼ同等。
- F12 でツールが表示される
- 「ネットワーク」を選択
- キャプチャ開始（あとで停止させるように）
主なボタン：（右図）
- 要約<->詳細
- 表示させる内容を選択する
開発ツール - 他の機能
ブラウザの開発ツールは他にも様々な機能がある。
DOMエクスプローラ
ページの構造を表示する機能。
ブラウザは HTMLを読み込み、その構造を解析して、
DOM（右図）を生成する。
Webページを表示している状態で、
開発ツール画面（F12キー）の「DOM Explorer」ボタン（または Ctrl+1）で、
DOMエクスプローラが使える。
(ついでの)実習(2)
（この実習はHTMLに関するものである）
DOMエクスプローラで、
さまざまなWebページの DOMを観察する：
エクスプローラのツリー表示などと同様に、
⊿ は要素が折りたたみ表示された状態。これを展開すると、
▽ の表示になる。（矢印キーで操作できる）
この操作を繰り返し、
（DOMエクスプローラ画面で）カーソルが置かれたエレメントが、
（レンダリング画面で）色つき表示される
ことを確認せよ。
以下は次回
JavaScript コンソール
DOMを操作するJavaScriptの機能