Webプログラミング2 2.Webプログラミング 概 要 (2)
( 復 習 )Webとは 様 々な 利 用 シーン 様 々なデバイス/ブラウザ パソコン 携 帯 電 話 ゲーム 機 /TV 電 子 ブックリーダー 学 校 案 内 / 会 社 案 内 オンラインショップ ブログ/ 掲 示 板 /SNS/Twitter/Facebook 学 内 / 社 内 システム スケジューラ/カレンダー/Webメール 様 々なサイト Webブラウザ Internet Webサーバ 電 子 ファイ ル
( 復 習 )Webの 仕 組 み 様 々なブラウザ 端 末 がある 端 末 :PC(Windows Mac Linux) 携 帯 電 話 (i-mode Android ios) ゲーム 機 TV ブラウザ:Internet Explorer Fire Fox Safari Chrome 様 々な 機 器 で 動 作 するが あまり 多 くない サーバ:PC 系 ルータ 系 家 電 系 基 本 的 なサーバプログラム:httpd 製 品 :Apache HTTP Server (Apache)tomcatなど Webブラウザ Internet Webサーバ コンテンツ: 様 々なファイル HTMLファイル 画 像 ファイル
( 復 習 )Webプログラミングとは? Webブラウザでの 入 出 力 / 動 作 を 制 御 する データの 整 形 出 力 生 データをHTML 形 式 で 出 力 複 数 のデータを 組 み 合 わせて 出 力 など データの 入 力 保 持 ブラウザからのデータをサーバで 保 持 など データの 入 出 力 の 補 助 入 力 制 限 見 た 目 を 良 くする など
( 復 習 )トレードオフを 考 える コンテンツ 対 応 デバイス 対 応 ブラウザ 不 具 合 高 機 能 (リッチ) 基 本 機 能
(1)HTTPの 基 本 的 な 仕 組 み 1URL 2 リクエスト GET / HTTP/1.1 User-Agent: Firefox Cookie: xxx メソッド リクエストURI HTTPバージョン (メソッド:HEAD GET POST) 空 行 その 他 のヘッダ Webブラウザ 1 回 のリクエストに1 回 のレスポンス ステートレス Webサーバ 3 レスポンス MIMEヘッダ text/plain text/html image/jpeg など コンテンツ 空 行 HTTP/1.1 200 OK Date: Feb.18.2008 MIME-Version: 1.0 Content-Type: text/html <HTML> </HTML> ステータスコード 200 番 代 正 常 400 番 代 クライアントエラー 500 番 代 サーバエラー HTTPヘッダ
(2)プログラミングの 意 義 プログラムがないと いつも 同 じリンク 構 造 あらかじめコンテンツをHTML 形 式 で 加 工 しておく 必 要 がある プログラムがあると 状 況 に 合 わせてリンク 先 を 変 更 できる 必 要 なコンテンツをその 場 で 作 ることができる?
すべてプログラム 処 理 でWebを 作 ることもできるが プログラム 処 理 にすると 単 純 なファイル 出 力 より 遅 くなる 使 い 分 けが 必 要 いつも 同 じ 表 示 か? プログラムする 必 要 なし 毎 回 どこか 違 う 表 示 か? プログラムする 例 えば: その 日 の 日 付 をWeb 上 に 出 力 DBに 記 録 されているデータを 読 み 出 してWebで 閲 覧 大 量 のテキストファイルをすべてHTML 化 するのは 面 倒 プログラムでHTML 化 して 出 力 または 事 前 にプログラムでHTML 化 して Webではファイル 出 力
(3)プログラミングにおける 基 本 的 な 考 え 方 (i)ブラウザへの 出 力 プログラムで 出 力 する (ii)ブラウザからの 入 力 データを 受 け 取 る GETメソッド POSTメソッド ブラウザの 環 境 変 数 ブラウザの 違 い(IE FireFox Safari Chrome ) OSの 違 い(Windows Mac Linux ) 言 語 の 違 い( 英 語 日 本 語 ) 基 本 形 (iii)ばらばらなデータを 関 連 付 ける Cookie (iv) 高 度 な 処 理 Ajax HTML5(Canvas)
(i)ブラウザへの 出 力 HTMLタグを 組 み 合 わせて 標 準 出 力 CGI Servletなど テンプレートから 起 こして 標 準 出 力 CGI Servletなど ファイルにプログラムを 記 述 する JavaScript JSPなど <HTML> <HEAD> <TITLE>テスト</TITLE> <HEAD> <BODY> なにか 文 章 </BODY> </HTML> プログラム 中 で 組 み 合 わせる <HTML> <HEAD> <TITLE>テスト</TITLE> <HEAD> <BODY> <SCRIPT > print 今 日 の 日 付 は date です ; </SCRIPT> </BODY> </HTML> <HTML> <HEAD> <TITLE>テスト</TITLE> <HEAD> <BODY> 今 日 の 日 付 は%%%%%です </BODY> </HTML> プログラム 中 で 日 付 に 置 きかる
MIMEヘッダを( 自 分 で) 付 ける 場 合 MIME-Version: 1.0 Content-type: text/html ( 空 行 ) + コンテンツの 種 類 に 合 わせたものを 指 定 する text/html text/plain text/javascript image/jpeg など <HTML> <HEAD> <TITLE>テスト</TITLE> <HEAD> <BODY> </BODY> </HTML> テキストデータ HTMLファイル プレーンテキスト ファイル バイナリデータ 画 像 ファイル 音 声 ファイル アーカイブファイル ワープロファイル function samp( ) { var hensu; } スクリプトデータ javascriptファイル CSSファイル
(ii)ブラウザからの 入 力 データを 受 け 取 る URL 入 力 Web ブラウザ 色 々な 端 末 : IE FireFox Safari Chrome PC(Windows Mac Linux) 携 帯 電 話 タブレットPC 日 本 語 英 語 ドイツ 語 ロシア 語 中 国 語 韓 国 語 Web ブラウザ Web ブラウザ http:/xxx/yy?zzz ブラウザからの 環 境 変 数 FORMタグからの 入 力 データ URLに 埋 め 込 まれた 変 数 Webサーバ
?の 後 ろの 文 字 列 ブラウザ 自 体 の 情 報 FORMへの 入 力 データ
データの 受 け 取 り 方 法 プログラムの 動 作 箇 所 による 違 い(ブラウザ 上 サーバサイド) データの 種 類 による 違 い(POSTメソッド GETメソッド 環 境 変 数 ) エンコードされたデータの 受 け 取 り 受 け 取 ったデータの 中 は エンコードされている 場 合 がある プログラム 中 で 使 うにはデコードする 必 要 がある 色 々なブラウザからの 入 力 データを 正 しく 受 け 取 る 動 作 環 境 による 違 い ブラウザによるちがい 使 えるHTML( 等 )が 異 なる 言 語 による 違 い: 英 語 日 本 語 OSによる 違 い: 改 行 コード 日 本 語 コード ユーザの 利 用 環 境 の 違 い 表 示 サイズ プラグインの 種 類 プログラミングで 留 意 するのは 特 に 改 行 コードや 日 本 語 コード 他 の 項 目 はブラウザ 情 報 を 収 集 し 出 力 するHTMLで 留 意 する
日 本 語 処 理 にお 関 する 留 意 点 日 本 語 (2バイト 文 字 )の 送 信 base64エンコード 日 本 語 コードの 問 題 jisコード shift jisコード eucコード uniコード ブラウザの 日 本 語 環 境 ( 表 示 入 力 データ)はshift jisで 処 理 プログラムの 動 作 環 境 はeucやunicodeで 処 理 データ 送 信 (MIME)ではjisで 処 理 改 行 コードの 問 題 (OS 依 存 ) 日 本 語 コード 改 行 コード Windows SJIS r n Mac SJIS n ( 旧 OSは r) UNIX/Linux EUCまたはunicode n これらの 違 いをプログラムで 吸 収 する 必 要 がある
具 体 的 な 流 れ( 例 ) 日 本 語 入 力 Webブラウザ (Windows) FORM ブラウザでは 正 しく 見 える 日 本 語 JIS 改 行 n SJIS r n を base64 エンコード サーバ (Linux) 文 字 化 け おかしな 出 力 違 うものを 検 索 解 決 策 : プログラム 中 で base64のデコード 改 行 コードの 整 形 日 本 語 コードの 変 換 不 整 合 Base64を 戻 しただけでは プログラム 内 ではEUC nで 処 理 授 業 ではブラウザ サーバともにWindowsなので 問 題 なし
ブラウザの 環 境 変 数 ( 実 施 例 ) ブラウザ HTML ブラウザ 情 報 ブラウザの 種 類 端 末 の 種 類 IPアドレスなど <A>タグのハイパーリンクに 変 数 を 埋 め 込 み <FORM>タグの 利 用 METHODはGETとPOSTがある サーバサイドのプログラム 出 力 結 果 ブラウザ 情 報 入 力 データは 環 境 変 数 標 準 入 力 として 取 り 出 すことができる ただし 独 特 のフォーマットになっている
呼 び 出 し 元 HTML <HTML> <TITLE> 練 習 </TITLE> <HR> <A HREF="http://10.4.83.90/cgi-bin/2012/samp1.cgi">ブラウザの 環 境 変 数 の 表 示 </A> <HR> FORMからの 入 力 受 付 : <FORM METHOD="POST" ACTION="http://10.4.83.90/cgi-bin/2012/samp2.cgi"><BR> 数 字 と 英 文 字 の 入 力 <INPUT TYPE="text" NAME="sono1"><BR> 日 本 語 の 入 力 <INPUT TYPE="text" NAME="sono2"><BR> <INPUT TYPE="submit" VALUE="send"><BR> </FORM> <HR> Cookieは サーバから 個 別 のブラウザを 識 別 するために 番 号 を 付 与 します 最 初 にアクセスしたときはCookieのデータはありません <BR> <A HREF="http://10.4.83.90/cgi-bin/2012/samp3.cgi"> クリックしてみてください </A> ブラウザの 戻 るで 戻 って 再 度 クリックします <HR> </HTML>
(iii)ブラウザからのばらばらなデータを 関 連 付 ける Webの 基 本 プロトコルであるHTTPはステートレスである ブラウザ 上 では 一 連 の 連 続 的 な 操 作 をしているつもりでも サーバ 側 では 連 続 性 はない ステートレスなままだと ユーザの 識 別 ユーザ 識 別 による アクセス 制 御 ができない 解 決 方 法 の 一 つとしてcookieを 使 ったセッション 制 御 がある
入 力 を 受 け 付 けるには Web ブラウザ 基 本 的 に 独 立 Web ブラウザ Webサーバ 基 本 的 に 独 立 Web ブラウザ 基 本 的 に 独 立
Cookieの 概 要 Web ブラウザ 初 回 のアクセス 自 分 が 発 行 した 識 別 番 号 でユーザを 識 別 識 別 番 号 を 付 与 Web ブラウザ Webサーバ 識 別 番 号 付 きでアクセス Web ブラウザ ブラウザ 上 で 処 理 するのでユーザは 意 識 しないで 良 い
(iv) 高 度 な 処 理 Ajax: Asynchronous JavaScript + XML 画 面 遷 移 を 伴 わないでWebページを 更 新 する 方 法 JavaScriptの XMLHttpRequest を 使 う 方 法 以 前 からあったがGoogleマップから 流 行 Canvasオブジェクト Javascript DOMオブジェクトを 用 いる 2Dのグラフィックを 描 写 できる(3Dも 準 備 中 ) 以 前 からあったがHTML5として 正 式 に 標 準 化
Ajaxのふるまい 通 常 のJavaScript http:xxx.yyy.jp/zz1.html Ajax http:xxx.yyy.jp/zz1.html zz1.html Javascript zz2.html <A HREF= > zz1.html Javascript zz2.html <A HREF= > zz2.html
Ajaxの 流 れ http:xxx.yyy.jp/zz1.html Web サーバ 1 2 4 5 6 zz1.html <HTML> function samp(getfile) { http = new XMLHttpRequest(); } function callbackhandle() { } <A HREF= javascript:samp( xxx ) > <DIV ID= xxx NAME= xxx ></DIV> </HTML> 3
サンプルコード <HTML> <HEAD> <TITLE>Ajax Basic Sample</TITLE> <SCRIPT language="javascript" type="text/javascript"> function text2( getfile ) { var getfile; http = new XMLHttpRequest(); if (http) { http.onreadystatechange = callbackhandle; http.open("get", getfile, true); http.send(null); } } function callbackhandle() { if (http.readystate == 4 && http.status == 200) { document.getelementbyid("koko").innerhtml = http.responsetext; } } </SCRIPT> </HEAD> <BODY> <A href="javascript:text2('nextpage.html')">ajax</a><br> <DIV id="koko" name="koko"></div> </BODY> </HTML> POSTのときは 変 数 を 入 れる
HTML5 2010 年 に 久 々のメジャーバージョンアップ 大 きな 機 能 の 違 い 2D/3Dグラフィック 操 作 javascriptにおけるcanvasオブジェクト 動 画 音 声 の 再 生 オフラインWebアプリケーション cache-manifest 属 性 クロスドメイン 通 信 Ajaxの 強 化 多 様 な 入 力 フォーム サーバからのデータプッシュ バックグラウンドプロセス クライアントサイドデータベース など 最 新 ブラウザで 有 効
実 習 レポート1 普 段 どんなサイトを 見 ているか よく 使 うサイトを3つあげ 利 用 頻 度 利 用 目 的 利 用 頻 度 そのサイトの 特 徴 魅 力 を 述 べよ HTML 形 式 でレポートせよ ( 講 義 の 感 想 要 望 も 記 述 可 ) (10 点 ) メモ 帳 でテキストファイルに 記 入 HTMLのタグをつけて 書 いてみる( 拡 張 子 は.html) 書 いた 文 章 をブラウザで 表 示 して 確 認 所 定 の 場 所 に 提 出 10.4.83.90 kadai 20121010 ( 学 籍 番 号 ) 評 価 ポイント: 問 題 の 意 味 を 正 しく 理 解 して 回 答 していること HTMLを 記 述 できること
補 足 <PRE>~</PRE>タグ <BR>タグ も 併 用 すると 見 栄 えが よくなる 拡 張 子 を.htmlでセーブ ダブルクリックしてブラウザから 確 認