Web情報システム第1章～第5章

(1)

Web情報システム

―マルチメディア情報通信ソフトウェア

第

1章～第4章

(2)

Web情報システム

マルチメディア情報の流通

Web情報システム概論 デジタルメディアの特徴

デジタルメディアの記述

HTML (Hyper Text Markup Language) Css (Cascading style sheet)

デジタルメディアの制御

JavaScript

コンピュータとネットワークの基礎

_{Operating system (file system と木構造)} TCP/IPとHTTP

(3)

参考書

【XHTML/css 入門】  HTML5 & CSS3 レッスンブック、ソシム、ISBN 978-4883378722 【HTML, XHTML/css】  HTML5 & CSS3 デザインブック、ソシム、ISBN 978-4883379644  Web標準の教科書、秀和システム、ISBN 978-4798010922

 実践 Web Standerds Design、技術評論社、ISBN 978-4774136844

 HTML5&CSS3実践入門、ブライアンP.ホーガン、ISBN978-4-8443-3048-6 【Javascript】  JavaScript 第6版、オライリー・ジャパン、ISBN 978-4873115733 【CGI/サーバ側プログラミング】  初めてのPerl 第5版、オライリー・ジャパン、ISBN 978-4873114279 ₃

(4)

準備

(5)

Mozilla Firefox, Portable Edition



Mozilla Firefox

_{Webブラウザ}

Microsoft Internet Explorer に次ぐシェア

_{Webの標準への準拠の度合いがIEよりよい}



Portable Edition

持ち運び可能にした版

_{USBメモリなどで同一環境をどこでも利用できる}

(6)

PortableApps.com



http://portableapps.com



Applications – Internet カテゴリにある



適当な最新版を

download

Ver. 37.0.1 (2015. 4. 8現在)



USBメモリなどにインストールできる

6

(7)

Sakura editor



テキストエディタ

書式のつかない単純な文字列の編集 プログラムを書くのに使う HTML, CSS, JavaScript 7

(8)

WORLD WIDE WEB

第1章

(9)

Web情報配信の概要



デジタルコンテンツ

デジタル情報で記述された何らかの情報



デジタルメディア

デジタルコンテンツを蓄積、配送などする媒体



Web情報システム

インターネットにおいて、HTTPを用いる HTMLを基盤とするコンテンツ 9

(10)

前提知識：コンピュータと

OS



コンピュータ

電子計算機: デジタル情報の処理、入出力



Operating system

基本操作プログラム群 ファイル入出力（通信機能含む） ユーザ管理（認証、権限） プロセス管理（マルチタスク、プロセス分離） 10

(11)

ファイル



OS内での情報のひとかたまり（単位）

人間の認知的なひとかたまり



多数のファイル管理

木構造で分類、格納 ファイルシステム ディレクトリ構造 11

(12)

Tree structure – 木構造



情報の整理、格納（図書館での分類）



順序付けすれば、整列できる



整列されていると検索が高速

_{𝑂𝑂 log 𝑛𝑛} オーダ記法（ここで 𝑛𝑛はデータ数）



性能の振り方で多数の木構造がある

binary tree, B-tree

_{trie構造などの派生形も}

(13)

木構造と表記

(Root) Node01 Node11 Leaf01 Leaf02 Node12 Leaf03 Node02 Node03 Node31 Leaf32 Leaf33 Node34 Leaf35 Leaf36 Leaf41 Leaf42 13 1. 端から分岐方向を辿って示す。 2. 「接点 Node (頂点 vertex)」名で示す 3. 区切り文字（/; slash） 4. 左端 node は「根 root」 5. 左側が「親 parent」、右が「子 child」 6. 一般的に｢先祖」「子孫」という用語も 7. 子のいないNodeは「葉 leaf」例) (Root)/Node01/Node12/Leaf03 ファイルシステムでは、根の表記を省略 /Node01/Node12/Leaf03 _{Abstract path （絶対パス）}

(14)

Current directory

-

木構造一般ではなく、ファイルシステムの話 (Root) Node01 Node11 Leaf01 Leaf02 Node12 Leaf03 Node02 Node03 Node31 Leaf32 Leaf33 Node34 Leaf35 Leaf36 Leaf41 Leaf42 14 1. 絶対パスは間違いがないが長い！ 2. 操作対象のディレクトリ 3. ｢今」操作対象のディレクトリ  Current directory 例) (Root)/Node03/

(15)

Relative path 相対パス

(Root) Node01 Node11 Leaf01 Leaf02 Node12 Leaf03 Node02 Node03 Node31 Leaf32 Leaf33 Node34 Leaf35 Leaf36 Leaf41 Leaf42 15

1. /Node03/ がcurrent directory 2. Current directory内のファイル 1. Leaf36 _{/Node03/Leaf36} 3. Current directoryより下のディレクトリ 1. Node31/Leaf32 4. 上（親）ディレクトリも指し示したい 5. .. ひとつ上 6. ../Node02 7. ../Node01/Node12/Leaf03 8. ../../ のように2つ上も示せる

(16)

HTML



コンテンツ（間）の構造を記述



1991年～



現在は、

HTML5 (Recommendation)

2014-12-08現在の最新は、28 October 2014 _{http://www.w3.org/TR/html5/} 16

(17)

17 インターネット Webサーバ閲覧端末クライアント Client Server HTML HTML CSS JavaScript HTML, CSS, JavaScript 組み合わさって表示

(18)

Web情報配信モデル



Client – Server model



Client主導

HyperText Transfer Protocol (HTTP)

• 信頼性のある（データが欠落しない）通信路を使う • 一般的には、TCP/IP 1. 下位層(TCP)で、serverに接続 2. HTTPで、取得したいcontent識別子を送る 3. serverより、HTTPでcontentを受け取る 18

(19)

serverへの接続



TCP/IP

_{IPアドレスでサーバを指定}

TCP port番号で、サーバ内のプロセスを指定

_{IPアドレスの代わりにFQDN名を使うのが一般的}

• Domain Name System (DNS)



識別子

(identifier)



www.kogakuin.ac.jp:80

(20)

contentの指定



server内ファイル

絶対pathで指定 HTTPで公開されているディレクトリ構造 _{OS上のファイル構造の一部に一致させる運用が} 多い



/path/to/content.html

20

(21)

URL



Uniform Resource Locator; 統一資源位置指定子



http://www.kogakuin.ac.jp:80/path/to/file.html



http : scheme



_{www.kogakuin.ac.jp}

_{: host name}



80 : TCPport



/path/to/file.html : host上でのファイル識別子

(22)

省略記法



TCP port

_{HTTPでは、TCP/80}



ファイル名

serverで決めた補遺ファイル名 index.html などが一般的



http://www.kogakuin.ac.jp/path/

_{http://www.kogakuin.ac.jp:80/path/index.html}



http://www.kogakuin.ac.jp/path

は誤りらしい



http://www.kogakuin.ac.jp

は正しい

22

(23)

HTML

HyperText Markup Language



木構造となるデータ構造を

通信できるようテキストで記述する言語 プログラム言語と同様、コンピュータが解釈



根要素

(root element)は、 html



Root(html要素)直下には、

head と body の2要素

• headの下には、title, link, meta など • bodyの下には、h1, p, ul, div など

(24)

WEBによる情報発信の体験

第2章

(25)

空の

HTML5

厳密に空 <!DOCTYPE html> <html lang=“ja”> <head> <title></title> </head> <body> </body> </html> さらに省略もできる <!DOCTYPE html> <html lang=“ja”> <title></title> </html> 25

(26)

空の

HTML5

<!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“utf-8” /> <title></title> </head> <body> <p></p> </body> </html> 26 HTML5であることの宣言 HTMLの根要素。Lang属性で日本語を指定文書のヘッダ（付加情報）開始文書の文字コード utf-8を指定文書のタイトルヘッダ終了本文領域開始段落本文領域終了 Html終了

(27)

わかりにくいので少し追加

<!DOCTYPE html> <html lang=“ja”> <head>

<title>ここにWebページのタイトルを書きます</title>

</head> <body> <p>ここが本文で、ひとつの段落を意味します。</p> </body> </html> 27

(28)

Head要素



文書のメタ情報を格納する。

Title • 文書のタイトル Link • 他の文書(resource)との関係 • 詳しくは次回以降 28

(29)

Body要素



文書の本文



h1, h2, h3, …, h6

文書の見出し



p

段落



ul

箇条書き 29

(30)

要素の記述



要素をテキストで記述する

タグで囲む  開始タグと終了タグ <title>文書のタイトル</title> _{<p> 段落の中身<em>強調文字列</em> </p>} <ul> <li>1個目の項目</li> <li>2個目の項目</li> </ul> 30

(31)

タグの記述



入れ子になると、木構造の子を指す。

<ul> <li>1個目の項目 <ol> <li>入れ子の1番目の項目</li> <li>入れ子の2番目の項目</li> </ol> </li> <li>2個目の項目</li> </ul> ₃₁

(32)

開始タグと終了タグ



対応関係は明確に

_{<p><em></p></em> というのはダメ} _{<p><em>...</em></p> ならOK} • p要素の下にem 要素がある 32

(33)

<!DOCTYPE html> <html lang="ja"> <head> <title>HTML5 サンプルファイル</title> </head> <body> <section> <h1>Web情報システム理解のための最初の一歩</h1> <p> この科目では、次の4つの項目を通じて<br /><em>Web情報システムの動作とコンテンツの記述の基礎</em>を学び、マルチメディア情報流通社会の基盤技術について理解を深めます。_</p> <ul> <li>Web情報配信の仕組み <ol> <li>Webブラウザ（クライアント）は、Webサーバに（通常TCP/IPで）接続します。</li> <li>クライアントは欲しいコンテンツをサーバに要求します。</li> <li>サーバは要求に対応するコンテンツ（HTML）を送り返します。</li> </ol> </li> <li>コンテンツの構造を規定するHTML</li> <li>コンテンツの見映えを規定するcss</li> <li>コンテンツの動的性質を規定するJavaScript</li> </ul> </section> </body> </html> 33

(34)

<body> <h1>まずは大見出し</h1> <p>最初の段落を書いてみます。複数の文を含んで構いません。<img src=“someimage.jpg” alt=“sample image” />の画像のように文中に含めることもできます。<br />改行も表現できます。これらは中身のテキストがないため、空要素と呼ばれます。_</p> <ul> <li>箇条書きの1番目の項目。</li> <li>箇条書きの2番目は、さらなる箇条書き。 <ul> <li>入れ子になった箇条書きの1番目。</li> <li>入れ子になった箇条書きの2番目。</li> </ul> </li> </ul> <p>このように、箇条書きを<em>入れ子</em>にするとどうなるか確認してみましょう。</p> </body> 34

(35)

Validator

(3.4)



The W3C Markup Validation Service

http://validator.w3.org/



XHTML/HTML 文書の妥当性検証

コンピュータが解釈できる = エラー0 かを見る

(36)

HTMLは要素をmarkupする



段落

開始～終了

_{<p>段落の最初と最後にタグが必要</p>} (間違い例) 段落の区切りにタグを使う<p> 次の段落 36

(37)

Body要素内の要素

 h1, h2, h3, …, h6  文書の見出し  _section  セクション  _p  段落  _{ul, ol}  箇条書き(ul: 番号無し, ol: 番号あり)  em, strong  強調（em: 強調, strong: 最強調） 37

(38)

空要素



マークアップすべきテキストのない要素

_{Hyper-Text Markup Language}

Markup: 注釈（文書内での指示）



meta: HTML文書のメタ情報

文書自体の説明など



br: 改行



img: 画像の挿入

38

(39)

br要素



文字列の改行を表す。

段落とは無関係なので注意すること。 乱用しない。



<br />

開始タグと終了タグをひとつで表したような物。 空要素を表現するタグ記述。 39

(40)

block element と inline element

- HTML5のコンテンツモデル（一部）



HTMLの要素

_{block 要素} inline 要素



body直下には、block 要素

いきなりinline 要素は置けない



inline 要素下

block 要素は置けない 40

(41)

block level と inline level

(HTML4.01までの概念)



block 要素

広い矩形領域で表示されることが一般的な要素

p, section, h1..h6, blockquote, div, ul, ol, dl, table

など



inline 要素

行の一部として表示されることが一般的な要素

a, em, strong, br, code, img, q, span

(42)

コンテントモデル

- HTML5



flow content

一般的なテキスト本文のようなもの

cf. sectioning content, heading content



phrasing content

文書のテキスト（段落内にあるもの）



formatBlock candidate

矩形領域で描画されようとするもの

(43)

blockquoteとq



blockquote

長い引用ブロック



q

短い引用文



いずれも引用した文などを指す

43

(44)

Block要素とinline要素

良い例

悪い例

良い例

<p><q>To be or not to be…</q>という言説</p>

悪い例

(45)

img要素



文書中に画像を挿入（貼る）する。

写真、イラスト 罫線、区切り、装飾



属性

要素に細かい指示を与える。 挿入する画像URL。 画像が表示できない環境のための代替文字列。 45

(46)

imgタグ



<img src=“../img/image01.jpg” alt=“とある写真”

/>



src属性

画像のありかを示すURL。 _{httpなどで始まるURL} / から始まるホスト内絶対path 相対path



alt属性

代替説明用文字列。 46

(47)

src属性



URL

<img src=“http://...” />



絶対

path

<img src=“/path/to/images/…” />



相対

path

<img src=“myphoto.jpg” /> _{<img src=“path/to/images/myphoto.jpg” />} <img src=“../../path/to/images/myphoto.jpg” /> 47

(48)

alt属性



代替文字列

画像の代わりに表示・発音すべき文字列 <img src=“...” alt=“タスマニアの風景写真” />



音声読み上げブラウザ

画像を見ない人にもスムーズなWeb体験を 48

(49)

ハイパーリンク



Hyperlink

他の文書へのポインタ リンクアンカー • クリックなどで他の文書へ切り替わる領域



a要素

href 属性



<a href=“http://www.icu.ac.jp”>国際基督教大学

</a>

内容 リンクアンカー（文字列） 49

(50)

a要素



URL

<a href=“http://www.example.com” >...</a>



絶対

path

<a href=“/abstract/path/…”>...</a>



相対

path

<a href=“myphoto.jpg”>...</a> _{<a href=“path/to/images/myphoto.jpg”>...</a>} <a href=“../path/to/images/myphoto.jpg”>...</a> 50

(51)

表



table element





「行」と「列」

row and column

Column: 1 2 3



Row 1:



Row 2:



Row 3:

(52)

表

Column: 1 2 3



Row 1:



Row 2:



Row 3:



Rowは、tr要素

<tr>...</tr>



各セルは、

td要素

<td>...</td> 52 セル

(53)

table要素の基礎

Column: 1 2 3



_{Row 1:}



Row 2:



Row 3:



Row: tr element, cell: td element

<table>

</table>

53 1-1 1-2 1-3 2-1 2-2 2-3 3-1 3-2 3-3

(54)

セルの結合



セルの結合

横方向の結合 縦方向の結合

<table>

<tr><td

colspan=“2”

>2-1</td> <td>2-3</td></tr>

</table>

54 1-1 1-2 1-3 2-1 2-3 3-1 3-2 3-3

(55)

セルの結合



セルの結合

<table>

<td

rowspan=“2”

>1-3</td></tr>

</table>

₅₅ 1-1 1-2 1-3 2-1 2-2 3-1 3-2 3-3

(56)

複雑な

table



セルの結合

複雑な表も組めます

<table>

<td

rowspan=“2”

>1-3</td></tr>

<tr><td

colspan=“2” rowspan=“2”

>2-1</td></tr>

</table>

₅₆ 1-1 1-2 1-3 2-1 3-3

(57)

table element



table : 表組み

tr : 行(row) _{td : セルデータ} th : セル見出し (tdとは意味が異なるだけ) • colspan, rowspan : セルの結合を指示する属性 57

(58)

今週の

tableを書くときに

link要素 (1行に続けて書いて良い)

(59)

意味付けと

markup



HTMLでのmarkup

文書の意味のかたまりに対して



HTML5

_{header: 導入やナビゲーション要素} <header><p>...</p><h1>title strings</h1></header> _{hgroup: 見出しをグループ化} <hgroup> <h1>main title</h1><h2>...</h2><h3>...</h3> </hgroup> _{aside: 本文との関連性の低い/重要でない内容} 59

(60)

意味付けの要素

– HTML5



section: セクション構造



article: 記事など



footer: セクションのfooter



nav: ナビゲーション要素



figure: 自己完結した図、ビ

デオなど



b: 注目を与える箇所



i: 異なったトーン、性質の異

なる箇所



small: 細則など補足的注釈



strong: 文章の重要度

60

(61)

適切な意味付け要素がないとき



意味付けのないグループ化

のための要素

div span 61

(62)

divとspan



div

ブロック的なグループ化 • <div><ul>...</ul><ol>...</ol></div>



span

行内でのグループ化 • <p>...<span><strong>...</strong>...</spa n>...</p>



単なる容れ物

_{cssやjavascriptとの連携で用いる} 62

(63)

要素に名前を



id属性

文書内で唯一(unique)の名前 <div id=“sample01”>...</div>



class属性

複数の要素に亘る名前付け _{<p>...<span class=“red”>...</span>...</p>} <table class=“red”>...</table> 63

Web情報システム 第1章～第5章