ディジタルドキュメント

Size: px

Start display at page:

Download "ディジタルドキュメント"

あおしひろなが
5 years ago
Views:

1 デジタルドキュメント (2) 高久雅生 2014 年 10 月 14 日 ( 火 )3 4 時限 1

2 ( 前回の復習 = ふりかえり ) 授業概説概要授業予定デジタルドキュメントとは? 定義 ( 広義狭義 ) 周縁領域との対比 : データ, コンテンツ, etc. 文脈 : ジャンル用途対象 2

3 本日のお品書きデジタルドキュメントとしてのウェブ WWW(World Wide Web) 基本設計とその成立ハイパーテキストシステムウェブにおける応用ドキュメントフォーマットとしての HTML,XML 関連するドキュメントフォーマット 3

4 ワールドワイドウェブ WORLD WIDE WEB 4

World Wide Web WWW (World Wide Web) ワールドワイドウェブダブリュダブリュダブリュまたは単に Web ( ウェブ ) と称する web (noun) A network of silken thread spun especially by the larvae of

5 World Wide Web WWW (World Wide Web) ワールドワイドウェブダブリュダブリュダブリュまたは単に Web ( ウェブ ) と称する web (noun) A network of silken thread spun especially by the larvae of various insects (as a tent caterpillar) and usually serving as a nest or shelter. Spider_web_Belgium_Luc_Viatour.jpg 5

6 Web と HTML HTTP, URI, HTML の 3 つの枠組みを用いた Web の実現! HTTP レイヤでのデータ転送とドキュメントフォーマット指定 URI 指定によるリンクを通じたハイパーメディアの実現 6

7 ティムバーナーズ = リー (Tim Berners-Lee) 7 Knight Foundation (2008)

8 CERN 欧州における高エネルギー物理学の研究拠点高速加速器による粒子物理学物質化学等の実験装置情報の集積ドキュメント化の必要性 8

9 多人数協調の事例 ATLAS Collaboration: Dynamics of isolated photon plus jet production in pp collisions at s = 7 TeV with the ATLAS detector. Nuclear Physics B, 875, (2013) 5,800 人強の著者グループ9

10 Web の簡単な歴史 : 誕生 ( 設計仕様策定 ) : 徐々に普及 : 加速度的な普及 Mosaic, Netscape, Yahoo! : 一般における爆発的普及 Windows95, Amazon, 10

11 初期の Web Screenshot of the original NeXT web browser in

12 Masaic 最初期のブラウザ Mosaic 2010 年 10 月 28 日筑波大学オムニバス講義 12

( 余談 ) ハイパーメディア / ハイパーテキストの夢 Webの勃興と普及, その葛藤ハイパーメディア概念の発見と普及へ Memex (Vannevar Bush) - 1945 Xanadu (Ted Nelson) - 1963? WWW (Tim Berners-Lee) 1989 WWW が捨てたもの!

13 ( 余談 ) ハイパーメディア / ハイパーテキストの夢 Webの勃興と普及, その葛藤ハイパーメディア概念の発見と普及へ Memex (Vannevar Bush) Xanadu (Ted Nelson) ? WWW (Tim Berners-Lee) 1989 WWW が捨てたもの!? 閲覧編集の統合 ( ウィキ?) バージョン管理多様で拡張可能なリンク著作権管理 13 ティムバーナーズ = リー : Web の創成 :World Wide Web はいかにして生まれどこに向かうのか. 高橋徹訳. 毎日コミュニケーションズ, 2001, 279p. (ISBN: )

14 Memex by Vannevar Bush (1945) 14

15 デジタルドキュメントをめぐる視点閲覧環境 ( ドキュメント利用の前提 ) 閲覧機器 ( ハードウェア ) ビューワ ( ソフトウェア ) コンテンツパッケージ化されていることの意味ジャンル用途としてのパッケージ化新聞, ニュースマニュアル, 説明書配信流通形態としてのパッケージ化 CD-ROM, ネットワーク, ストリーミングウェブと電子書籍の違い 15

16 ドキュメントフォーマットの切り口 (1) テキスト (text) vs バイナリー (binary) ビットデータ文字コードによる解釈外字フォーマットの指定識別判別シンプルコンテンツ vs 複合メディア埋め込みコンテンツハイパーリンクメタデータ埋め込みメタデータ外部メタデータ記述文書レイアウトページ概念文書内の書式要素見栄え / スタイルフォントファイル vs ストリームデータの保存蓄積と配信 16

17 ドキュメントフォーマットの切り口 (2) オープンフォーマット移植可能性 / ソフトウェア独立性 Free / proprietary 標準化デファクト標準とデジュール標準 ( de facto vs de jure ) 文書フォーマットのバージョンフォーマット変換テキスト HTML LaTeX PDF 圧縮可逆 vs 非可逆セキュリティパスワード電子署名長期保存デジタルフォレンジック 17

18 HTML (Hypertext Markup Language) ウェブ上でのコンテンツ記述用言語テキストデータのやり取りウェブブラウザによる解釈と描画タグ ; メタデータ ; 構造ハイパーメディア ; ハイパーテキストリンクページ埋め込みマルチメディア ( 画像音声動画 ) ダイナミックな表現 ; インタラクション <html> <head> <title> タイトル </title> </head> <body> <h1> 見出し </h1> <p> 段落 </p> </body> </html> 18

19 HTML の歴史 HTML の発展 HTML 1.1 (1992) World Wide Webの黎明 HTML 2.0 (1995) 標準化 (IETF: RFC 1866) HTML 3.2 (1997) W3Cによる標準化 ( デファクトの追認 ) HTML 4 (1997) 整理統合国際化 XHTML (2000) XML に基づく再出発 HTML5 (2014?) 成熟 ( 混沌?) からの新しい出発 19

20 オープンシステムとしてのウェブ / HTML テキストフォーマットとしてのウェブ / HTML テキストベースのフォーマットであるので自由にソフトウェア (Web ブラウザ ) を作成し提供できる多様なブラウザの例 Google Chrome w3m 20

21 テキストによる文書例ディジタルドキュメント (2014 年春 ) 2014 年度春学期に開講するディジタルドキュメント科目についての情報を提供します授業予定注意 : 進捗状況に応じて適宜変更します 1. 第 1 回 : 授業概要 ; ディジタルドキュメントとは? [ 第 1 回レポート課題 ] 2. 第 2 回 : 学術研究分野におけるディジタルドキュメント ( その 1) 3. 第 3 回 : 学術研究分野におけるディジタルドキュメント ( その 2) [ 第 2 回レポート課題 ] 4. 第 4 回 : 電子書籍とその利用環境 ( その 1) 5. 第 5 回 : 電子書籍とその利用環境 ( その 2) [ 第 3 回レポート課題 ] 21

22 HTML フォーマットによる文書例 <h1> ディジタルドキュメント (2014 年春 )</h1> <p>2014 年度春学期に開講するディジタルドキュメント科目についての情報を提供します </p> <h2> 授業予定 <h2> <p> 注意 : 進捗状況に応じて適宜変更します </p> <ol> <li> 第 1 回 : ディジタルドキュメントとは?<strong>[ 第 1 回レポート課題 ]</strong></li> <li> 第 2 回 : 学術研究分野におけるディジタルドキュメント ( その 1) </li> <li> 第 3 回 : 学術研究分野におけるディジタルドキュメント ( その 2)<strong>[ 第 2 回レポート課題 ]</strong></li> <li> 第 4 回 : 電子書籍とその利用環境 ( その 1)</li> <li> 第 5 回 : 電子書籍とその利用環境 ( その 2)<strong>[ 第 3 回レポート課題 ] </strong></li> </ol> 22

23 HTML フォーマットの表示例 23

24 HTML におけるタグと要素ブラケット文字 :< と > に囲んだ中にタグ名 h1タグ <h1> 開始タグと終了タグ <h1> ~ </h1> 要素開始タグと終了タグで囲まれた部位を要素と呼ぶ入れ子構造をとることができる <li> 第 1 回 : ディジタルドキュメントとは?<strong>[ 第 1 回レポート課題 ]</strong></li> 24

HTML におけるハイパーリンク <a href= http://www.tsukuba.ac.

25 HTML におけるハイパーリンク <a href= > 筑波大学の公式サイト </a> ブラウザでの表示 a (Anchor) タグによる URL 参照を通じたリンク href 属性の値として URL を記述してリンクを表現 a 要素の内容はアンカーテキストと呼ばれるリンク部分となるリンク先との関係を示す記述がなされる Web サーチエンジンにおける利用 File:US_Navy_Anchor_Insignia.svg 25

26 HTML におけるハイパーリンク ( フレーム ) <html> <frameset rows="172,*"> <frame src="title.html" name="ue"> <frameset cols="150,*"> <frame src="sidemenu.html" name="hidari"> <frame src="welcome.html" name="migi"> </frameset> </frameset> </html> Framesetタグによりフレーム枠全体を設定し frameタグにより実際の各フレームにおいて参照するページURLを指定例 : 利点 : 単一ページ単位をシンプルに保てナビゲーション用として同一内容を保持して示したりできる欠点 : 各フレームにおける個別ページが孤立してしまいがち個別ページに外 26 部からリンクを付与したりすることが難しい

HTML におけるハイパーリンク ( 画像 ) 画像 :img 要素 <a href= dl.html ><img src= assets/images/kouhou.png width= 259 height= 145 alt= 学類による刊行物 title=" 学類による刊行物 " /></a> <a href="http://klis.tsukuba.ac.

27 HTML におけるハイパーリンク ( 画像 ) 画像 :img 要素 <a href= dl.html ><img src= assets/images/kouhou.png width= 259 height= 145 alt= 学類による刊行物 title=" 学類による刊行物 " /></a> <a href=" src="assets/images/syllabus.png" width="231" height="92" alt=" 筑波大学知識情報図書館学類開設授業科目シラバス " title=" 筑波大学知識情報図書館学類開設授業科目シラバス " /></a> <a href=" title=" 筑波大学 "><img src="assets/images/banner/tsukuba_univ.jpg" width="190" height="45" /></a> alt, title 属性によるテキスト情報の追加 27

28 HTMLにおけるハイパーリンク ( 複合オブジェクト ) その他 : 動画や外部ページの埋め込み等 iframe: 任意のコンテンツをその場に埋め込む <iframe width="800" height="200" src=" (Transclude) 28

29 HTML の構造と見栄え文書構造, 文書内の要素見出し段落リスト表画像リンクコンテンツ内容と見栄えの分離論理スタイル要素と物理スタイル要素 <strong> 強調 </strong> vs <b> 強調 </b> <em> 強調 </em> vs <i> 強調 </i> <font> 要素の廃止 <font color= red size= +2 > 強調 </font> オープンフォーマットとの親和性 29

30 スタイルシートの例 (CSS) 文字書式やスタイルを指定した変更 body { background-color: #cfc; margin: 1% 2% 0px; line-height: 1.2; } h2 { padding-top: 0.1em; padding-bottom: 0.1em; border-style: solid; text-indent: 0.5em; color: #223322; background-color: #eeeeee; border-color: #669966; border-width: 0 0 thin thick; } 30

31 メタ言語としての XML 31

32 HTML メタ言語 SGML と XML 文書内に出現するタグ <a>, <p>, <title>, <h1> はあらかじめ定められているどのような要素が出現するかを定めるメタ言語が必要 SGML (Standard Generalized Markup Language) 1986 年に国際標準として制定 (ISO) 電子文書のパイオニアメタ言語 :DTD (Document Type Definition) XML (Extensible Markup Language) Web での経験を元に SGML をより扱いやすくし汎用言語として整備 32

33 XML (Extensible Markup Language) 順序付き木構造による表現整形式 (Well-formedness) スキーマ ( 文書内容の定義 ) に則った個別のインスタンス言語 XHTML SVG( 図版 ), MathML( 数式 ) その他の文書形式参照関係文字コード :Unicode 元情報としての XML 文書変換することにより他のデータ形式へ One source multiple use 33

34 XML 文書の例 34

35 35

36 36

37 ( 参考 ) 検証サービス 37

38 まとめデジタルドキュメントとドキュメントフォーマット ( 半 ) 構造化文書 HTML 要素タグ属性ハイパーリンク構造と見栄え歴史と標準化 XML メタ言語整形式スキーマ次回は松村先生が担当しますドキュメントフォーマット 38

ディジタルドキュメント

ディジタルドキュメント (8) 高久雅生 2013 年 6 月 6 日 ( 木 )3 4 時限授業資料サイト : http://masao.jpn.org/lecture/2013/digital-document/ 1 ( 前回の復習 = ふりかえり ) ドキュメントフォーマットとは? ドキュメントフォーマットの切り口書式レイアウト, 複合コンテンツ, 標準化プレインテキストとその文字コード