情 報 基 礎 実 習 第 7 回 2014 年 6 月 5 日 ( 木 ) 6 月 6 日 ( 金 ) 担 当 教 員 : 逸 村 裕 高 久 雅 生 TF: 池 田 光 雪 今 回 の 内 容 今 回 のテキストは 扱 う 内 容 の 性 質 上 専 門 用 語 を 多 く 含 んでいる 既 によく 理 解 してい るという 自 信 がある 場 合 を 除 き 読 み 飛 ばさず 順 を 追 って 読 むこと Microsoft Paint を 用 い 画 像 ファイルを 加 工 し 見 栄 えやファイルサイズを 比 べる ファイルとフォルダの 操 作 を 体 得 する メモ 帳 を 用 い 簡 単 な HTML 文 書 を 作 り Web で 公 開 する 1. 画 像 の 扱 い 1.1 液 晶 ディスプレイとビットマップ 画 像 一 般 的 な 液 晶 ディスプレイでは Pixel( 画 素 )という 点 が 格 子 状 に 並 び それぞれが 違 う 色 を 発 色 することで 全 体 として 映 像 を 表 現 している それぞれの Pixel はさらに 赤 緑 青 のサブ 画 素 からなり これらの 明 るさを 調 整 することで 各 Pixel の 色 を 決 めている(ルー ペなどでディスプレイを 拡 大 して 見 ると 赤 緑 青 のサブ 画 素 が 隙 間 無 く 並 んでいるこ とがわかる また ドット 落 ちと 呼 ばれるある 1 点 の 色 が 正 常 に 表 示 されない 現 象 は こ のサブ 画 素 が 1 個 以 上 機 能 不 全 になっていることを 主 な 原 因 とする) なお 全 学 計 算 機 シ ステムでは 縦 1,080Pixel 横 1,920Pixel のディスプレイを 使 用 している ディスプレイ 上 では 映 像 として 画 像 を 表 示 できる 一 口 に 画 像 と 言 っても 様 々 な 種 類 形 式 が 存 在 するが 本 演 習 では 画 像 を 格 子 状 に 分 割 し それぞれの 点 (Pixel)に 色 を 割 り 当 てることで 表 現 するビットマップ 画 像 を 扱 う 以 下 単 に 画 像 といったと き それはビットマップ 画 像 を 指 す 1.2 ハードコピー ある 時 点 における ディスプレイの 各 Pixel の 状 態 をコピー(キャプチャ)したものをハ ードコピー(スクリーンショット)という ハードコピーを 取 るには 一 般 にはキーボー ド 右 上 にある[PrintScreen]キー(PrtScn キー)を 押 すだけでよい ハードコピーを 取 った 後 に 画 像 を 編 集 するグラフィックソフトウェア たとえば Microsoft Paint を 起 動 して 貼 り 付 け をすれば ハードコピーを 画 像 として 保 存 可 能 である 単 に[PrintScreen]キーを 押 すとディスプレイの 画 面 全 体 のハードコピーを 取 ることになるが あるウィンドウだけ のハードコピーを 取 りたい 場 合 は そのウィンドウをアクティブにした 状 態 で[Alt]キーを 押 しながら[PrintScreen]キーを 押 せばよい 1
1.3 画 像 のファイルサイズと 3 種 類 の 画 像 ファイル 形 式 画 像 のファイルサイズは 縦 のドット 数 横 のドット 数 色 数 p( 圧 縮 率 ) で 決 定 される 色 の 表 現 手 法 としては RGB カラーモデルが 一 般 によく 用 いられているが これは 赤 (Red) 緑 (Green) 青 (Blue)の 3 色 を 混 ぜることで 様 々な 色 を 表 現 するとい う 手 法 である RGB それぞれに 8 bit ずつ 割 り 当 てると 2 24 色 すなわち 約 1,600 万 色 が 表 せるが この 色 数 のことを 特 にトゥルーカラーと 呼 ぶ 1,600 万 画 素 ( 縦 3,456 Pixels 横 4,608 Pixels)のデジタルカメラで 撮 影 した 画 像 に 一 切 の 圧 縮 をかけないとすれば そ のファイルサイズは 3,456(Pixels) 4,608(Pixels) 3(Bytes)=47,775,744B 45.6MB になる 圧 縮 率 は 0<p 1 の 値 を 取 り 規 則 的 な 繰 り 返 しなどを 符 号 化 して 記 録 することでデー タサイズを 小 さくできる 圧 縮 展 開 にはある 程 度 の 演 算 を 必 要 とするが 一 般 にはデー タを 格 納 するスペースや 通 信 する 時 間 を 節 約 できるメリットのほうが 大 きい 画 像 には 色 々な 形 式 (フォーマット)があり 用 途 に 合 わせて 使 い 分 けられている 代 表 的 な 画 像 ファイル 形 式 に 一 般 には 24bit で 圧 縮 なしの BMP 形 式 (Microsoft Windows Bitmap Image) 圧 縮 ありの JPEG 形 式 (Joint Photographic Experts Group)や PNG 形 式 (Portable Network Graphics)がある また 1 画 素 に 3Bytes ではなく 1Byte(256 色 )を 割 り 当 てた 形 式 として GIF 形 式 (Graphics Interchange Format)がある これ ら 4 種 類 の 画 像 ファイル 形 式 のうち 一 般 に BMP 以 外 は 圧 縮 を 行 うが その 圧 縮 率 はデー タの 内 容 によっても 変 わるため 固 定 の 値 を 持 たない データの 圧 縮 方 式 には 可 逆 圧 縮 と 非 可 逆 圧 縮 の 2 種 類 があるが 一 般 に JPEG は 非 可 逆 圧 縮 を PNG GIF は 可 逆 圧 縮 を 採 用 している 非 可 逆 圧 縮 は 人 の 目 にはほとんど 違 いが わからないようにデータを 捨 てることでファイルサイズを 減 らしており その 名 の 通 り 圧 縮 前 の 状 態 に 完 全 に 復 元 することはできない 一 方 PNG や GIF は 可 逆 圧 縮 であり 劣 化 ( 元 の 画 像 から 見 栄 えが 悪 化 )しない 直 感 的 には 全 く 同 じ 色 が 100Pixel 続 くような 区 間 が 存 在 するとき 無 圧 縮 では 各 Pixel が 色 を 保 持 するが 可 逆 圧 縮 では 1Pixel 分 の 色 と この 色 が 100 個 続 く というデータだけを 持 つことで 復 元 可 能 な 圧 縮 を 実 現 している 2. Microsoft Paint を 用 いた 画 像 の 加 工 とデータ 形 式 の 変 換 ( 手 引 き p.50~52) Windows に 標 準 的 に 備 わっている 画 像 を 編 集 するためのシンプルなソフトウェアとし て Microsoft Paint( 以 下 ペイント)がある ペイントでは 画 像 上 に 自 在 に 図 形 や 文 字 を 描 画 可 能 のほか 画 像 ファイル 形 式 の 変 換 を 行 うこともできる ペイントを 起 動 するには [スタート]メニューから[すべてのプログラム] [Accessories] [ペイント]と 順 に 選 択 す る 終 了 するには [ホーム]タブの 左 のメニューボタンをクリックし [ 終 了 (X)]を 選 択 す る あるいは ウィンドウ 右 上 の ボタンをクリックする ペイントの 操 作 については 言 葉 で 説 明 するよりも 実 際 に 動 かした 方 がわかりやすいため 下 記 の 課 題 に 順 に 取 り 組 んでみよ: (1) http://klis.tsukuba.ac.jp/jk14/から ファイル PICT0003.bmp をダウンロードしてデ スクトップに 保 存 する ファイル 名 のうち PICT0003 という 部 分 は 変 えてもよいが ピリオド 以 降 の 文 字 列 (この 場 合 は.bmp)は 変 えないこと 2
(2) PICT0003.bmp では 画 像 左 上 に 指 が 映 り 込 んでしまっている このままでは 見 栄 えが 悪 いため 画 面 中 央 からやや 右 下 の 花 水 木 と 建 物 の 看 板 部 分 だけを 取 り 出 したい 以 下 の 操 作 を 行 い 目 的 の 画 像 を 作 成 せよ 1. まずペイントを 起 動 したのち メニューボタンをクリックし [ 開 く(O)]を 選 択 す る すると 開 く ウィンドウが 出 るため デスクトップから 先 ほどダウンロー ドした PICT0003.bmp を 選 び [ 開 く(O)]をクリックする 2. [ホーム]タブの イメージ から[サイズ 変 更 ]をクリックし 縦 横 比 (アスペク ト 比 ともいう)を 維 持 したまま 縦 横 のサイズを 半 分 の 600Pixel 800Pixel にす る 3. [ホーム]タブの イメージ から[ 回 転 ]を 選 択 し 消 したい 部 分 が 右 側 になるよ う 画 像 を 左 右 反 転 させる 4. 画 像 の 右 端 中 央 に があるが これをドラッグして 画 像 の 右 側 から 任 意 の 部 分 ま で 不 要 な 部 分 を 削 除 する 5. 3. の 操 作 を 繰 り 返 し 左 右 を 元 に 戻 す (3) メニューボタンから[ 上 書 き 保 存 (S)]を 選 択 し (2)の 操 作 を 行 った 画 像 を BMP 形 式 の まま 保 存 する (4) メニューボタンから[ 名 前 を 付 けて 保 存 (A)] [PNG 画 像 (P)]と 順 に 選 択 し 画 像 を PNG 形 式 で 保 存 する ファイル 名 は 表 示 されたそのまま(PICT0003.png)で 構 わな い この 際 ファイル 名 の 最 後 が.png になっていることを 確 認 せよ (5) (3)で 作 成 した 画 像 を 開 き (4)と 同 様 の 操 作 で JPG 形 式 と GIF 形 式 で 保 存 する 一 度 ある 形 式 で 保 存 して そのまま 別 の 形 式 に 保 存 し 直 すのではなく 必 ず BMP 画 像 から 各 形 式 に 保 存 せよ 理 由 は 各 自 で 考 えよ これで PICT0003.bmp PICT0003.png PICT0003.jpg PICT0003.gif という 4 つの 画 像 ファイルができた これらの 画 像 ファイルのアイコンをダブルクリックすると それぞ れに 対 応 したアプリケーションが 起 動 する なお 全 学 計 算 機 システムにおいて 初 期 状 態 でのアイコンは 図 1 のようになっている アプリケーションは BMP 形 式 のみペイントが 他 の 3 種 では Windows フォトビューアー( 画 像 閲 覧 のためのアプリケーション)が 関 連 づ けられている これらの 表 示 の 違 いについて 詳 しくは 3.1 ファイルの 拡 張 子 とアイコン で 述 べる 図 1. 4 種 類 の 画 像 ファイル 形 式 と 全 学 計 算 機 システムにおけるそれらのアイコン 見 栄 えについて そのままでは 違 いがわからない 場 合 でも 実 は 細 部 が 変 わっている 場 合 がある ペイントの 拡 大 鏡 機 能 を 使 って 同 じ 場 所 を 拡 大 し 4 つのファイルを 比 べてみよ う 何 が 言 えるだろうか? 3
また ファイルのアイコンを 右 クリックして[プロパティ(R)]を 選 択 すると ファイルサ イズや 幅 高 さ ビットの 深 さなどがわかる ファイル 形 式 間 でこれらの 値 はどう 違 うか を 表 にまとめて 比 較 せよ また http://klis.tsukuba.ac.jp/jk14/にある scan.bmp(スキャ ナでフライヤー(ちらし)を 読 み 込 み 生 成 された 画 像 ファイル)についても 4 種 類 の 画 像 形 式 を 作 成 し 見 栄 えやファイルサイズを 比 較 しよう さらに 1.2 ハードコピーを 参 照 し デスクトップ 画 面 のハードコピーを 取 り 同 様 に 4 種 類 の 画 像 形 式 を 作 成 し 見 栄 えやファイルサイズを 比 較 せよ ハードコピーを 取 るにあた っては 見 られてまずいものが 映 り 込 まないように 注 意 すること 3. ファイルとフォルダ コンピュータでは 情 報 データを ファイル に 格 納 して 扱 う たとえば Word で 作 った 文 書 ( 文 字 情 報 ) ペイントで 描 いた 絵 ( 画 像 情 報 )もそれぞれファイルとして 保 存 さ れている また Word やペイントなどのアプリケーションプログラムもファイルとして 保 存 されている ファイルは 名 前 によって 識 別 されるが この 名 前 を ファイル 名 という ファイル 名 末 尾 の. (ピリオド)で 区 切 られた 右 側 docx や bmp は 拡 張 子 と 呼 ばれ そのフ ァイルの 内 容 が 何 であるかを 示 すための 文 字 列 である( 詳 しくは 3.1 ファイルの 拡 張 子 と アイコンで 述 べる) 複 数 のファイルを 整 理 管 理 するために コンピュータ 上 には フォルダ (ディレクト リということもある)という 仕 組 みが 用 意 されている ファイルを 紙 や 写 真 とすれば フ ォルダはそれらを 整 理 してしまう 箱 や 引 き 出 しのようなものである フォルダの 中 にはフ ァイルだけでなくフォルダを 入 れることもできる( 入 れ 子 構 造 という) また フォルダの 名 前 を フォルダ 名 という コンピュータでは 名 前 (ラベル)と 中 身 を 区 別 して 考 えることが 重 要 である 前 述 の ようにファイル 名 はファイルの 中 身 とは 独 立 して 設 定 できる 文 字 列 なので 必 ずしも 中 身 を 表 すとは 限 らない ファイル 名 やフォルダ 名 は コンピュータや 人 間 (ユーザ)がデー タを 識 別 することに 用 いる 名 前 をつけるにあたっては 中 身 がある 程 度 推 測 可 能 なよう 極 力 配 慮 せよ Windows において 作 成 者 や 最 終 更 新 日 などのファイルに 関 するデータをプロパティと いう ファイル 名 ファイルサイズなどもプロパティのひとつである あるファイルのプ ロパティを 調 べるには そのファイルのアイコン 上 で 右 クリックをし[プロパティ(R)]を 選 択 する 3.1 ファイルの 拡 張 子 とアイコン Word で 作 成 した 文 書 ファイルのファイル 名 の 末 尾 は docx または doc という 文 字 列 に 画 像 ファイルのファイル 名 の 末 尾 は bmp や png などになっている このよう なファイル 名 の 末 尾 の 文 字 列 たとえば docx や bmp をファイルの 拡 張 子 という 拡 張 子 にはファイルの 中 身 がどのようなフォーマット( 文 字 なのか 画 像 なのか あるいは 音 声 なのかなど)で 記 号 化 されているのかを 記 述 する コンピュータは 拡 張 子 とアプリケーシ ョンを 紐 づけ そのファイルの 内 容 にふさわしいアプリケーションを 起 動 する コンピュ 4
ータに 登 録 されていない 拡 張 子 や 拡 張 子 のないファイルに 対 しては 起 動 すべきアプリケ ーションが 判 断 できないため ユーザがアプリケーションを 指 定 する 必 要 がある Windows の 画 面 上 ( 正 確 には Windows が 動 作 しているコンピュータの 画 面 上 )には ファイル 名 と 小 さな 絵 が 表 示 されている この 絵 をアイコン(icon)という(icon の 語 源 を 調 べよ) 拡 張 子 に 対 してどのようなアイコンが 表 示 されるかは コンピュータの 設 定 に よって 異 なる アイコンを 見 ればおおよその 拡 張 子 がわかることから 画 面 上 に 拡 張 子 が 表 示 されないこともある 全 学 計 算 機 システムでは 初 期 状 態 では 拡 張 子 が 表 示 されるよ うになっている( 一 般 にアプリケーションと 拡 張 子 は 1 対 多 の 関 係 にあるため 区 別 のた めにも 拡 張 子 は 表 示 させることが 望 ましい) 拡 張 子 は 自 由 に 変 更 可 能 だが 拡 張 子 を 変 更 してもファイルの 中 身 は 変 わらない たと えば 文 書 ファイル memo.doc のファイル 名 を 編 集 して memo.bmp としても 中 身 が 画 像 に なるわけではない 多 くの 場 合 中 身 を 変 更 するには 単 にファイル 名 を 変 えるのではなく アプリケーションを 用 いて 変 換 する 必 要 がある 拡 張 子 がその 中 身 を 表 すとは 必 ずしも 言 えないということは 常 に 意 識 しておくこと コ ンピュータウィルスの 最 も 基 本 的 な 感 染 方 法 は 拡 張 子 を 偽 造 してあたかも 害 の 無 いよう なファイルに 見 せかけ クリックさせることである 3.2 ファイルとフォルダの 操 作 ( 手 引 き p.62~74) 大 事 なデータはこまめに 保 存 することが 重 要 だが 単 に 上 書 きを 繰 り 返 すのではなく 一 般 にはある 時 点 でのファイルを 別 のファイルとして 保 存 (スナップショットやバックア ップという)することがよく 行 われている これらを 整 然 と 保 つには 一 定 の 規 則 を 持 っ てファイル 名 を 付 ける あるいはひとくくりにすべきファイル 群 は 同 じフォルダに 入 れる などをする 必 要 がある フォルダの 整 理 方 法 については たとえば 情 報 基 礎 実 習 とい うフォルダを 作 成 し その 中 にさらに #01 から #10 というフォルダを 作 り 毎 回 の レポートやテキストを 分 けて 入 れる などという 方 法 が 一 例 として 挙 げられる ファイルやフォルダは アイコンとしてディスプレイに 表 示 されている Windows にロ グインしたとき 画 面 に 表 示 されているのは デスクトップ という 特 別 なフォルダである フォルダの 中 身 を 表 示 するには そのフォルダのアイコンをダブルクリックすればよい どのファイルがどのフォルダの 中 にあるといった ファイルやフォルダの 構 成 を 表 示 す るにはエクスプローラを 用 いる エクスプローラを 起 動 するには [スタート]メニューか らメニュー 右 側 にある[コンピュータ]をクリックする ファイルやフォルダについての 情 報 の 表 示 形 式 を 変 えるにはエクスプローラ 右 側 のアイコンをクリックし [ 特 大 アイコン] [ 詳 細 ]などの 選 択 する( 図 2) 以 下 の(1)から(10)の 操 作 をマスターせよ: (1) 新 規 フォルダを 作 成 する(フォルダ 名 は 半 角 英 数 字 を 使 うこと) (2) 作 成 したフォルダに 適 当 なファイルを 移 動 する (3) ファイルのコピーを 作 成 する (4) ファイル 名 フォルダ 名 を 変 更 する( 半 角 英 数 字 を 使 うこと) (5) ファイルを 削 除 する また ごみ 箱 からファイルを 復 元 する (6) 複 数 のファイルやフォルダ あるいはその 両 方 を 選 択 する 5
図 2.( 左 )エクスプローラ ( 右 ) 表 示 方 法 の 変 更 (7) 複 数 のファイルやフォルダ あるいはその 両 方 をまとめて 削 除 または 移 動 する (8) 拡 張 子 を 変 更 し PICT0003.bmp などの 画 像 ファイルを Word で 開 く (9) 拡 張 子 を 変 更 し Word で 作 成 した 文 書 ファイル(.docx など)をペイントで 開 く 4. Web ページによる 情 報 の 発 信 近 年 では 個 人 でも Web ページでの 情 報 発 信 を 行 うことが 容 易 となっている 一 般 には Twitter やブログなどの 外 部 サービスを 使 う 方 が 簡 単 だが 自 身 で Web ページを 作 ること ができればより 自 由 度 の 高 い 表 現 が 可 能 となる また Web ページを 作 るための 知 識 はブ ログ 更 新 などの 時 にも 役 立 つ 情 報 基 礎 実 習 では 第 7 8 回 の 演 習 で 簡 単 な Web ページ の 作 成 を 行 う 4.1 Web ページ 公 開 のための 手 続 き( 手 引 き p.251) 全 学 計 算 機 システムで Web ページを 公 開 するには Web サーバ 利 用 申 請 をしなくてはな らない ブラウザで 全 学 計 算 機 システムの Web ページ(http://www.u.tsukuba.ac.jp/)の 左 メニューから 各 種 設 定 確 認 Web ページ CGI の 公 開 Web 公 開 するた めの 申 請 と 順 にリンクを 辿 る すると ユーザ 名 とパスワードの 入 力 を 求 められるので 入 力 する ユーザ 名 は s+ 学 籍 番 号 下 7 桁 である(201411999 なら s1411999) 表 示 された 利 用 条 件 をよく 読 み ガイドラインを 読 み 理 解 した にチェックし ガイドラインに 従 う をクリックする( 図 3) この 利 用 条 件 は 後 から 読 み 返 すことができるように 保 存 せ よ 利 用 条 件 の 中 の 文 字 をクリックし [Ctrl]キーを 押 しながら[A]キーを 押 すと 中 の 文 字 列 が 全 て 選 択 される この 状 態 で 右 クリックして コピー を 選 択 すればコピーができる 後 は Word などに 貼 り 付 けて 保 存 すればいつでも 読 み 返 すことが 可 能 である 一 般 に Web ページとして 公 開 するには サーバに FTP でファイルをアップロードする などという 煩 雑 な 手 続 きをする 必 要 があるが 全 学 計 算 機 システムの 場 合 は Web サーバの 利 用 申 請 をしさえすれば Z: ドライブ 直 下 にある www フォルダにファイルを 置 くだけで 6
図 3. Web サーバの 利 用 申 請 画 面 (ほとんどの 場 合 ) 簡 単 に Web にファイルを 公 開 できる www フォルダに 置 いたファイルは http://www.u.tsukuba.ac.jp/~s14xxxxx/ 以 下 に 公 開 される たとえば www フォルダ 直 下 に first.html というファイルを 置 いた 場 合 http://www.u.tsukuba.ac.jp/~s14xxxxx/first.html にアクセスすればブラウザから 閲 覧 で きるはずである www フォルダの 下 に jk14 というフォルダを 作 成 し その 中 に second.html というファイルを 作 成 した 場 合 は http://www.u.tsukuba.ac.jp/~s14xxxxx/jk14/second.html からアクセス 可 能 である これらの s14xxxxx 部 分 はユーザ ID と 同 じ s+ 学 籍 番 号 下 7 桁 である s の 前 の ~ は チルダと 呼 ばれる 半 角 記 号 であり 一 般 にはキーボードの 右 上 [BackSpace]キーと[0]キ ーの 間 あたりにある 3 章 で 作 成 した 画 像 ファイル(ここでは abc.png とする)を www フォルダにコピーして ブラウザの URL 欄 に http://www.u.tsukuba.ac.jp/~s14xxxxx/abc.png と 打 ち 込 みアクセス してみよ ブラウザ 上 で 自 分 自 身 が 作 成 した 画 像 が 見 られるはずである 全 世 界 に 向 けて 公 開 しているということを 念 頭 に 置 きながら www フォルダには 誰 に 見 られても 良 いファ イルのみを 置 くこと( 一 般 にそのファイルへのハイパーリンクが 無 ければ URL を 知 るこ となしにはそのファイルにアクセスすることは 難 しいが 全 学 計 算 機 システムにおいて www フォルダ 以 下 のファイルは 全 学 計 算 機 システムのアカウントを 持 っていれば 誰 でも 閲 覧 が 可 能 である 詳 細 は 紙 面 の 都 合 上 省 略 する) 閲 覧 制 限 をかける 手 法 ( 手 引 き p.254~ 7
256 参 照 )も 存 在 するが 本 授 業 では 扱 わない 1 自 衛 手 段 としては 触 られては 困 るファ イルは 一 切 置 かないことが 一 番 である 注 意 事 項 として Web ページは 日 本 だけでなく 世 界 に 公 開 するため URL を 構 成 する 文 字 列 ( 特 にファイル 名 とフォルダ 名 )は 半 角 文 字 を 使 うことがベターである 春 日 太 郎.bmp のように 全 角 文 字 を 使 うこともできるが 推 奨 はしない 少 なくとも 情 報 基 礎 実 習 では Web に 公 開 するファイル 名 フォルダ 名 は 全 て 半 角 文 字 とすること なお 一 般 にファイルを Web に 公 開 するにはパーミッションという 読 みこみ 書 き 込 み 実 行 をどこまで 許 可 するのかという 設 定 が 非 常 に 大 切 になる 情 報 基 礎 実 習 で 扱 う 範 囲 ではこのパーミッションを 意 識 せずとも Web 公 開 ができるはずだが もし 図 4 のよう な 表 示 が 出 たら TA または TF を 呼 ぶこと 図 4. パーミッションエラーの 画 面 5. 簡 単 な HTML 文 書 を 作 る 5.1 HTML とは( 手 引 き p.211~220) HTML とは Hyper Text Markup Language の 略 であり 文 字 列 に 印 をつける(マークア ップ)ことで 文 書 構 造 などを 表 現 するマークアップ 言 語 の 一 種 である HTML では タグ と 呼 ばれる 文 字 列 で 対 象 としたい 文 字 列 を 囲 むことでマークアップを 行 う タグには 開 始 タグと 終 了 タグがあり 開 始 タグは<タグ 名 > 終 了 タグは</タグ 名 >の 形 で 表 記 される 基 本 的 には 開 始 タグと 終 了 タグで 文 字 列 を 挟 むことでマークアップする タグで 挟 まれた 部 分 のことを 内 容 タグとその 内 容 をまとめて 要 素 と 呼 ぶ 同 じ 内 容 でも 囲 むタグが 違 えば それが 意 味 するものも 異 なる たとえば <p></p>で 囲 まれた 文 字 列 は 段 落 を <h1></h1>で 囲 まれた 文 字 列 は 見 出 しを 表 す HTML を 使 えば 文 書 画 像 他 のファイルへのリンクなどを 組 み 込 んだ Web ページ が 簡 単 に 作 成 できる 今 回 の 演 習 では 単 純 な HTML ファイルを 作 成 し Web で 公 開 する より 発 展 的 なものについては 第 8 回 で 取 り 上 げる 1 各 自 で 試 してもよいが 設 定 を 誤 ると 第 8 回 レポートの 採 点 が 不 可 能 となるため 細 心 の 注 意 を 払 うこと 8
メモ 帳 を 使 い 次 のような 内 容 の 文 書 ファイルを 作 成 せよ <html> などはいずれも 半 角 文 字 で 入 力 すること メモ 帳 は[スタート]メニューから[すべてのプログラム] [Accessories] [メモ 帳 ]と 順 に 選 択 することで 起 動 できる <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html lang="ja"> <head> <title>はじめての HTML</title> </head> <body> 情 報 基 礎 実 習 は 簡 単 だ <hr> もっと 難 しいことがやりたい </body> </html> 作 成 が 終 わったら ファイル 名 を 半 角 英 数 字 で first.html ファイルの 種 類 (T)は すべ てのファイル(*.*) 文 字 コード(E)は ANSI として www フォルダに 保 存 しよう( 図 5) このとき html ファイルに 対 してはどのようなアイコンが 表 示 されるか 確 認 せよ ブラウ ザの URL を 入 力 する 欄 に http://www.u.tsukuba.ac.jp/~s14xxxxx/first.html と 入 力 す れば このファイルの 内 容 がブラウザをとおして 表 示 されるはずである Web 公 開 にあたって 最 低 限 これだけは 守 ること あなたの 常 識 に 期 待 している: 氏 名 住 所 電 話 番 号 プロフィールなどの 個 人 情 報 を 不 用 意 に 公 開 しないこと 著 作 権 が 有 効 な 他 者 の 画 像 や 文 書 を 引 用 などの 要 件 を 守 らず 使 わないこと 無 責 任 な 発 言 や 中 傷 を 慎 むこと スマートフォン 等 位 置 情 報 を 記 録 する 機 器 で 撮 影 した 画 像 の 扱 いには 注 意 すること 撮 影 場 所 の 位 置 情 報 がプロパティに 記 録 されている 場 合 がある 6. 様 々な HTML マークアップ 要 素 の 例 ( 詳 細 は 次 回 ) Internet Explorer のようなブラウザは 制 御 語 (HTML マークアップ 要 素 )が 入 ったフ ァイルを 読 み 込 むと それを HTML(Hyper Text Markup Language)とみなして 整 形 表 示 してくれる HTML マークアップ 要 素 は 大 文 字 小 文 字 を 問 わないが 半 角 英 数 字 で 入 力 すること( 決 して 全 角 文 字 で 入 力 してはならない) メモ 帳 を 用 いて 以 下 のマークア ップ 要 素 をいくつか 追 加 してはファイルに 保 存 し Internet Explorer でファイルを 表 示 す るという 操 作 を 繰 り 返 し マークアップ 要 素 の 働 きを 確 かめよ HTML ファイルは 毎 回 www フォルダに 入 れ web を 経 由 して 見 ずとも ブラウザにドラッグ&ドロップすればロ ーカルで(Web を 介 さず) 整 形 した 結 果 を 見 ることができる ただし ローカルでは 表 示 できているからと 言 って それが Web を 介 したときでも 全 く 同 じ 表 示 がされるわけではな いことに 留 意 せよ 9
図 5. メモ 帳 から html ファイルを 作 成 保 存 するときの 設 定 <html> </html> <head> </head> <title> </title> <body> </body> <br> <p> <hr> <b> </b> <i> </i> <tt> </tt> <strong> </strong> <h1> </h1> <h2> </h2> <ol> </ol> <ul> </ul> <li> <pre> </pre> HTML 文 書 であることを 宣 言 文 書 の 前 文 文 書 タイトルなどのメタ 情 報 などを 書 く 文 書 タイトル(ブラウザのウィンドウに 表 示 される) 文 書 の 本 文 改 行 段 落 分 け 次 の 段 落 との 間 に 空 行 が 入 る 罫 線 太 字 体 斜 体 タイプライタスタイル 強 調 スタイル レベル 1 ヘディング レベル 2 ヘディング 番 号 付 き 箇 条 書 き 番 号 なし 箇 条 書 き <ol> <ul> 内 で 使 用 する 各 項 目 整 形 済 みテキスト(そのまま 表 示 させる) 10
用 語 説 明 URL(Uniform Resource Locator) インターネット 上 に 存 在 する 情 報 資 源 ( 文 書 や 画 像 など)の 場 所 を 示 すルール イ ンターネットにおける 情 報 の 住 所 のようなもの URL http://www.klis.tsukuba.ac.jp/lc/index.php スキーム ドメイン フォルダ ファイル スキーム 示 されたリソースを 取 得 するための 手 段 実 際 には HTML や FTP などの コンピ ュータ 同 士 が 通 信 を 行 う 上 で 相 互 に 決 められた 約 束 事 を 示 すプロトコル 名 が 用 いられ ることが 多 い たとえば 人 間 同 士 が 意 思 疎 通 を 行 なう 場 合 には どの 言 語 を 使 うか( 日 本 語 か 英 語 か) どんな 媒 体 を 使 って 伝 達 するか( 電 話 か 手 紙 か) といった 取 り 決 めが 暗 黙 のうちに 成 されているが コンピュータ 通 信 においては 事 前 にプロトコルとして 詳 細 に 定 義 しておき それを 使 う 必 要 がある プロトコルとしては http ftp smtp pop などがある ドメイン インターネット 上 に 存 在 するコンピュータやネットワークにつけられる 識 別 子 右 端 の jp や com をトップレベルドメイン 右 から2 番 目 の ac や co をセカンドレベ ルドメインという Web ページ WWW を 使 ってインターネット 上 で 公 開 されている 文 書 Web ブラウザに 一 度 に 表 示 されるデータのまとまりで テキストデータや HTML によるレイアウト 情 報 文 書 中 に 埋 め 込 まれた 画 像 や 音 声 動 画 などから 構 成 される たとえば 知 識 情 報 図 書 館 学 類 の 概 要 が 記 された http://klis.tsukuba.ac.jp/index.php も 典 型 的 な Web ペー ジの 一 種 である Web サイト ひとまとまりに 公 開 されている Web ページ 群 例 えば http://klis.tsukuba.ac.jp/ 以 下 に 公 開 されている Web ページを 総 じて 知 識 情 報 図 書 館 学 類 の Web サイトとい うことができる トップページ Web サイトの 入 り 口 の Web ページのこと http://klis.tsukuba.ac.jp/index.php は 知 識 情 報 図 書 館 学 類 のトップページである スタートページ ブラウザを 起 動 した 時 最 初 に 表 示 される Web ページのこと ホームページ 元 々はスタートページと 同 義 の 語 だったが 現 在 では 使 用 者 によって 上 記 の Web ページ Web サイト トップページ スタートページのどの 意 味 でも 使 われうる 非 常 に 曖 昧 な 用 語 である(このような 語 はバズワードと 呼 ばれる) 11
出 席 確 認 課 題 内 容 を 情 報 基 礎 実 習 第 7 回 出 席 課 題 とした title 要 素 を 含 む ファイル 名 を first.html とした HTML ファイルを http://www.u.tsukuba.ac.jp/~s14xxxxx/first.html のような URL から 閲 覧 できるよう Web に 公 開 せよ さらに その Web ページを Internet Explorer で 閲 覧 印 刷 して TA/TF に 提 出 せよ( 手 書 きで 用 紙 の 左 上 に 学 籍 番 号 と 氏 名 を 記 入 し ファイ ル 中 には 氏 名 は 含 めないこと なお 14xxxxx の 部 分 は 各 自 の 学 籍 番 号 下 7 桁 である) 問 題 が 無 い 場 合 のみ 受 理 する 今 回 のレポート 課 題 締 め 切 り 木 曜 クラス:6 月 11 日 ( 水 )15:00 金 曜 クラス:6 月 12 日 ( 木 )15:00 内 容 3 種 類 の 画 像 (PICT0003.bmp scan.bmp デスクトップ 画 面 のハードコピー)そ れぞれについて Microsoft Paint を 使 って 4 種 類 の 画 像 形 式 (BMP, JPG, PNG, GIF) に 変 換 したのち 4 種 類 の 画 像 3 組 それぞれについて 画 像 の 見 栄 えやファイルサイズ 等 を 比 較 し 画 像 ファイル 形 式 についての 実 験 レポート( 目 的 実 験 手 法 結 果 考 察 調 べたこと 参 考 文 献 などから 成 る)を 作 成 せよ 2 特 に 次 の 点 に 留 意 すること: (1) 最 低 限 12 枚 全 ての 画 像 があるか (2) ファイルサイズなどの 比 較 にあたっては 具 体 的 な 数 値 が 示 してあるか (3) どのような 場 合 にどの 画 像 形 式 を 使 えばよいかなどの 考 察 があるか (4) 考 察 が 単 なる 感 想 ではないかどうか (5) 考 察 は 実 験 結 果 に 則 し 客 観 的 に 言 えることであるか など 提 出 先 春 日 エリア 7B 棟 2 階 学 務 前 レポートボックス 書 式 Form.docx を 適 宜 書 き 換 えて 使 用 し 1 ページ/ 枚 で A4 片 面 モノクロ 印 刷 複 数 枚 にな る 場 合 はステイプラー( 針 無 しは 不 可 )で 左 上 1 箇 所 を 綴 じること 備 考 これまでのテキストや 演 習 中 返 却 レポート 内 などで 指 示 指 摘 された 細 かいレ ポートの 書 式 (ページ 番 号 の 付 与 や 使 用 フォントなど)は 全 て 遵 守 すること 既 に 周 知 した 書 式 を 満 足 していなかった 場 合 は 減 点 の 対 象 となる 提 出 後 におけるいかなるレポートの 差 し 替 えも 認 めない レポート 中 のあらゆる 箇 所 において 手 書 きは 不 可 とする 提 出 先 を 間 違 った 場 合 原 則 として 採 点 の 対 象 外 とする 2 Word 文 書 に 画 像 を 挿 入 する 方 法 は 手 引 き p.183~184 を 参 照 せよ なお 画 像 の 左 右 位 置 は 画 像 を 選 択 してから [ホーム]タブの 段 落 から 文 字 列 と 同 様 に 操 作 できる なお Word 内 において 挿 入 した 画 像 を 拡 大 縮 小 すると 見 栄 えが 劣 化 する 場 合 があることに 留 意 せよ 12
課 題 名 はふさわしいものを 各 自 で 考 案 し 記 述 すること 13