２２. 情報の発信・伝達・コミュニケーション

２０１７年度 春学期・（ 火II ）第９回目● 情報発信・伝達における注意事項

情 報
第９回目 「情報発信と伝達」
22. 情報の発信・伝達・コミュニケーション
23. 情報発信のためのHTMLの基礎

東京学芸大学 自然科学系
宇宙地球科学分野 講師
西浦 慎悟

● 最初に
講義資料は、http://astro.u-gakugei.ac.jp/~nishiura

・ 個人情報の漏洩 ： 自分もしくは他人の特定に繋がる情報を記述していないか？
パスワードやカード番号など各種番号を記述していないか？氏名・住所・メールアドレス・画像の背景などから、個人が特定されることは、既に珍しいことではない。また、本来、守秘すべき事柄を記述していないか？などにも注意する。
・ 人権侵害 ： 意図的であるか否かに関わらず、短慮な記事や画像・映像の掲載・公開が、人権の侵害と見なされることがある。他者への誹謗中傷はくれぐれも注意する。
・ 著作権、意匠権、肖像権などの侵害 ： 他者が作製した文書や画像・動画・ソフトウェアなどを不正な形で使用・掲載する、または、掲載許可を得ない画像や動画を公開する。自分で撮影した画像であっても、被写体となった人物から許可を得ない画像を掲載すると、その肖像権を侵害したことになる。
・ 風評、デマ ： 根拠の無い事柄や事実と異なる情報を拡げることにより、風評被害を生じるケースが多くある。
・ 犯罪告白（？） ： 自分が行った犯罪もしくはそれに準ずる行為を公開する。

 「西浦クンの講義室」に縮小版（PDFファイル）を置く予定

２２. 情報の発信・伝達・コミュニケーション

２２. 情報の発信・伝達・コミュニケーション

第９回目

第９回目

● 情報の発信・伝達・コミュニケーションの手段
情報の発信

現在、インターネット上には、様々な情報の発信・伝達・コミュニケーション手段が存在している。

情報の伝達・拡散

情報発信の責任

情報伝達の責任・ ＷＥＢページ ： インターネットのWWW上に存在する文書。リンクを介して異なるページ間を移動できることが特徴。
・ ブログ ： Web log の略で、元々は自分が閲覧したWebサイトの論評やメモを、そのURLと一緒に記録するためのシステムだった。現在では、管理者による個人ニュースサイト、日記サイトという体裁になっている。

情報の信頼性・信憑性責任を負うリスク

・ SNS ： Social networking service の略。インターネットを介して、人同士の円滑なコミュニケーションを図るシステム。代表例は、LINE や フェイスブック、インスタグラム。
・ プロフ ： プロフィール・サイトの略。モバイル・サイト上に自己紹介サイトを作るシステム。日本独自のインターネット文化らしい。

警察・司法の介入

・ Twitter ： 2006年にオブビアウス社が開始した140文字以内の短文投稿の共有サービス。Twitter は「さえずり」「無駄話」「嘲る人」などの意味を持つ。

２２. 情報の発信・伝達・コミュニケーション

第９回目

・ Ustream ： 2007年にジョン・ハム、ブラッド・ハンスタブル、ジュラ・フェヘルによって設立された動画共有サービス。元々は３人が開発した、イラク戦争に派兵された友人達と家族のための、コミュニケーション・ツールだった。2017年、IBMに買収された。
・ 電子掲示板 ： 単に掲示板とも呼ばれる。 参加者が自由に文章や画像を投稿し、それを時系列で保存・閲覧することで、参加者相互にコミュニケーションを図る仕組み。
・ チャット（chat） ： 英語で「雑談」「おしゃべり」の意味。文字入力による、多人数のリアルタイム・コミュニケーションを目的としたサービス。後述のメッセンジャーとは違う概念らしい。
・ インスタント=メッセンジャー ： 接続しているユーザー間で、短いメッセージを送受信することでコミュニケーションを図るシステム。SkypeやLINE、Facebookなどもこの機能を持つ。
・ Wiki ： WEBブラウザから簡単にWEBページの作成・編集、つまり、ハイパーテキストの書き換えを行うことができる仕組み。元々は複数人数によるWEBサイト構築のためのシステム。これを利用したページの代表例はWikiPedia。
「wiki」とはハワイ語で「速い」「急ぐ」などの意味を持つ。

著作権侵害、人権侵害、風評被害

２３. 情報発信のためのHTMLの基礎

第９回目● ＨＴＭＬ（HyperText Markup Language）
WEB上の文書を記述するための言語。通常の文書（テキスト）以上の様々な機能を持った文書を作成するための言語。文字サイズ、フォントの種類、文字の色、背景の色、画像、表、などの制御に加えて、他のサイトへのリンク、動画の埋め込み、などを実現する。
1989年にCERN（ヨーロッパ原子核研究機構）のティム・バーナーズ=リー（TimBerners-Lee）が開発した言語で、当初は、CERNを訪れる大勢の研究者間の情報交換やCERN内部の情報の引継ぎなどに活用されていた。
ユーザーＰＣ

WEBサーバー
ｈｔｍｌファイル
画像ファイル
その他

ＴＣＰ 80番ポート / http① ユーザーからのリクエスト③ WEBクライ
アントによる解
読・表示② ｈｔｍｌや画像データの提供

1２３. 情報発信のためのHTMLの基礎

第９回目●WEBページの仕組み① WEBサーバーとしての外部との情報通信。

WEBサーバー② WEBページを作成・公開するユーザーの管理。

ユーザー管理、アクセス管理
ユーザー１
ｈｔｍｌファイル
画像ファイルその他

２３. 情報発信のためのHTMLの基礎

第９回目

・ <!DOCTYPE>③ ユーザーが作成したWEBページの運用。

ユーザー２
ｈｔｍｌファイル
画像ファイルその他

・ どこにWEB用のファイルを置くのか？
・ どこまで外部からのアクセスを許可するのか？
・ 要求されたファイルが無い場合どうするのか？

●WWW普及の経緯
・ 開発直後のWWWは、テキスト（文字）によるデータの送受信だけだった。
・ WEBブラウザMOSAICが、イリノイ大学のNCSA（National Center forSupercomputing Applications）で開発され、テキストに加えて画像データなどの送受信も可能になった。  WWWが爆発的に普及・ 元NCSAのメンバーによる Netscape Navigator / Netscape Communicator やInternet Explorer の開発と普及。
・ Mozilla FireFox、Opera、Safari、Google Chrome の登場。

本日の演習（準備）使用するHTMLのバージョンを明確に記述し、ブラウザに伝達する。
<!DOCTYPE HTML> ： 現在最新バージョンであるHTML5で記述されていることを明示する。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”“http://www.w3.org/TR/html4/strict.dtd”> ： HTML4.01 Strict DTDで記述されていることを明示する。推奨される理想的な記述方法だが、そこそこ難しい。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01Transitional//EN”“http://www.w3.org/TR/html4/loose.dtd”> ： HTML4.01 Transitional DTDで記述されていることを明示する。理想的な記述方法に対して、やや緩和された記述方法。HTML4 における主流。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”“http://www.w3.org/TR/html4/frameset.dtd”> ： HTML4.01 Frameset DTDで記述されていることを明示する。
上記を区別できない（もしくは、区別する必要が無い）うちは、<!DOCTYPE>タグを使用する必要性は無い。本授業で作成するhtmlファイルでも記述は省略して良い。

第９回目

２３. 情報発信のためのHTMLの基礎

第９回目

・ <HTML>～</HTML>ＷＥＢページ作成のためのファイルを置く場所として、デスクトップに新たにフォルダ作成する。

HTML文書の中身を記述する。大きく分けてヘッダー部<HEAD>～</HEAD>とボディ部<BODY>～</BODY>に分けられる。
<HTML LANG=“ja”>とすることで日本語のHTML文書であることを示す。

また、テキスト・エディタ「メモ帳」とWEBブラウザを起動する。

・ <!-- ～ -->“<!- -”と”- ->”の間に記述された言葉は表示されない。作成者のコメントやメモなどを入れる時に使われる。

（方法） ① フォルダの作成 ： デスクトップ上で右クリック  「新規作成」
 「フォルダー」  “新しいフォルダー”が作成される“新しいフォルダ”上で右クリック  「名前の変更」
 フォルダ名を“2017-jouhou”とする

・ <HEAD>～</HEAD><TITLE>～</TITLE> ： WEBブラウザのタブなどに表示される、ページのタイトルを記述する。「2017年-情報-テスト」など、基本的に何を記入しても良い。

② 「メモ帳」の起動 ： 「スタート」  「すべてのアプリ」
 Ｗの「Windowsアクセサリ」  「メモ帳」<META CHARSET=“UTF-8”> ： HTML5で文字エンコードとして「UTF-8」を指定。

注） 「ワードパッド」は使わないこと。

③ WEBブラウザの起動 ： Edge または IE（インターネット・エクスプローラー）を起動する。

２３. 情報発信のためのHTMLの基礎

日本語の文字コードとしては、他にもJISを「ISO-2022-JP」、シフトJISを「SHIFT_JIS」、EUCを「EUC-JP」で指定できる。

第９回目● ＨＴＭＬの書式

２３. 情報発信のためのHTMLの基礎

第９回目

・ <BODY>～</BODY>

基本的には普通のテキスト形式のファイルであるが、各所に必要に応じて、文書に様々な機能を持たせるための「タグ」を使用する。
タグ ： “＜”と”＞”を用いて表し、両者の間に入れた記号や数字によって、文字の修飾や図表の設定、他へのリンクなどを行う。原則として、<xxx>から</xxx>の間で、タグの機能が有効になる。
2017-00．html

ｈｔｍｌ文書の範囲を示している。

<META http-equiv =“Content-Type” content=“text/html”；charset=“UTF-8”> ：HTML4.01で文字エンコードとして「UTF-8」を指定。

<!DOCTYPE HTML>  HTMLのバージョンなどを記すが、今回は使用しなくて<HTML>も良い。
<HEAD>
ヘッダー部。ページのタイトルや設定を記述する。
</HEAD><BODY></BODY>ボディ部。ページの本文を記述する。

HTML文書の本文はここに記される。基本的には普通のテキスト文書だが、以下のようなタグを用いて、文書の修飾や図表の表示、他ページとの関連付けなどを行うことができる。
［ページ全体に対する指定］<BODY BGCOLOR=“色指定”> ： ページの背景色を指定する。色指定部には「##RRGGBB」という形式でRed, Green, Blueの輝度を00～FFで与えるか、色の名称で与える。
<BODY TEXT=“色指定”> ： ページの標準の文字の色を指定する。色指定部には「##RRGGBB」という形式か、色の名称を与える。
<BODY BACKGROUND=“画像指定”> ： ページの背景に、指定した画像を表示。
<HR SIZE=“ピクセル数” WIDTH=“ピクセル数または％”> ： 横罫線を引く。SIZEは太さ、WIDTHは長さ、を指定する。
<HR ALIGN=“配置” COLOR=“色指定”> ： 横罫線を引く。「配置」は、center,left, right など。色指定部は「#RRGGBB」か色の名称を与える。

</HTML>

2

第９回目

２３. 情報発信のためのHTMLの基礎<FONT SIZE=“サイズ” COLOR=“色指定”> ～ </FONT>： 文字のサイズを１（小）～７（大）、色指定を「##RRGGBB」か色の名称で指定する。HTML5で廃止。
<B> ～ </B>、<I> ～ </I>、<S> ～ </S>、<U> ～ </U>： 文字をそれぞれ、太文字（Bold体）、斜体（Italic）、取り消し線、下線付き、で修飾する。<S>と<U>のタグは、HTML5では廃止。
<STRONG> ～ </STRONG>、<SUP> ～ </SUP>、<SUB> ～ </SUB>： 文字をそれぞれ、強調、上付き文字、下付き文字、で表現する。
<BR> ： 文章を改行する。ただし、改行後の１字下げは行われない。
<A HREF=“リンク先”> ～ </A> ： 文章中にリンクを作る。リンク先は、フォルダー名とファイル名、または、URLで記述する。
<CENTER> ～ </CENTER>： センタリングする。HTML5では廃止。
<BLOCKQUOTE> ～ </BLOCKQUOTE>： 文章中に他からの引用部を表現する際に用いられる。上下に１行が空き、左右にスペースが設けられる。
<MULTICOL COLS=“段数”> ～ </MULTICOL>： 文章を「段数」で指定した数の段組で表示する。

↑（TABLEタグを使用して作成した表）

１９９４年に、CERNのホーコン・ウィウム・リーが提唱。HTML（やXML）の要素の表示・修飾情報を指定するスタイル・シートの仕様の一つ。HTML5におけるフォントの修飾などは、CSSを用いて行われる。現在では、WEBページの内容・構造はHTMLに、修飾・体裁はCSSに記述するのが良いとされる（特にHTML5以降）。
HTMLＣＳＳ

ページの構造文章 / 画像

ページの体裁修飾 / レイアウト

第９回目

２３. 情報発信のためのHTMLの基礎<IMG SRC=“パス＋画像ファイル名” WIDTH=“幅” HEIGHT=“高さ”> ： 画像を表示する。画像は bmp, jpg, gif, png などが表示可能。WIDTH と HEIGHT はピクセル数または％で与える。
［リストの作成］

Black、Red、Green、Blue、Cyan、Magenta、Yellow、White の他にも、Brown、Darkblue、Darkgray、
Darkgreen、Darkorange、Darkviolet、Gray、Lightblue、Lightgray、Navy、Orange、Pink、Purple など多くの色の名称が設定されている。

● CSS（Cascading Style Sheets）

ＷＥＢページ

ただし、本授業
ではCSSの詳細は省略する。

本日の演習［画像の表示］<UL><LI>ほえほえ<LI>うふふ
</UL>

第９回目

２３. 情報発信のためのHTMLの基礎［色指定の例］［テキスト（文章）に対する指定］

第９回目

前回、天体について調べた内容を、「メモ帳」を使ってhtmlファイルとして作成・保存し、WEBブラウザで閲覧・確認せよ。そして、各班の代表者は、
Web Class を介して、① 班名、② 天体名、③ 出席者名、④ htmlファイルのコピー＆ペースト を担当者まで報告せよ。
（方法） ① HTMLファイルの作成 ：・ ほえほえ・ うふふ<DL><DT>ほえほえ<DD>うふふが、えへへなのです。
<DT>ぱおん<DD>つかれた、眠い。
</DL>

<OL>
<LI>ほえほえ<LI>うふふ</OL>

1． ほえほえ
2． うふふ メモ帳で適当なHTMLファイルを作成する。
 デスクトップ上のフォルダー“2017-jouhou”の中に、”2017-00.html”という名前で保存する。

② WEBページの表示 ： 作成した”2017-00.html”を、WEBブラウザの上にドラッグ・アンド・ドロップする。

ほえほえ
うふふが、えへへなのです。
ぱおん
つかれた、眠い。

③ WEBブラウザの更新 ： “2017-00.html”を修正した場合、ファイルを上書き保存し、WEBブラウザの表示を「リロード（または、更新、再読み込み）」する。
 ブラウザの表示に、ファイルの修正が、反映される。

第９回目

２３. 情報発信のためのHTMLの基礎［表の作成］<TABLE> ～ </TABLE> ： 枠線の無い表をつくる。
<TABLE BORDER> ～ </TABLE> ： 枠線の有る表をつくる。
<TR> ～ </TR> ： 表の１行を指定。
<TD> ～ </TD> ： 表の１セル（１マス？）を指定。
<TD BGCOLOR=“色指定” ALIGN=“横位置” VALIGN=“縦位置”> ～ </TD> ：セルの背景色を「色指定」に「##RRGGBB」か色の名称で指定できる。セル
中の文字の位置は「横位置」に center, left, right で、「縦位置」に top,bottom, middle で指定できる。
<TABLE BORDER><TR><TD>曜日・時限</TD><TD>火２</TD></TR><TR><TD>授業名</TD><TD>情報</TD></TR><TR><TD>担当者</TD><TD>にしうら</TD></TR></TABLE>

曜日・時限

火２

授業名情報担当者

西浦3