情報公開システム論
(2)
神戸情報大学院大学
横山輝明
ホームページ
(1)
• ホームページ
– 自由に作成・安価 – 世界中に公開 – 多彩な表現力 – 双方向性
ホームページ
(2)
• さまざまなサービス
– 双方向性の利用 – 表現力の向上 – CMSとしてシステム化 チャット: KentWebチャットシステム h,p://www.kent-‐web.com/chat/sample/windy.cgi
ホームページ
(3)
ハイパーテキスト
(1)
• ハイパーテキストとは – 文書（テキスト）間に意味や連想などに基づいた関係性を 与える仕組みと実現機構 – 膨大な文書情報処理のための文書管理機構 • Memex (1945) → 関連システム (1960~) → WWW (1990) – 一次元的な「紙の本」に対する「新しい文書」の提案 • 例： – 百科事典の注釈や関連項目の表記ハイパーテキスト
(2)
• “As We May Think” (1945, Vannevar Bush)
– 夢の文書管理装置memex(MEMory Extension: 記憶拡張 装置)の構想を提案
– マイクロフィルムやレコードの管理装置 – データ間に連想関係を与える
ハイパーテキスト
(3)
• Douglas Carl Engelbart
– マウスを発明
– ハイパーテキストの概念を実現
• NLS (oN-‐Line System)を実装 (1960年代)
– 文書管理システム
ハイパーテキスト
(4)
• Theodor Holm Nelson
– 1960年 Project Xanaduを開始
• ハイパーテキスト機構の実現プロジェクト
• 活動継続中、Xanadu公式サイト: h,p://xanadu.com/
– 1965年 「ハイパーテキスト」という言葉を発明 – 1968年 HyperText EdiVng Systemを提案
余談
: マルチメディア
• 1990年代にパソコンマルチメディアブーム – コンピュータの進化が背景 • マルチメディアとは – 数値処理、文字処理、AV（音声、画像、ビデオ）処理を加 えた複合型メディアのこと – コンピュータ、ソフトウェア、ゲーム、クリエイター業界の垣 根を越えたコンテンツ作りタグ： 基本・ヘッダ
• 基本タグ – <html> HTMLの開始と終了を定義 – <head> ヘッダ要素を定義 – <body> ボディ要素を定義 • ヘッダ関連 – <title> ページのタイトルを定義 – <base> リンクのベースとなるパスを定義 – <meta> HTML/XHTML文書の情報を定義 – <link> 他の文書との関係を定義 – <style> 文書のスタイルを定義タグ例： 基本・ヘッダ
• HTMLヘッダ（緑） • head部とbody部の指定 （青） • HTML本文（白） <html> <head><meta h,p-‐equiv="Content-‐Type" content="text/html; charset=Shii_JIS" /> <Vtle>情報公開システム論</Vtle> </head> <body> <h1>XHTMLとは</h1> <p>XHTMLとは・・・</p> </body> </html>
タグ： 文章構成
• <h1>~<h6> 見出しを定義
• <p> パラグラフ（段落）を定義
• <div> ディビジョン（1つのブロック）を定義
• <span> テキストの範囲を指定（何もしない）
• <br/> 強制改行
• <hr/> 罫線を表示
• <pre> 改行、スペース等を保ったまま表示
タグ例： 文章構成
• HTMLヘッダ ＋ HTMLボディ （ヘッダ部省略） <body> <h1>XHTMLとは1</h1> <h2>XHTMLとは2</h2> <h2>XHTMLとは3</h2> <p>こんな感じで一段落を指定します。</p> <p>さらに続けて、もう一段落です。</p> 改行したいときは→ <br> <hr> 仕切りの罫線を入れてみました </body>タグ： フォントスタイル
• <b> テキストをボールド体に指定
• <big> フォントサイズを大きく指定
• <i> テキストをイタリック体に指定
• <small> フォントサイズを小さく指定
• <sub> テキストを下付きに指定
• <sup> テキストを上付きに指定
• <tt> テレタイプ文字に指定
タグ： リンク
• <img> 画像を配置
タグ例： リンク
• 画像と外部リンク – src, href属性にURLを指定 （赤字の部分） （ヘッダ部省略） <body> 島根県立大学ロゴ <br> <img src="http://www.u-shimane.ac.jp/img/header/logo.gif" /> <br> 島根県立大学への<a href="http://www.u-shimane.ac.jp/">リンク</a>
参考： 画像
URLの確認方法
• 画像の上で右クリック → 「プロパティ」
• アドレス欄を確認、コピーペースト
タグ： リスト
• <ul> リスト形式を定義
• <ol> 番号付きリストであることを定義
– <li> リスト形式の各リストを定義• <dl> 見出し付きリストであることを定義
– <dt> リストの見出しを定義 – <dd> リストの各項目を定義タグ例： リスト
• リスト、数字つきリスト
– 「ul」,「ol」、項目は「li」で指定
<body>
<ul>
<li>リストA</li> リストAの内容
<li>リストB</li> リストBの内容 <li>リストC</li> リストCの内容 </ul> <ol> <li>リスト1</li> リスト1の内容 <li>リスト2</li> リスト2の内容 <li>リスト3</li> リスト3の内容
タグ： テーブル
• <table> テーブル（表）を定義 – <caption> テーブルの表題を定義 – <tr> テーブルに新しい行を定義 – <th> ヘッダセル（項目名のセル）を定義 – <td> データセル（通常のセル）を定義 – <thead> テーブルのヘッダ部を定義 – <tbody> テーブルのボディ部を定義 – <tfoot> テーブルのフッタ部を定義 – <colgroup> テーブルの列グループを定義 • <col> 列グループの中で列を定義演習
• 目的
– HTML利用のイメージをつかむ
• すること
– HTMLファイルの作成 – HTMLファイルの閲覧
HTMLの書き方
• ① 全体構造の作成
– HTML文書の基本構成 – 形に合わせて用意、コピーでよい• ② 文書の追加
– 文書を書き加える – タグの利用HTMLの基本構造
• ヘッダ
– HTML文書の設定• タグ
– データ修飾• 入れ子構造
– タグの入れ子<name>taro yamada</name>
<users type="array"> <user>
<id>99999</id>
<name>taro yamada</name>
</user> </users>
タグ構造： 赤字がタグ、白字がデータ
入れ子構造： タグが別のタグの中に入る
HTMLの構成
• HTMLヘッダ ＋ HTMLボディ <html> <head> <Vtle>情報公開システム論</Vtle> </head> <body> <h1>XHTMLとは</h1> <p>XHTMLとは・・・</p> </body> </html>HTML記述の注意
• タグの取り扱い – タグ（要素タイプ名、属性名）は小文字で記述 – 属性の値は必ず引用符で囲む • <xxx property="属性値"> – 終了タグを省略しない • <xxx>~</xxx> • <yyy /> • 「&」の書き換え – 「&」は「&」と記述課題テンプレート
• 基本的な形、準備
– titleタグ内を書き換えてみる – bodyタグ内にHTMLタグを書く <html> <head> <Vtle>情報公開システム論</Vtle> </head> <body> 好きなことをここに書いてみる </body> </html>課題：
HTMLの利用
• 本文を記述する – bodyタグ内に何でもいいので簡単な文書を書く – 自己紹介とか？ • 利用するタグ – <h1>, <h2>, <p>, <br> – <img> <a> – <ul>か<ol>の一方 • 条件 – <h1>, <h2>, <p>, <br>は1つ以上使う – 画像1つ以上、リストを1つ以上、リンクを1つ以上 • ファイル名 – 「e学籍番号.html」 例： e123456.htmlCSSとは
• Cascading Style Sheets の略
• Webページの見た目を規定する言語
スタイルシートの例
<html> <head> <title>情報公開システム論</title> <style type="text/css"> H1 { color: red; } </style> </head> <body> 好きなことをここに書いてみる </body> </html> <style type="text/css">～</ style>内に記述簡単なスタイルシート
• 「タグ」への「スタイル」指定
– タグ（緑）にスタイル（赤）を指定 – 複数のタグを選択できる – 複数のスタイルを記述できる (タグ) { (スタイル): (指定); (スタイル): (指定); 複数個を並べて記述 } H1 { border-‐color: red; } 「H1」タグの 「border-‐color」をスタイルシート命令
• 色
• フォントサイズ、フォント装飾
• マージン
• 枠
• （無数に存在）
CSS: 色の指定
• 「color:」
– 色を指定する /* 名前で指定 */ H1 { color: red; } /* 数値で指定（16進数）#RRGGBB */ H1 { color: #ff0000; } /* 数値で指定（0~255）rgb(R, G, B) */ H1 { color: rgb(255, 0, 0); } /* 数値で指定 (0~100%) rgb(R, G, B) */ H1 { color: rgb(100%, 0%, 0%); }CSS: フォントの指定
• 「font-size:」
– 文字の大きさを指定する /* 名前で指定 */
BODY, TH, TD { font-‐size: large; }
/* 数値で指定 */
BODY, TH, TD { font-‐size: 16pt; }
/* 文字サイズを指定するキーワード */
長さ・大きさの指定
• さまざまな単位で指定が可能
– 10em ... 文字の高さを基準とした1文字分の長さ – 10px ... 10ピクセル – 10in ... 10インチ（1in=2.54cm） – 10cm ... 10センチメートル（1cm=10mm） – 10mm ... 10ミリメートル（10mm=1cm） – 10pt ... 10ポイント（1pt=1/72in）CSS: フォント装飾
• 「text-decoration:」 装飾の指定
– 文字の飾りつけ H1 { text-‐decoraVon: blink; } underline（下線）、 overline（上線）、 line-‐through（打ち消し線）、 blink（点滅）CSS: 背景の指定
• 「background-color:」
– 背景色を指定する• 「background-image:」
– 背景画像の URLを指定する /* 背景色の指定 */ H1 { background-‐color: #ccccff; } /* 背景画像の指定 */CSS: 枠の指定
• 「border-color:」 枠の色
• 「border-width:」 枠の太さ
• 「border-style:」 枠の線
H1 { border-‐color: red; border-‐width: 1px; border-‐style: solid; } none（線無し）、 do,ed（点線）、 dashed（粗い点線）、 solid（実線）、 double（二重線）、 groove（谷線）、 ridge（山線）、スタイルシートの記法
• 基本は「タグ」に対して「スタイル」を指定 • タグ – XHTMLのタグ（図中の緑） – 複数指定も可能、「,」（カンマ）で区切る • スタイル – スタイル指定（図中の赤） – 「(CSSキーワード):」と「(指定する値);」 – コロン(:)とセミコロン(;)に注意 (タグ) { /* コメント欄は無視される*/ (スタイル): (指定); (スタイル): (指定); 複数個を並べて記述 H1 { border-‐color: red; border-‐width: 1px; border-‐style: solid;スタイルシートの埋め込み
(1)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>情報公開システム論</title> <style type="text/css"> H1 { color: red; } </style> </head> <body> <style type="text/css">～ </style>内に記述
スタイルシートの埋め込み
(2)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>情報公開システム論</title>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head> <body> 好きなことをここに書いてみる </body> </html> CSSを外部ファイルにて定義 外部ファイルから読み込み H1 { color: red; } CSSを定義したファイル 「xxx.css」 CSSをここに記述
クラスや
IDの割り当て
• クラス – タグをグループ化する仕組み – 同一タグを種類分けしてデザインしたい場合に利用 • 同じH1でも違うデザインを使いたい • ID – タグに名前をつける仕組み – ひとつひとつのタグを区別して扱いたい場合に利用 • 個別の部分にデザインを指定したい <h1 class="midashi1">見出しとして扱う！</h1> <h1 class="midashi2">見出しとして扱う！</h1><h1 id="special">IDで名前をつけた！</h1>
同じH1でも、
クラスやIDを用いることで
区別して指定できる
div, spanタグ
• divとspanタグは何もしないタグ
– 文章中で、クラスやIDを割り当てるために用いる – スタイルシートのために用いられる – spanタグは改行しない – divタグはブロックとなる（改行する）<span id="myname">横山輝明</span>です。<br/>
テストの<span class="keyword">文章</span>です。このようにして文章を
<span class="keyword">記述</span>している途中で、一部をdivタグや spanタグで囲んでクラスやIDを指定することができます。クラスやIDで、場 所指定してスタイルシートを指定するために用いられます。
クラスや
IDの指定
• クラス: タグ名に「.」(ドット)で続けて指定
• ID: タグ名に「#」で続けて指定
H1.midashi { border-‐color: red; } .midashi { border-‐color: red; } H1タグのmidashiクラスすべて H1#myname { border-‐color: red; } #myname { border-‐color: red; } H1タグのmyname IDすべてスタイルシートの利点
• 見た目と構造を分離できる
• 見た目を一度に指定できる
• 見た目を一度に変更できる
• 好きな見た目に変更できる
参考サイト
• 検索してみる
– 「css 入門」など• とほほのスタイルシート入門
– http://www.tohoho-web.com/css/index.htm – http://www.tohoho-web.com/css/reference.htm• - とほほのＷＷＷ入門
– http://www.tohoho-web.com/www.htm演習
• 目的
– CSS利用のイメージをつかむ
• すること
– HTMLファイルへのCSS追加 – HTMLファイルの閲覧
スタイルシートの追加
<html> <head> <title>情報公開システム論</title> <style type="text/css"> H1 { color: red; } </style> </head> <body> 好きなことをここに書いてみる </body> </html> <style type="text/css">～</ style>内に記述課題：
CSSの追加利用
• CSSの追加 – 先ほどのHTMLファイルにCSSでデザイン追加 – 文字サイズ、色、背景などを指定 – 余裕があればCLASS, IDを指定 • ファイル名 – 「e学籍番号.html」 例： e123456.html • 提出 – [email protected] へメール – タイトル： 情報公開システム論HTML – 宛先・ファイル名・タイトル厳守 – 本文には感想やコメントなども任意でどうぞ課題：
Webページ作成グループワーク
• 演習内容
– グループでWebページを作成する – 有益で魅力的なコンテンツ作成を経験する – 共同作業による情報公開を経験する
• 演習の手順
– グループ分け – コンテンツ作成 – 発表と相互評価
課題：
Webページ作成グループワーク
• 演習内容
– グループでWebページを作成する – 有益で魅力的なコンテンツ作成を経験する – 共同作業による情報公開を経験する
• 演習の手順
– グループ分け – コンテンツ作成 – 発表と相互評価
演習の流れ
• グループ分け – 〜5人程度のグループを作る、少人数も可 • テーマ決定 – Webページの企画 – 他者にとって有益で魅力的な内容 – 全体の構成や役割分担を決める – 人数 x 3ページ程度の量を目安 • コンテンツ作成 – 演習時間で作業、役割分担は自由 • 結果発表 – 各グループが作成内容を発表 • 評価 – チーム内相互評価 – チーム間相互評価グループ分け
• 学生グループを作る
– 〜5人くらい
