Microsoft Word - JK2016_07.docx

情 報 基 礎 実 習 第 7 回 2016 年 6 月 2 日 ( 木 ) 6 月 3 日 ( 金 ) 担 当 教 員 : 逸 村 裕 小 泉 公 乃 TA: 木 曜 松 山 麻 珠 中 田 周 育 前 田 仁 金 曜 鈴 木 啓 史 伊 川 真 以 榎 本 翔 1. 本 日 の 主 な 作 業 Web はテキストのみならず 画 像 や 動 画 など 様 々なメディアから 構 成 されている 今 回 は その 中 でも 画 像 に 焦 点 を 当 て その 原 理 を 学 び 形 式 の 違 いを 実 験 から 考 察 し 出 席 課 題 として 提 出 する また 次 回 授 業 への 導 入 として Web を 構 成 する Web ページを 作 る 最 も 基 本 的 な 言 語 である HTML を 学 ぶ 今 回 のテキストは 扱 う 内 容 の 性 質 上 専 門 用 語 を 多 く 含 んでいる 既 によく 理 解 している という 自 信 がある 場 合 を 除 き 読 み 飛 ばさず 必 ず 順 を 追 って 読 むこと Microsoft Paint を 用 い 画 像 ファイルを 加 工 し 見 栄 えやファイルサイズを 比 べる ファイルとフォルダの 操 作 を 体 得 する メモ 帳 を 用 い 簡 単 な HTML 文 書 を 作 り Web で 公 開 する 2. 画 像 の 扱 い 2.1 液 晶 ディスプレイとビットマップ 画 像 一 般 的 な 液 晶 ディスプレイでは Pixe( 画 素 )という 点 が 格 子 状 に 並 び それぞれが 違 う 色 を 発 色 することで 全 体 として 映 像 を 表 現 している それぞれの Pixe はさらに 赤 緑 青 のサブ 画 素 からなり これらの 明 るさを 調 整 することで 各 Pixe の 色 を 決 めている 1 な お 全 学 計 算 機 システムでは 幅 1,920Pixe 高 さ 1,080Pixe のディスプレイを 使 用 してい る ディスプレイ 上 では 映 像 として 画 像 を 表 示 できる 一 口 に 画 像 と 言 っても 様 々 な 種 類 形 式 が 存 在 するが 本 実 習 では 画 像 を 格 子 状 に 分 割 し それぞれの 点 (Pixe)に 色 を 割 り 当 てることで 表 現 するビットマップ 画 像 を 扱 う 以 下 単 に 画 像 といったとき それはビットマップ 画 像 を 指 す 2.2 ハードコピー(スクリーンショット) ある 時 点 における ディスプレイの 各 Pixe の 状 態 をコピー(キャプチャ)したものをハ ードコピー(スクリーンショット)という ハードコピーを 取 るには 一 般 にはキーボード 右 上 にある[PrintScreen]キー(あるいは[PrtScn]キー)を 押 すだけでよい ハードコピー を 取 った 後 に 画 像 を 編 集 するグラフィックソフトウェア 例 えば Microsoft Paint を 起 動 し 1 ルーペなどでディスプレイを 拡 大 して 見 ると 赤 緑 青 のサブ 画 素 が 隙 間 無 く 並 んで いることがわかる また ドット 落 ちと 呼 ばれるある 1 点 の 色 が 正 常 に 表 示 されない 現 象 は このサブ 画 素 が 1 個 以 上 機 能 不 全 になっていることを 主 な 原 因 とする 1

て 貼 り 付 け をすれば ハードコピーを 画 像 として 保 存 可 能 である 単 に[PrintScreen] キーを 押 すとディスプレイの 画 面 全 体 のハードコピーを 取 ることになるが あるウィンド ウだけのハードコピーを 取 りたい 場 合 は そのウィンドウをアクティブにした 状 態 で[At] キーを 押 しながら[PrintScreen]キーを 押 せばよい 2.3 画 像 のファイルサイズと 3 種 類 の 画 像 ファイル 形 式 画 像 のファイルサイズは 横 のドット 数 縦 のドット 数 色 数 p( 圧 縮 率 ) で 決 定 される 色 の 表 現 手 法 として RGB カラーモデルが 一 般 によく 用 いられているが こ れは 赤 (Red) 緑 (Green) 青 (Bue)の 3 色 を 混 ぜることで 様 々な 色 を 表 現 するという 手 法 である RGB それぞれに 8 bit ずつ 割 り 当 てると 2 24 色 すなわち 約 1,600 万 色 が 表 せる ここで 1,600 万 画 素 ( 横 4,608 Pixes 縦 3,456 Pixes)のデジタルカメラで 撮 影 した 画 像 に 一 切 の 圧 縮 をかけないとすれば そのファイルサイズは 4,608(Pixes) 3,456 (Pixes) 3(Bytes)= 47,775,744 B 45.6 MB となる 圧 縮 率 は 0<p 1 の 値 を 取 り 規 則 的 な 繰 り 返 しなどを 符 号 化 して 記 録 することでデー タサイズを 小 さくできる 圧 縮 展 開 にはある 程 度 の 演 算 を 必 要 とするが 一 般 にはデータ を 格 納 するスペースや 通 信 する 時 間 を 節 約 できるメリットのほうが 大 きいため 圧 縮 は 広 く 用 いられている 画 像 には 色 々な 形 式 (フォーマット)があり 用 途 に 合 わせて 使 い 分 けられている 代 表 的 な 画 像 ファイル 形 式 に 一 般 には 24 bit で 圧 縮 なしの BMP 形 式 (Microsoft Windows Bitmap Image) 圧 縮 ありの JPEG 形 式 (Joint Photographic Experts Group)や PNG 形 式 (Portabe Network Graphics)がある また 1 画 素 に 3 Bytes ではなく 1 Byte(256 色 )を 割 り 当 てた 形 式 として GIF 形 式 (Graphics Interchange Format)がある これら 4 種 類 の 画 像 ファイル 形 式 のうち 一 般 に BMP 以 外 は 圧 縮 を 行 うが その 圧 縮 率 はデータ の 内 容 によっても 変 わるため 固 定 の 値 を 持 たない データの 圧 縮 方 式 には 非 可 逆 圧 縮 と 可 逆 圧 縮 の 2 種 類 があるが 一 般 に JPEG は 非 可 逆 圧 縮 を PNG GIF は 可 逆 圧 縮 を 採 用 している 非 可 逆 圧 縮 は 人 の 目 には 違 いがほとんど わからないようにデータを 捨 てることでファイルサイズを 減 らしており その 名 の 通 り 圧 縮 前 の 状 態 に 完 全 に 復 元 することはできない 一 方 PNG や GIF は 可 逆 圧 縮 であり 劣 化 ( 元 の 画 像 から 見 栄 えが 悪 化 )しない 直 感 的 には 全 く 同 じ 色 が 100 Pixe 続 くような 区 間 が 存 在 するとき 無 圧 縮 では 各 Pixe が 色 を 保 持 するが 可 逆 圧 縮 では 1 Pixe 分 の 色 と この 色 が 100 個 続 く というデータだけを 持 つことで 復 元 可 能 な 圧 縮 を 実 現 している 3. Microsoft Paint を 用 いた 画 像 の 加 工 とデータ 形 式 の 変 換 Windows に 標 準 的 に 備 わっている 画 像 を 編 集 するためのシンプルなソフトウェアとし て Microsoft Paint( 以 下 ペイント)がある ペイントでは 画 像 上 に 自 在 に 図 形 や 文 字 を 描 画 可 能 のほか 画 像 ファイル 形 式 の 変 換 を 行 うこともできる ペイントを 起 動 するには [スタート]メニューから[すべてのプログラム] [Accessories] [ペイント]と 順 に 選 択 す 2

る 終 了 するには [ホーム]タブの 左 のメニューボタンをクリックし [ 終 了 (X)]を 選 択 す るか ウィンドウ 右 上 の ボタンをクリックすればよい ペイントの 操 作 については 言 葉 で 説 明 するよりも 実 際 に 動 かした 方 がわかりやすいため 次 の 演 習 1-5 に 順 に 取 り 組 んでみよ 演 習 1 http://kis.tsukuba.ac.jp/jk16/ から ファイル PICT0003.bmp をダウンロードしてデス クトップに 保 存 せよ ファイル 名 のうち PICT0003 という 部 分 は 変 えてもよいが ピリオ ド 以 降 の 文 字 列 ( 拡 張 子 という この 場 合 は bmp)は 変 えないこと 演 習 2 演 習 1 でダウンロードした PICT0003.bmp では 画 像 左 上 に 指 が 映 り 込 んでしまってい る このままでは 見 栄 えが 悪 いため 映 り 込 んだ 指 を 取 り 除 いた 画 像 を 新 たに 作 りたい そ こで 次 の(1)-(6)の 操 作 を 行 い 目 的 の 画 像 を 作 成 せよ (1) まずペイントを 起 動 したのち メニューボタンをクリックし [ 開 く(O)]を 選 択 する すると 開 く ウィンドウが 出 るため デスクトップから 先 ほどダウンロードした PICT0003.bmp を 選 び [ 開 く(O)]をクリックする (2) [ホーム]タブの イメージ から[サイズ 変 更 ]をクリックし 縦 横 比 (アスペクト 比 と もいう)を 維 持 したまま 横 縦 のサイズを 半 分 の 800Pixe 600Pixe にする (3) [ホーム]タブの イメージ から[ 回 転 ]を 選 択 し 消 したい 部 分 が 右 側 になるよう 画 像 を 左 右 反 転 する (4) 画 像 の 右 端 中 央 に があるが これをドラッグして 画 像 の 右 側 から 任 意 の 部 分 まで 不 要 な 部 分 を 削 除 する (5) (3)の 操 作 を 繰 り 返 し 画 像 の 左 右 を 元 の 状 態 に 戻 す (6) メニューボタンから[ 上 書 き 保 存 (S)]を 選 択 し (5)までの 操 作 を 行 った 画 像 を BMP 形 式 のまま 保 存 する 演 習 3 演 習 2 で 作 成 した BMP 画 像 を ペイントを 使 って PNG 形 式 JPG 形 式 GIF 形 式 の 3 形 式 に 変 換 せよ 例 えば PNG 形 式 に 変 換 するのであればメニューボタンから[ 名 前 を 付 け て 保 存 (A)] [PNG 画 像 (P)]と 順 に 選 択 すれば 画 像 を PNG 形 式 で 保 存 できる このとき 新 たに 作 成 されたファイル 名 の 最 後 が.png になっていることを 確 認 せよ なお 一 度 ある 形 式 で 保 存 して そのまま 別 の 形 式 に 保 存 し 直 すのではなく 必 ず BMP 画 像 から 各 形 式 に 保 存 せよ 理 由 も 各 自 で 考 えよ これで PICT0003.bmp PICT0003.png PICT0003.jpg PICT0003.gif という 4 つの 画 像 ファイルができた これらの 画 像 ファイルのアイコンをダブルクリックすると そ れ ぞ れ に 対 応 したアプリケーションが 起 動 する なお 全 学 計 算 機 システムにおいて 初 期 状 態 で のアイコンは 図 1 のようになっている アプリケーションは BMP 形 式 のみペイントが 他 の 3 種 では Windows フォトビューアー( 画 像 閲 覧 のためのアプリケーション)が 関 連 づけ 3

られている これらの 表 示 の 違 いについて 詳 しくは 4.1 ファイルの 拡 張 子 とアイコン で 述 べる 図 1. 4 種 類 の 画 像 ファイル 形 式 と 全 学 計 算 機 システムにおけるそれらのアイコン 見 栄 えについて そのままでは 違 いがわからない 場 合 でも 実 は 細 部 が 変 わっている 場 合 がある ペイントの 拡 大 鏡 機 能 を 使 って 同 じ 場 所 を 拡 大 し 4 つのファイルを 比 べてみよ 何 が 言 えるだろうか? また ファイルのアイコンを 右 クリックして[プロパティ(R)]を 選 択 すると ファイルサ イズや 幅 高 さ ビットの 深 さなどがわかる ファイル 形 式 間 でこれらの 値 はどう 違 うかを 表 にまとめて 比 較 せよ また http://kis.tsukuba.ac.jp/jk16/ にある scan.bmp(スキャナ でフライヤー(ちらし)を 読 み 込 み 生 成 された 画 像 ファイル)についても 4 種 類 の 画 像 形 式 を 作 成 し 見 栄 えやファイルサイズを 比 較 しよう さらに 2.2 ハードコピーを 参 照 し デスクトップ 画 面 のハードコピーを 取 り 同 様 に 4 種 類 の 画 像 形 式 を 作 成 し 見 栄 えやファイルサイズを 比 較 せよ ハードコピーを 取 るにあた っては 見 られてまずいものが 映 り 込 まないように 注 意 すること 演 習 4 デスクトップ 画 面 のハードコピー 及 び scan.bmp を BMP PNG JPG GIF の 4 形 式 に 変 換 した 画 像 を 作 成 せよ また それぞれの 画 像 において 同 一 箇 所 を 拡 大 し 何 か 違 いが ないかを 調 べよ 4. ファイルとフォルダ コンピュータでは 情 報 データを ファイル に 格 納 する 例 えば Word で 作 った 文 書 ペイントで 描 いた 絵 もそれぞれファイルとして 保 存 されている また Word やペイン トなどのアプリケーションプログラムもファイルとして 保 存 されている ファイルは 名 前 によって 識 別 されるが この 名 前 を ファイル 名 という ファイル 名 末 尾 の. ( ピ リ オ ド ) で 区 切 ら れ た 右 側 docx や bmp は 拡 張 子 と 呼 ばれ そのファ イルの 内 容 が 何 であるかを 示 すための 文 字 列 である( 詳 しくは 4.1 ファイルの 拡 張 子 とアイ コンで 述 べる) 複 数 のファイルを 整 理 管 理 するために コンピュータ 上 には フォルダ 2 という 仕 組 みが 用 意 されている ファイルを 紙 や 写 真 とすれば フォルダはそれらを 整 理 して しまう 箱 や 引 き 出 しのようなものである フォルダの 中 にはファイルだけでなくフォルダを 入 れ 2 ディレクトリと 呼 ぶ 場 合 もある 4

ることもできる 3 また フォルダの 名 前 を フォルダ 名 という コンピュータでは 名 前 (ラベル)と 中 身 を 区 別 して 考 えることが 重 要 である 前 述 のよ うにファイル 名 はファイルの 中 身 とは 独 立 して 設 定 できる 文 字 列 なので 必 ずしも 中 身 を 表 すとは 限 らない ファイル 名 やフォルダ 名 は コンピュータや 人 間 (ユーザ)がデータを 識 別 することに 用 いる 名 前 をつけるにあたっては 中 身 がある 程 度 推 測 可 能 なよう 極 力 配 慮 せよ Windows において 作 成 者 や 最 終 更 新 日 などの ファイルに 関 するデータをプロパティと いう ファイル 名 ファイルサイズなどもプロパティのひとつである あるファイルのプロ パティを 調 べるには そのファイルのアイコン 上 で 右 クリックをし[プロパティ(R)]を 選 択 する 4.1 ファイルの 拡 張 子 とアイコン Word で 作 成 した 文 書 ファイルのファイル 名 の 末 尾 は docx または doc に 画 像 フ ァイルのファイル 名 の 末 尾 は bmp や png などになっている このようなファイル 名 の 末 尾 の 文 字 列 例 えば docx や bmp をファイルの 拡 張 子 という 拡 張 子 にはファイルの 中 身 がどのようなフォーマット( 直 感 的 には 文 字 なのか 画 像 なのか あるいは 音 声 なのか など)で 記 号 化 されているのかを 記 述 する コンピュータは 拡 張 子 とアプリケーションを 紐 づけ そのファイルの 内 容 にふさわしいアプリケーションを 起 動 する コンピュータに 登 録 されていない 拡 張 子 や 拡 張 子 のないファイルに 対 しては 起 動 すべきアプリケーションが 判 断 できないため ユーザがアプリケーションを 指 定 する 必 要 がある Windows の 画 面 上 ( 正 確 には Windows が 動 作 しているコンピュータの 画 面 上 )には ファイル 名 と 小 さな 絵 が 表 示 されている この 絵 をアイコンという 4 拡 張 子 に 対 してどの ようなアイコンが 表 示 されるかは コンピュータの 設 定 によって 異 なる ア イ コ ン を 見 れ ば おおよその 拡 張 子 がわかることから 画 面 上 に 拡 張 子 が 表 示 されないこともある 全 学 計 算 機 システムでは 初 期 状 態 では 拡 張 子 が 表 示 されるようになっている 5 拡 張 子 は 自 由 に 変 更 可 能 だが 拡 張 子 を 変 更 してもファイルの 中 身 は 変 わらない 例 えば 文 書 ファイル memo.doc のファイル 名 を 編 集 して memo.bmp としても 中 身 が 画 像 になる わけではない 多 くの 場 合 中 身 を 変 更 するには 単 にファイル 名 を 変 えるのではなく アプ リケーションを 用 いて 変 換 する 必 要 がある ここで 拡 張 子 がその 中 身 を 表 すとは 必 ずしも 言 えないということは 常 に 意 識 しておく べきである 例 えば コンピュータウィルスの 最 も 基 本 的 な 感 染 方 法 として 拡 張 子 を 偽 造 してあたかも 害 の 無 いようなファイルに 見 せかけ クリックさせるというものがある 4.2 ファイルとフォルダの 操 作 ( 手 引 き p.64-) 大 事 なデータはこまめに 保 存 することが 重 要 だが 単 に 上 書 きを 繰 り 返 すのではなく あ る 時 点 でのファイルを 別 のファイルとして 保 存 (スナップショットやバックアップという) 3 このような 構 造 を 入 れ 子 構 造 と 呼 ぶ 4 アイコン(icon)の 語 源 を 調 べよ 5 一 般 にアプリケーションと 拡 張 子 は 1 対 多 の 関 係 にあるため 区 別 を 容 易 にするために も 拡 張 子 は 常 に 表 示 させることが 望 ましい 5

することもよく 行 われている これらにより 作 られたファイルを 整 然 と 保 つには 一 定 の 規 則 を 持 ってファイル 名 をつける あるいはひとくくりにすべきファイル 群 は 同 じフォルダ に 入 れるなどをする 必 要 がある フォルダの 整 理 方 法 については 例 えば 情 報 基 礎 実 習 というフォルダを 作 成 し その 中 にさらに #01 から #10 というフォルダを 作 り 毎 回 のレポートやテキストを 分 けて 入 れる という 方 法 が 一 例 として 挙 げられる また ファ イル 名 フォルダ 名 は 先 頭 に 年 月 日 を 入 れる 例 えば 20160603_memo.txt のようにするこ とで 整 理 がしやすくなることがある ファイルやフォルダは アイコンとしてディスプレイに 表 示 されている Windows にロ グインしたとき 画 面 に 表 示 されているのは デスクトップ という 特 別 なフォルダである フォルダの 中 身 を 表 示 するには そのフォルダのアイコンをダブルクリックすればよい どのファイルがどのフォルダの 中 にあるといった ファイルやフォルダの 構 成 を 表 示 す るにはエクスプローラを 用 いる エクスプローラを 起 動 するには [スタート]メニューから メニュー 右 側 にある[コンピュータ]をクリックする ファイルやフォルダについての 情 報 の 表 示 形 式 を 変 えるにはエクスプローラ 右 側 のアイコンをクリックし [ 特 大 アイコン] [ 詳 細 ]などの 選 択 する( 図 2) 演 習 5 次 の(1)から(9)の 操 作 を 試 せ (1) 新 規 フォルダを 作 成 する(フォルダ 名 は 半 角 英 数 字 を 使 うこと) (2) 作 成 したフォルダに 適 当 なファイルを 移 動 する (3) ファイルのコピーを 作 成 する (4) ファイル 名 フォルダ 名 を 変 更 する( 半 角 英 数 字 を 使 うこと) (5) ファイルを 削 除 する また ごみ 箱 からファイルを 復 元 する (6) 複 数 のファイルやフォルダ あるいはその 両 方 を 選 択 する (7) 複 数 のファイルやフォルダ あるいはその 両 方 をまとめて 削 除 または 移 動 する (8) 拡 張 子 を 変 更 し PICT0003.bmp などの 画 像 ファイルを Word で 開 く (9) 拡 張 子 を 変 更 し Word で 作 成 した 文 書 ファイル(.docx など)をペイントで 開 く 5. Web ページによる 情 報 の 発 信 近 年 では 個 人 でも Web ページでの 情 報 発 信 を 行 うことが 容 易 となっている 一 般 には Twitter やブログなどの 外 部 サービスを 使 う 方 が 簡 単 だが 自 身 で Web ページを 作 ること ができればより 自 由 度 の 高 い 表 現 が 可 能 となる また Web ページを 作 るための 知 識 はブ ログ 更 新 などの 時 にも 役 立 つ 情 報 基 礎 実 習 では 第 7 8 回 の 演 習 で 簡 単 な Web ページ の 作 成 を 行 う 5.1 Web ページ 公 開 のための 手 続 き 全 学 計 算 機 システムで Web ページを 公 開 するには Web コンテンツの 公 開 申 請 をしな くてはならない ブラウザで 全 学 計 算 機 システムの Web ページ (http://www.u.tsukuba.ac.jp/ )の 左 メニューから 各 種 設 定 確 認 Web ページ CGI の 公 開 Web コンテンツの 公 開 申 請 と 順 にリンクを 辿 る すると ユーザ 名 とパ 6

スワードの 入 力 を 求 められるので 入 力 する 表 示 された 利 用 条 件 をよく 読 み ガイドラ 図 2.( 左 )エクスプローラ ( 右 ) 表 示 方 法 の 変 更 インを 読 み 理 解 した にチェックし ガ イ ド ラ イ ン に 従 う を ク リ ッ ク す る ( 図 3) この 利 用 条 件 は 後 から 読 み 返 すことができるように 保 存 しよう 利 用 条 件 の 中 の 文 字 をク リックし [Ctr]キーを 押 しながら[A]キーを 押 すと 中 の 文 字 列 が 全 て 選 択 される この 状 態 で 右 クリックして コピー を 選 択 すればコピーができる 後 は Word などに 貼 り 付 けて 保 存 すればいつでも 読 み 返 すことが 可 能 である 一 般 に Web ページとして 公 開 するには サーバに FTP でファイルをアップロードする などというやや 煩 雑 な 手 続 きをする 必 要 があるが 全 学 計 算 機 システムの 場 合 は Web サー バの 利 用 申 請 をしさえすれば Z: ドライブ 直 下 にある www フォルダにファイルを 置 くだ けで 簡 単 に Web にファイルを 公 開 できる www フォルダに 置 いたファイルは http://www.u.tsukuba.ac.jp/~s16xxxxx/ 以 下 に 公 開 される 例 えば www フォルダ 直 下 に first.htm というファイルを 置 いた 場 合 http://www.u.tsukuba.ac.jp/~s16xxxxx/first.htm にアクセスすればブラウザから 閲 覧 で きるはずである www フォルダの 下 に jk16 というフォルダを 作 成 し その 中 に second.htm というファイルを 作 成 した 場 合 は http://www.u.tsukuba.ac.jp/~s16xxxxx/jk16/second.htm からアクセス 可 能 である これらの s16xxxxx 部 分 はユーザ ID と 同 じ s+ 学 籍 番 号 下 7 桁 である s の 前 の ~ はチルダと 呼 ばれる 半 角 記 号 であり 一 般 にはキーボードの 右 上 [BackSpace]キーと [0]キーの 間 あたりにある 3 章 で 作 成 した 画 像 ファイルのうち 1 つ(ここでは 仮 に abc.png とする)を www フォル ダにコピーして ブラウザの URL 欄 に http://www.u.tsukuba.ac.jp/~s16xxxxx/abc.png と 打 ち 込 みアクセスしてみよ ブラウザ 上 で 自 分 自 身 が 作 成 した 画 像 が 見 られるはずである 全 世 界 に 向 けて 公 開 しているということを 念 頭 に 置 きながら www フォルダには 誰 に 見 ら れても 良 いファイルのみを 置 くこと( 一 般 にそのファイルへのハイパーリンクが 無 ければ URL を 知 ることなしにはそのファイルにアクセスすることは 難 しいが 全 学 計 算 機 システ 7

ムにおける www フォルダ 以 下 のファイルは 全 学 計 算 機 システムのアカウントを 持 ってい 図 3. Web サーバの 利 用 申 請 画 面 れば 誰 でも 閲 覧 が 可 能 である 詳 細 は 紙 面 の 都 合 上 省 略 する) 閲 覧 制 限 をかける 手 法 6も 存 在 するが 本 授 業 では 扱 わない 7 ここではシンプルかつ 確 実 な 自 衛 手 段 として 触 られ ては 困 るファイルは 一 切 置 かないという 方 法 を 採 るとよい 注 意 事 項 として Web ページは 日 本 だけでなく 世 界 に 公 開 するため URL を 構 成 する 文 字 列 ( 特 にファイル 名 とフォルダ 名 )は 半 角 文 字 を 使 うことを 推 奨 する 春 日.bmp のように 全 角 文 字 を 使 うこともできるが 推 奨 はしない 少 なくとも 情 報 基 礎 実 習 では Web に 公 開 するファイル 名 フォルダ 名 は 全 て 半 角 文 字 とせよ なお 一 般 にファイルを Web に 公 開 するにはパーミッションという 読 みこみ 書 き 込 み 実 行 をどこまで 許 可 するのかという 設 定 が 非 常 に 大 切 になる 情 報 基 礎 実 習 で 扱 う 範 囲 ではこのパーミッションを 意 識 せずとも Web 公 開 ができるはずだが もし 図 4 のよう な 表 示 が 出 たら TA/TF を 呼 べ また パーミッション 設 定 が 変 わってしまう 恐 れがあるた め www フォルダは 削 除 しないこと 演 習 6 全 学 計 算 機 システムにおいて Web コンテンツの 公 開 申 請 をせよ また 利 用 規 約 をいつ 6 htaccess を 使 ったアクセス 制 限 など 詳 しくは 手 引 き p.250-252 を 参 照 せよ 7 各 自 で 試 してもよいが 設 定 を 誤 ると 第 8 回 レポートの 採 点 が 不 可 能 となるため 細 心 の 注 意 を 払 うこと 8

でも 読 み 返 せるように Word ファイル あるいはテキストファイルとして 保 存 せよ 図 4. パーミッションエラーの 画 面 6. 簡 単 な HTML 文 書 を 作 る 6.1 HTML とは( 手 引 き p.211~220) HTML とは Hyper Text Markup Language の 略 であり 文 字 列 に 印 をつける(マークア ップする)ことで 文 書 構 造 などを 表 現 するマークアップ 言 語 の 一 種 である HTML では タグと 呼 ばれる 文 字 列 で 対 象 としたい 文 字 列 を 囲 むことでマークアップを 行 う タグには 開 始 タグと 終 了 タグがあり 開 始 タグは<タグ 名 > 終 了 タ グ は </タグ 名 >の 形 で 表 記 される 基 本 的 には 開 始 タグと 終 了 タグで 文 字 列 を 挟 むことでマークアップする タグで 挟 まれた 部 分 のことを 内 容 タグとその 内 容 をまとめて 要 素 と 呼 ぶ 同 じ 内 容 でも 囲 むタグ が 違 えば それが 意 味 するものも 異 なる 例 えば <p></p>で 囲 まれた 文 字 列 は 段 落 を <h1></h1>で 囲 まれた 文 字 列 は 見 出 しを 表 す HTML を 使 えば 文 書 画 像 他 のファイルへのリンクなどを 組 み 込 んだ Web ページ が 簡 単 に 作 成 できる 今 回 の 演 習 では 単 純 な HTML ファイルを 作 成 し Web で 公 開 する より 発 展 的 なものについては 第 8 回 で 取 り 上 げる 演 習 7 メモ 帳 を 使 い 次 のような 内 容 の 文 書 ファイルを 作 成 せよ このとき <htm> などは 全 て 半 角 文 字 で 入 力 せよ メモ 帳 は[スタート]メニューから[すべてのプログラム] [Accessories] [メモ 帳 ]と 順 に 選 択 することで 起 動 できる 作 成 が 終 わったら ファイル 名 を 半 角 英 数 字 で first.htm ファイルの 種 類 (T)は すべてのファイル(*.*) 文 字 コ ー ド (E)は ANSI として www フォルダに 保 存 せよ( 図 5) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/htm4/strict.dtd"> <htm ang="ja"> <head> <tite>はじめての HTML</tite> </head> 9

<body> 情 報 基 礎 実 習 は 楽 だ <hr> どんどん 発 展 的 なことがやりたい </body> </htm> 演 習 8 演 習 7 で 作 成 した htm ファイルに 対 してどのようなアイコンが 表 示 されるか 確 認 せよ 演 習 7 が 終 わったら ブラウザの URL を 入 力 する 欄 に http://www.u.tsukuba.ac.jp/~s16xxxxx/first.htm と 入 力 せよ すると この first.htm というファイルの 内 容 がブラウザを 通 して 表 示 されるはずである 何 らかのコンテンツを Web で 公 開 する 場 合 各 法 律 や 慣 例 セキュリティ 上 の 問 題 など 考 えることは 数 多 くあ る それらは 追 々 学 んでもらうとして ひとまず 現 時 点 では 最 低 限 次 の 4 点 を 遵 守 せよ 氏 名 住 所 電 話 番 号 プロフィールなどの 個 人 情 報 を 不 用 意 に 公 開 しない 著 作 権 が 有 効 な 他 者 の 画 像 や 文 書 を 引 用 などの 要 件 を 守 らず 使 わない 無 責 任 な 発 言 や 中 傷 を 慎 む スマートフォン 等 位 置 情 報 を 記 録 する 機 器 で 撮 影 した 画 像 の 扱 いに 注 意 する Ø 撮 影 場 所 の 位 置 情 報 がプロパティに 記 録 されている 場 合 がある 7. 様 々な HTML マークアップ 要 素 の 例 詳 細 は 次 回 の 第 8 回 授 業 で 扱 うが ここではその 導 入 としてもう 少 し 詳 しい HTML の 説 明 を 行 う Internet Exporer のようなブラウザは 制 御 語 (HTML マークアップ 要 素 )が 入 ったフ ァイルを 読 み 込 むと それを HTML とみなして 整 形 表 示 してくれる HTML マークア ップ 要 素 は 大 文 字 小 文 字 を 区 別 しないが 全 角 文 字 はタグとして 認 識 しないため 必 ず 半 角 英 数 字 で 入 力 せよ メモ 帳 を 用 いて 表 1 に 示 したマークアップ 要 素 をいくつか 追 加 して はファイルに 保 存 し Internet Exporer でファイルを 表 示 するという 操 作 を 繰 り 返 し マ ークアップ 要 素 の 働 きを 確 かめよ HTML ファイルは 毎 回 www フォルダに 入 れ Web を 経 由 して 見 ずとも ブラウザにドラッグ&ドロップすればローカルで(Web を 介 さず) 整 形 した 結 果 を 見 ることができる ただし ローカルでは 表 示 できているからと 言 って それが Web を 介 したときでも 全 く 同 じ 表 示 がされるとは 限 らないことに 留 意 せよ 演 習 9 表 1 に 示 した HTML マークアップ 要 素 を 入 力 すると ブラウザにおいてどのような 表 示 になるかを 確 認 せよ また ここに 示 した 要 素 以 外 の 要 素 についても 調 べ 同 様 にいくつか 試 せ 10

図 5. メモ 帳 から htm ファイルを 作 成 保 存 するときの 設 定 タグの 表 記 <htm> </htm> <head> </head> <tite> </tite> <body> </body> <b> </b> <i> </i> <hr> <tt> </tt> <strong> </strong> <br> <p> <h1> </h1> <h2> </h2> <o> </o> <u> </u> <i> <pre> </pre> 表 1. HTML マークアップ 要 素 の 一 例 表 す 意 味 HTML 文 書 であることを 宣 言 する 文 書 の 前 文 を 表 す 文 書 タ イ ト ル な ど の メ タ 情 報 などを 書 く 文 書 タイトル(ブラウザのウィンドウに 表 示 される)を 表 す 文 書 の 本 文 を 表 す 太 字 体 にする 斜 体 にする 罫 線 を 引 く タイプライタスタイルにする 強 調 スタイルにする 改 行 する 段 落 を 作 る レベル 1 ヘディングにする レベル 2 ヘディングにする 番 号 付 き 箇 条 書 きを 作 る 番 号 なし 箇 条 書 きを 作 る <o> <u> 内 で 使 用 する 各 項 目 を 表 す 整 形 済 みテキストにする(そのまま 表 示 さ せる) 11

8. 用 語 解 説 URL(Uniform Resource Locator) インターネット 上 に 存 在 する 情 報 資 源 ( 文 書 や 画 像 など)の 場 所 を 示 すルール イン ターネットにおける 情 報 の 住 所 のようなもの URL http://www.kis.tsukuba.ac.jp/c/index.php スキーム ドメイン フォルダ ファイル スキーム 示 されたリソースを 取 得 するための 手 段 実 際 には HTML や FTP などの コンピ ュータ 同 士 が 通 信 を 行 う 上 で 相 互 に 決 められた 約 束 事 を 示 すプロトコル 名 が 用 いられ ることが 多 い 例 えば 人 間 同 士 が 意 思 疎 通 を 行 なう 場 合 には どの 言 語 を 使 うか( 日 本 語 か 英 語 か) どんな 媒 体 を 使 って 伝 達 するか( 電 話 か 手 紙 か) といった 取 り 決 めが 暗 黙 のうちに 成 されているが コンピュータ 通 信 においては 事 前 にプロトコルとして 詳 細 に 定 義 しておき それを 使 う 必 要 がある プロトコルとしては http ftp smtp pop などがある ドメイン インターネット 上 に 存 在 するコンピュータやネットワークにつけられる 識 別 子 ま た 上 記 の 例 において 右 端 の jp をトップレベルドメイン 右 から 2 番 目 の ac をセカ ンドレベルドメインという Web ページ WWW を 使 ってインターネット 上 で 公 開 されている 文 書 Web ブラウザに 一 度 に 表 示 されるデータのまとまりで テキストデータや HTML によるレイアウト 情 報 文 書 中 に 埋 め 込 まれた 画 像 や 音 声 動 画 などから 構 成 される 例 えば 知 識 情 報 図 書 館 学 類 の 概 要 が 記 された http://kis.tsukuba.ac.jp/index.php も Web ページの 一 種 であ る Web サイト ひとまとまりに 公 開 されている Web ページ 群 例 えば http://kis.tsukuba.ac.jp/ 以 下 に 公 開 されている Web ページを 総 じて 知 識 情 報 図 書 館 学 類 の Web サイトと いうことができる トップページ Web サイトの 入 り 口 となる Web ページのこと 例 えば http://kis.tsukuba.ac.jp/index.php は 知 識 情 報 図 書 館 学 類 のトップページである スタートページ ブラウザを 起 動 した 時 最 初 に 表 示 される Web ページのこと ホームページ 元 々はスタートページと 同 義 の 語 だったが 現 在 では 使 用 者 によって 上 記 の Web ページ Web サイト トップページ スタートページのどの 意 味 でも 使 われうる 実 に 曖 昧 な 用 語 である 12

出 席 課 題 内 容 を 情 報 基 礎 実 習 第 7 回 出 席 課 題 とした tite 要 素 を 含 む ファイル 名 を first.htm とした HTML ファイルを http://www.u.tsukuba.ac.jp/~s16xxxxx/first.htm のような URL から 閲 覧 できるよう Web に 公 開 せよ さらに その Web ページを Internet Exporer で 閲 覧 印 刷 して TA/TF に 提 出 せよ その 際 手 書 きで 用 紙 の 左 上 に 学 籍 番 号 と 氏 名 を 記 入 すること この 課 題 で 作 成 したファイルは 全 世 界 に 公 開 されるため ファイル 中 には 氏 名 を 入 力 してはならない なお 16xxxxx の 部 分 は 各 自 の 学 籍 番 号 下 7 桁 である) 問 題 が 無 い 場 合 のみ 受 理 する 応 用 課 題 提 出 は 内 容 3 種 類 の 画 像 (PICT0003.bmp scan.bmp デスクトップ 画 面 のハードコピー)それ ぞれについて Microsoft Paint を 使 って 4 種 類 の 画 像 形 式 (BMP, JPG, PNG, GIF)に 変 換 したのち それら 4 種 類 の 画 像 3 組 それぞれについて 画 像 の 見 栄 えやファイルサ イズ 等 を 比 較 し 画 像 ファイル 形 式 についての 実 験 レポート( 目 的 手 法 結 果 考 察 参 照 文 献 などからなる)を 作 成 せよ 8 特 に 次 の 8 点 に 注 意 せよ: (1) 最 低 限 12 枚 全 ての 画 像 があるか (2) 目 的 に 対 して 手 法 は 適 切 か (3) 手 法 は 第 三 者 によって 同 様 の 実 験 が 行 うことができ 同 様 の 結 果 を 出 せるほど 詳 細 に 書 かれているか (4) ファイルサイズなどの 比 較 にあたっては 具 体 的 な 数 値 が 示 してあるか (5) 結 果 と 考 察 が 明 確 に 区 別 されているか (6) どのような 場 合 にどの 画 像 形 式 を 使 えばよいかなどの 考 察 があるか (7) 考 察 は 結 果 から 客 観 的 に 導 けるか (8) 考 察 が 単 なる 感 想 ではないか 書 式 Form.docx を 適 宜 書 き 換 えて 使 用 し 1 ページ/ 枚 で A4 片 面 いつもと 同 じ 備 考 Ø これまでのテキストや 演 習 中 返 却 したレポート 内 などで 指 示 指 摘 された 細 かい レポート 書 式 (ページ 番 号 の 付 与 や 使 用 フォントなど)は 全 て 遵 守 せよ 既 に 周 知 した 書 式 を 満 足 していなかった 場 合 は 減 点 の 対 象 となる Ø 課 題 名 はふさわしいものを 各 自 で 考 案 し 記 述 せよ 8 Word 文 書 に 画 像 を 挿 入 する 方 法 は 手 引 き p.179-180 を 参 照 せよ なお 画 像 の 左 右 位 置 は 画 像 を 選 択 してから [ホーム]タブの 段 落 から 文 字 列 と 同 様 に 操 作 できる なお Word 内 において 挿 入 した 画 像 を 拡 大 縮 小 すると 見 栄 えが 劣 化 する 場 合 があることに 留 意 せよ 13