演 習 中 心 の 講 義 とし 解 説 した 事 項 は 基 本 的 に 演 習 で 動 作 を 確 認 する 講 義 を 通 し 机 上 の 知 識 ではなく 知 識 を 活 用 する 力 を 身 につけることを 目 指 す 演 習 室 (1312 室 )の 制 限 で 本 講 義 の 履 修

Transcription

1 Webプログラミング1 ガイダンス Web (1 章 ) 2013/4/10( 水 ) Webプログラミング1 ガイダンス 1/31 2/31 計 算 機 上 で 効 率 的 に 情 報 を 蓄 え 分 析 し それを 配 信 する 方 法 について WWW(World Wide Web)を 中 心 に 学 習 する 関 連 技 術 (HTML CGI JavaScript XMLなど) に ついても 定 義 利 点 利 用 方 法 について 理 解 する 講 義 形 式 は 演 習 を 中 心 に 自 分 のWebサイトを 作 成 できるようになることを 目 標 とする 関 連 講 義 である Webプログラミング2 の 入 門 編 の 位 置 付 け 日 時 講 義 内 容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/8 ( 水 ) HTML+CSS (3) (2 章 ) 5/15 ( 水 ) HTML+CSS (4) (2 章 ) 5/22 ( 水 ) HTML+CSS (5) (2 章 ) 5/29 ( 水 ) HTML+CSS (6) (2 章 ) 6/5 ( 水 ) HTML+CSS (7) (2 章 ) 日 時 講 義 内 容 6/12 ( 水 ) CGI (3 章 ) 6/19 ( 水 ) JavaScript (1) (4 章 ) 6/26 ( 水 ) JavaScript (2) (4 章 ) 7/3 ( 水 ) JavaScript (3) (4 章 ) 7/10 ( 水 ) JavaScript (4) (4 章 ) 7/17 ( 水 ) XML (5 章 ) 7/24 ( 水 ) レポート 出 題 7/31( 水 ) レポート 提 出 と 解 説 講 義 の 狙 い 講 義 計 画 3/31 4/31

2 演 習 中 心 の 講 義 とし 解 説 した 事 項 は 基 本 的 に 演 習 で 動 作 を 確 認 する 講 義 を 通 し 机 上 の 知 識 ではなく 知 識 を 活 用 する 力 を 身 につけることを 目 指 す 演 習 室 (1312 室 )の 制 限 で 本 講 義 の 履 修 可 能 人 数 は50 名 までです 履 修 希 望 者 は 履 修 登 録 期 間 (4/8( 月 )~4/14( 日 ))に 履 修 登 録 をお 願 いします 次 回 講 義 (4/17( 水 ))の 際 出 席 者 が50 名 を 超 えた 場 合 は 先 着 者 を 優 先 するので 遅 刻 しないように 講 義 の 進 め 方 成 績 評 価 は 以 下 の 方 針 とします 演 習 への 取 り 組 み 状 況 ( 毎 回 ) 50% レポート 内 容 50% 出 席 3 分 の2 以 上 (10 回 )を 単 位 取 得 の 条 件 とします ( 出 席 状 況 が3 分 の2に 満 たない 者 のレポートは 採 点 しません) 出 席 は 講 義 回 ごとに 取 ります 成 績 評 価 5/31 6/31 Webの 仕 組 みを 知 りたい 自 分 のホームページを 作 れるようになりたい プログラミングが 好 き IT Text 基 礎 Web 技 術 監 修 : 松 下 温 著 者 : 市 村 哲 宇 田 隆 哉 伊 藤 雅 仁 出 版 社 :オーム 社 定 価 :2625 円 ( 本 体 2500 円 + 税 ) A5 204 頁 ISBN こんな 方 にお 奨 めです 教 科 書 7/31 8/31

3 作 れる!わたしのWebサイト 著 者 : 今 村 勇 輔 +エクスナレッジ 出 版 社 :エクスナレッジ 定 価 :2200 円 + 税 情 報 演 習 5ステップ30 JavaScriptワークブック 著 者 : 相 澤 裕 介 出 版 社 :カットシステム 定 価 :800 円 + 税 参 考 書 9/31 演 習 室 のPCのハードディスクには 演 習 で 作 成 した データは 保 管 できません 下 記 対 応 をお 願 いします 各 PCの ネットワーク 接 続 ショートカットからメディ ア 情 報 センターのサーバにアクセスできるようにな ります(Zドライブ) 自 分 のIDのマイドキュメント に 保 管 する また 演 習 で 作 成 したデータを 自 宅 などに 持 ち 帰 る ために 各 自 でUSBメモリを 準 備 することをお 勧 めし ます 講 義 で 使 うフォルダ 10/31 Webプログラミング1 Web (1 章 ) 1970 年 代 にアメリカの 軍 事 / 研 究 者 用 のコンピュー タ ネットワークとして 開 発 された 1990 年 に 商 用 利 用 が 解 禁 される 元 はLAN(Local Area Network) 同 士 を 接 続 するため の 共 通 規 格 として 開 発 されたが インターネットの 接 続 方 法 によってLAN 自 体 も 構 築 するのが 今 は 普 通 である 特 にインターネットの 接 続 の 規 格 は TCP/IP と 呼 ばれる インターネットの 特 徴 (1) 11/31 12/31

4 分 散 的 に 管 理 が 行 われて 中 央 のコントロールセンターに 相 当 するものはない 接 続 されたコンピュータはそれぞれ 対 等 の 関 係 にあるため 障 害 時 全 体 に 波 及 しない 利 用 は 無 料 基 本 原 理 は 情 報 は 隣 り 合 ったマシン 同 士 がデータを 交 換 することによって 遠 くまで 伝 わっていく いわゆる バケツリ レー と 同 じ 原 理 このリレーされるデータを パケット と 呼 ぶ インターネットでは 接 続 するマシンの 種 類 を 選 ばない しかし インターネット 自 体 はUNIX 系 OSによって 発 展 して 来 ているた めに Windows の 常 識 は 通 用 しないことが 多 いので 注 意 が 必 要 1969 年 米 国 国 防 総 省 が 核 戦 争 になっても 寸 断 されないコンピュー タネットワークの 構 築 を 目 指 し 四 大 学 間 で 接 続 実 験 を 行 う 1970 年 多 くの 大 学 や 研 究 機 関 がARPANETに 参 加 1983 年 TCP/IPがARPANETの 標 準 プロトコルとして 確 定 する 1984 年 日 本 で 初 めて 東 京 大 学 東 京 工 業 大 学 慶 応 義 塾 大 学 が ネットワークにより 結 ばれる 1995 年 Windows95の 普 及 を 受 けてインターネット 接 続 が 拡 大 WWW のトラフィックがFTPのトラフィックを 上 回 る 1996 年 社 内 グループウェアのWebサービス 化 が 始 まる 1999 年 携 帯 電 話 向 けWWWサービス (iモード) 開 始 インターネットの 特 徴 (2) 13/31 インターネットの 系 譜 14/31 サーバー:サービスを 提 供 する 計 算 機 メールサーバ POPサーバ ウェブサーバ ドメインネームサーバ など クライアント:サービスを 受 ける 計 算 機 メールクライアント:Outlook Eudoraなど ウェブクライアント:Internet Explorer Firefoxなど 既 存 のアプリケーションの 殆 どはサーバー クライア ント 方 式 サーバとクライアントの 区 別 のないP2P(Peer to Peer) 方 式 も 注 目 を 集 めつつある インターネットでは 基 本 的 に 双 方 向 時 自 由 に 通 信 が 可 能 誰 でも 自 由 にサーバを 設 置 でき 誰 でも 自 由 にサーバにア クセスが 可 能 但 し セキュリティを 確 保 する 目 的 で この 原 則 は 崩 れつつ ある 権 限 のあるユーザのみ アクセス 可 能 なことを 示 す サーバーとクライアント 15/31 双 方 向 性 16/31

5 インターネット 上 で 通 信 相 手 を 特 定 するための 識 別 子 インターネット 上 の 全 てのノードに 割 り 当 てられている IPv4 : 32bit 約 50 億 個 のノードを 利 用 可 能 世 界 人 口 60 億 人 以 上 4つの10 進 数 を.(ドット)で 繋 げて 表 現 する IPv6 : 128bit IPアドレスは 覚 えにくい 間 違 えやすい ドメイン 名 ドメイン 名 : 意 味 のある 名 前 (ホスト 名 ) 世 界 中 でユニークな 名 前 を 生 成 するためにドメインを 使 用 ドメインを 省 略 せずに 書 いたホスト 名 がFQDN FQDN (Fully Qualified Domain Name) IPアドレスはマシンの 入 替 えなどによって 変 更 される 場 合 もある ドメイン 名 で 全 て 接 続 する 場 合 には 影 響 がない IPアドレス 17/31 ドメイン 名 (1) 18/31 電 子 メール World Wide Web (WWW) ファイル 共 有 ストリーミング ( 動 画 配 信 ) IP 電 話 (VoIP:Voice over IP) ドメイン 名 (2) インターネット 上 のアプリケーション 19/31 20/31

6 世 界 中 に 張 られた 蜘 蛛 の 糸 インターネットの 爆 発 的 普 及 の 原 動 力 利 用 しやすいクライアント(Web) 画 像 や 音 声 などのマルチメディア 情 報 ハイパーリンクによる 情 報 間 の 連 携 サーバクライアント 方 式 による 情 報 提 供 誰 でも 低 コストで 世 界 に 対 して 情 報 発 信 可 能 blogもwebの 一 部 HTML(Hyper Text Markup Language) マルチメディアデータを 記 述 可 能 ハイパーリンク HTTP(Hyper Text Transfer Protocol) マルチメディアデータの 送 受 信 URI(Uniform Resource Identifier) インターネット 上 の 情 報 を 統 一 的 に 記 述 URL(uniform Resource Locator)は URIの 一 部 World Wide Web (WWW) 21/31 WWWの 要 素 技 術 22/31 サーバ WWWサーバ URLを を 指 定 クライアント WWW Apache あった インターネット HTMLファイルを 送 信 自 分 のコンピュータ ( 携 帯 もコンピュータ) Microsoft WWWサーバ: 指 定 されたURLに 対 して 該 当 するホームペー ジのファイルを 送 るソフトウェア(Apacheなど) WWW:WWWサーバ 上 のファイルを 見 るためのソフト ウェア 電 子 メールや 電 子 ニュースも 扱 える(Internet Explorer Firefox) WWWの 仕 組 み 23/31 WWWサーバのシェア Netctract 社 調 査 結 果 Apache(シェア1 位 ):オープンソースのWWWサーバ Microsoft(シェア2 位 ):Windowsサーバに 搭 載 されたWWW サーバ IIS(Internet Information Services) 24/31

7 Firefox Safari IE Chrome Opera WWW 上 でホームページを 記 述 するための 言 語 基 本 は 文 字 の 塊 文 字 だけでは 記 述 出 来 ないもの( 画 像 等 )は ファ イル 名 として 記 述 して ホームページに 取 り 込 んだり 別 のアプリケーションを 起 動 させて 処 理 する 拡 張 子 をつけて そのファイルの 内 容 を 表 す WWWのシェア 25/31 HTML (Hyper Text Markup Language) 26/31 拡 張 子.html,.htm.gif,.jpeg,.jpg.doc.xls.ppt.avi.qt,.mov.mpeg.ra.wav.aif,.aiff.au,.snd.pdf 説 明 処 理 するもの HTML 形 式 静 止 画 像 WORDの の 文 書 MS WORD EXCELのデータ MS EXCEL PowerPointのデータ MS PowerPoint MSの の 動 画 Quick Time: 動 画 MPEG: 動 画 Real Audio: 音 声 Real Audio Wave 形 式 の 音 声 Aiff 形 式 の 音 声 AU 形 式 の 音 声 PDFのデータ が 扱 うデータとその 拡 張 子 27/31 WWWサーバを 呼 び 出 すプロトコル ( 例 ) <A HREF= 湘 南 工 科 大 学 のホームページ</A> 1. httpのプロトコルを 使 って 2. バにアクセス 3. index.htmlというデータを 貰 ってきて 4. WWW 上 に 表 示 する HTTP (Hyper Text Transfer Protocol) 28/31

8 同 一 のある 組 織 の 多 くのユーザが 同 じURLをアクセスする 場 合 そのURLの 内 容 があまり 変 化 しない 場 合 には そのURLにある 同 じ 内 容 が 複 数 のユーザのWWWに 返 るので URLの 場 所 がネットワーク 上 で 遠 くの 場 合 には 無 駄 なトラフィックが 流 れる ユーザはWWWのproxyの 設 定 で proxyサーバを 指 定 す る 事 によって 直 接 URLで 記 述 されたWWWサーバにアクセスする のではなくて proxyサーバを 経 由 することで 効 率 良 くホーム ページを 見 ることができる proxyサーバの 仕 組 み 1. 指 定 されたURLがサーバ 内 にあるか 調 べる 2. あれば その 内 容 をユーザに 返 し なければ 直 接 URLをとりにい く 情 報 検 索 (google, youtube) 検 索 エンジン 地 図 検 索 辞 書 検 索 映 像 検 索 など 電 子 商 取 引 (amazon, 楽 天 ) オンラインショッピング オークション オンラインバンキング など 予 約 サービス (eki-net, チケットぴあ) 座 席 予 約 番 組 予 約 チケット 予 約 など コミュニケーション (blog, twitter, mixi, facebook, google+) Webメール Web 掲 示 板 スケジューラなど proxy 29/31 さまざまなWeb Webサービス 30/ 年 HTML1.0 ティム バーナーズリーが HTML HTTP URLなどの 今 日 のWWWの 基 礎 を 考 案 科 学 文 書 の 情 報 公 開 のための 機 能 のみを 備 えていた <img>タグも 存 在 しなかった 1995 年 HTML 年 以 前 に 使 用 されていたHTMLが 整 理 された HTML 内 に 画 像 を 埋 め 込 むための<img>タグや ユーザ 入 力 のための<form>タグなどが 追 加 された 1997 年 HTML3.2 HTML2.0との 互 換 性 を 保 ちつつ 新 たな 機 能 を 追 加 表 のための<table>タグ JavaScriptをHTML 内 に 記 述 する <script>タグ JavaアプレットをHTML 内 に 埋 め 込 む <applet>タグなどが 追 加 された HTML4.0 データ 構 造 と 見 栄 えの 分 離 が 提 言 され スタイルシー トの 導 入 共 通 属 性 の 推 奨 が 実 施 された HTML4.0の 推 奨 事 項 に 適 合 したWebページはまだ 少 ない HTML 機 能 の 変 遷 31/31