第01回.pdf

Web情報システム構成法 植原啓介 [email protected] 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 1  植原 啓介（うえはら けいすけ） 慶應義塾...

Web情報システム構成法 植原啓介 [email protected] 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 1  植原 啓介（うえはら けいすけ） 慶應義塾大学 環境情報学部 教授 研究分野 インターネット移動体通信、ITS、地理位置情報、他 実空間にあるものを繋ぐ、計測する、解析する インターネット自動車 集合知の解析 次世代インターネット 隅⽥川花⽕⼤会 ⽴川花⽕⼤会 ⼋王⼦花⽕⼤会 震災後のアクティビティ IPv6 アンテナ Sensors （携帯） 衛星通信設備の⼊れ替え ⻑期の運⽤を想定した 固定型設備 もともと使っていた 早期復旧⽤設備 ルータ 固定観測点線量情報提供 線量情報投稿サイト Safecastとの恊働 サイト MR and IPv6 Sensor IPv6 based on-board equipment Vehicle information can be 被害が⾮常に⼤きい場合には、施設 retrieved using SNMP/IPv6 の運⽤状態などの予想がつかない。 除染活動の成果観測 iPhoneアプリによる Yahoo!への情報提供 柔軟に対応していく必要がある。 情報提供 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 2 「Web情報システム構成法」の概要と到達目標 講義概要 Webはインターネット上で情報を提供する重要な基盤となっていて、無くてはなら ない存在になっています。この授業では、Web技術について、HTML, CSS, JavaScriptなどのWebページの記述、Webサーバおよびフォームの取扱いからはじ め、XMLやRDFなどの基盤となる技術について取り扱います。 主題と目標 Web技術の基礎とその設計哲学について学び、次世代のWebについて創造できるこ とを目標とする。また、文書の構造を示すHTML、見た目を指定するCSSを組み合 わせることによる、保守性とアクセシビリティに優れたWebページを記述する技能 を習得する。すなわち、下記のこと習得することを目標とする。 Webのアーキテクチャと技術の理解 文書の構造を示すHTML 見た目（スタイル）を指定するCSS 保守性とアクセシビリティ 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 3 授業の進め方 基本的には、講義および演習によって構成する。 講義では、技術の解説をおこなう。 実習では、講義で解説した内容を実際に手を動かして確認、習得しても らう。 講義で使う資料等はK-LMSに毎回登録する。 おおよそ講義と演習を1:2の比率で実施する。 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 4 成績の付け方 春学期14回、2単位 評価: 授業への貢献(20%)、日頃の課題(40%)、期末試験(40%) 評価基準 S Web技術のアーキテクチャをよく理解し、W3Cの勧告に従ったWebページ を制作でき、企画と表現にも優れている A Sに次ぐ B Web技術に一定の理解を持ち、ある程度の品質のWebページを制作できる C 技術の理解と技能の習得に大きな難点がある D 授業への参加の形跡が認められない程度にしか理解と技能を持たない 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 5 授業計画 第1回（4/8） Web技術の概要と歴史 第2回（4/15） 簡単なHTML文書の構造 第3回（4/22） CSSの仕組み 第4回（4/29） BOXモデル 第5回（5/13） 開発ツール 第6回（5/20） オンラインフォントと画像 第7回（5/27） いろいろなCSSの書き方 第8回（6/3） リンクと箇条書き 第9回（6/10） Webサーバ 第10回（6/17） フォームインタラクション 第11回（6/24） JavaScript入門（１） 第12回（7/1） JavaScript入門（２） 第13回（7/8） Webデータ 第14回（7/15） RDF入門 注意: 授業の進捗によっては多少の変動がある可能性があります。 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 6 質問 HTMLという言葉を聞いたことがある人? CSSという言葉を聞いたことがある人? JavaScriptという言葉を聞いたことがある人? Webページの制作は高校で習った程度にはできる人? 自分のホームページを持っている人? 職業（含むアルバイト）でWebページ制作をやっている人? 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 7 Web CERNって知ってますか? 日本語では「欧州原子核研究機構」と呼ばれているスイスにある研究機関 Timothy John Berners-Lee (Tim Berners-Lee)を知ってますか? 人の名前です。 2012年のオリンピックの開会式に登場しました。 Webの生みの親です。 Webは、TimがCERNに在籍していた1989年に開発されたシステムです。 CERNでは数多くの研究者が様々な情報を扱っているが、その情報共有が問題となっていた。 Timは研究所内の情報共有のために、World Wide Web (Web)を開発した。 同世代には、GopherやWAISといった情報共有システム（情報検索システム）もあったが、Webに駆 逐された。 NCSA MosaicやNetscapeといったブラウザの登場によって、Webの地位が決定付けられた。 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 8 CERN (European Organization for Nuclear Research) Google map Google map Pictures from http://public.web.cern.ch/public/ 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 9 情報管理の３つの方法を比較 木構造 キーワード ハイパーテキスト 階層管理 検索が簡単。 どんな構造も表 管理が簡単。 先にキーワードを 現可能。 複雑な現実を表す 与える必要がある。 キーワードは ことができない。 利用者はキーワー ノードとして実 ドが分からない。 現。 WEB 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 10 Web = Internet + Hypertext Hyperlink text ⽂書 text Hyperlink text ⽂書 text text ⽂書 text Hyperlink text ⽂書 text 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 11 Webの構造 クライアント-サーバ型のシステム request Internet response doc サーバ クライアント（Webブラウザ） 基本的には、サーバ上にあるコンテンツをクライアントに持ってきて、クライアント側でレ ンダリングをする。 主なファイルの種類としては、HTML、CSS、画像(pngやjpg)、JavaScriptなどがある。 プログラムによって生成されるコンテンツもある。 JavaScriptの場合は、Webブラウザによって実行される。 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 12 Webはどうして普及したのか？ 無料 Gopherはライセンス上の問題があった(学術研究利用のみ無料) オープンシステム だれでもが参加できる 検索エンジンが文書を自動的に集める 雪だるま効果 厳密さにこだわらない リンク先がない（404 Not Found） ハイパーテキストとしては ⽋陥品 HTML文法エラー 標準化 IETF World Wide Web Consortium 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 13 Web 1.0 から Web 2.0 へ 1990 2000 2010 Web 1.0 Web 2.0 Web 3.0 HTML CSS XML Ajax blog SNS HTTP Web Services Social Bookmark RIF URL RDF OWL SPARQL Linked Data Personal Cooperate Personal Use Use Use read read read write only write Intranet World Community Wide 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 14 人と人とのコミュニケーションを円滑に だれでもが使うことができる： User Agent テキスト形式 Accessibility Guideline 特別なソフトウェアは必要としない Authoring Tool 国際化 Accessibility 色々な言語に対応 Guideline ルビ Web Content Accessibility 縦書き Guideline アクセシビリティ Perceivable 障害者も利用できる Operable Understandable 内容と表現の分離 Robust 音声ブラウザ どこからでも使うことができる： OS非依存 デバイス非依存 PC, TV, mobile phone, IoT 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 15 人とコンピュータのコミュニケーションを円滑に Webによる問題解決： 検索エンジンはページを探すだけ 検索エンジンですべてできるわけではない HTML文書は人が読み理解しなくてはいけない セマンティックWeb： コンピュータが処理できるようにデータを用意する エージェントがデータを集めて問題解決する HTML + RDF 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 16 HTMLはどうやって書く? テキストエディタ 文書を編集するためのソフトウェア 一般的には文書を装飾するための機能などは存在しない VSCodeなどを利用する 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 17 本授業においての注意 HTMLやCSSを編集するときは、WordやPowerPointなどのソフトではなく、 テキストエディタ（TeraPadやメモ帳、VScode）を使う。 ブラウザはChromeを基本とする。 Internet ExploreやEdge、Firefoxでも構わないが、多少動作が違うことがあるので注意。 課題をやるときには、新しいフォルダ（ディレクトリ）を作って、そのフォル ダの中で行う。 フォルダ例: Web情報システム構成法¥ex01 課題の提出は、フォルダをzipで圧縮して、圧縮したファイルを提出する。 2024/4/3 Web情報システム構成法©Keisuke UEHARA ([email protected]) 18