DVIOUT-Joho

Transcription

1 情 報 リテラシーの 基 礎 (II) 2011 年 版 生 田 敦 司 柴 田 みゆき 高 橋 真 山 城 稔 暢 共 著

2 JavaScript は, 米 国 SunMicrosystems, Inc. の 米 国 およびその 他 の 国 における 商 標 また は 登 録 商 標 です. Microsoft, Microsoft Internet Explorer, Windows 2000, Windows XP, Windows Vista, Windows 7 は, 米 国 Microsoft Corporation の 米 国 およびその 他 の 国 における 商 標 また は 登 録 商 標 です. NetscapeNavigator は,NetscapeCommunications の 米 国 およびその 他 の 国 における 商 標 または 登 録 商 標 です. Mozilla,Firefox は,MozillaFoundation の 米 国 およびその 他 の 国 における 商 標 または 登 録 商 標 です. Opera は,OperaSoftwareASA 社 の 商 標 または 登 録 商 標 です. Apple,Macintosh,Safari は, 米 国 AppleComputer,Inc. の 商 標 または 登 録 商 標 です. Photoshop は,AdobeSystems 社 の 米 国 およびその 他 の 国 における 商 標 または 登 録 商 標 です. 本 書 に 登 場 する 会 社 名, 製 品 名 などは, 一 般 に, 関 係 各 社 / 団 体 の 登 録 商 標,または 商 標 です.なお, 本 文 中 に TM, R マークなどは 特 に 明 記 しておりません. 本 書 の 中 では 通 称,またはその 他 の 名 称 で 表 記 していることがありますので,ご 了 承 くだ さい.

3 はしがき 本 書 は,Web ページを 作 成 する 上 で 必 須 のPC の 知 識 と,そのための 主 要 なアプリ ケーションの 操 作 を 学 ぶことを 想 定 して 作 成 されました. また,ネットワーク 上 で,Web ページを 設 置 する 場 所 と,Web ページを 作 成 したPC との 間 で,データのやりとりをするときに 必 須 となるOS の 知 識 として,UNIX 系 OS の 解 説 もしています.UNIX という 名 称 には 商 標 権 上 の 争 いがありますが, 本 書 では UNIX 系 のOS の 種 類 を 問 わず 必 要 となる 知 識 のみの 解 説 にとどめました.そのため, あえてUNIX という 用 語 に 統 一 させました. このような 内 容 に 対 するテキストはすでに 多 数 存 在 しますが, 初 学 者 が 利 用 するには 情 報 科 学 分 野 やプログラミング 分 野 の 知 識 が 多 すぎたり, 各 アプリケーションの 説 明 を 丁 寧 にするあまり 分 量 が 多 すぎたりするようです. そこで 著 者 らは, 次 の4つの 条 件 を 満 たすテキストとして 利 用 できることを 目 指 しま した. (1) 持 ち 運 びに 簡 便 な 大 きさ. (2) 追 加 情 報 などを 記 録 して 長 く 活 用 可 能 なワークブック 的 ハンドブック 的 機 能 を もつ. (3) 学 習 内 容 の 理 解 を 自 覚 できる 演 習 が 適 切 に 用 意 されていること. はじめてWeb ページの 作 成 や 画 像 処 理 の 勉 強 をはじめようとする 人,また,すでに 高 等 学 校 などで 学 習 した 人 にも, 知 識 の 整 理 や 復 習 に 利 用 していただけると 思 います 年 8 月 著 者 一 同 iii

4 はしがき 本 書 の 使 い 方 本 書 は 大 学 での 情 報 リテラシーの 基 礎 的 理 解 の 講 義 ( 授 業 )に 対 応 するテキスト としてまとめました. 本 文 中 に*を 付 した 単 語 は 各 章 末 に 用 語 集 としてまとめて あります. 常 に 手 もとにおいて 基 礎 的 な 知 識 方 法 の 確 認 をしましょう. 本 文 の 行 間 は 少 し 広 めにとってあります. 必 要 なまたは 重 要 な 知 識 と 思 ったところには,アンダーラインなどを 引 いて みやすくしましょう. 本 文 ページには, 右 端 に 広 くスペースを 空 けて,メモスペースを 設 けました. 本 書 の 内 容 に 関 する 追 加 の 知 識 や 情 報 をメモスペースに 書 き 込 みましょう. 図 1: 本 書 の 特 徴 自 分 専 用 の 基 礎 知 識 データベースとなることを 期 待 します. iv

5 目 次 はしがき iii 目 次 v 第 I 部 Web ページの 作 成 1 第 1 章 HTML 文 書 の 基 礎 はじめに Web の 基 本 Web とHTML ブラウザの 機 能 サーバ Web ページの 構 造 URI HTML の 基 礎 文 法 HTML の 法 則 要 素 と 属 性 HTML の 文 法 要 素 の 種 類 (ブロック 要 素 とインライン 要 素 ) HTML の 構 成 HTML で 使 える 色 HTML の 作 成 (1) HTML の 作 成 と 保 存 の 方 法 基 本 的 なWeb ページを 作 る 見 出 しをつける 段 落 を 作 る v

6 目 次 特 定 の 文 字 の 意 味 をマークアップする 箇 条 書 き(リスト) を 作 る 段 落 ごと 文 章 を 引 用 する 整 形 済 みの 文 章 を 表 示 する 表 を 作 成 する(テーブル 構 造 ) HTML の 作 成 (2) パスの 利 用 による 情 報 配 置 パスを 理 解 する 画 像 の 表 示 リンクを 張 る 作 成 したHTML ファイルをチェックする 第 2 章 CSS によるWeb ページの 装 飾 CSS のあらまし CSS の 名 前 の 由 来 と 歴 史 CSS の 利 点 CSS の 注 意 点 スタイルシートの 構 文 基 本 の 構 文 (1):スタイルの 宣 言 基 本 の 構 文 (2):セレクタ タグにstyle 属 性 で 指 定 する(インラインスタイルシート) スタイルシートの 記 述 場 所 内 部 スタイルシート 外 部 スタイルシート セレクタの 種 類 要 素 型 セレクタ クラスセレクタ ID セレクタ クラスセレクタとID セレクタの 違 い セレクタのグループ 化 複 数 要 素 に 対 する 同 一 のスタイル 宣 言 vi

7 目 次 つの 要 素 に 対 する 複 数 のスタイル 宣 言 プロパティの 種 類 とその 値 相 対 単 位 と 絶 対 単 位 の 違 い 相 対 単 位 の 種 類 絶 対 単 位 によるサイズ 指 定 CSS で 使 える 色 オブジェクトの 配 置 div によるボックス 構 造 の 基 礎 ボックスモデル(ボックス 構 造 ) 内 容 領 域 と 枠 線 の 間 に 空 白 領 域 をつくる 枠 線 を 設 定 する div を 使 ったページレイアウト CSS ファイルを 独 立 させる ボックスの 枠 設 定 を 行 う ボックスに 細 かなレイアウト 設 定 を 行 う CSS でテーブルの 枠 線 を 引 く 第 3 章 HTML HTML の 文 法 の 変 遷 コンテンツモデル メタデータコンテンツ フローコンテンツ セクショニングコンテンツ 見 出 しコンテンツ フレージングコンテンツ 埋 め 込 みコンテンツ インタラクティブコンテンツ HTML5 で 推 奨 されるレイアウト 表 のレイアウト 汎 用 ブロック 化 要 素 (div) を 使 う セクショニングコンテンツを 用 いたレイアウトの 作 成 vii

8 目 次 汎 用 的 な 範 囲 の 設 定 HTML5 の 拡 張 性 第 4 章 JavaScript による 動 的 なWeb ページ JavaScript の 特 徴 と 本 章 の 注 意 プログラムとは JavaScript とは Web ブラウザとバージョン 問 題 この 章 全 体 にわたる 注 意 事 項 JavaScript の 書 き 方 の 基 礎 オブジェクトの 概 念 宣 言 JavaScript に 共 通 する 書 法 その 他, 特 に 考 慮 すべき 点 変 数 の 基 礎 変 数 とは ディスプレイに 出 力 する if 文 の 基 礎 if 文 とは 入 力 を 促 すボックスを 表 示 させる 乱 数 でサイコロを 振 る システム 日 付 の 基 礎 システム 日 付 とは システム 日 付 を 取 得 する 配 列 の 基 礎 配 列 とは 配 列 の 指 定 の 基 礎 繰 り 返 しの 基 礎 for 文 の 基 礎 form 要 素 を 用 いた 応 用 form とJavaScript の 組 み 合 わせ viii

9 目 次 form 及 び 使 用 するオブジェクト 等 イベントハンドラの 基 礎 イベントハンドラとは リアルタイム 処 理 関 連 の 指 定 ラジオボタンの 基 礎 ラジオボタンの 指 定 の 基 礎 オブジェクト document に 対 するプロパティの 整 理 主 な 演 算 子 一 覧 第 5 章 Web ページ 作 成 の 法 的 留 意 点 Web ページ 作 成 と 法 的 問 題 違 法 行 為 と 不 法 行 為 の 違 い インターネットに 関 する 各 国 間 の 法 的 協 調 日 本 における 法 整 備 の 動 き 問 題 を 抱 える 年 齢 層 の 拡 大 文 字 データに 対 する 配 慮 公 表 済 みのデータ 未 公 表 のデータ 静 止 画 動 画 データに 対 する 配 慮 防 犯 上 の 配 慮 肖 像 権 の 問 題 出 所 不 明 の 画 像 の 取 扱 い その 他 の 画 像 に 対 する 取 扱 い 無 断 リンクの 問 題 原 則 として 侵 害 ではない 理 由 原 則 からはずれると 判 断 される 場 合 Web コンテンツと 表 現 の 自 由 表 現 の 自 由 が 認 められない 例 表 現 の 自 由 が 認 められなかった 場 合 のその 後 青 少 年 に 対 する 配 慮 青 少 年 への 配 慮 の 根 拠 ix

10 目 次 青 少 年 に 対 する 具 体 的 配 慮 公 開 後 のコンテンツ 消 去 Web ページ 公 開 後 のトラブル 第 II 部 Web ページの 運 用 と 管 理 95 第 6 章 UNIX の 基 本 操 作 はじめに OS のタイプ GUI CUI 操 作 感 のちがい Web サーバOS への 遠 隔 ログイン telnet TeraTermPro による 通 信 UNIX の 基 本 操 作 コマンド 入 力 と 実 行 ファイルの 操 作 コマンドのマニュアル オプション ディレクトリの 操 作 ツリー 構 造 とカレントディレクトリ 第 7 章 サーバでのWeb ページの 運 用 はじめに サーバへのアップロード FFFTP のセッティング 接 続 転 送 転 送 結 果 の 確 認 サーバ 上 でのページの 運 用 サーバ 上 で 動 くプログラム CGI スクリプトの 設 置 ~アクセスカウンタ x

11 目 次 7.4 保 護 モード FFFTP での 設 定 UNIX のパーミッション UNIX での 保 護 状 態 の 変 更 定 番 のパーミッション サーバ 上 スクリプトのまとめ Web ページへのアクセス 認 証 ディレクトリに 対 するアクセス 認 証 htaccess の 作 成 htpasswd の 作 成 ファイルの 設 置 まとめ 第 III 部 画 像 処 理 131 第 8 章 画 像 データの 基 礎 はじめに 画 像 のデジタル 処 理 デジタル 画 像 の 表 現 デジタル 画 像 の 色 の 表 現 デジタル 画 像 とファイルの 大 きさ デジタル 画 像 による 線 の 表 現 レイヤによる 画 像 の 作 成 動 画 動 画 の 基 本 デジタル 動 画 の 圧 縮 技 術 第 9 章 画 像 処 理 ソフトの 利 用 画 像 処 理 とアプリケーション Photoshop の 起 動 とツール 線 を 描 く ブラシで 線 を 書 く xi

12 目 次 ベクタモードで 線 を 描 く 曲 線 を 描 く オブジェクトを 呼 び 出 し,レイヤの 順 番 を 変 える テキストの 作 成 テキストを 作 成 する 文 字 を 歪 める パスに 合 わせて 文 字 を 配 列 する レイヤの 効 果 を 使 って 文 字 を 修 飾 する マスクレイヤを 使 ったテキストの 作 成 画 像 の 大 きさを 調 整 する 画 像 をトリミングする 画 像 のキャンバスサイズを 調 整 する 画 像 の 解 像 度 を 調 整 する 画 像 の 色 を 調 整 する 画 像 の 明 るさとコントラストを 調 整 する 画 像 の 色 を 調 整 する ヒストグラムを 使 った 調 整 フィルタ 処 理 フィルタ 処 理 とは 画 像 をぼかす 画 像 を 鮮 明 にする 画 像 のエッジを 検 出 する 特 殊 効 果 を 使 った 画 像 処 理 画 像 を 合 成 する 必 要 な 画 像 を 取 り 出 す レイヤの 利 用 合 成 画 像 の 調 整 フォトデザイン Web 用 動 画 の 作 成 Photoshop でgif 動 画 を 作 成 する 基 本 画 像 の 作 成 xii

13 目 次 レイヤからフレームの 作 成 アニメーションを 調 整 する アニメーションを 動 かしてみる アニメーションを 保 存 する より 高 度 な 画 像 の 作 成 技 術 付 録 A 補 足 情 報 179 A.1 画 像 動 画 ファイルの 種 類 A.1.1 ラスタ 形 式 の 画 像 ファイル A.1.2 ベクタ 形 式 の 画 像 ファイル A.1.3 ラスタ ベクタのどちらでも 利 用 できる 画 像 ファイル A.1.4 代 表 的 な 動 画 ファイル 付 録 B 参 考 文 献 183 B.1 書 籍 B.2 Web サイト 索 引 185 xiii

14

15 第 I 部 Webページの 作 成

16

17 第 1 章 HTML 文 書 の 基 礎 1.1 はじめに 現 代 社 会 では,インターネットのWeb ページに 掲 載 されている 内 容 が 重 要 な 情 報 源 となっている.こうした 情 報 を 利 用 するだけではなく, 実 際 に 発 信 源 としてWeb ペー ジの 内 容 (Web コンテンツ) を 作 成 する 事 は, 個 人 的 な 趣 味 の 発 信 だけではなく, 社 会 人 として 重 宝 されるスキルとなる.そのため,Web のコンテンツがどのように 作 成 さ れているか,いかにして 作 成 するかを 理 解 する 事 が 重 要 となる. この 章 では,Web コンテンツの 作 成 の 基 本 となる,HTML とは 何 か,どのように 作 成 するかを 学 ぶ. 1.2 Web の 基 本 Web とHTML インターネットのページは,HTML によって 記 述 される.HTML とは,HyperText MarkupLanguage の 略 である. 日 本 語 に 直 すならば, 単 なるテキスト 以 上 の 役 割 をさ せるために,その 内 容 を 示 す 印 をつけながら 記 す 言 語 という 意 味 になる.このときの 印 のことをタグという(1.3.1 参 照 ). インターネットの 接 続 方 法 はある 程 度 共 通 しているが, 文 字 情 報 を 表 現 する 環 境 は, パソコンに 入 っているアプリケーションによって 異 なる. 例 えば,テキストとして 文 字 情 報 を 表 示 する 場 合,MacOS とWindows でその 処 理 の 仕 方 がある 程 度 異 なる.また, ワープロソフトの 一 太 郎 で 作 成 したファイルを, MicrosoftWord で 見 ようとし ても, 見 ることができない. このように, 文 字 情 報 を 再 現 する 環 境 は, 各 自 のパソコンによって 異 なるのである. そこで,HTML の 出 番 である.これは, 環 境 が 異 なっても,ある 程 度 同 じフォーマッ トで 文 字 情 報 を 再 現 するための 共 通 言 語 である.このHTML を 利 用 する 事 で,ブラウ 3

18 第 1 章 HTML 文 書 の 基 礎 ザと 呼 ばれる 翻 訳 機 を 通 して,いかなる 環 境 でも 同 じように 文 字 情 報 や 画 像 情 報 を 表 現 する 事 ができるのである ブラウザの 機 能 HTML は,その 文 法 で 書 かれた 指 示 をPC がわかる 言 語 に 翻 訳 させる 機 能 (レンダリ ング 機 能 ) を 持 つ,ブラウザというアプリケーションにより, 文 字 情 報 やスタイルを 表 現 する. 代 表 的 なブラウザとしては,InternetExplorer,Firefox,Safari,Opera などが ある. 基 本 的 な 役 割 は 同 じであるが,HTML のレンダリング 機 能 が 異 なるのである. 例 えば, 示 す という 日 本 語 を 英 語 に 訳 してみよう. 示 す という 言 葉 を 英 語 に 翻 訳 するならば,Show,Suggest,Demonstrate,Illustrate など 様 々な 訳 語 が 当 てられる. これと 同 様 に,ブラウザによって, 同 じHTML をどのように 表 すかに 違 いが 生 じる. そのため, 多 くの 人 に 見 てもらうには,どのブラウザで 見 ても, 同 じように 見 えるかど うかの 確 認 が 必 要 である サーバ HTML で 表 現 した 情 報 を 自 分 のパソコンから 発 しようと 思 えば, 常 に, 自 分 のパソ コンを 起 動 した 状 態 にして,さらに, 常 にインターネットに 接 続 した 状 態 にて, 世 界 中 の 人 が 自 分 のパソコンにアクセスできるようにしなければならない.もしも,そのよう なことをするならば, 電 気 代 や 通 信 費 が 膨 大 になる.また, 自 分 のIT 技 術 力 を 誇 りた いだけの 愉 快 犯 などにより, 自 分 のデータを 勝 手 に 改 ざんされたり, 秘 密 のファイルを 世 界 中 にばら 撒 かれてしまったりする 危 険 性 が 伴 う. そのため, 作 ったファイルは,インターネットの 中 継 点 であるサーバに 置 くことにな る. 実 際 にWeb ページを 見 るということは, 作 成 者 がサーバにファイルをアップロード ユーザーがサーバにアクセス ファイルをダウンロード という 流 れで 行 われているのである. サーバに 使 われているコンピュータはWindows やMacOS ではなく,UNIX といわ れるOS が 使 われていることが 多 い.そのため,Web ページの 管 理 を 行 うには,UNIX の 基 礎 知 識 が 必 要 になる( 第 6 章 参 照 ). 4

19 1.2. Web の 基 本 図 1.1: ブラウザに 示 されるページとHTML や 画 像 の 関 係 の 概 念 図 Web ページの 構 造 HTML にはテキストという 言 葉 が 使 われているように, 文 字 情 報 でデータを 示 すも のである.しかし,ブラウザで 実 際 に 見 ると, 写 真 や 絵 といった 画 像 情 報 も 表 示 され ている.そのため,HTML のファイル 内 に 画 像 ファイルが 入 っているように 思 うかも 知 れない. 実 際 には,HTML ファイルからは 別 の 画 像 ファイルの 位 置 情 報 であるURI (1.2.5 参 照 ) だけが 記 載 されているにすぎない.ブラウザがURI に 基 づいて 画 像 ファイ ルをダウンロードし,その 画 像 ファイルをタグで 指 示 された 位 置 に 画 像 を 表 示 している ( 図 1.1).この,HTML ファイル 内 から 別 ファイルを 指 定 することを リンクを 張 る という. HTML では,URI やコンピュータ 内 のパスによってファイルの 場 所 を 特 定 し,リン クを 張 る.パスの 仕 組 みを 理 解 しておかなければ,Web ページを 作 成 した 時 と,ブラ ウザ 上 で 見 る 場 合 で 大 きく 異 なってしまう URI HTML でリンクを 張 るためには,まず,URI が 何 であるかを 知 る 必 要 がある. URI(UniformResourceIdentifier) とは, 必 要 なHTML のファイルが 存 在 している サーバと,その 内 部 のディレクトリの 場 所 を 指 定 するものである.URI は, 通 常 http/: のように 表 示 される.これは, 図 1.2 に 示 したよう に, 最 初 の http: がどのプロトコルによって 解 釈 するかを 表 す. 次 の www から 5

20 第 1 章 HTML 文 書 の 基 礎 図 1.2: URI 表 示 の 意 味 次 の / までがサーバの 場 所 を 表 しているのである. 先 の 例 でいえば, ac の 部 分 がサーバを 管 理 している 機 関 の 種 類 を 表 す. 会 社 であ れば co, 教 育 機 関 であれば ac などとなる. 次 の jp で 示 される 部 分 はサーバ が 設 置 されている 国 を 表 す. 例 えば, jp は 日 本 (Japan) にサーバが 設 置 されているこ とを 示 すのである. 国 以 降 の 文 字 列 は,サーバ 内 のパスを 表 す. サーバ 内 は, 図 1.3 のような 階 層 構 造 を 持 ったディレクトリで 構 成 されている.これ を ツリー 構 造 と 呼 んでいる.URI のパスは,この 階 層 を 上 の 階 層 から 順 に, 指 定 し たファイルに 到 達 するまでの 道 筋 を 示 している.ディレクトリの 構 造 の 詳 細 な 説 明 は, UNIX の 章 ( 第 6 章 ) で 記 述 してあるので,そちらを 参 照 していただきたい. 図 1.3: ツリー 構 造 一 般 的 には,URI ではなく,URL という 言 葉 が 使 われることが 多 いが,URI はURL 6

21 1.3. HTML の 基 礎 文 法 よりも 包 括 的 な 概 念 であり, 正 式 な 名 称 としてはURI の 方 が 適 切 である. 1.3 HTML の 基 礎 文 法 HTML の 法 則 HTML ファイルは,どこからどこまでが 文 書 情 報 なのかをブラウザに 理 解 させなけ ればならない.その 印 としてタグ < > を 用 い,そのタグの 中 に, 処 理 のための 言 語 を 記 入 する.すなわち, 処 理 の 初 めにタグを < >,また, 終 わりの 位 置 に </ > という 形 で 指 示 する.HTML はわずかな 例 外 を 除 いて, <タグ 名 > 文 章 </タグ 名 > という 形 にならなければならない. タグを 上 手 く 利 用 するには,サンドイッチのように, <タグ 名 > 文 章 </タグ 名 > で 挟 み 込 むことをまず 頭 に 叩 き 込 んでおこう. (1) タグの 種 類 実 際 に 使 うタグは 多 種 多 様 であるが,このタグを 大 まかに 分 けると 以 下 の3つにな る. <Tag> 文 章 </Tag>: 最 も 基 本 的 なタグの 記 述 形 式. <Tag Option="パラメータ"> 文 章 </Tag>: 記 述 の 設 定 内 容 を 指 示 するタグ.Option の 部 分 は 英 語 で,パラメータ( 数 値 やリンク 先 ) は 数 値 や 英 語 で 示 す. 例 えば,HTML の 文 書 の 言 語 が 日 本 語 で 記 述 される 場 合 は,<html lang="ja">というように 記 述 され る. <Tag>: 内 容 を 持 たないため 終 了 タグが 必 要 ないタグ. 折 り 返 し 位 置 を 示 す<br> な どがこれにあたる. (2) タグの 構 造 タグは, 開 始 タグと 終 了 タグが 存 在 する 事 で 処 理 される. 言 い 換 えれば, 終 了 タグが 出 現 するまで, 開 始 タグの 処 理 が 実 行 され 続 けるのである.こうした 構 造 を 理 解 すれ ば,いくらでもタグを 入 れ 子 構 造 で 作 ることができるのである(1.4.3 参 照 ). 入 れ 子 構 造 でタグを 作 成 すれば,より 豊 富 なWeb コンテンツを 作 成 する 事 ができる. ただし, 入 れ 子 構 造 が 複 雑 になればなるほど,どの 指 令 がどこまで 続 いているかを 理 解 する 事 が 難 しくなる.そのため, 他 の 人 に 理 解 させるだけでなく, 自 分 で 整 理 するとき のために, 一 定 の 法 則 を 入 れておいたほうが 良 い. 7

22 第 1 章 HTML 文 書 の 基 礎 図 1.4: タグと 要 素 例 えば,テキストでHTML を 編 集 するときに, 同 じ 種 類 のタグを 同 じだけ 字 下 げする (タグのレベルを 変 える) ことで, 解 読 しやすいHTML を 作 成 することができる(1.4.3 参 照 ).これは,HTML だけでなく, 他 のプログラミングでも 同 様 である 要 素 と 属 性 要 素 とタグは, 違 うものをさす.タグとは,HTML でマークアップを 行 うことを 示 すのに 対 し, 要 素 とは,HTML で 意 味 付 け(マークアップ) する 処 理 対 象 となる 文 字 列 を,どこからどこまで( 開 始 と 終 了 ),どのように 処 理 するか( 要 素 型 ),という 情 報 を ひとかたまりにしたものである( 図 1.4).つまり,HTML における 情 報 の 単 位 である. 属 性 とは,その 要 素 の 性 質 や 役 割 などの 詳 細 な 情 報 を 示 す. 先 述 したタグのoption やパラメータの 内 容 がそれにあたる. 特 定 の 要 素 に 対 して 指 定 できる 属 性 は 決 まってい るが,すべての 要 素 に 対 して 共 通 して 利 用 できるものもある.こうした 属 性 をグローバ ル 属 性 ともいう HTML の 文 法 ブラウザは 指 定 された 要 素 や 属 性 に 従 ってレンダリングを 行 い,ブラウザ 上 の 表 示 を 変 化 させる.ブラウザに 搭 載 されているレンダリング 機 能 によって, 要 素 や 属 性 の 振 る 舞 いが 異 なるため,ユーザーがどのような 環 境 であっても 同 じように 閲 覧 するた めには,ブラウザに 依 存 しない 要 素 や 属 性 を 使 う 必 要 がある.そのため,W3C(World WideWebConsortium) という 非 営 利 団 体 が,HTML の 要 素 や 属 性 をどのように 扱 う べきかを 決 めている.その 規 格 が,HTML の 文 法 となる. 8

23 1.3. HTML の 基 礎 文 法 表 1.1: よく 使 われるブロック 要 素 一 覧 要 素 名 働 き 要 素 名 働 き p 段 落 table 表 (テーブル) div 汎 用 ブロック 化 form 入 力 フォーム blockquote 引 用 dl 説 明 つき 定 義 リスト h1~h6 見 出 し ul 通 常 リスト 2011 年 現 在 でW3C が 正 式 な 規 格 としているバージョンは,HTML4.01 である.た だし, 新 しいバージョンであるHTML5 が,2014 年 に 向 けて 策 定 を 行 っている 最 中 で ある. HTML4.01 にせよ,HTML5 にせよ,どちらもHTML は 文 書 上 の 意 味 を 示 すために 用 いるものであり,レイアウトに 関 する 記 述 はCSS に 行 うことには 変 わりはない.そ こで, 本 書 において,HTML5 とHTML4.01 との 対 応 が 取 れている 文 法 上 の 意 味 合 い に 焦 点 を 置 き, 両 者 においてある 程 度 対 応 の 取 れている 内 容 について 記 載 する. なお,HTML5 で 大 きく 変 化 した 点 などは, 第 3 章 を 参 照 してほしい 要 素 の 種 類 (ブロック 要 素 とインライン 要 素 ) ブラウザで 見 ているHTML 文 書 のメインの 情 報 は,HTML のbody 要 素 というエリ アで 記 述 される( 次 節 参 照 ). HTML4.01 まででは,body 要 素 内 に 記 述 できる 内 容 を,インライン 要 素 と,ブロッ ク 要 素 に 大 別 していた.インライン 要 素 とは, 文 章 の 一 部 や, 画 像 のようなものを 表 示 する 場 合 に 使 われる 要 素 である. 一 方,ブロック 要 素 とは,インライン 要 素 やテキスト の 入 れ 物 になる 要 素 である.すなわち,インライン 要 素 はブロック 要 素 の 中 に 組 み 込 む ことができるが,その 逆 はできない. ブロック 要 素 そのものがどのようなふるまいをするかは,あらかじめ 規 定 されてい る.たとえば,p 要 素 は,タグ<p>と</p>の 間 に 囲 まれた 文 字 列 に 対 し, 段 落 というブ ロックを 新 たにつくる. ブロック 要 素 に 対 し,さらに 細 やかな 指 示 を 与 えることができる.この 場 合,そのブ ロック 中 の 文 字 列 全 体 にその 指 示 が 適 用 される. 代 表 的 なブロック 要 素 を 表 1.1 に 示 す. 一 方,インライン 要 素 は,ブロック 要 素 の 中 にある 文 字 列 に 対 し, 個 別 に 細 やかな 指 示 を 与 える. 表 1.2 は 代 表 的 なインライン 要 素 を 示 す. 9

24 第 1 章 HTML 文 書 の 基 礎 表 1.2: よく 使 われるインライン 要 素 一 覧 要 素 名 働 き 要 素 名 働 き a リンク img 画 像 表 示 b 太 字 q 引 用 br 改 行 span 汎 用 インライン 要 素 em 強 調 var 変 数, 引 数 図 1.5: HTML の 基 本 構 造 HTML の 構 成 HTML は, 図 1.5 のような 形 で 記 述 される. 最 初 に, 文 章 宣 言 を 行 い, 次 に,head 要 素 にページの 作 成 に 関 する 情 報 を 記 述 する. 最 後 に,body 要 素 に 実 際 にブラウザ 上 で 表 示 される 情 報 を 記 述 する. (1) 文 章 宣 言 正 しい 文 法 規 則 に 従 っていれば, 英 語 から 日 本 語, 日 本 語 から 英 語 の 翻 訳 が 正 確 にで きる.Web ページも 同 様 に, 文 法 規 則 が 明 確 であれば,ユーザーの 環 境 に 依 存 せず, 同 じ 条 件 でWeb ページを 示 すことができるようになる. Web ページの 場 合, 表 示 するための 文 法 は,HTML だけでも,いくつかのバージョ 10

25 1.3. HTML の 基 礎 文 法 図 1.6: 文 章 宣 言 の 意 味 ンが 存 在 しており, 加 えて,XHTML やXML などの 文 法 規 則 も 存 在 する.どの 規 格 に 従 うかによって,どの 要 素 や 属 性 が 使 えるかが 異 なってくる.そのため,どの 文 法 規 則 の,どのような 定 義 で 記 述 されているかを 明 確 にするために 文 書 宣 言 が 必 要 となる. HTML では, 文 書 の 先 頭 に<!DOCTYPE... という 宣 言 を 記 述 しなければならない. HTML4.01 では 同 じ 宣 言 が 以 下 のようになる. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//en"> HTML4.01 において, 文 書 宣 言 は, 図 1.6 のような 意 味 を 持 つ. 文 書 タイプ: その 文 書 タイプ 名 が HTML であることを 示 している. 公 開 : PUBLIC は,このDTD が 公 開 されたものであること( 続 いて 記 述 されるのが 公 開 識 別 子 であること) を 示 す.DTD が 特 定 のマシン 上 にある 場 合 は SYSTEM が 使 われる. フォーマル 公 開 識 別 子 :SGML で 定 められた フォーマル 公 開 識 別 子 (FPI) という 書 き 方 に 従 って, 公 開 文 書 (ここでは DTD ) を 特 定 するための 情 報 を 記 述 する. 所 有 者 識 別 子 (OwnerID): 公 開 文 書 の 所 有 者 を 示 す.ISO( 国 際 標 準 化 機 構 ) 出 版 物 は その 出 版 物 番 号 を 用 いる.JIS などの 国 家 規 格,あるいは 工 業 規 格,もしくはISO 9070 に 従 って 割 り 当 てた 所 有 者 ( 登 録 所 有 者 ) の 場 合 は 先 頭 に +// を,それ 以 外 の 未 登 録 所 有 者 は 先 頭 に -// を 加 える.W3C はこのHTML を 策 定 した WorldWideWebConsortium を 示 す. 公 開 文 種 別 (Public Text Class): 公 開 されている 文 書 の 種 別 を 表 す.DTD を 公 開 していることになるので, 必 ず 大 文 字 でなければならない. 11

26 第 1 章 HTML 文 書 の 基 礎 公 開 文 記 述 (Public Text Description): 公 開 文 書 がどんなものであるかを 記 述 す る.この 場 合 はHTML のバージョン4.01 のために 公 開 している 文 書 ということ になる. 公 開 文 がバージョンに 対 してどの 程 度 従 っているかによって,3 つの 記 述 の 方 法 がある. バージョン 情 報 の 後 に 何 も 書 かない(strict):すべてHTML4.01 で 記 述 して いることになるので,バージョンにない 情 報 は 表 示 されなくなる. Transitional:CSS やXHTML などの 方 式 も 混 ざっていることになるので, ブラウザが 柔 軟 な 解 釈 を 行 ってくれる. 特 別 な 目 的 がなければ,この 形 式 に 従 う 方 が 無 難 である. Frameset:フレーム 式 でWeb ページを 作 成 する 場 合 は,この 記 述 が 必 要 と なる. 公 開 文 言 語 (Public Text Language): 文 書 が 記 述 されている 言 語 のコードを 示 す. EN は 英 語.もし 日 本 語 で 定 義 されたDTD なら JA となる. 大 文 字 で 書 く. なお,これはHTML 本 文 を 記 述 する 言 語 とは 関 係 ない. この 宣 言 に 従 い,ブラウザは 文 書 がどのような 形 式 の 定 義 (DTD) に 基 づいて 構 成 さ れているかを 読 み 込 み, 表 示 する. HTML5 の 場 合 は, 文 書 宣 言 を 以 下 のように 記 述 する. <!DOCTYPE html> HTML5 では, 定 義 はHTML として 決 まっているため, 簡 略 である. (2)html 要 素 html 要 素 とは,これから 始 まる 文 章 がHTML で 書 かれていることを 示 す 要 素 である. <html>すべての 文 書 </html> と 記 述 する.すなわち, 作 成 したHTML ファイルは, 上 の 記 述 となるように,<html> から 始 め,</html>で 終 わらせなければならない. html 要 素 に 対 しては, <html lang="ja"> のように,グローバル 属 性 である lang 属 性 を 記 述 することで, 文 書 が 日 本 語 で 書 かれていることを 示 す 方 がよいであろう. (3)head 要 素 head 要 素 とは,Web ページ 全 体 に 関 わる 情 報 を 記 入 していることを 示 す 構 成 要 素 で ある. 次 のように 記 述 する. 12

27 1.3. HTML の 基 礎 文 法 <head> 文 書 の 基 本 情 報 </head> head 要 素 には, 文 書 のタイトルや,メタ 情 報 ( 全 体 的 な 情 報 ) を 記 述 する.タイトル は,ページのタイトルとして 表 示 されるが,メタ 情 報 は, 実 際 のページには 反 映 され ない. メタ 情 報 には, 作 成 したページの 言 語 情 報 ( 文 字 コードの 情 報 ) や, 作 成 者 に 関 する 情 報 などを 載 せる.ページの 作 成 に 関 する 情 報 としては, 使 用 した 文 字 のコード,スク リプトのタイプ,ページの 位 置 づけなどを 記 入 する. 作 成 者 に 関 する 情 報 としては, 作 成 者, 著 作 権 利 者, 連 絡 先 のメールアドレスなどを 記 述 する. 文 字 コード: 文 書 がどの 文 字 コードで 記 述 されているかを 記 述 する. 文 字 のエンコー ディングに 関 わる 情 報 は 先 頭 から512 バイト 以 内 であるため,head 要 素 の 最 初 に 入 れておく 方 が 良 い.HTML5 の 場 合 は, 次 のように 記 述 される. <meta charset="utf-8"> HTML4.01 では, 次 のように 記 述 する. <meta http-equiv="content-type" content=" text/html" charset="utf-8"> タイトル:HTML の 文 法 上 必 要 であるので, 必 ず 入 れる. 記 述 の 方 法 は, 次 のように なる. <title>ページのタイトル</title> ここで 記 述 された 情 報 は,ウィンドウ 上 部 やタブなどに 記 載 される. スタイルの 指 定 : スタイルシートを 使 ってWeb ページを 作 成 する 場 合 は,head 要 素 内 で 宣 言 をしておく.スタイルシートを 使 う 場 合 の 記 述 の 例 は, 次 のようになる. <style type="text/css">スタイルシートの 記 述 </style> 他 のページとの 関 連 : いくつかのWeb ページを 組 み 合 わせて,1 つのサイトを 作 る 場 合, 他 のページとの 関 連 を 示 しておくと 便 利 である.そのときの 宣 言 は, 次 のよ うに 記 述 する. <link rel="リンクの 形 式 " href=" 関 連 するリンク 先 のURI" title=" 関 連 するリンク 先 のタイトル"> 同 じスタイルシートなどを 利 用 する 場 合 は, 次 のように 記 述 する. 13

28 第 1 章 HTML 文 書 の 基 礎 <link rel="リンクの 形 式 " type=" 関 連 するリンク 先 のファイルタイプ" href=" 関 連 するファイルの 場 所 "> スクリプト:JavaScript など,ページ 内 全 体 において, 同 じスクリプトを 用 いる 場 合 にhead 要 素 内 に 記 述 する. <script type="text/javascript">スクリプトの 記 述 </script> (3)body 要 素 body 要 素 には, 実 際 にブラウザ 上 に 表 示 されるデータを 記 述 する. <body>ページとして 示 す 内 容 </body> 本 文 の 文 章 や, 表 示 する 画 像,リンクなどは,このbody 要 素 の 部 分 に 記 述 するので ある HTML で 使 える 色 HTML のみでWeb ページを 作 成 するときは, 一 般 的 に 使 用 されている 色 のみを 使 う ほうが 良 いであろう. White,Yellow,Fuchsia,Red,Silver,Gray,Olive,Purple,Maroon,Aqua,Lime, Teal,Green,Blue,Navy,Black の16 色 は,セーフカラーと 呼 ばれ,ほぼどの 環 境 でも 同 じ 色 で 表 現 されている. なお,Web ページの 文 字 や 背 景 などの 色 はHTML ではなく,CSS で 設 定 する( 第 2 章 参 照 ). 1.4 HTML の 作 成 (1) HTML の 作 成 と 保 存 の 方 法 Web ページは,テキストエディタで 作 成 する 事 ができる.また,テキストエディタ を 使 えば, 既 存 のページも 比 較 的 容 易 に 修 正, 変 更 する 事 ができる.テキストエディタ には,Windows 付 属 の メモ 帳 やフリーのソフト サクラエディタ などがある. メモ 帳 でも 事 足 りるが,サクラエディタなどのフリーのソフトは,HTML の 文 書 と して 成 立 しているかどうかをある 程 度 反 映 してくれるので,そうしたエディット 機 能 の あるものを 使 うと 便 利 である. 14

29 1.4. HTML の 作 成 (1) テキストエディタで 作 成 したファイルは,そのまま 保 存 すると.txt という 拡 張 子 のつくテキストファイルになってしまう.そこで, 保 存 するときに,.htm もしくは.html という 拡 張 子 をつけて 保 存 しなければならない. サクラエディタを 使 用 した 場 合 は, 以 下 のような 手 順 をとる. 1. スタート すべてのプログラム サクラエディタ サクラエディタ でサクラエディタを 起 動 する. 2. HTML の 文 章 を 作 成 する. 3. ファイル 名 前 をつけて 保 存 を 選 択. このとき, 作 成 したページの 文 字 コードに 対 応 した 文 字 コードを 選 択 しておかなければ, 文 字 化 けしてしまう. 4. ファイルの 名 前 をつけた 後 に.html をつける. 5. 保 存 する 基 本 的 なWeb ページを 作 る 演 習 1-1 ページのタイトルが 練 習, 本 文 が こんなWeb ページを 作 ってみる となっているWeb ページを,HTML を 使 って 作 成 しなさい. 方 法 1. テキストエディタを 起 動 し,<!DOCYPE html>と 入 力 する. 2. <html lang="ja"></html>と 記 入 する. 3. 最 初 の<html lang="ja">の 後 で 改 行 し,<head></head>と 入 力 する. 4. <head>の 後 で 改 行 し,<meta charset="utf-8">と 入 力 する. 5. <title></title>を 入 力 する. 6. <title>の 後 で 改 行 し, 練 習 と 入 力 する. 7. </title>の 後 で 改 行 し,</head>の 後 に<body></body>と 入 力 する. 8. <body>と</body>の 間 に, こんなWeb ページを 作 ってみる と 入 力 する. 9. 名 前 をつけてファイルを 保 存 するときに, 文 字 コードセットを UTF-8 に 設 定 して, 拡 張 子 を.html に 変 更 して 保 存 する. 先 述 したように,HTML を 作 成 するには,<html>,<head>,<body>が 必 要 である. head 要 素 の 中 で 記 述 したタイトルは, 図 1.7 の 下 のように,Web ページのタイトルと してタブ 部 分 やウィンドウ 上 部 に 示 される. 15

30 第 1 章 HTML 文 書 の 基 礎 図 1.7: サクラエディタで 作 成 したHTML( 上 ) と 表 示 されるWeb ページ( 下 ) 見 出 しをつける ワープロソフトでは, 文 字 の 大 きさを 変 えることができる. 見 やすい 文 章 を 作 る 場 合 は, 見 出 しのレベルによって 文 字 の 大 きさを 変 えると, 内 容 が 見 やすくなる.Web ペー ジでも 同 じである.HTML のタグには, 見 出 しのレベルに 対 応 した 要 素 を 用 いる. 見 出 しの 要 素 は,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>の6 種 類 である.<h1>が 最 も 上 位 の 見 出 しで,<h6>が 最 下 位 の 見 出 しである. h1~h6 の 要 素 はHTML4.01 ではブロック 要 素 として 扱 われていた 要 素 であるた め,そこで 囲 まれた 部 分 が1つのブロックとして 構 成 される.こうしたブラウザ 上 で の 動 作 はHTML5 の 対 応 でも 同 じである.h 要 素 は, 通 常 の 文 章 を 書 く 場 合 と 同 じよう に,アウトラインに 沿 って 記 述 する 必 要 がある. 演 習 1-2 <h1>から,<h4>までの 要 素 を 使 い, 図 1.8 の 様 な 形 になるように, Web ページを 作 成 しなさい. 模 範 ソース <!DOCTYPE html> <html lang="ja"> 16

31 1.4. HTML の 作 成 (1) 図 1.8: 要 素 h1~h4 までを 使 ったアウトライン 構 成 <head> <meta charset="utf-8"> <title> 練 習 </title> </head> <body> <h1> 第 1 章 HTML の 基 礎 </h1> <h2> 第 1 章 第 1 節 HTML の 基 本 構 成 </h2> <h3> 第 1 章 第 1 節 第 1 項 文 書 宣 言 </h3> <h3> 第 1 章 第 1 節 第 2 項 基 本 要 素 </h3> <h4> 第 1 章 第 1 節 第 1 項 (1)HTML 要 素 </h4> </body> </html> 段 落 を 作 る 見 出 しが 作 成 できれば, 実 際 の 本 文 を 入 力 することになる.HTML でも 通 常 の 文 章 と 同 様 に, 段 落 ごとに 文 章 を 記 述 する.テキストファイルやワープロソフトの 場 合,Enter を 押 すことで 改 行 される. 残 念 ながら,HTML では,ワープロソフトの 改 行 をそのま ま 反 映 してくれない. HTML で 段 落 を 作 るには,p 要 素 (パラグラフ 要 素 ) を 用 いる.p 要 素 の 記 述 は 以 下 のようになる. 17

32 第 1 章 HTML 文 書 の 基 礎 <p> 段 落 となる 文 章 </p> p 要 素 はh 要 素 と 同 様 に, 要 素 内 を1つのブロックとして 扱 う.ゆえに,p 要 素 で 閉 じられた 部 分 が 改 行 され, 通 常 の 文 章 と 同 様 に,1 つの 段 落 を 形 作 る. 段 落 は1 行 だけであっても 成 立 するため, 短 い 文 章 であってもp 要 素 を 用 いなけれ ばならない.ただし, 例 えば, 後 述 する 引 用 の 場 合 のように, 文 章 の 意 味 付 けがp 要 素 よりも 適 切 なものがあるならばそちらを 用 いる. 演 習 1-3 以 下 の 文 章 と 同 じところで 改 行 されるように,Web ページを 作 成 しなさい. 昨 今, 学 生 による 薬 物 ( 麻 薬 大 麻 覚 せい 剤 シンナーなど) 売 買 や 乱 用 事 件 が 社 会 問 題 となっています. 関 東 はもとより 関 西 圏 の 大 学 においても, 学 生 の 薬 物 使 用 に 関 わる 報 道 があ ったことは,みなさんもご 承 知 のことでしょう. 大 麻 や 覚 せい 剤 などの 薬 物 の 所 持 は, 法 律 で 厳 しく 禁 じられているだけでな く, 使 用 することによりみなさんの 精 神 も 身 体 も 蝕 まれてしまいます. はじめは 興 味 本 位 のつもりでも, 次 第 に 自 分 では 想 像 もしなかった 深 刻 な 事 態 や 大 きな 犯 罪 に 巻 き 込 まれる 要 因 となります. これらの 薬 物 に 関 わる 誘 いには 断 固 とした 態 度 で 臨 み, 例 え 親 しい 友 人 に 誘 われても 強 い 意 思 を 持 って 断 りましょう. <br> の 使 い 方 <br> は 改 行 のタグとして 使 うことができる.ただし,<br> の 働 きとしては, 単 純 な 改 行 のためであり, 段 落 としての 意 味 合 いを 持 たない.そのため,<br> は 文 章 の 折 り 返 し 位 置 を 指 定 する 要 素 として 使 う 方 が 良 いだろう 特 定 の 文 字 の 意 味 をマークアップする インライン 要 素 は 特 定 の 文 字 をブラウザ 上 で 異 なるフォントに 変 える 機 能 があること から, 文 字 飾 りとして 扱 われることも 多 かった.しかし,それぞれの 要 素 ごとに 文 章 上 の 意 味 が 異 なるため,その 意 味 にあった 箇 所 に 対 してマークアップを 行 わなければなら ない.HTML5 では,これらをフレージングコンテンツとして 扱 うものが 多 い( 第 3 章 参 照 ). (1) 語 の 文 書 上 の 扱 いを 示 す 18

33 1.4. HTML の 作 成 (1) ワープロソフトでは, 文 字 をボールド 体 ( 太 字 ),イタリック 体 ( 斜 体 ), 下 線 などを 設 定 してその 単 語 を 強 調 することがある.ただし,これは 単 に 読 者 の 目 を 向 けさせやす くする 工 夫 に 過 ぎず, 文 書 上 で 意 味 のある 強 調 ではない.ブラウザ 上 ではマークアップ された 箇 所 のフォントが 変 化 するからといって, 単 に 目 立 たせるために 用 いるのではな く,それぞれの 意 味 に 対 応 した 要 素 をつけなければならない. 表 1.3: 代 表 的 な 語 の 文 書 上 の 意 味 を 表 す 要 素 要 素 名 要 素 の 意 味 記 述 例 em 変 更 すると 意 味 が 変 わるような 箇 所 を 示 す <em> 単 語 </em> strong ページの 製 作 者 が 重 要 であることを 示 す <strong> 単 語 </strong> b 製 品 名 やキーワードになる 単 語 の 記 述 <b> 単 語 </b> i 専 門 用 語 や 感 情 など 他 と 異 なる 部 分 を 表 す <i> 単 語 </i> 演 習 1-4 図 1.9 のようななページを 作 成 しなさい. 図 1.9: フレーズの 意 味 付 けをしたWeb ページの 例 (2) 上 付 き 文 字 と 下 付 き 文 字 上 付 き 文 字 や 下 付 き 文 字 は, 数 式 や 化 学 式 だけではなく, 文 章 中 の 注 などにも 用 いら れる.HTML では, 以 下 の 要 素 を 用 いて,その 設 定 を 行 う. 19

34 第 1 章 HTML 文 書 の 基 礎 : 下 つき 文 字 にする : 上 付 き 文 字 にする 演 習 1-5 先 に 加 えた 演 習 のページに, 次 に 示 す 化 学 式, 数 式 を 加 えなさい. H 2 O, 2 x 2 +3y+4=0 (3) 短 い 文 章 を 引 用 する 短 いフレーズを 引 用 する 場 合 にはq 要 素 を 用 いる. 記 述 は 以 下 のようになる. <q>フレーズとなる 単 語 </q> 作 品 のタイトルを 示 す 場 合 は,cite 要 素 を 用 いる. 記 述 は 以 下 のようになる. <cite> 引 用 元 の 情 報 </cite> cite 要 素 は, 人 名 や 引 用 した 文 章 には 使 えない.また,blockquote 要 素 のcite 属 性 とは 異 なることを 留 意 しておこう. 演 習 1-6 以 下 の 文 章 の の 内 容 をq 要 素 で, 内 の 内 容 を cite 要 素 を 用 いてHTML ファイルに 記 述 しなさい. HTML5&CSS3 辞 典 によれば, 引 用 元 の 作 品 タイトルは, cite 要 素 で 表 します としている. (4)HTML で 使 えない 文 字 HTML は 通 常 のワープロと 異 なり, 使 えない 文 字 や, 認 識 されない 文 字 がある. 例 えば, < > は,タグの 宣 言 に 使 うために, 認 識 されない.また, 半 角 スペースを2 回 続 けても,1 つの 情 報 として 扱 われる. 全 角 文 字 の 場 合 はそうした 制 限 が 少 ないが, 全 角 のスペースは 無 視 されるのである.また, 機 種 依 存 文 字 も 表 現 できない 場 合 が 多 い. HTML で 禁 止,もしくは, 無 視 される 文 字 を 使 わなければならない 場 合 や,ウムラ ウトなどの 特 殊 な 文 字 のようなスペシャルキャラクタを 使 う 場 合 は, 特 殊 な 変 換 が 必 要 である. 例 えば, < を 表 現 する 場 合 は, < で 示 すことができる.ただし, <,>,&," の4 種 類 以 外 は,ブラウザのフォント 設 定 が 日 本 語 の 場 合 は, 文 字 化 けする 事 があるの で, 確 認 しておく 必 要 がある. 20

35 1.4. HTML の 作 成 (1) < < > > & & " " 演 習 1-7 Web ページに 以 下 の 文 書 を 表 示 させなさい. "x+y>4" & "y-z<3" 箇 条 書 き(リスト) を 作 る 文 章 を 見 やすくするには, 箇 条 書 きを 用 いると 良 い.HTML でも 箇 条 書 きの 設 定 を 行 える. 箇 条 書 きもブロック 要 素 である. 箇 条 書 きは, 番 号 なしの 場 合 と, 番 号 付 きの 場 合 をつくることができる. 番 号 をつけない 箇 条 書 きはul 要 素 とli 要 素 を 組 み 合 わせて, <ul><li> 箇 条 書 きの1 番 目 </li><li> 箇 条 書 きの2 番 目 </li> </ul> と 記 述 する.この 場 合,<ul></ul> で 囲 まれた 部 分 が 箇 条 書 きにする 範 囲,<li></li> が 箇 条 書 きになる 場 所 を 示 すことになる. 箇 条 書 きのレベルを 変 える 場 合 は, <ul> <li> 箇 条 書 きレベル1</li> <ul> <li> 箇 条 書 きレベル2</li> </ul> </ul> というように, 入 れ 子 状 にすれば 箇 条 書 きのレベルを 変 えることができる. 箇 条 書 きを 番 号 で 行 う 場 合 は,ol 要 素 とli 要 素 と 用 いて, <ol><li> 箇 条 書 きの1 番 目 </li><li> 箇 条 書 きの2 番 目 </li> </ol> と 記 述 する. 番 号 リストの 最 初 の 番 号 を 変 えたい 場 合 は,ol 要 素 のstart 属 性 を 利 用 して, <ol start=" 初 期 値 "><li> 1 番 目 </li><li> 2 番 目 </li> </ol> 21

36 第 1 章 HTML 文 書 の 基 礎 と 記 述 する. 演 習 1-8 以 下 のような 文 章 をHTML で 作 成 しなさい. オフィス 製 品 の 代 表 的 なものは, 以 下 のようなものである. ワード エクセル パワーポイント その 他 アクセス アウトルックエクスプレス 例 えば,ワードを 使 う 場 合 は, 以 下 の 手 順 を 踏 む. 1 全 てのプログラムから, MicrosoftOffice を 選 択 2 Word を 起 動 3 ファイル から 新 規 作 成 を 選 択 4 文 章 を 打 ち 込 む 段 落 ごと 文 章 を 引 用 する 原 文 の 一 段 落 をそのまま 引 用 する 場 合 など, 通 常 の 文 書 では, 長 い 引 用 に 対 してはイ ンデントを 変 更 して 引 用 箇 所 がわかるようにする.HTML の 場 合 でもこうした 方 法 は 同 じである. HTML で 長 い 文 章 を 引 用 する 場 合 は,blockquote 要 素 を 用 いる.blockquote 要 素 も HTML4.01 ではブロック 要 素 として 扱 われていた 要 素 であるため, 囲 まれた 部 分 を 一 塊 のブロックとしてブラウザ 上 に 表 示 される. 記 述 方 法 は 以 下 のようになる. <blockquote cite= 引 用 元 のURI > 引 用 文 </blockquote> 引 用 する 文 章 にURI がある 場 合 は,cite 属 性 を 使 って, 引 用 元 のURI を 記 述 する. 書 籍 の 場 合 はcite 属 性 を 用 いる 必 要 はない. 短 い 文 章 や 引 用 元 の 書 名 を 用 いる 場 合 は, 前 述 したq 要 素 やcite 要 素 を 用 いる. 演 習 1-9 以 下 の で 囲 まれた 部 分 を 引 用 句 として 表 示 しなさい. 22

37 1.4. HTML の 作 成 (1) 以 下 の 文 章 は, 高 橋 (2008) からの 引 用 である. 近 縁 種 でのこのような 比 較 は, 別 の 問 題 を 生 む.すなわち,ある 近 縁 種 同 士 の 比 較 によって 示 唆 された 当 該 の 認 知 能 力 の 選 択 圧 に 関 する 説 明 が, 他 の 種 における 同 じ 認 知 能 力 の 進 化 を 説 明 できるとは 限 らないからである. 例 えば,カラス 科 の 認 知 能 力 の 進 化 の 選 択 圧 を,そのままサル 目 の 認 知 能 力 の 進 化 の 選 択 圧 として 論 じることは 難 しいかもしれない.また, 例 えば,ヒ トに 最 も 近 縁 な 種 はチンパンジーであるが,その 生 態 は 社 会 形 態, 食 性, 生 活 する 場 所 など 複 数 の 面 でヒトと 異 なっている.このように, 近 縁 種 であっ ても 異 なる 選 択 圧 が1つだけであるとは 限 らないことが, 当 該 の 認 知 能 力 に 影 響 する 選 択 圧 の 解 明 を 困 難 にしているもう1つの 問 題 である 整 形 済 みの 文 章 を 表 示 する プログラムのソースや 定 型 句,メール 文 章,アスキーアートなど, 原 文 をそのままの 状 態 で 記 述 したい 場 合,HTML では, 全 角 スペースや 水 平 タブが 認 識 されない.この ような 場 合,pre 要 素 を 用 いると,pre 要 素 で 囲 まれた 部 分 を1つの 整 形 済 みの 文 章 と してブラウザに 認 識 させることができる.pre 要 素 は 以 下 のように 記 述 する. <pre> 文 字 列 </pre> pre 要 素 を 用 いることで, 文 書 内 の 改 行 やスペースがそのままブラウザ 上 で 反 映 され る.ただし, 水 平 タブの 位 置 やHTML で 使 えない 文 字 などは,そのまま 反 映 されない ので 注 意 が 必 要 である. pre 要 素 は,あくまですでに 整 形 済 みの 文 書 情 報 を 示 すだけであって, 文 書 のレイア ウトのために 用 いるものではない. コンピュータのソースコードを 示 す 場 合 は,コンピュータが 認 識 できる 文 字 列 の 一 部 を 表 すcode 要 素, 変 数 を 表 すvar 要 素,プログラムの 出 力 を 表 すsamp 要 素,ユー ザーの 入 力 を 表 すkbd 要 素 などがあるが,これらはpre 要 素 と 併 用 して 用 いるのが 適 切 である. 演 習 1-10 以 下 の 文 章 をテキストエディタで 作 成 し,HTML に 張 り 付 け, pre 要 素 を 適 用 する 場 合 と,しない 場 合 の 表 示 の 違 いを 確 認 しなさい. 23

38 第 1 章 HTML 文 書 の 基 礎 <html> <head> <title> ヘッダタグの 使 い 方 </title> </head> <body> "x+y>4"&"y-z<3" </body> </html> 表 を 作 成 する(テーブル 構 造 ) (1) 表 を 挿 入 する ワードやパワーポイントでは 表 を 挿 入 することできるが,HTML でも 表 を 作 成 する ことができる. 表 を 作 成 するためのタグは, 以 下 のものである. <table> 表 </table>:テーブルを 作 成 することを 指 定 する <caption> 表 のタイトル</caption>: 表 のタイトルを 示 す <td> 文 字 列 </td>:セルを 定 義 する <tr><td> 文 字 列 </td><td> 文 字 列 </td></tr>: 行 を 定 義 する <th> 列 のタイトル</th>: 行 列 のタイトルを 示 す これらのタグは,<table> </table>のタグの 中 に,<tr> </tr>が,さらにその 中 に,<td> </td>が 入 るということになる. 例 えば, 表 1.4 のようなテーブルを 作 成 しようとするならば, 以 下 のように 記 述 する. 表 1.4: 表 の 見 本 値 段 表 番 号 料 理 名 値 段 1 餃 子 焼 豚 肉 まん

39 1.4. HTML の 作 成 (1) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> 表 1.4</title> </head> <body> <table> <caption> 値 段 表 </caption> <tr><th> 番 号 </th><th> 料 理 名 </th><th> 値 段 </th></tr> <tr><td>1</td><td> 餃 子 </td><td> 200</td></tr> <tr><td>2</td><td> 焼 豚 </td><td> 380</td></tr> <tr><td>3</td><td> 肉 まん</td><td> 180</td></tr> </table> </body> </html> 演 習 1-11 自 分 の 履 修 している 授 業 の 時 間 割 の 表 をWeb ページに 作 成 しなさい. (2) セルの 結 合 セルの 結 合 は 以 下 の 属 性 を 用 いて 行 う. <td colspan="セル 数 ">セルの 中 身 </td>: 横 方 向 にセルを 結 合 する. 例 えば,4 4 のマトリックスのセルを 結 合 したい 場 合 は, <td colspan="4">セルの 中 身 </td> となる. <td rowspan="セル 数 ">セルの 中 身 </td>: 縦 方 向 にセルを 結 合 する. 例 えば,4 4 のマトリックスのセルを 結 合 したい 場 合 は, <td rowspan="4">セルの 中 身 </td>と なる. HTML でセルを 結 合 するということは, 結 合 したセルの 数 の 大 きさのセルができる ことになる.すなわち, 結 合 する 先 のtd 要 素 やth 要 素 が 自 動 的 に 無 くなるわけではな い. 作 成 者 本 人 が 結 合 した 先 のセルを 消 去 するという 作 業 が 必 要 であるため, 結 合 した 先 がどこにあたるかを 確 認 しながら,セルの 数 の 帳 尻 を 合 わせなければならない. 25

40 第 1 章 HTML 文 書 の 基 礎 1.5 HTML の 作 成 (2) パスの 利 用 による 情 報 配 置 先 述 したようにHTML はテキスト 情 報 である. 実 際 のWeb ページに 出 てくる 情 報 は,HTML 内 に 記 述 された 画 像 やWeb ページ,CSS やJavaScript のソースといった 別 資 源 のURI やコンピュータ 内 のパスをブラウザが 読 み 込 み,1 つのWeb ページとし て 表 示 してくれるのである パスを 理 解 する HTML ファイル 以 外 の 情 報 をブラウザに 読 み 込 ませるには,HTML から 当 該 の 資 源 までのパス( 道 筋 ) を 指 定 しなければならない.ファイルのパスの 記 述 には2つの 方 法 がある. 1 つは, 絶 対 パスと 呼 ばれるパスを 記 述 する 方 法 である. 絶 対 パスは,ルートディレ クトリ( 一 番 上 のフォルダ) から 順 番 にファイルまでの 道 筋 を 描 きだす 場 合 である. 例 え ば, 図 1.3 のように,ファイルが Sub3 のディレクトリにある 場 合 は, /Folder1/ Sub3/Sample.jpg と 記 述 する 必 要 がある. もう1つの 記 述 法 は, 相 対 パスを 用 いる. 相 対 パスとは, 図 1.10 のように, 現 在 閲 覧 されているファイルのあるフォルダから 開 始 した 場 合 のパスである. 図 1.10 の 左 の ように,リンク 先 が 同 じディレクトリ 内,もしくは, 同 じディレクトリ 内 の 子 ディレク トリにある 場 合 は,. を 使 って 表 す. 図 1.10 の 右 のように,リンク 先 が, 別 のディレ クトリにある 場 合 は,.. を 使 ってあらわす. 例 えば, 図 1.3 のように,HTML で 書 いたファイル Sample1.htm とHTML に 張 り 付 けたい 画 像 Sample.jpg が 同 じディレクトリに 入 っている 場 合 は,./sample.jpg と 記 述 し, 同 じ 画 像 を Sample2.htm の 方 に 張 り 付 けたい 場 合 は,../sub3/sample. jpg と 指 定 する. 相 対 パスと 絶 対 パスの 関 係 は 直 感 的 に 分 かりにくいかもしれないが, 使 い 慣 れると, 余 計 なミスがなくなるので, 身 につけておこう. 演 習 1-12 図 1.11 の 様 なディレクトリで 構 成 されているPC がある. この 時 の 1.html の 絶 対 パス,および, 1.html に 対 する 2.html, figure1.jpg の 相 対 パスを 記 述 しなさい. 26

41 1.5. HTML の 作 成 (2) 図 1.10: 相 対 パスの 記 述 の 違 い 図 1.11: 演 習 1-12 のディレクトリ 構 成 画 像 の 表 示 (1) 画 像 を 表 示 する Web ページで 表 示 できる 画 像 は, jpg 形 式 や, gif 形 式, png 形 式 の 画 像 である. それぞれの 特 性 に 関 しては, 第 III 部 で 扱 う.ここでは,まず 画 像 の 表 示 に 用 いる 要 素 を 示 す. 画 像 の 表 示 には,img 要 素 とsrc 属 性 を 用 いる. 記 述 の 方 法 は 以 下 のとおりである. <img src="ファイルのパス" alt="ファイルを 示 すキーワード"> 27

42 第 1 章 HTML 文 書 の 基 礎 表 示 する 画 像 ファイルとHTML ファイルが 同 じディレクトリ 内 にある 時 は, 当 該 の 画 像 ファイルの 名 前 だけでよいが, 異 なるディレクトリにある 場 合 は,ファイルのパ スを 記 入 しなければならない.パスを 記 入 する 場 合 は,HTML ファイルを 作 成 する 環 境 とサーバーの 環 境 が 異 なるため, 相 対 パスで 記 入 する 方 が 便 利 であろう. 画 像 の 読 み 込 みに 時 間 がかかる 場 合 や,ページの 設 定 によって 画 像 の 表 示 がされな い 場 合 は, 画 像 が 入 る 位 置 が 空 白 になってしまう.また, 複 数 の 画 像 を 用 いる 場 合,ど こに 何 を 置 いたのかを 忘 れてしまうこともあるだろう.そうした 場 合 の 対 処 法 として, alt= 以 下 も 必 ず 入 れるようにしなければならない. 演 習 1-13 画 像 をWeb ページに 示 しなさい. (2) 画 像 の 大 きさを 指 定 する 画 像 をWeb ページに 利 用 する 場 合, 元 の 画 像 のサイズが 大 きいと,ブラウザのウィ ンドウに 収 まりきらない 場 合 がある.その 他 の 画 像, 文 字 の 大 きさに 応 じたページをデ ザインするには,こちらで 画 像 の 大 きさを 指 定 しなければならない. 画 像 の 大 きさを 指 定 するタグは 以 下 のものである. <img src="ファイル 名 " width=" 画 像 の 幅 " height=" 画 像 の 高 さ"> 画 像 の 大 きさは,ピクセル 数 ( 画 素 の 数 で 換 算 した 大 きさ) でも,ウィンドウ 幅 に 対 する 比 率 でも 指 定 できる. 例 えば,100 ピクセル 100 ピクセルの 大 きさで sample.jpg という 画 像 を 表 示 し たい 場 合 は, <img src="sample.jpg" width="100" height="100"> というように 記 述 する.また,ウィンドウ 幅 の20 %の 大 きさで 表 示 したい 場 合 は, <img src="sample.jpg" width="20%" height="20%"> というように, 表 示 する. ページを 見 ている 環 境 がユーザーによって 異 なることを 考 えれば, 比 率 で 指 定 する 方 が 便 利 かもしれないが, 大 きさを 相 対 値 の % で 示 す 場 合 は, 縦 横 も 同 じように 指 定 しなければ, 元 の 画 像 の 縦 横 比 が 変 わってしまうので 注 意 が 必 要 である. 28

43 1.5. HTML の 作 成 (2) 画 像 の 大 きさを 指 定 することで 一 見,そのページの 大 きさにあった 画 像 を 見 せること ができる.しかし,あくまで 縮 小 や 拡 大 して 表 示 しているだけに 過 ぎず, 実 際 のページ の 読 み 込 みには 元 のファイル 容 量 で 画 像 をダウンロードしているため, 大 きな 画 像 は 読 み 込 みに 時 間 がかかってしまう.Web ページに 載 せる 画 像 は,あらかじめそのページ にあったサイズの 画 像 を 用 意 するべきである(デジタル 画 像 の 調 整 は 第 9 章 参 照 ) リンクを 張 る (1) ハイパーテキストを 作 成 する Web ページでは,リンクを 張 ることで, 自 分 のページ 内 や, 他 のページへ 直 接 URI を 入 力 しなくとも 移 動 できる. 自 分 のサイト 内 やメールアドレス, 他 のサイトへのリン クを 張 る 方 法 はWeb ページ 作 成 において, 必 須 の 知 識 である. リンクという 言 葉 でまとめているが,リンクにはハイパーリンクとハイパーテキス トが 含 まれている.ハイパーリンクとは, 文 書 内 に 埋 め 込 まれた, 他 の 文 書 や 画 像 など の 位 置 情 報 のことである. 一 方,ハイパーテキストとは,ハイパーリンクを 用 いて 複 数 の 文 書,および 関 連 する 画 像 などのオブジェクトを 関 連 付 けたシステムのことである. ブラウザ 上 の 文 字 や 画 像 をクリックすることで 別 のページに 移 動 するというのは,ハイ パーテキストを 用 いていることになるのである. すなわち, 厳 密 に 言 うと,HTML でのリンクの 作 成 は,ハイパーテキストを 作 成 す るということを 頭 に 入 れておいたほうが 良 いであろう. (2) 外 部 リンク ハイパーテキストの 作 成 には,a 要 素 を 用 いる.a 要 素 の 記 述 は 以 下 のようになる. <a href="リンク 先 "> 文 字 列,または, 画 像 </a> リンク 先 は,リンクするページのURI となり,タグで 囲 まれる 部 分 が,Web 上 に 表 示 される 情 報 となる. 例 えば, <a href=" 大 学 </a> という 風 に 記 述 すると,Web ページ 上 には, 直 接 URI が 表 示 されず, 大 学 だけが 表 示 される. 大 学 をクリックすると, ahref の 後 ろに 書 かれたURI がブラウザに 記 入 され, リンク 先 へ 移 動 することになる. 演 習 1-14 自 分 が 住 んでいる 市 町 村 のWeb ページへのリンクを 作 成 しなさい. 29

44 第 1 章 HTML 文 書 の 基 礎 (3) ページ 内 にリンクを 張 る 他 のページではなく, 自 らのページをリンクでつなぎ,ハイパーテキストをクリック すると,そこに 移 動 させることもできる. 文 章 が 非 常 に 長 いときなどに 目 次 を 作 ってお き,その 目 次 をクリックすると, 対 処 の 箇 所 に 移 動 するようにしたい 場 合 は,この 方 法 を 用 いる. ページ 内 にリンクを 張 るには,それぞれの 項 目 の 見 出 し(h 要 素 ) やdiv 要 素,span 要 素 (3.3.4) に 対 して,グローバル 属 性 のid 属 性 で 特 定 の 名 称 をつけておく.その 後, 目 次 部 分 にハイパーテキストを 作 成 する.その 際 のハイパーテキストの 記 述 は 以 下 のよ うになる. <a href="# 移 動 先 のid 名 称 "> 文 字 列,または, 画 像 </a> id 名 称 は 任 意 でつけることができる. 文 章 の 見 出 しのキーワードをid の 名 称 にして おけばわかりやすいであろう. (4) メールアドレスにリンクを 張 る Web ページを 作 成 した 者 の 責 任 として, 問 い 合 わせ 等 の 連 絡 先 にメールアドレスを 入 れる 必 要 もある.この 時,メールアドレスにリンクを 張 っておくと, 読 者 がメーラー にアドレスを 入 力 する 手 間 を 省 くことができる. メールが 送 れるようにリンクを 張 るハイパーテキストは, <a href="mailto:メールアドレス"> 文 字 列,または, 画 像 </a> である. メールアドレスをWeb ページに 載 せると,アダルトサイトなどの 広 告 のメールが 配 信 されることがある.これは, 業 者 が 自 動 的 にWeb ページ 内 からメールアドレスを 抜 き 出 して 配 信 するからである.Web ページにアドレスを 載 せる 場 合 は,こうした 迷 惑 メールが 配 信 される 可 能 性 があることを 知 っておく 必 要 がある. 最 も 手 軽 にできる 対 策 は, mailto のタグではなく,メールアドレスを 画 像 化 してWeb ページに 張 っておく ことである.この 場 合, 読 者 がメールを 送 る 時 に, 自 分 でアドレスを 入 力 するという 手 間 をかけてもらうことになる.それ 以 外 の 方 法 としては,アルファベットを 数 値 文 字 参 照 で 表 すということもできる.ただし,それでも 迷 惑 メールが 届 くことの 覚 悟 が 必 要 で ある. 30

45 1.6. 作 成 したHTML ファイルをチェックする 1.6 作 成 したHTML ファイルをチェックする 作 成 したページが 正 しい 文 章 で 記 述 されているか,また,ミスがないかどうかはHTML のチェッカーを 用 いることでミスを 減 らすことができる.チェッカーはブラウザのアド インなどの 機 能 で 利 用 できるため, 公 開 する 前 にチェックをしておくことが 必 要 である. また, 実 際 にWeb のデザインを 行 う 場 合, 他 のページを 参 考 にすると,わかりやす い. 他 の 人 が 作 ったページが,どのようなタグで 構 成 されているかを 調 べるには,Web ページ 上 で, 右 クリック ソースの 表 示 を 選 択 すると,テキスト 文 章 として,ペー ジのソースを 見 ることができる. 言 い 換 えれば,Web ページのソースというのは, 常 に 公 開 されていると 考 える 必 要 がある. 自 分 の 作 ったページの 著 作 権 や 情 報 を 保 持 した い 場 合 には,それなりの 注 意 が 必 要 であることを 留 意 しておこう( 第 5 章 参 照 ). 総 合 演 習 1 第 1 章 の 内 容 を 項 目 ごとに 要 約 した 内 容 のWeb ページを 作 成 し, 1 つのサイトを 構 成 しなさい. 31

46

47 第 2 章 CSSによるWebページの 装 飾 2.1 CSS のあらまし CSS の 名 前 の 由 来 と 歴 史 CSS とは,CascadingStyleSheets の 略 である.Cascade(カスケード) とは 滝 と いう 意 味 である.Style は,Web ページの 見 映 えのことを 指 している. カスケードは, 複 数 のWeb ページからなる 統 一 されたWeb サイトを 構 築 しようとし た 時,あるページを 呼 び 出 す 仕 掛 けがなされているページ( 上 位 ページ) で 指 定 した 文 書 の 見 映 えに 関 する 定 義 を, 呼 び 出 される 側 のページ( 下 位 ページ) に 継 承 させること ができる. 滝 の 水 が 上 から 下 に 流 れ 落 ちるさまを 想 像 すれば, 理 解 しやすいだろう. また,ある 見 映 えに 関 して 競 合 する 定 義 がなされた 場 合 は, 最 も 後 から 定 義 されたも のが 有 効 となる.これも, 流 れ 落 ちる 水 は 常 に 新 しいものであることを 想 像 すれば, 理 解 しやすいだろう 年 に 発 表 されたHTML は,SGML に 似 た 構 文 を 利 用 し,さらに 柔 軟 性 をもち あわせたため,またたく 間 に 世 界 に 広 がった. 一 方 でSGML が 目 指 した 文 書 の 内 容 構 造 と 文 書 の 見 映 えの 構 造 を 厳 密 に 分 離 する 本 来 の 意 図 は 失 われた. これを 再 びHTML 等 上 でゆるやかに 実 現 しようとしたところに,CSS の 意 義 がある. 特 に 現 在 使 用 策 定 中 のHTML5 では 文 書 の 見 映 えをすべてCSS に 委 ねる 方 針 であ り, 今 後 ますますCSS の 重 要 性 は 増 す. CSS の 最 新 版 はLevel3( 以 下,CSS3 と 呼 ぶ) であるが,2011 年 7 月 時 点 においてまだ 仕 様 策 定 中 であるため, 今 後 の 改 変 が 予 想 される.また, 現 時 点 の 仕 様 書 草 案 ( 以 下,ド ラフトと 呼 ぶ) に 未 対 応 のWeb ブラウザもあるため, 現 実 的 にはCSSLevel2Revision1 ( 以 下,CSS2.1 と 呼 ぶ) が 使 われることが 多 い.(2.1.3 参 照 ) なお,W3C が 公 式 に 発 表 している 各 バージョンとその 最 新 版 は, 以 下 のとおりである. CSS 1996 年 12 月 勧 告,2008 年 4 月 11 日 最 新 修 正 版 CSS 年 5 月 勧 告,2011 年 6 月 7 日 最 新 版 CSS3 仕 様 策 定 中,2011 年 3 月 12 日 最 新 草 案 33

48 第 2 章 CSS によるWeb ページの 装 飾 CSS の 利 点 CSS は 大 きく3つの 利 点 をあげることができる. 第 一 にメンテナンスの 容 易 性 があげられる. 文 書 の 内 容 構 造 ( 以 下, ドキュメントと 呼 ぶ) と 文 書 の 見 映 えの 構 造 ( 以 下,スタイルと 呼 ぶ) を 切 り 離 すことで,HTML 本 来 の 目 的 を 達 成 することができる. 第 二 に 柔 軟 性 が 挙 げられる.カスケードによって 複 数 のスタイルを 組 み 合 わせること で,より 細 やかなレイアウト 表 現 が 実 現 できる. 第 三 に,JavaScript などのプログラムからCSS を 呼 び 出 すことができる. これらの 利 点 を 考 えると, 大 量 のWeb ページを 抱 える 企 業 等 のユーザーには,CSS を 利 用 するメリットが 大 きいといえるだろう CSS の 注 意 点 CSS を 利 用 するには,ユーザーが 使 用 するブラウザとそのバージョンを 想 定 し,そ れに 対 応 可 能 なCSS の 適 切 なバージョンを 利 用 しなければならない. 全 てのWeb ブラウザは 同 じようにCSS を 解 釈 するわけではない.どのような 見 栄 え になるかは,Web ブラウザ 側 の 対 応 にかかっている. 機 能 の 面 で 旧 バージョンを 使 う ユーザーもいる. また,CSS の 最 新 バージョンがドラフト 段 階 にあって, 細 かな 機 能 追 加 や 仕 様 変 更 が 頻 繁 に 提 示 されると,Web ブラウザ 側 が 対 応 しきれないことがある. 現 在 最 新 のCSS3 はドラフト 段 階 にあるため,2011 年 8 月 現 在 ではCSS2.1 が 広 く 使 われている. これらの 注 意 は, 以 下 の2 点 に 集 約 できる. どのバージョンのブラウザに 対 応 させるか どのCSS のバージョンで 記 述 するか 2.2 スタイルシートの 構 文 基 本 の 構 文 (1):スタイルの 宣 言 CSS は,HTML 文 書 の 構 造 を,より 理 解 しやすい 形 に 整 理 するための 表 現 方 法 であ る. 視 覚 的 に 理 解 しやすくなるため, 文 書 の 見 映 えも, 結 果 的 に 良 くなる. 34

49 2.2. スタイルシートの 構 文 図 2.1: プロパティと 値 の 関 係 スタイルの 適 用 対 象 を, プロパティ として 指 定 する. 次 に,プロパティに 対 応 する 具 体 的 な 中 身 を, 値 として 指 定 する.プロパティと 値 のセットを, スタイルの 宣 言 と 呼 ぶ.スタイルの 宣 言 のセットが,CSS 記 述 の 基 本 となる.HTML タグの 属 性 に 対 する 値 とは 異 なるので 注 意 が 必 要 である. 実 際 の 記 述 では,まずプロパティを 記 述 し, 次 に 明 確 な 区 切 りとして,コロン : を 表 記 し, 最 後 に 値 を 記 述 する. スタイルの 宣 言 は, 中 括 弧 記 号 {} で 囲 まれる.この, 中 括 弧 記 号 で 囲 まれた 部 分 を 宣 言 ブロック と 呼 ぶ. この 関 係 を 整 理 すると, 図 2.1 のようになる 基 本 の 構 文 (2):セレクタ スタイルの 宣 言 は, 実 際 にHTML のどの 要 素 と 結 びつけるのかを 指 定 することで, 実 際 のWeb ページの 見 映 えが 実 現 する. 実 際 に 結 び 付 けたい 要 素 は, セレクタ とし て 指 定 することが 基 本 となる( 図 2.1).セレクタを 用 いる 指 定 は 内 部 スタイルシートや 外 部 スタイルシートで 用 いる.(2.3.1,2.3.2 参 照 ) 例 2-1 は,プロパティは 色 を 定 義 する color,その 値 として 実 際 の 色 名 red が スタイル 宣 言 されている.このスタイルの 宣 言 に 対 し, h1 という 要 素 で 結 び 付 けら れている.このCSS 文 が 書 かれたHTML 文 書 内 では, body に h1 という 要 素 で 指 定 した 文 字 列 が, 赤 色 で 表 示 されることとなる. 例 2-1 h1{color: red} 35

50 第 2 章 CSS によるWeb ページの 装 飾 図 2.2: スタイルシートの 指 定 場 所 タグにstyle 属 性 で 指 定 する(インラインスタイルシート) Web ページ 全 体 として 共 通 のスタイルを 宣 言 したいが, 同 じ 要 素 に 対 してある 部 分 にのみ, 限 定 して 別 のスタイルを 宣 言 したいことがある.このような 時 に 使 われるの が, インラインスタイルシート(InlineStyleSheet) である. 文 中 で,その 指 定 部 分 のみ 有 効 とするため,インラインと 呼 ばれる. インラインスタイルシートは, 指 定 したい 要 素 に,style 属 性 として 記 述 する.この 場 合 は, 当 然 だが,セレクタを 用 いない. 例 2-2 は, 例 2-1 をこの 方 法 で 記 述 した 場 合 である. 例 2-2 <h1 style= "color : red"> 2.3 スタイルシートの 記 述 場 所 スタイルシートを 書 く 場 所 は,3 種 類 ある.1 つのhtml ファイル 内 に,3 種 類 とも 使 用 することができる. 書 く 場 所 によって, 名 前 がつけられている.また,それぞれに 優 先 順 位 が 存 在 する. 優 先 順 位 の 高 い 順 に,body 要 素 内 に 記 述 する インラインスタイルシート(2.2.3 参 照 ), head 要 素 内 に 記 述 する 内 部 スタイルシート, 別 ファイルとして 作 成 しhead 要 素 内 から 呼 び 出 す 外 部 スタイルシート という( 図 2.2). 三 種 類 のCSS の 使 い 分 けについては, 内 部 スタイルシートを 基 本 とすれば,インラ インスタイルシートは 携 帯 端 末 から 見 るWeb ページを 作 成 する 時 に 利 用 することが 多 36

51 2.3. スタイルシートの 記 述 場 所 い. 一 方, 外 部 スタイルシートはパソコンから 見 ることを 想 定 優 先 するWeb ページ を 作 成 するときに 利 用 することが 多 い. インラインスタイルシートは 既 に2.2.3 で 解 説 した. 本 節 では, 内 部 スタイルシート と 外 部 スタイルシートのみ 解 説 する 内 部 スタイルシート 指 定 したスタイル 宣 言 は, 文 書 全 体 に 適 用 される. Head 要 素 内 に,style 要 素 としてtype 属 性 とともに 記 述 する.Type 属 性 は, text/css とする. 内 部 スタイルシートを 利 用 する 場 合 は,CSS 非 対 応 のWeb ブラウザをユーザーが 利 用 する 場 合 の 回 避 策 をとる 必 要 がある(2.1.3 参 照 ).この 場 合 は, 設 定 内 容 が 文 字 列 と して 出 力 される.これを 防 ぐために,スタイルシート 部 分 の 先 頭 に <!-- を,そし て 最 後 に --> を 利 用 して,コメント 化 しておく 必 要 がある. 例 えば, 例 2-1 に 回 避 策 を 適 用 した 場 合 は 例 2-3 のようになる.(なお,head 要 素 そのものの 記 述 については, 説 明 のため 簡 略 化 している.) 例 2-3 <head> <style type="text/css"> <!-- h1 { color : red } --> </style> </head> なお,CSS 定 義 内 に 純 粋 にコメントを 書 きたい 場 合 は, /* と */ の 間 に,コメ ントを 書 く. 例 えば, 例 2-3 に 純 粋 なコメントを 記 述 した 場 合 は, 例 2-4 のようになる. 例 2-4 <head> <style type="text/css"> <!-- /* ここにコメントを 入 れる 例 */ h1 { color : red } --> </style> </head> 37

52 第 2 章 CSS によるWeb ページの 装 飾 外 部 スタイルシート CSS を 別 ファイルにすることで,ドキュメントとスタイルシートをさらに 分 離 独 立 させることができる.これにより, 文 書 の 構 造 化 がより 理 解 しやすくなり,メンテナン スが 楽 になる. 外 部 スタイルシートとしてファイル 名 をつける 時 は, 拡 張 子 に.css をつける 必 要 がある. 一 方,CSS を 呼 び 出 す 側 のHTML ファイル 側 のhead 要 素 内 には,link 要 素 を3つの 属 性 (rel,type,href) とともに, 以 下 の 記 述 をする 必 要 がある. rel 属 性 は, stylesheet とだけ 指 定 する. type 属 性 は, text/css とだけ 指 定 する. href 属 性 は,CSS を 記 述 したファイルが 存 在 するURI を 指 定 する. これを 実 際 に 記 述 してみると, 例 2-5 のようになる. 例 2-5 (head 要 素 内 で) <link rel ="stylesheet" type ="text/css" href ="CSS の URI"> 2.4 セレクタの 種 類 セレクタを 使 いこなせれば, 本 節 以 降 で 解 説 するグループ 化 やボックス 構 造 も 使 いこ なせるようになる.クラスには3 種 類 あり,それぞれに 使 い 方 が 違 う 要 素 型 セレクタ 前 節 で 説 明 した, 最 も 基 本 的 なセレクタである. 要 素 型 名 をそのままセレクタとして 書 く クラスセレクタ 要 素 に 対 するプロパティの1つがクラスである. 通 常,クラス 属 性 と 呼 ばれる.これ は,それを 指 定 した 要 素 に 対 して,あるひとつのWeb ページ 上 で, 特 定 唯 一 の 名 前 を 与 えるプロパティである. クラスを 使 う 利 点 は,ひとつのWeb ページ 上 で,あるひとつの 要 素 に 対 し, 複 数 の 値 を 指 定 できる 点 にある.もし, 同 じセレクタを 複 数 の 要 素 に 使 うなら, 共 通 のものを 前 もってクラス 属 性 で 名 前 をつけておけば,body 要 素 で 簡 単 に 指 定 することができる. 38

53 2.4. セレクタの 種 類 簡 単 に 指 定 できるということは,メンテナンスが 簡 単 になるということでもある. セレクタは 通 常, 要 素 に 対 して 使 われる.しかし,クラス 属 性 は 特 別 にセレクタとし て 利 用 することができるため,クラスセレクタと 呼 ばれる. クラスセレクタの 指 定 には,クラス 名 の 前 にドット. をつけ,その 後 にスタイル 宣 言 を 行 う. 例 2-6 (head 要 素 内 で) <style type="text/css"> <!--.sample1{color : red}.sample2{color : blue} --> 次 に,body 要 素 内 で,クラスセレクタで 指 定 したスタイルを 適 用 したい 要 素 を,そ のクラス 名 とともに 書 く. 例 2-7 (body 要 素 内 で) <p class="sample1"> 赤 字 </p> <p class="sample2"> 青 字 </p> ID セレクタ ID とは,クラス 属 性 と 同 じ 要 に, 要 素 に 対 するプロパティのひとつで, 通 常,ID 属 性 と 呼 ばれる.ID 属 性 とは,それを 指 定 した 要 素 に 対 して,あるひとつのWeb ページ 上 でたった1つだけしか 値,つまり 名 前 を 与 えることができない. ID セレクタで 名 前 をつけた 後 は,body 属 性 内 で, 対 応 する 要 素 に 引 き 続 き, 井 桁 マーク # を 書 き, 空 白 をつくらずに 続 けてID 名 を 書 く. 例 2-8 (head 要 素 内 で) <style type="text/css"> <!-- #sample1{color : red} #sample2{color : blue} --!> (body 要 素 内 で) <p id="sample1"> 赤 字 </p> <p id="sample2"> 青 字 </p> 39

54 第 2 章 CSS によるWeb ページの 装 飾 クラスセレクタとID セレクタの 違 い ID 属 性 とclass 属 性 の 違 いについて, 多 くの 書 籍 は, ID 属 性 は,1 つのWeb ペー ジに 対 し,ひとつの 要 素 にしか 使 うことができない.これに 対 し,class 属 性 は,1 つの Web ページ 上 に,いくつでも 同 じ 要 素 に 使 うことができる. のように 書 いているが, この 説 明 だけではよくわからないと 感 じる 初 心 者 が 多 いようだ. 直 感 的 な 理 解 としては, 以 下 の 現 実 的 な 使 い 分 けが 役 に 立 つだろう. 特 定 の 要 素 に 一 意 的 な 名 前 をつけるときにはID 属 性 関 連 ある 要 素 をプロパティによってグループ 分 けするときにはclass 属 性 要 するに,ID 属 性 は 何 丁 目 何 番 地 の 家 という 具 合 に, 限 定 性 固 有 性 が 高 く, 一 方,class 属 性 は 木 造 の 家, 瓦 葺 の 家 という 具 合 に, 種 類 の 幅 が 柔 軟 だと いうことである. 初 心 者 の 間 は, 以 下 の 使 い 分 けが 良 いかも 知 れない. 属 性 分 類 がどうしても 必 要 になるまではclass 属 性 のみを 用 いる class 属 性 で 解 決 できない 時 にのみ,ID 属 性 を 用 いる. 2.5 セレクタのグループ 化 スクリプトの 長 大 化 を 防 ぐために,セレクタのグループ 化 がしばしば 行 われる 複 数 要 素 に 対 する 同 一 のスタイル 宣 言 セレクタをカンマ, で 区 切 り,その 後 ろに 宣 言 ブロックを 置 くと, 複 数 の 要 素 に 同 じスタイルを 指 定 できる. 例 えば, h1,h2,h3 という3つの 要 素 に 対 し, MS 明 朝 というフォントを 指 定 する 場 合 は 例 2-9 のようになる. 例 2-9 (グループ 化 前 ) h1 { font-family : MS 明 朝 } h2 { font-family : MS 明 朝 } h3 { font-family : MS 明 朝 } (グループ 化 後 ) h1,h2,h3 { font-family : MS 明 朝 } このように,グループ 化 により, 行 数 の 短 縮 と 冗 長 性 の 排 除 ができる. 40

55 2.6. プロパティの 種 類 とその 値 つの 要 素 に 対 する 複 数 のスタイル 宣 言 1 つの 要 素 に 対 し 複 数 のプロパティを 設 定 する 場 合,スタイル 宣 言 の 間 をセミコロン ; で 区 切 る. 例 えば,h1 という 要 素 に 対 し, (1) プロパティfont-weight によりフォントの 太 さを 値 bold に (2) プロパティfont-size によりフォントの 大 きさを 値 12pt に (3) プロパティline-height によりフォントの 高 さを 値 14px に という 設 定 をする 場 合, 例 2-10 のようになる. 例 2-10 (グループ 化 前 ) h1 { font-weight : bold } h1 { font-size : 12pt } h1 { line-height : 14px } グループ 化 の 記 述 では, 例 2-11 のようにCSS 全 体 の 行 を 短 く 抑 えるために1 行 にま とめる 場 合 と, 例 2-12 のように 後 日 の 管 理 のために 見 やすさ わかりやすさを 優 先 し て 複 数 行 にまとめる 場 合 がある.どちらを 利 用 してもかまわない. 例 2-11 (1 行 でのグループ 化 ) h1{ font-weight : bold; font-size : 12pt; line-height : 14px} 例 2-12 ( 複 数 行 によるグループ 化 ) h1{ font-weight : bold ; font-size : 12pt ; line-height : 14px } このように, 冗 長 性 が 排 除 できると 同 時 に,1 つの 要 素 に 対 してどのような 設 定 をし たかが,より 把 握 しやすくなる. 2.6 プロパティの 種 類 とその 値 前 節 までの 例 にすでにみられたように,CSS のプロパティとその 値 の 組 み 合 わせに は,いくつかの 決 まり 事 がある.そのそれぞれに, 記 述 方 法 や 単 位 の 扱 い 方 が 決 められ ている.プロパティの 種 類 は 豊 富 にあるため, 本 節 では, 必 ず 知 っておくべき 情 報 のみ を 説 明 する. 41

56 第 2 章 CSS によるWeb ページの 装 飾 相 対 単 位 と 絶 対 単 位 の 違 い 数 値 を 扱 うプロパティは, 基 準 となる 長 さの 単 位 に 応 じて,2 種 類 に 大 別 できる. 1 つは,メートル 法 やヤード 法 など, 国 際 規 格 に 基 づく 厳 密 な 数 値 表 現 である. 一 般 的 には, 絶 対 単 位 と 呼 ばれるものである.これらは, 誰 がどのような 状 況 で 利 用 して も,その 値 が 変 化 することは 絶 対 にない. 絶 対 単 位 に 基 づき 数 値 を 指 定 することのでき るプロパティを,CSS でも 絶 対 単 位 と 呼 ぶ. もう1つは, 厳 密 な 基 準 を 規 定 することが 難 しいものに 対 し, 求 めたい 数 値 の 種 類 に 応 じて, 適 切 と 思 われる 基 準 を 仮 に 設 定 し,それに 対 する 比 率 を 利 用 する 数 値 表 現 であ る. 一 般 的 には, 実 用 単 位 と 呼 ばれるものである.これらの 実 用 単 位 に 基 づき, 数 値 を 指 定 することのできるプロパティを,CSS では 相 対 単 位 と 呼 ぶ. 相 対 単 位 は,あらかじめ 基 準 とするものが 設 定 されているが,その 基 準 を 変 えること ができる. 基 準 が 変 わると,それに 応 じて 比 率 から 求 められる 実 数 値 も, 柔 軟 に 変 わ る. 従 って,ユーザーがどのような 環 境 でWeb ページを 取 り 扱 うか 不 明 の 場 合 は,こ の 柔 軟 さを 利 用 したほうが 有 効 である 場 合 が 多 い 相 対 単 位 の 種 類 HTML はそもそも, 文 書 に 対 する 構 造 化 言 語 である. 従 って, 主 要 なデータは 文 字 列 となる.CSS において 数 値 を 表 す 基 準 に, 文 字 表 記 に 関 するものが 多 いことは, 自 然 な 流 れであろう. 文 字 とは 概 念 であり,フォントという 具 体 的 な 形 を 持 つ 集 合 を 与 えられることで,は じめて 目 にみえる 姿 となる. 従 って,フォントを 基 準 にして 数 値 を 表 現 する 相 対 単 位 で は, 実 際 の 数 値 は 基 準 とするフォントがどのような 形 状 であるかに 大 きく 依 存 する. CSS において,フォントにまつわる 数 値 を 設 定 する 場 合 は, 欧 文 活 字 のありかたを 前 提 としている. 表 2.1: 相 対 単 位 の 一 覧 単 位 よみ 働 き 対 象 em エム 基 準 フォントのfont-size の 値 を1とする 高 さ, 幅 ex エックスハイト 基 準 フォントの 小 文 字 x の 高 さを1とする 高 さ px ピクセル ディスプレイの1ピクセルを1とする 高 さ, 幅 % パーセント ブロックの 幅 に 対 する 割 合 高 さ, 幅 42

57 2.6. プロパティの 種 類 とその 値 なお,ピクセルにより 指 定 される 実 際 の 値 は,Web ページをみるユーザーのディス プレイの 解 像 度 に 依 存 する. 例 2-13 p { font-family : Century ; font-size : 2em } h1 { font-size : 5ex } h2 { font-family: Arial ; font-size : 20px } h4 { font-size : 80% } 例 2-13 の 解 説 p は 段 落 をあらわす 要 素, h は 付 随 する 数 値 に 対 応 するレベルの 見 出 しをそれ ぞれ 示 す 要 素 である.この 要 素 に 対 し, font-family はフォントの 種 類 を, font-size はフォントサイズをあらわすプロパティに, 値 を 相 対 単 位 で 設 定 している. 以 下 は, p には,フォントをCentury で,フォントの 大 きさを2em で h1 には, 基 準 フォントの5 倍 の 値 で h2 には,フォントをArial で,フォントの 大 きさを20 ピクセルで h4 には, 基 準 フォントの80%の 値 で ということをそれぞれ 指 定 している 絶 対 単 位 によるサイズ 指 定 相 対 単 位 と 同 じように, 絶 対 単 位 でも,その 多 くに 欧 文 活 字 印 刷 用 の 単 位 が 流 用 され ている.しかし 相 対 単 位 と 違 い,CSS の 絶 対 単 位 で 欧 文 活 字 に 由 来 するプロパティに 対 する 値 は, 世 間 一 般 の 絶 対 単 位 系 によりあらわされる 厳 密 な 数 値 である. 表 2.2: 絶 対 単 位 の 一 覧 単 位 よみ 働 き pt ポイント pc パイカ 1pt= 約 72 分 の1インチ 1pc=6 分 の1インチ(12 ポイント) in インチ 1in=12 分 の1フィート(2.54cm) mm ミリメートル cm センチメートル 例 2-14 p { font-family : Century ; font-size : 12pt } h1 { font-size : 3pc } h2 { font-family: Arial ; font-size : 0.5in } h3 { font-family: Courier ; font-size : 5mm } 43

58 第 2 章 CSS によるWeb ページの 装 飾 例 2-14 の 解 説 p は 段 落 をあらわす 要 素, h は 付 随 する 数 値 に 対 応 するレベルの 見 出 しをそれ ぞれ 示 す 要 素 である.この 要 素 に 対 し, font-family はフォントの 種 類 を, font-size はフォントサイズをあらわすプロパティに, 値 を 絶 対 単 位 で 設 定 している. 以 下 は, p には,フォントをCentury で,フォントの 大 きさを12 ポイントで h1 には,フォントサイズを 3 パイカで h2 には,フォントをArial で,フォントの 大 きさを0.5 インチで h3 には,フォントをCourier,フォントの 大 きさを5ミリで ということをそれぞれ 指 定 している. 演 習 2-1 head 要 素 内 におけるstyle 属 性 を 使 って, 要 素 h3 に 対 し,フォントを 表 すプロパティ font-size を, フォントサイズを 指 定 する 値 の 単 位 と して em を,その 値 として 15 を,それぞれ 使 用 して 以 下 の 文 書 を 表 示 するHTML 文 書 をWeb ブラウザで 表 示 できるように 作 成 しなさい. 祇 園 精 舎 の 鐘 の 音, 諸 行 無 常 の 響 きあり CSS で 使 える 色 色 の 値 は, 色 名 のキーワードか,RGB の 各 成 分 を16 進 数 の 数 字 で 表 したもので 指 定 する. RGB は, 光 の 三 原 色 を 赤, 緑, 青 で 表 したものである.それぞれの 原 色 に 対 し2 桁 を 割 り 当 て,16 進 数 でデータを 表 示 することにより,256 段 階 の 色 階 調 を 表 示 可 能 であ る(1.3.6 および8.4 参 照 ). 原 色 は3 種 類 存 在 するから, 計 算 上 表 現 可 能 な 色 は256 の3 乗,すなわち1600 万 超 の 色 表 現 が 可 能 のはずである(8.4 参 照 ). RGB で 色 を 表 記 するときには,6 桁 の16 進 数 値 の 前 に 井 桁 マーク # をつける. 色 名 で 指 定 する 場 合 は,CSS での 色 名 を 指 定 する( 表 2.3). 演 習 2-2 インラインスタイルシートを 利 用 し style 属 性 を 使 って, h3 要 素 に 対 しCSS2.1 対 応 の17 色 を 使 い,1 文 字 ずつ 違 う 色 の 文 書 をWeb ブラウザで 表 示 できるように 作 成 しなさい. 文 書 は 下 記 のものを 使 用 すること. 44

59 2.6. プロパティの 種 類 とその 値 表 2.3: CSS に 対 応 する 色 いろはにほへと ちりぬるを わかよたれそ つねならむ オブジェクトの 配 置 文 字 列 や 画 像 を 左 詰 め( 左 寄 せ) 中 央 揃 え(センタリング) 右 詰 め( 右 寄 せ) にした いときには, align を 含 むプロパティを 用 いて 設 定 する.HTML タグの 属 性 として align が 存 在 するが,HTML4.01 の 段 階 で,オブジェクトの 配 置 装 飾 は 基 本 的 にCSS で 行 うように 推 奨 している. 属 性 として 扱 う 場 合 は,テーブル 構 造 の 装 飾 程 度 に 活 用 す るのが 一 般 的 であろう. (1) 文 字 の 配 置 HTML 文 書 は 何 も 指 定 しない 場 合,オブジェクトは 左 寄 せ 配 置 されるので,ここでは 中 央 揃 えと 右 詰 を 実 装 してみる. 文 字 列 配 置 のプロパティは text-align, 値 は 左 中 央 右 の 順 にそれぞれ left/center/right である( 表 2.4). 表 2.4: 文 字 配 置 のオブジェクト オブジェクト 名 働 き 値 左 寄 せ left text-align 中 央 揃 え center 右 寄 せ right 例 2-15 (CSS 部 分 ).haichi1 { text-align : center }.haichi2 { text-align : right } (body 要 素 内 ) <p> このままでは 左 寄 り</p> <p class="haichi1">センタリング</p> <p class="haichi2">これは 右 詰 め</p> 45

60 第 2 章 CSS によるWeb ページの 装 飾 (2) 画 像 の 配 置 画 像 をブラウザ 上 の 左 中 央 右 に 配 置 する 際, 現 行 のCSS2.1 では text-align の 使 用 を 推 奨 している. 文 字 列 もimg 要 素 も,インライン 要 素 だからである. 例 えば,(1) で 示 したソースのうち, 本 文 センタリング と 同 じ 段 落 にimg 要 素 を 追 加 する 際 には, 例 2-16 のように 指 定 する. 例 2-16 (body 要 素 内 ) <p class="haichi1">センタリング<br> <img src="./xxx.jpg" alt=" 写 真 " width="55%"> </p> さらに 細 かい 位 置 を 指 定 したい 場 合 には,コンテンツのマージンやパディングを 設 定 する 必 要 があるが,これはボックス 構 造 で 解 説 する(2.7 参 照 ). (3) 画 像 文 字 の 位 置 関 係 HTML では, 画 像 は 文 字 の 間 に 入 っている 情 報 として 扱 われる.(インライン 要 素 ) 同 じ 段 落 内 に 画 像 と 文 字 列 が 連 続 しているとき, 画 像 と 同 じ 行 上 にある 文 字 列 だけが, 画 像 の 下 端 (bottom) にあわせてつながって 表 示 される. A. 画 像, 文 字 の 回 りこみ 画 像 のあとに 続 く 文 字 列 などを, 画 像 サイズによって 生 じる 横 のスペースに 流 し 込 み たいときには,プロパティ float を 用 い, left/right などの 値 を 与 え, 対 象 を 回 り 込 ませる. 例 えば, 画 像 に 対 して 左 を 指 定 すると,それに 続 くブロック 要 素 は 画 像 の 右 側 のスペースに 流 し 込 まれる. 例 えば 例 2-17 では,ブロック 要 素 haichi3 が 画 像 の 右 側 のスペースに 回 り 込 む. 例 2-17 (CSS 部 分 ).haichi3 { float : left } (body 要 素 内 ) <p class="haichi1">センタリング <img src="./xxx.jpg" alt=" 写 真 " width="55%" class="haichi3"> <p> なお,プロパティ float はブロック 要 素 に 対 して 行 うので,ページレイアウトの 節 (2.8.2) でよく 理 解 してほしい. B. インラインでの 垂 直 位 置 上 述 のように, 画 像 と 文 字 列 はインラインでつながる. 画 像 が 入 った1 行 の 高 さは, 画 像 の 高 さに 合 わせて 大 きくなる.このとき, 画 像 と 同 じ 行 の 文 字 列 の 位 置 を 下 端 (bottom) 46

61 2.7. div によるボックス 構 造 の 基 礎 だけでなく, 上 下 ( 垂 直 方 法 ) の 位 置 関 係 に 設 定 することができる.このとき 用 いるプ ロパティが vertical-align である. これに 対 する 値 としては, 次 のようなものを 与 えることができる( 表 2.5). 表 2.5: vertical-align を 用 いたインラインでの 垂 直 位 置 設 定 値 説 明 baseline 画 像 の 下 端 と, 親 要 素 のベースラインを 揃 える( 初 期 値 ) top 画 像 の 上 端 と, 行 の 上 端 を 揃 える middle 画 像 の 中 心 と, 親 要 素 の x 文 字 の 中 心 を 揃 える bottom 画 像 の 下 端 と, 行 の 下 端 を 揃 える text-top 画 像 の 上 端 と, 親 要 素 のフォントの 上 端 を 揃 える text-bottom 画 像 の 下 端 と, 親 要 素 のフォントの 下 端 を 揃 える 数 値 + 単 位 /% 任 意 の 位 置 に 揃 える( 正 の 値 は 上 方 向, 負 の 値 は 下 方 向 に 移 動 ) 例 えば, 例 2-15 のうち これは 右 詰 め という 文 字 列 のすぐ 隣 に 画 像 を 置 き, 画 像 高 の 中 心 位 置 に 配 置 したい 場 合 は, 例 2-18 のようになる. 例 2-18 (CSS 部 分 ).haichi4{ vertical-align : middle } (body 要 素 内 ) <p class="haich2"> <img src="./xxx.jpg" alt=" 写 真 " width="55%" class="haichi4"> これは 右 詰 め</p> 2.7 div によるボックス 構 造 の 基 礎 CSS では,ボックスという 単 位 を 複 数 組 み 合 わせることで, 全 体 のレイアウトを 構 築 する. 従 って,ボックスの 構 造 とその 規 定 を 知 ることは 重 要 である. なお,HTML4 まででは,テーブル( 表 ) の 枠 を 描 画 する 際,table 要 素 にborder 属 性 を 追 加 することが 多 かった.しかし,HTML5 では,table タグはあくまでテーブル 内 にあらわすコンテンツのみを 記 述 し,レイアウトはCSS 側 で 記 述 することとなった. CSS2.1 でも,CSS によるテーブルの 枠 描 画 は 可 能 である. 従 って,テーブルの 枠 はCSS でレイアウトすることが 強 く 推 奨 される. 47

62 第 2 章 CSS によるWeb ページの 装 飾 図 2.3: ボックス 構 造 の 模 式 図 ボックスモデル(ボックス 構 造 ) ボックスとは, 要 素 により 生 成 される 四 角 形 の 領 域 のことである.このボックスを 単 位 として, 配 置 やデザインを 指 定 する. ボックスは 中 心 にcontent(コンテント) という 名 の 内 容 領 域 を 持 つ.その 外 側 に 複 数 存 在 するすべての 領 域 をまとめて, 周 辺 領 域 と 呼 ぶ. 周 辺 領 域 は,content を 中 心 とし て 外 側 に 向 かって 順 に,padding(パディング),border(ボーダー),margin(マージン) と 呼 ばれる3 種 類 の 領 域 と,それぞれの 領 域 の 境 界 線 を 示 すedge(エッジ) で 構 成 され る( 図 2.3). padding とは,content のすぐ 外 側 にあって, 内 容 と 外 枠 との 間 に 適 切 な 余 白 を 設 け て 見 映 えをよくするための 領 域 である. border とは,padding のすぐ 外 側 にあって,ボックスの 枠 線 を 構 成 するための 領 域 で ある. margin とは,border のすぐ 外 側 にあって,ボックスと 外 界 の 間 に 適 切 な 余 白 を 設 け て 見 映 えをよくするための 領 域 である. 内 容 領 域 と 各 周 辺 領 域 の 境 界 線 をedge と 呼 ぶ. 各 edge は,それぞれtop,right, bottom,left の4 種 類 から 構 成 される.Edge には 以 下 の4 種 類 が 存 在 する. 48

63 2.7. div によるボックス 構 造 の 基 礎 (1)contentedge(inneredge): 内 容 領 域 をかこむ 辺 (2)paddingedge:border のpadding 側 の 辺 (3)borderedge:border のmargin 側 の 辺 (4)marginedge(outeredge):margin をかこむ 辺 内 容 領 域 と 枠 線 の 間 に 空 白 領 域 をつくる padding を 利 用 して, 内 容 領 域 と 枠 線 の 間 に 空 白 領 域 を 作 るためには, 空 白 を 作 る 部 分 をプロパティで 指 定 し, 値 として 数 値 と 単 位 を 入 力 する. プロパティ: 数 値 単 位 用 いる 単 位 は 相 対 単 位 でも 絶 対 単 位 でもどちらでもよい(2.6.2,2.6.3 参 照 ).また, 空 白 領 域 の 指 定 には,2 種 類 の 方 法 がある. (1) 四 辺 を 個 別 に 指 定 する( 表 2.6) 表 2.6: padding の 個 別 空 白 領 域 設 定 プロパティ 名 設 定 部 位 設 定 例 padding-top 上 辺 padding-top: 1em padding-right 右 辺 padding-right: 2em padding-bottom 下 辺 padding-bottom: 3em padding-left 左 辺 padding-left: 1em (2) 四 辺 をいくつか,あるいはまとめて 指 定 する( 表 2.7) 表 2.7: padding の 共 通 空 白 領 域 設 定 値 の 数 設 定 部 位 設 定 例 1 四 辺 共 通 padding: 1em 2 順 に, 上 下 左 右 padding: 1em2em 3 順 に, 上, 左 右, 下 padding: 1em2em1em 4 順 に, 上, 右, 下, 左 padding: 1em2em1em3em 枠 線 を 設 定 する ボックス 構 造 の 枠 線 (ボーダーborder) は,CSS 側 で 指 定 する. (1) プロパティと 値 49

64 第 2 章 CSS によるWeb ページの 装 飾 枠 線 の プロパティ には, 短 縮 プロパティと 個 別 のプロパティとの2 種 類 がある. 具 体 的 には, 下 記 の(2) で 紹 介 する. 枠 線 の 値 は, 線 の 幅, 線 種, 線 色 の 順 に, 半 角 スペースで 区 切 って 指 定 すること ができる. 幅 の 線 は, 絶 対 単 位 または 相 対 単 位 による 数 値 で 指 定 する. 線 種 は, 表 2.8 に 示 される9 種 類 である.デフォルト 値 はnone である. 線 色 は, 表 2.3 を 参 照 のこと. 表 2.8: border で 指 定 可 能 な 枠 線 の 線 種 値 働 き 値 働 き solid 実 線 double 二 重 線 groove くぼみ 線 inset インセット none 枠 線 表 示 無 し (デフォルト 値 ) dotted 点 線 dashed 破 線 ridge 浮 き 出 し 線 outset アウトセット (2) 具 体 的 な 指 定 方 法 枠 線 の 指 定 の 方 法 は, 主 に2 種 類 がある. A. 短 縮 プロパティを 使 う 方 法 プロパティ border で 線 の4 方 向 をすべて 一 気 に 指 定 する. 指 定 行 を 短 くできるた め,このように 一 気 に 指 定 できるプロパティのことは, 短 縮 プロパティと 呼 ばれる. 記 載 例 border: thingraysolid; 短 縮 プロパティborder には, 以 下 の3 種 類 がある. 表 2.9: border の 短 縮 プロパティ プロパティ 名 働 き 値 border-color 線 の 色 色 値 (CSS 色 名 又 は 色 番 号 ) border-width 線 の 太 さの 数 値 数 値 ( 相 対 又 は 絶 対 単 位 ) border-style 線 の 種 類 表 2.8 記 載 の 線 種 名 パディングの 指 定 のように, 短 縮 プロパティの 後 に 値 の 数 を1~4 つまで 指 定 するこ とができる. 値 の 数 により, 指 定 できる 辺 の 位 置 が 決 まる( 表 2.10). 50

65 2.8. div を 使 ったページレイアウト 表 2.10: border による 枠 線 の 一 括 指 定 例 値 の 数 設 定 部 位 設 定 例 1 四 辺 共 通 border-width: 1em 2 順 に, 上 下 左 右 border-color: #0000ff#00ff00 3 順 に, 上, 左 右, 下 border-style: soliddoublesolid 4 順 に, 上, 右, 下, 左 border-width: 2px3px3px2px B. 個 別 のプロパティを 使 う 方 法 短 縮 プロパティ border を 使 わない 場 合 は, 一 部 分 ごとに 枠 線 を 指 定 することが 可 能 である.プロパティ border の 後 にハイフン - をいれ, 指 定 したい 枠 線 の 位 置 を 記 入 する. プロパティの 後 に, 値 を 指 定 する. 値 は, 線 幅, 線 色, 線 種 の3 種 類 である.どの 順 序 で 指 定 するかについては, 規 定 はない( 表 2.11). 表 2.11: border による 枠 線 の 個 別 指 定 例 プロパティ 名 働 き 設 定 例 border-top 上 辺 を 指 定 border-top: 1emsilversolid border-right 右 辺 を 指 定 border-botom 下 辺 を 指 定 border-right: 2pxbluedouble border-bottom: #0000ff0.5emridge border-left 左 辺 を 指 定 border-left: groove1px#00ff div を 使 ったページレイアウト CSS では,div 要 素 で 生 成 される 四 角 い 領 域 (ボックス 構 造 ) を 使 って, 簡 単 にレイ アウトを 組 むことができる. 以 下 の 例 では,HTML ファイルとは 別 に, 新 しいテキス トファイルでスタイルシートを 外 部 ファイルとして 作 成 し,HTML ファイルから 呼 び 出 すことを 前 提 に, 説 明 する(2.3.2 参 照 ) CSS ファイルを 独 立 させる テキストファイルを 使 い,1 行 目 に 以 下 のようなコメントを 入 力 し,ひとまず 独 立 し た1つのファイルを 作 成 する(2.3.1 参 照 ). CSS ファイル 側 /* 外 部 ファイルを 利 用 したCSS の 例 */ 51

66 第 2 章 CSS によるWeb ページの 装 飾 CSS ファイルに 名 前 をつける.CSS ファイルの 拡 張 子 は, 必 ず.css とする.この 例 では, boxtest.css という 名 前 をつけることにする. CSS ファイルに 名 前 がついたら,HTML ファイル 側 のhead 要 素 に, 外 部 スタイル ファイルが 存 在 することを 宣 言 する(2.3.2 参 照 ). HTML ファイル 側 <head> <meta http-equiv="content-type" content="text/html" charset="shift_jis"> <link rel="stylesheet" href="boxtest.css" type="text/css" > <title>div によるボックスレイアウトの 練 習 </title> </head> 設 定 ができたら,HTML ファイルに 名 前 をつける.この 例 では, boxtest.html と いう 名 前 をつけることにする ボックスの 枠 設 定 を 行 う ボックスは,3 段 階 で 設 定 を 行 う.まず 大 枠 を 作 成 し,その 中 に 入 れる 小 さな 枠 を 作 成 し,その 枠 をはめ 込 む 位 置 を 設 定 する. 以 下,それぞれにつき 解 説 する. (1) 大 枠 を 作 成 する まず,HTML ファイル 内 のbody 要 素 内 に,Web ページ 全 体 に 対 する 仮 想 的 な 大 きな ボックスを 生 成 する.プロパティID は,body 要 素 内 で 定 義 されるdiv 要 素 で 生 成 され るボックスに 名 前 をつける.ここでは 例 として 仮 に, bigbox という 名 前 を 定 義 する. HTML ファイル 側 <body> <div id="bigbox"> </div> </body> bigbox という 名 のボックスに 関 する 規 定 は,CSS 内 に 定 義 する.CSS 内 でボッ クスを 規 定 する 際 には,その 名 前 の 前 に 必 ず 井 桁 マーク # をつける.HTML ファ イル 側 とCSS ファイル 側 では, 関 連 づける 名 前 は 必 ず 同 じにしておく 必 要 がある. CSS ファイル 側 #bigbox { } (2) 大 枠 の 中 に 小 さなボックスを 生 成 する 次 に, 大 きなボックスの 中 に, 部 品 となる 小 さなボックスを 生 成 する.ここでは 例 と して,4 つ 生 成 する. 52

67 2.8. div を 使 ったページレイアウト HTML ファイル 側 <body> <div id="bigbox"> <div id="innerbox1"></div> <div id="innerbox2"></div> <div id="innerbox3"></div> <div id="innerbox4"></div> </div> </body> これらの 小 さなボックスに 対 応 させるため, 同 じ 名 前 の 先 頭 に # をつけたものを, CSS 側 で 定 義 する.ここで 特 段 の 指 定 をしなければ, 横 方 向 に 長 い 長 方 形 が4つ, 上 から 順 に 積 み 重 なるように 生 成 される. CSS ファイル 側 #bigbox { } #innerbox1{ } #innerbox2{ } #innerbox3{ } #innerbox4{ } (3) 小 さなボックスの 位 置 を 並 べ 替 える プロパティ float は, 横 方 向 に 長 い 長 方 形 のボックスを,90 度 回 転 させる. 値 は, left と right の2 種 類 である.Float による90 度 回 転 と 配 置 を 回 り 込 み とい う. 左 への 回 り 込 みは 値 を left で, 右 への 回 り 込 みは 値 を right で 指 定 する. 表 2.12: ボックスの90 度 回 転 配 置 ( 回 り 込 み) プロパティ 名 働 き 値 float 右 への 回 り 込 み right 左 への 回 り 込 み left 上 下 に 積 み 重 なった4つの 小 さなボックスのうちの 中 央 2 つを, 左 右 に 並 べかえる. 指 定 はCSS 側 で 行 う. CSS ファイル 側 #innerbox2{float : left} #innerbox3{float : right} 53

68 第 2 章 CSS によるWeb ページの 装 飾 ボックスに 細 かなレイアウト 設 定 を 行 う 細 かなレイアウト 設 定 は,すべてCSS 側 で 指 定 する. 以 下 の 例 は, 前 節 までに 作 成 したCSS ファイルに 追 加 することを 前 提 として 解 説 していく. (1) レイアウト 全 体 の 横 幅 を 指 定 する レイアウト 全 体 を 左 右 する 大 枠 の 横 幅 をまず 指 定 する. 横 幅 の 指 定 にはプロパティ width を 使 う. 値 は, 絶 対 単 位 でも 相 対 単 位 でも 構 わない(2.6.2,2.6.3 参 照 ). 表 2.13: ボックスの 幅 を 指 定 する プロパティ 名 働 き 値 width 横 幅 設 定 数 値 ( 絶 対 又 は 相 対 単 位 ) 今 回 の 例 では, 大 枠 は100%で 定 義 する. CSS ファイル 側 #bigbox{width : 100%} (2) 左 右 に 並 べたボックスの 横 幅 を 指 定 する 次 に, 大 枠 の 中 に, 左 右 に 並 べたボックスの 横 幅 を 指 定 する. 大 枠 の 横 幅 の 数 値 より も 小 さい 数 値 を 入 れなければならない. 今 回 は, 例 として 左 に 配 置 したボックスを 大 枠 の 横 幅 からみて20%, 右 に 配 置 した ボックスを80%で 指 定 する. CSS ファイル 側 #innerbox2{float : left ; width:20%} #innerbox3{float : right ; width:80%} (3) 左 右 に 並 べたボックスの 縦 の 長 さを 指 定 する 次 に, 左 右 に 並 べたボックスの 縦 の 長 さを 指 定 する.プロパティは height, 値 は 絶 対 単 位 でも 相 対 単 位 でも 構 わない. 表 2.14: ボックスの 高 さを 指 定 する プロパティ 名 働 き 値 height 縦 幅 設 定 数 値 ( 絶 対 又 は 相 対 単 位 ) 今 回 は, 例 として 左 右 に 配 置 したボックスをどちらも400 ピクセルで 指 定 する. CSS ファイル 側 #innerbox2{float : left ; width : 20% ; height : 400px} #innerbox3{float : right ; width : 80% ; height : 400px} 54

69 2.8. div を 使 ったページレイアウト (4)float によるレイアウトの 影 響 を 排 除 する プロパティ float を 利 用 すると,その 下 のボックスのレイアウトが 崩 れることが ある.これを 回 避 するには,プロパティ float を 指 定 したボックスの 下 に 配 置 したい ボックスに 対 し,プロパティ clear, 値 は both を 指 定 するとともに,プロパティ width で,(1) で 指 定 するレイアウト 全 体 の 横 幅 よりも 小 さくなるように, 横 幅 数 を 指 定 する. 表 2.15: float によるレイアウト 崩 れ 回 避 プロパティ 名 値 注 意 事 項 clear both プロパティ width で 大 枠 より 小 さめの 値 を 設 定 する 今 回 は, 例 として, 最 も 下 に 配 置 したボックスを, 大 枠 の90%の 値 で, 回 り 込 み 回 避 のプロパティを 設 定 する. CSS ファイル 側 #innerbox4{clear : both ; width : 90%} (5) ボックスの 外 枠 に 線 をひく 外 枠 の 設 定 には, border を 利 用 する の(1) から(3) までを 組 み 合 わせて, 四 辺 を 細 かく 設 定 することが 可 能 である.また, border だけで 単 純 な 設 定 も 可 能 である. 今 回 は, 例 として, 一 番 上 に 配 置 した 横 長 のボックスに,1 ピクセルの 幅 で, 実 線 で, 青 色 で,4 方 向 に 線 を 引 く.さらに 横 幅 を90%で 指 定 しておく. CSS ファイル 側 ( 例 ) #innerbox1 { border : 1px solid "#0000ff ; width:90% ; } 次 に,2.7.3 の(4) の 方 法 で, 別 の 枠 線 をつけてみる. 今 回 は, 例 として, 一 番 下 に 配 置 した 横 長 のボックスに, 枠 線 の 上 右 は10 ピクセルの 幅, 浮 き 出 し 線 を, 青 色 で 引 く. 一 方, 枠 線 の 左 下 は,1 ピクセルの 幅, 実 線 を, 青 色 で 引 く. CSS ファイル 側 ( 例 ) #innerbox4{ border : 1px solid #0000ff ; width : 90% ; background-color : #ffff00 ; } 55

70 第 2 章 CSS によるWeb ページの 装 飾 (6) ボックスに 違 う 色 をつける プロパティ background-color で,ボックスそれぞれの 背 景 色 を 指 定 することがで きる. 動 作 確 認 の 時 に 背 景 色 を 指 定 すれば,ボックス 定 義 記 述 のミスをみつけやすくな る. 値 は 色 値 である( 表 2.3 参 照 ). 表 2.16: 背 景 色 の 指 定 プロパティ 名 値 background-color 色 値 (CSS 色 名 又 は 色 番 号 ) 今 回 は, 例 として, 一 番 上 のボックスに 黄 色 の 背 景 色 をつける. CSS ファイル 側 ( 例 ) #innerbox1 { border : 1px solid #0000ff ; width:90% ; background-color : #ffff00; } 演 習 2-3 左 のボックスに 灰 色 を, 右 のボックスに 栗 色 を, 一 番 下 のボックスに 緑 色 を, それぞれ 設 定 するにはどうすればよいか, 実 際 に 書 いてみなさい. 演 習 から2.8.3 までを 読 み, 演 習 2-3 を 実 行 した 上 で,HTML ファイルと CSS ファイルを 実 際 に 作 成 し,Web ブラウザでどのように 表 示 されるかを 確 かめなさい. 2.9 CSS でテーブルの 枠 線 を 引 く HTML4.1 までは,table 要 素 にレイアウト 情 報 を 持 たせることができた( 例 2-19). 56

71 2.9. CSS でテーブルの 枠 線 を 引 く 図 2.4: 例 2-19 のブラウザ 表 示 例 2-19 <body> <table border=1px> <tr> <th> 帖 名 </th><th> 巻 名 1</th><th> 巻 名 2</th><th> 巻 名 3</th> </tr> <tr> <td> 帚 木 三 帖 </td><td> 帚 木 </td><td> 空 蝉 </td><td> 夕 顔 </td> </tr> <tr> <td> 匂 宮 三 帖 </td><td> 匂 兵 部 卿 </td><td> 紅 梅 </td><td> 竹 河 </td> </tr> </table> </body> 図 2.4 は, 例 2-19 をブラウザ 表 示 したものである. しかし,HTML5 ではレイアウトをすべてCSS 側 で 設 定 することとなった.そもそ も,HTML のどのバージョンを 利 用 するにしても,レイアウトはすべてCSS で 設 定 す ることが 望 ましい. 従 って, div 要 素 で 分 けられたブロック の 中 に, table で 指 定 するレイアウトを 設 定 し, table の 中 身 だけをHTML のBODY 内 部 に 書 く ということになる. 例 2-19 をCSS を 使 って 記 述 しなおすと, 例 2-20 のようになる. 57

72 第 2 章 CSS によるWeb ページの 装 飾 例 2-20 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//en" > <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>div によるテーブル 枠 線 例 </title> <style type="text/css"> table { border : solid 1px;} </style> </head> <body> <table> <tr> <th> 帖 名 </th><th> 巻 名 1</th><th> 巻 名 2</th><th> 巻 名 3</th> </tr> <tr> <td> 帚 木 三 帖 </td><td> 帚 木 </td><td> 空 蝉 </td><td> 夕 顔 </td> </tr> <tr> <td> 匂 宮 三 帖 </td><td> 匂 兵 部 卿 </td><td> 紅 梅 </td><td> 竹 河 </td> </tr> </table> </body> </html> 演 習 2-5 ソース 集 のCSS ファイル 及 びHTML ファイルを 作 成 し,ブラウザで どのように 表 示 されるか, 確 認 しなさい.2 つのファイルは 同 じフォルダに 保 存 し, 保 存 のためのファイル 名 は, 自 分 が 適 切 と 思 うファイル 名 を つけなさい.この 時, の 中 は, 適 切 と 思 われる 文 字 列 に 変 換 しなさい. ( 記 号 は 削 除 すること.) 58

73 第 3 章 HTML5 3.1 HTML の 文 法 の 変 遷 HTML は, 文 書 を 電 子 化 するために 使 われる 定 義 集 である. 電 子 化 された 文 書 は 短 時 間 で 様 々な 場 所 に 発 信 することができるが, 紙 に 印 刷 される 文 書 にはない 欠 点 があ る. 電 子 化 のためにワードプロセッサ 等 の 個 別 のアプリケーションを 利 用 すると, 同 じアプリケーションでもバージョンアップ 等 で 読 めなくなり, 文 書 の 長 期 保 有 と 保 守 を 困 難 にする.これを 防 ぐには, 文 書 の 定 義 集 と, 実 際 にそれが 表 示 される 際 の 具 体 的 なレイアウト 指 示 集 を 分 離 しておけばよい.そこで, 文 書 記 述 言 語 としてStandard GeneralizedMarkupLanguage(SGML) がISO により 標 準 化 された.SGML は 定 義 集 であり,SGML に 対 するレイアウト 指 示 集 はDocumentTypeDefinition(DTD) と 呼 ばれる. SGML とDTD をもとに,Web 上 の 表 記 に 適 した 形 として 策 定 されたものがHTML である.HTML はSGML よりも 文 法 規 則 が 緩 やかであったため,Web ページ 用 の 言 語 として 普 及 していった. その 後,NetscapeCommunications 社 のNetscapeNavigator や,Microsft 社 のInternetExplor が,ブラウザとして 独 自 の 機 能 を 搭 載 し 始 めた.その 結 果,HTML はコ ンピュータ 文 書 としての 文 法 機 能 とレイアウト 表 示 の 機 能 が 混 在 した 言 語 となってし まった. そこで,W3C(WorldWideWebConsortium) という 非 営 利 団 体 が,ユーザーの 環 境 によってWeb ページの 閲 覧 に 対 する 不 利 益 が 生 じないように,その 仕 様 について 協 議 し,HTML の 文 法 の 策 定 を 行 った. W3C の 行 った 策 定 の 主 要 な 点 としては,マークアップをWeb ページのレイアウト のために 用 いるのではなく,Web ページの 文 書 上 の 意 味 ( 文 法 ) を 表 すために 用 いるこ とを 勧 告 している 点 にある.そのため,Web ページのレイアウトやデザインに 関 して は,CSS のようなスタイルシート( 第 2 章 参 照 ) や,javascript( 第 4 章 参 照 ) などの 他 の 言 語 を 用 いて 行 うことを 勧 告 している. 59

74 第 3 章 HTML5 現 在 までのHTML の 最 終 的 な 規 格 は,1997 年 に 勧 告 されたHTML4.01 であった.そ れ 以 降, 新 しいバージョンの 勧 告 は 行 われなかった.HTML4.01 では,Web 上 の 新 た な 機 能 に 対 してどのように 相 互 運 用 していくかということや,その 後 に 制 定 された 規 格 に 対 応 していなかった. そこで,2004 年 から, 現 在 のWeb 作 成 技 術 や 新 たな 文 章 に 対 応 するように,HTML5 の 策 定 が 開 始 された.この 時 点 で,Web ブラウザの 開 発 各 社 (Apple,Mozilla,Opera) が 独 自 に 進 めていた 仕 様 も 統 合 された. HTML5 は, 狭 義 にはHTML4.01 に 残 っていた 文 法 上 の 問 題 点 を 改 訂 することと, 広 義 にはWeb 上 で 動 作 するアプリケーション(Web アプリケーション) としての 実 用 性 を 高 めることの2つを 目 的 としている.その 結 果,XML や 数 学 用 の 文 書 記 述 言 語 の MathML との 互 換 性 も 実 現 するようになった. HTML5 は2014 年 までに 最 終 勧 告 が 行 えるように 策 定 作 業 が 進 められており,すべ てのブラウザがHTML5 の 仕 様 に 対 応 しているわけではない.そのため, 現 在 の 段 階 ではいまだHTML4.01 がもっとも 正 しいWeb ページ 作 成 上 の 文 法 となっている. 演 習 3-1 HTML5 で 記 述 されているWeb ページを 見 つけなさい. HTML 以 外 のネットワーク 文 書 : (1) XML (Extensible Markup Language) XML の 特 徴 は,HTML と 同 様 に,タグでマークアップをする 形 式 にある. XML の 場 合 は, 文 書 宣 言 がより 詳 細 になる, 終 了 タグの 省 略 が 出 来 ない, 要 素 の 定 義 をしなければいけないと 言 った 点 がある. (2)XHTML (Extensible Hyper Text Markup Language) XML の 規 格 を 取 り 入 れ,HTML との 互 換 性 を 持 つようにした 規 格 XHTML では,HTML4 までで 用 いられていた 要 素 をほぼそのまま 用 いることができる. HTML4 との 大 きな 違 いは, 文 書 宣 言 にXML の 形 式 を 用 いる, 要 素 や 属 性 は 全 て 小 文 字 で 記 述 する, 終 了 タグの 省 略 が 出 来 ないと 言 った 点 にある. 3.2 コンテンツモデル HTML5 では,ブロック 要 素 とインライン 要 素 という 分 類 ではなく,コンテンツモデ ルという 考 え 方 に 変 えている.これは, 要 素 の 文 法 上 の 意 味 合 いをより 明 確 にするため 60

75 3.2. コンテンツモデル に 導 入 された 考 え 方 である. コンテンツモデルでは,メタデータコンテンツ,フローコンテンツ,セクショニング コンテンツ, 見 出 しコンテンツ,フレージングコンテンツ, 埋 め 込 みコンテンツ,イン タラクティブコンテンツに 分 類 される.これらは 排 他 的 な 存 在 ではなく, 相 補 的 な 関 係 であったり, 包 含 的 な 関 係 であったりする.コンテンツモデルにおけるそれぞれの 関 係 は, 図 3.1 の 様 に 示 される. 図 3.1: コンテンツモデルの 関 係 図 メタデータコンテンツ 文 書 に 関 する 情 報 や, 他 の 文 章 との 関 係 などを 定 義 するコンテンツである.head 要 素 内 に 記 述 される 要 素 である. 表 3.1: 代 表 的 なメタデータコンテンツ 要 素 要 素 名 要 素 の 意 味 記 述 例 table 文 書 のタイトル <title>タイトル</title> meta 文 書 のメタ 情 報 <meta name="author" content=" 製 作 者 名 "> link 他 の 文 書 との 関 係 性 <link rel="キーワード" href="uri"> フローコンテンツ フローコンテンツは,テキストノードを 持 つか, 埋 め 込 みコンテンツ 要 素 を 最 低 限 1 つ 持 っているコンテンツとして 定 義 されている.そのため,メタデータの 一 部 を 除 く, 61

76 第 3 章 HTML5 ほとんどのコンテンツがフローコンテンツにあたる セクショニングコンテンツ 章 や 節,コラムや 記 事 など, 文 章 のセクションの 見 出 しから 内 容 までを 含 む.なお, セクショニングコンテンツとして, 表 3.2 に 記 載 した 要 素 がHTML5 から 追 加 されてい る. 新 規 要 素 は,ブラウザの 対 応 状 況 によっては, 無 視 されてしまうので, 注 意 が 必 要 である. 表 3.2: 代 表 的 なセクショニングコンテンツ 要 素 名 要 素 の 意 味 記 述 例 section 章 や 節 article 独 立 したコンテンツ aside 本 文 との 関 連 性 が 薄 いコンテンツ <section> 一 連 の 文 章 </section> <article> 記 事 など</article> nav サイト 内 のリンク <nav> 目 次 </nav> <aside> 広 告 等 サイドバー</aside> 見 出 しコンテンツ 章 や 節 のタイトルなどの 見 出 しを 扱 う 要 素 が 含 まれる. 表 3.3: 代 表 的 な 見 出 しコンテンツ 要 素 名 要 素 の 意 味 記 述 例 h1~h6 レベルに 対 応 した 見 出 し hgroup 見 出 しのグループ <h1> 章 のタイトル</h1> <h2> 節 のタイトル</h2> <hgroup> <h1> 章 のタイトル</h1> <h2>サブタイトル</h2> </hgroup> フレージングコンテンツ 段 落 などの 中 に 含 まれるテキストを 表 す.HTML4.x までは,インライン 要 素 として 扱 われていたものが 多 い. 62

77 3.2. コンテンツモデル 表 3.4: 代 表 的 なフレージングコンテンツ 要 素 名 要 素 の 意 味 記 述 例 b 他 の 文 章 とは 区 別 する <b>キーワードや 製 品 名 </b> br 折 り 返 し 位 置 ( 改 行 ) 文 章 <br> em 強 調 する <em> 強 調 する 文 章 </em> mark ハイライト <mark>ハイライトする 文 書 </mark> 埋 め 込 みコンテンツ HTML 以 外 のところからの 情 報 を 扱 うコンテンツを 含 む. 画 像 ファイルやビデオファ イルなどがこれにあたる. 表 3.5: 代 表 的 な 埋 め 込 みコンテンツ 要 素 名 要 素 の 意 味 記 述 例 img 画 像 ファイル <img src=" 画 像 のURI" alt="キーワード"> audio 音 声 ファイル video 動 画 ファイル <audio src="ファイルのuri" autoplay controls> <vieo src="ファイルのuri" autoplay controls> インタラクティブコンテンツ ユーザーが 操 作 できるコンテンツを 含 む.インタラクティブコンテンツにあたるもの は 対 応 しているブラウザが 少 ないため, 本 書 では 割 愛 する. コンテンツモデルとブロック 要 素 インライン 要 素 の 関 係 : HTML5 では,ブロック 要 素 とインライン 要 素 の 区 別 はほとんどなくなって いるが,ブロック 要 素 はグループ 化 されるコンテンツの 時 に,その 機 能 を 発 揮 する.CSS( 第 2 章 ) で 文 書 のレイアウトを 決 める 上 では,コンテンツ モデルとともに,ブロック 要 素 とインライン 要 素 の 違 いも 十 分 に 理 解 して おく 方 が 良 い. 63

78 第 3 章 HTML5 3.3 HTML5 で 推 奨 されるレイアウト 表 のレイアウト かつては, 表 をレイアウトを 調 整 するためのテクニックとして 用 いたり, 属 性 を 変 え ることで 表 のレイアウトを 変 えたりしていた.しかし,HTML5 では, 罫 線 を 含 め,ほ とんどをCSS で 記 述 するように 推 奨 されている 汎 用 ブロック 化 要 素 (div) を 使 う HTML の 文 法 として 規 定 されていない 文 章 のグループに 対 する 意 味 付 けや, 異 なる 言 語 での 表 記 を 特 定 の 文 章 グループに 対 して 行 いたいときにdiv 要 素 を 用 いる.また, CSS によって 表 示 を 変 えたい 場 合 などにも 用 いる. div 要 素 は 本 来 意 味 を 持 たない 要 素 であるため,グローバル 属 性 のid 属 性 やclass 属 性 などを 使 って, 区 分 をつけなければならない. 例 えば, 文 章 を 記 述 するうえで, 序 論 部 分, 本 論 部 分, 結 論 部 分 にCSS で 表 示 を 変 えたい 場 合 には, <div id="introduction"> 序 論 部 の 文 章 </div> <div id="body"> 本 論 の 内 容 </div> <div id="conclusion"> 結 論 の 文 章 </div> というように 記 述 することもできる. div 要 素 は 主 にCSS によって 文 章 のレイアウトを 指 定 する 場 合 に 使 うが,HTML5 で 新 たに 加 わったセクショニングコンテンツ(section 要 素,header 要 素 など) が 追 加 され ているため,div 要 素 をそうしたセクショニングの 名 称 を 付 ける 場 合 には 使 わない 方 が 良 い.なお,セクショニングコンテンツに 対 応 していなブラウザに 対 してはJavaScript を 用 いて, 要 素 を 定 義 する 方 法 もある. むしろ,セクショニングコンテンツなどが 適 している 場 合 は,div を 使 わないほうが よいだろう. 演 習 3-2 原 子 力 発 電 所 の 是 非 について 論 じる 文 章 を 作 成 し,その 文 章 の 内 容 の 本 論 序 論 結 論 部 分 をそれぞれdiv 要 素 で 囲 め. 64

79 3.3. HTML5 で 推 奨 されるレイアウト 図 3.2: div 要 素 を 使 ったカラム 構 造 セクショニングコンテンツを 用 いたレイアウトの 作 成 第 2 章 で 作 成 した,div 要 素 を 用 いたレイアウトをカラム 構 造 という.HTML5 では, 意 味 合 いがセクショニングコンテンツの 要 素 に 対 応 していれば,div 要 素 ではなく,セ クショニングコンテンツにあたる 要 素 を 用 いることができる. 図 3.2 はdiv 要 素 でレイアウトを 作 成 した 場 合 であるが, 図 3.3 はdiv 要 素 を 使 わず, セクショニングコンテンツをCSS で 変 更 しても 同 じ 図 を 作 ることができる. ただし,HTML5 では,レイアウトすべてをセクショニングコンテンツで 作 成 するこ とを 推 奨 しているわけではない.HTML5 の 要 素 にない 意 味 合 いを 持 つ 場 合 は, 対 応 す る 意 味 をid 属 性 やclass 属 性 で 示 したうえで,div 要 素 で 作 成 するべきであろう. 演 習 3-3 header 要 素,nav 要 素,section 要 素,aside 要 素,footer 要 素 を 用 いて, 図 3.3 のようなカラム 構 造 のページを 作 成 しなさい. 65

80 第 3 章 HTML5 図 3.3: セクショニングコンテンツを 用 いたカラム 構 造 汎 用 的 な 範 囲 の 設 定 HTML の 文 法 として 規 定 されていない 単 語 のグループに 対 する 意 味 付 けや, 異 なる 言 語 での 表 記 を 特 定 の 単 語 に 対 して 行 いたいときにspan 要 素 を 用 いる.また,CSS よっ て 表 示 を 変 えたい 場 合 などにも 用 いる. div 要 素 と 同 様 に,グローバル 属 性 であるid 属 性 や,class 属 性,lang 属 性 を 用 いて, その 意 味 付 けや,CSS による 表 記 の 変 更 を 指 定 する. 3.4 HTML5 の 拡 張 性 前 述 したようにHTML5 はHTML の 文 法 上 の 意 味 合 いを 示 した 狭 義 のものと,Web アプリケーションとしての 意 味 合 いを 示 す 広 義 のものが 存 在 する. 特 に, 広 義 のHTML5 は,ブラウザ 上 で 様 々なアプリケーションを 提 供 できるようになると 期 待 されている. Web デザイナやWeb アプリケーションの 開 発 を 目 指 す 場 合 は,HTML5,CSS の 次 期 バージョンのCSS3,および, 第 4 章 で 扱 うJavaScript などをより 専 門 的 に 勉 強 する 必 要 があるだろう. 66

81 第 4 章 JavaScriptによる 動 的 なWeb ページ 4.1 JavaScript の 特 徴 と 本 章 の 注 意 プログラムとは コンピュータは, 人 間 が 記 述 した 指 令 書 がなければ 動 かせない.しかし,コンピュー タが 認 識 できるデータは 基 本 的 には2 値 データ,つまり0か1であって, 人 間 が 直 接 指 令 書 を 書 くのは 難 しい. そこで,まずは 人 間 が 普 段 使 う 言 葉 に 近 い 形 で 指 示 書 を 書 き, 後 でコンピュータが 理 解 できる 形 に 変 換 することが 多 い. 人 間 側 に 優 しい 指 示 書 の 書 法 のひとかたまりをプログラム 言 語 という.プログラム 言 語 は, 用 途 によってさまざまなものが 存 在 する. また,プログラム 言 語 を 使 って 書 かれた 個 別 の 指 示 書 のことを,プログラムソースと いう.プログラムソースを 機 械 が 直 接 処 理 できる 形 に 変 換 されたものは, 実 行 形 式 プロ グラムという. これらの 用 語 は, 厳 密 に 使 われることもあれば,すべてを プログラム としておお らかに 使 うこともある JavaScript とは JavaScript は,NetscapeCommunications 社 が 開 発 した,Web ブラウザで 使 えるプ ログラミング 言 語 である.SunMicrosystems が 作 ったプログラムJava に 似 た 点 は 多 いが, 直 接 の 互 換 性 は 無 い. 従 って,JavaScript の 短 縮 系 としてJava という 言 葉 を 使 うのは 正 しくない. JavaScript は, 人 間 がわかるように 記 述 したプログラムソースを, 機 械 にわかるよう に 前 もって 変 換 (コンパイル) することなく 利 用 する, スクリプト 型 と 呼 ばれる 言 語 67

82 第 4 章 JavaScript による 動 的 なWeb ページ である.このため,スクリプト 言 語 は, 簡 易 プログラム 言 語 とも 呼 ばれる.なお,スク リプト 言 語 で 作 成 されたプログラムは,スクリプトと 呼 ばれる. JavaScript を 利 用 すると,Web ページの 使 用 感 を 向 上 できるため, 今 ではいろいろ なWeb サイトで 多 用 される.また,Google マップに 代 表 されるような, 柔 軟 なWeb ページ 構 築 が 可 能 なため,2011 年 現 在,Web ページ 構 築 に 必 須 の 技 術 である. しかし,セキュリティ 上 の 問 題 で,JavaScript をあえて 動 かさないように 設 定 したコ ンピュータも 多 いので,JavaScript でページを 構 築 する 場 合 は,JavaScript の 機 能 を 使 わないユーザーに 対 する 配 慮 が 望 まれる. JavaScript にはさまざまな 機 能 が 用 意 されているが, 紙 数 の 関 係 上, 本 書 ではごく 基 礎 的 な 概 念 の 理 解 のみ 目 指 した. 本 書 でJavaScript に 興 味 を 抱 いた 読 者 は, 積 極 的 に 参 考 書 を 手 にとって 頂 きたい Web ブラウザとバージョン 問 題 JavaScript によって 書 かれたスクリプトが,それを 呼 び 出 したWeb ブラウザ 上 でど のように 表 示 されるかは,そのWeb ブラウザの 種 類 やバージョンに 依 存 する.このた め,スクリプト 製 作 者 の 思 い 通 りに 表 示 されるとは 限 らない. JavaScript を 使 用 する 場 合 は, 表 示 確 認 したWeb ブラウザの 種 類 とバージョンを 明 記 する 配 慮 が 必 要 である.また, 多 くのシェアを 持 つWeb ブラウザやバージョンに 可 能 な 限 り 対 応 するよう, 日 頃 から 複 数 のWeb ブラウザを 使 い, 実 際 に 確 認 する 姿 勢 が 必 要 である この 章 全 体 にわたる 注 意 事 項 (1) 本 章 では, 二 重 括 弧 は 入 力 すべき 記 号 の 一 部 ではなく, 入 力 すべき 文 字 列 と そうでない 文 字 列 の 境 界 を 表 す 区 切 り 記 号 の 意 味 しか 持 たない. 実 際 に 記 述 する 場 合 は, 二 重 括 弧 を 省 いて 入 力 すること. (2) プログラム 言 語 はどんな 些 細 な 入 力 ミスがあっても 実 行 されない.スペルミスや 記 号 の 脱 落 には 厳 重 に 注 意 すること.メッセージやコメントなど 人 間 が 読 むことを 前 提 にした 部 分 を 除 いてすべて 半 角 入 力 を 徹 底 すること.JavaScript の 構 文 中 に 誤 りがある 場 合,どの 部 分 でどのような 誤 りがあるか 教 えてくれるブラウザもあ 68

83 4.2. JavaScript の 書 き 方 の 基 礎 るが,そうでない 場 合 はJavaScript の 構 文 をチェックするツール(チェッカー) な どを 利 用 するとよい. 4.2 JavaScript の 書 き 方 の 基 礎 JavaScript では, 独 特 の 用 語 や 書 法 が 登 場 する. 次 節 以 降 の 理 解 を 容 易 にするため, ごく 基 礎 的 な 内 容 をまとめておく オブジェクトの 概 念 JavaScript を 利 用 する 上 で,いくつかの 必 須 の 概 念 を 説 明 する. (1) オブジェクト JavaScript をはじめ, 現 代 のプログラム 言 語 では, 操 作 や 管 理 の 対 象 となるあらゆる データの 集 まりをオブジェクト( 物 ) として 捉 える.あるオブジェクトに 対 し,どのよ うな 種 類 か(プロパティ),どのようにふるまうか(メソッド) を 定 義 した 指 令 の 集 合 と してプログラムを 構 築 する. (2) プロパティ( 属 性 ) オブジェクトがどのような 種 類 であるかを 示 す 目 印 が,プロパティ( 属 性 ) である.オ ブジェクトと 共 に 指 定 する.プロパティ( 属 性 ) の 記 述 を 省 略 できる 場 合 もあるが, 可 能 な 限 り 明 記 することが 望 ましい. (3) メソッド( 処 理 ) あるオブジェクトをどのように 取 り 扱 うか,どのように 動 作 させるかを 示 す 指 針 が, メソッド( 処 理 ) である.ユーザーがいちいち 自 作 しないですむように,オブジェクト があらかじめ 内 蔵 している. (4) 変 数 数 値 や 文 字 列 を 入 れるために,ユーザーが 自 由 に 設 定 できる 入 れ 物 のことである. 変 数 には, 必 ずユーザーが 名 前 を 指 定 しなければならない.ただし, 変 数 の 名 前 は, JavaScript であらかじめ 使 用 されているもの( 予 約 語 ) と 同 一 のものを 指 定 できない.ま た, 数 字 ではじまる 名 前 も 指 定 できない. (5) 文 ( 命 令 文 ) JavaScript で 処 理 させるための, 命 令 単 位 である.1 行 で 終 わる 必 要 はなく, 複 数 行 にわたって 書 いてもかまわないが, 一 文 の 最 後 には 必 ずセミコロン ; が 必 要 である. 69

84 第 4 章 JavaScript による 動 的 なWeb ページ 宣 言 今 から 記 述 するものが 何 の 言 語 によるものなのかを, 指 定 する 必 要 がある.この 指 定 を 宣 言 という.プログラム 言 語 により 宣 言 の 方 法 は 異 なる. (1) 宣 言 script 要 素 で 括 られた 間 の 記 述 が,JavaScript であることの 宣 言 となる. (2) 属 性 script 要 素 には 必 ず 属 性 を 持 たせる.ここでは,type 属 性 を 記 述 する. 例 ) <script type="text/javascript"> </script> (3)JavaScript 未 対 応 への 配 慮 JavaScript 未 対 応 のWeb ブラウザのために,スクリプト 全 体 を <!-- と // --> でコメント 扱 い(コメントアウト) する.コメントアウトしないとスクリプトがHTML の 一 部 として 画 面 に 表 示 され, 見 映 えにも 影 響 する. 例 ) <script type="text/javascript"> <!-- // --> </script> JavaScript に 共 通 する 書 法 (1) HTML 要 素 以 外 の 文 字 列 を 入 力 する 時 は,その 前 後 に 必 ずダブルクォーテーショ ン やシングルクォーテーション をつける. (2) 個 々の 命 令 文 の 最 後 には, 必 ずセミコロン ; を 打 つ. 例 ) <script type="text/javascript"> <!-- var mydate = new Date(); // --> </script> (3) ある 種 の 記 号 は 必 ずペアになるようにしなければならない. 記 述 漏 れがあると,Web ページ 全 体 が 正 常 に 動 作 しない.また, 記 号 は 必 ず 両 方 とも 半 角 で 入 力 しなけれ ばならない. 例 ) ( ), < >, " ", 70

85 4.3. 変 数 の 基 礎 その 他, 特 に 考 慮 すべき 点 JavaScript に 限 らず,プログラム 作 成 時 には, 後 日 の 修 正 時 のことを 考 え, 誰 がみて もプログラム 作 成 者 の 意 図 が 分 かるように, 明 白 に 記 述 することが 必 須 である.このた めに 以 下 の 注 意 は 必 ず 守 ること. (1) 命 令 文 の 入 力 時 は, 以 下 のことに 注 意 する. 大 文 字, 小 文 字 を 規 則 正 しく 統 一 する. 改 行 やインデントを 適 切 に 行 う. 見 やすくスペースを 空 ける. (2) JavaScript 内 で,コメント 扱 い(コメントアウト) した 部 分 は,JavaScript の 構 文 として 処 理 されず 無 視 される.これを 利 用 してスクリプト 内 部 の 好 きな 場 所 に, 後 日 のメンテナンスに 必 要 なコメントを 入 れることができる.コメントを 指 定 す るには,コメント 記 号 // か /* */ を 使 う.コメント 記 号 // はその 行 のそれ 以 降 がコメント 扱 いされる.したがって 複 数 行 に 渡 るコメントを 書 くに は 行 数 と 同 じ 数 のコメント 記 号 が 必 要 である.コメント 記 号 /* */ はこの2 つの 記 号 に 挟 まれた 部 分 がコメントとなる.よって 複 数 行 に 渡 る 長 いコメントで も1 組 のコメント 記 号 で 済 む. 適 切 なコメントは, 後 日 のメンテナンスを 容 易 に する. 必 要 にして 十 分 なコメントを 習 慣 づけることが 望 ましい. 例 ) <script type="text/javascript"> // <script>と</script>の 間 に 具 体 的 な 命 令 文 を 記 述 する. </script> 例 ) <script type="text/javascript"> /* <script>と</script>の 間 に 具 体 的 な 命 令 文 を 記 述 する. もちろん 命 令 文 は 一 行 でも 複 数 行 でも 構 わない.*/ </script> 4.3 変 数 の 基 礎 変 数 とは 変 数 とは, 数 値 や 文 字 列 などをプログラムの 中 で, 一 時 的 に 保 存 するための 箱 のよう なものである.この 変 数 という 箱 は,ひとつのプログラムの 中 で 好 きなだけ 指 定 できる. 従 って,どの 数 値 や 文 字 列 がどの 変 数 に 入 るのかがわかるように, 名 前 をつける 必 要 がある.プログラム 中 で 扱 う 変 数 がたった1つでも, 変 数 の 名 前 は 必 要 である. 71

86 第 4 章 JavaScript による 動 的 なWeb ページ 変 数 を 用 いるときにはあらかじめ 使 用 する 変 数 の 名 前 とデータ 型 を 決 めて 変 数 宣 言 するのが 一 般 的 であるが,JavaScript の 場 合, 保 存 するデータによって 自 動 的 に データ 型 を 割 り 当 てるので,データ 型 は 気 にしなくてよい.また, 変 数 の 宣 言 も 必 須 で はない.ただし, 値 を 決 めていない 変 数 をいきなり 参 照 するとエラーとなるので, 新 顔 の 変 数 を 使 うときは 最 初 に 値 を 決 めなくてはならない. 変 数 を 宣 言 するには, var を 用 いる., で 区 切 って 複 数 の 変 数 を 同 時 に 宣 言 するこ ともできるし, 変 数 の 値 を 同 時 に 指 定 することも 出 来 る( 表 4.1). なお,JavaScript で 書 くスクリプト 文 は, 必 ずセミコロン ; で 終 える. 表 4.1: 変 数 宣 言 の 記 載 例 varnumvar; 基 本 型 vara,b,c; 複 数 を 同 時 に 宣 言 varnumvar= 1 ; 宣 言 と 同 時 に 値 を 指 定 変 数 の 値 は 随 時 変 更 できる. 変 数 の 値 を 指 定 することを 代 入 ということがある. 代 入 文 の 書 式 は 以 下 のようである. 変 数 名 = 値 または 値 を 求 める 数 式 メソッド; 代 入 文 が 実 行 されると, 右 辺 に 書 かれた 値 または 値 を 決 めるための 数 式 や,メソッド の 処 理 結 果 が 左 辺 の 変 数 の 値 として 保 存 される ディスプレイに 出 力 する 本 項 では, 変 数 の 理 解 のために, 特 定 の 文 字 列 をディスプレイに 出 力 する 方 法 を 学 ぶ. 文 字 列 やファイルなどのふるまいは,オブジェクト document で 取 り 扱 う.こ のため, document はJavaScript で 最 も 頻 繁 に 使 われる.ドキュメントをディスプレ イに 出 力 させるためには,メソッド write を 組 み 合 わせて 使 う. オブジェクト document と write をドット. でつないで 組 み 合 わせ, () の 間 に 指 定 した 変 数 を 出 力 する. 書 式 :document.write(); 例 :document.write( ようこそ ); 記 述 する 上 で, 注 意 するポイントは 次 の 点 である. 文 字 を 直 接 出 力 するには,その 文 字 の 前 後 を でくくる. 72

87 4.4. if 文 の 基 礎 ダブルクォーテーション でくくられた 間 の 文 字 列 は,JavaScript の 文 法 や 数 値 を 記 述 したものではなく, 文 字 列 であると 宣 言 するために 使 われる. 文 字 と 変 数 を 続 けて 表 示 するには,その 間 に + をつける. 加 算 演 算 子 + は,その 前 後 を 加 算 する 時 に 使 われる. 文 字 列 と 文 字 列, 文 字 列 と 数 値 の 間 に + が 使 われると,その 前 後 を 文 字 列 としてつなぎあわせる. 文 字 と 同 様 の 書 式 でHTML 要 素 を write メソッドと 組 み 合 わせて 使 用 できる. 当 然 のことであるが,HTML 要 素 はブラウザ 上 では 表 示 されず,その 要 素 が 指 定 す る 処 理 内 容 だけが 結 果 としてブラウザ 上 に 表 現 される. 演 習 4-1 ソース 集 のスクリプトを 入 力 し,ファイルに 保 存 したうえで ブラウザから 開 きなさい. 演 習 4-2 演 習 4-1 のスクリプトを 書 き 換 えてメッセージが 2 行 に 表 示 されるようにしなさい.(ヒント: 改 行 はHTML 要 素 で) 4.4 if 文 の 基 礎 if 文 とは ある 条 件 に 沿 って 処 理 をするか,しないか,する 場 合 にどこまで 分 岐 させるか, 等 を 指 示 するために 利 用 する 文 をif 文 と 呼 んでいる. 条 件 によって 処 理 の 書 き 方 を 変 える ことができる. (1) 基 本 形 (2) 簡 単 な 分 岐 A. ある 条 件 を, if() で 指 定 する. B. 続 いてその 条 件 に 合 致 した 場 合 に 実 行 すべき 処 理 を 記 述 する. A. ある 条 件 を,if() で 指 定 する. B. 続 いてその 条 件 に 合 致 した 場 合 に 実 行 すべき 処 理 を 記 述 する. C. 条 件 が 成 立 しなかった 場 合 の 処 理 をelse 以 降 で 記 述 する. 例 )if( 条 件 A) 条 件 に 合 致 した 場 合 の 処 理 B; else 条 件 に 合 致 しなかった 場 合 の 処 理 C; 73

88 第 4 章 JavaScript による 動 的 なWeb ページ なぜif( 条 件 ) の 部 分 の 最 後 にはセミコロン ; が 入 力 されていないのか, 考 えて みよう! (3) 条 件 のさらなる 分 岐 A. ある 条 件 を, if() で 指 定 する. B. その 条 件 に 合 致 した 処 理 を 記 述 する. C. それ 以 外 の 条 件 を, elseif() で 指 定 する. D. その 条 件 に 合 致 した 処 理 を 記 述 する. E. 必 要 に 応 じてCとDを 繰 り 返 す. F. これまでに 指 定 した 条 件 すべてに 当 てはまらない 場 合 の 処 理 を 最 後 に else で 記 述 する. 例 ) if( 条 件 A) 処 理 B; elseif( 条 件 C) 処 理 D; Else 処 理 F; 入 力 を 促 すボックスを 表 示 させる 本 項 では,if 文 を 理 解 するために,ユーザーの 入 力 を 促 すメソッド prompt を 使 う. 書 式 : 変 数 名 =prompt( 入 力 をうながす 文 字 列, 初 期 値 ); 初 期 値 は 空 白 ( だけ)でも 構 わない 例 :myname=prompt( お 名 前 を 教 えて 下 さい., 匿 名 希 望 ); 演 習 4-3 ソース 集 のスクリプトを 入 力 し,ファイルに 保 存 したうえで ブラウザから 開 きなさい.また, 文 字 を 入 力 した 時, 入 力 せずに OK だけをクリックした 時,キャンセルを 押 した 時 でそれぞれ 結 果 が 変 わることを 確 かめなさい. 演 習 4-4 演 習 4-3 のスクリプトを 利 用 して,Web ページを 開 いたユーザーに 年 齢 を 尋 ね,18 歳 以 上 なら ようこそ,18 歳 未 満 なら 未 成 年 は 閲 覧 禁 止 です のメッセージが 出 るようにしなさい. なお ユーザーが 年 齢 を 入 力 しなかった 場 合 は 一 律 17 歳 にしなさい. 74

89 4.5. システム 日 付 の 基 礎 乱 数 でサイコロを 振 る 本 項 ではWeb ページに 変 化 を 付 けられる Math オブジェクトの random メソッ ドを 紹 介 する. Math.random メソッドは0 以 上 1 未 満 の 実 数 ( 小 数 点 のついた 数 ) を 発 生 する.これを6 倍 して Math オブジェクトの floor メソッドで 切 り 捨 てると, 0 から5までの 値 が 等 しい 確 率 で 現 れるサイコロになる. 例 :Math.floor(Math.random()*6); 演 習 4-5 ソース 集 のスクリプトを 入 力 し,ファイルに 保 存 したうえで ブラウザから 開 きなさい. 演 習 4-6 演 習 4-5 のスクリプトを 書 き 換 えて,ユーザーの 予 想 を 聞 かずに 単 に サイコロの 目 は です とだけ 表 示 するようにしなさい. 4.5 システム 日 付 の 基 礎 システム 日 付 とは あるプログラムを 動 かしているコンピュータが, 内 部 で 持 つ 日 付 のことをシステム 日 付 という.サーバでプログラムを 動 かしている 場 合 のシステム 日 付 は,サーバが 稼 働 す るコンピュータの 日 付 となる. 通 常 は,そのコンピュータを 初 期 設 定 した 地 域 の 標 準 時 間 が 取 得 される.しかし,コ ンピュータの 日 付 が 誤 っていたり, 別 の 標 準 時 間 が 適 用 される 地 域 で 利 用 されたりする 場 合 など, 必 ずしも 実 際 の 日 付 と 同 じ 日 付 が 取 得 されるとは 限 らない. ディスプレイや 印 刷 などの 表 示 を 伴 うプログラムでは,しばしばそのプログラムの 内 容 とともに 日 付 を 表 示 することがある.このため,システム 日 付 の 取 得 はプログラム 言 語 を 問 わず 頻 繁 に 使 用 される システム 日 付 を 取 得 する (1) オブジェクト Date を 生 成 し, var で 指 定 する 変 数 名 に 格 納 する. 75

90 第 4 章 JavaScript による 動 的 なWeb ページ 書 式 :var 変 数 名 =newdate(); 例 :varmydate=newdate(); (2) オブジェクト Date で 得 た 変 数 から, 必 要 な 情 報 を 得 るメソッドを 指 定 する. メソッド 名 は, 生 成 した Date を 格 納 した 変 数 名 と 得 たいデータのmethod をドット. で 結 んだものとなる. 表 4.2: オブジェクト Date とよく 利 用 されるメソッド 名 月 getmonth() 時 間 分 秒 gethours() getminutes() getseconds() 演 習 4-7 (1) あなたが 実 装 テストに 使 うブラウザの 正 式 名 称 と,そのバージョンを 確 認 しなさい. (2) ソース 集 のJavaScript ソースを 入 力 し, 実 行 結 果 を 確 かめなさい. なお, 入 力 の 際 には // ブラウザの 正 式 名 称 と,そのバージョン// と 書 かれた 部 分 は,(1) の 結 果 と 置 き 換 えなさい. 演 習 4-8 前 問 の(2) のソースを 修 正 して 午 前 1 時 から4 時 までは 夜 更 かしは 体 に 毒 ですよ! とメッセージが 出 るようにしなさい. 4.6 配 列 の 基 礎 配 列 とは 取 り 扱 う 変 数 の 個 数 が 多 くなると, 変 数 名 を 定 義 するだけでも 大 変 なので 配 列 を 使 う. 配 列 とは, 変 数 を 順 番 に 入 れておくために, 連 番 がふられた 整 理 棚 のようなもの である. 棚 の 引 き 出 し1つごとに,1 つの 変 数 を 入 れることができる. 引 き 出 しの 連 番 は0からはじまる 整 数 の 番 号 である. 変 数 を 取 り 出 す 際 はその 配 列 名 と 引 き 出 しについている 連 番 で 指 定 する. 連 番 は [ ] 内 で 指 定 される. 連 番 の 最 初 は0であるため, 変 数 が 数 字 である 場 合 などは, 注 意 が 必 要 である. 76

91 4.7. 繰 り 返 しの 基 礎 配 列 の 指 定 の 基 礎 配 列 を 指 定 するにはオブジェクト Array を 生 成 し, 定 義 した 配 列 名 に 対 し 変 数 を 定 義 していく. 書 式 : 配 列 名 =newarray( 変 数 ); 例 :weeks=newarray( 日, 月, 火, 水, 木, 金, 土 ); 演 習 4-9 ソース 集 のスクリプトを 入 力 し, 動 作 を 確 認 しなさい. システム 日 付 の 取 得 は4.5 節 を 参 照 のこと. 演 習 4-10 配 列 と 乱 数 を 使 ってお 昼 に 何 を 食 べるかランダムに 決 めてくれる スクリプトを 作 りなさい. 例 えば 今 日 のお 昼 は のような 文 を 表 示 して にはページを 更 新 するたびにランダムにメニュー が 入 るようにしなさい. 4.7 繰 り 返 しの 基 礎 for 文 の 基 礎 for 文 は, 繰 り 返 し 処 理 を 制 御 するときに 用 いる. 繰 り 返 しの 制 御 はカウンタという 変 数 を 用 いて 行 う.カウンタはある 初 期 値 からスタートし 条 件 が 満 たされる 間 のみ, { } 内 で 指 定 された 処 理 を 行 う.1 回 処 理 するごとに, 更 新 式 に 従 ってカウンタの 値 が 変 更 され, 条 件 式 が 満 足 されれば 再 度 { } 内 で 指 定 された 処 理 を 行 う. 再 判 定 の 結 果 が 条 件 を 満 たす 限 り 処 理 は 続 く.このため, ループ 処 理 と 呼 ばれる. If 文 と 同 様,プログラム 言 語 の 種 類 に 関 係 なく 多 用 される. 書 式 :for( 初 期 条 件 ; 条 件 式 ; 更 新 式 ){ 繰 り 返 し 処 理 の 詳 細 ; } 例 :vari,j; for(i=1; i =9; i=i+1){ j=1*i; document.write("1 "+i+"="+j+"<br>"); } 77

92 第 4 章 JavaScript による 動 的 なWeb ページ i=i+1 は 一 見 不 思 議 な 構 文 に 見 えるが, 現 在 の i の 値 に 1 加 えて 新 しい i の 値 として 保 存 しなさいという 意 味 である.よく 使 われるので 簡 潔 に i++ と 記 されることが 多 い. ++ はインクリメントという. 演 習 4-11 上 の 例 を 参 考 にして1 1から9 9までの 九 九 をすべて 表 示 する スクリプトを 作 りなさい. 4.8 form 要 素 を 用 いた 応 用 form とJavaScript の 組 み 合 わせ HTML の 要 素 form は,Web ページ 上 でユーザーが 選 択 編 集 した 情 報 をサーバ に 送 信 する 時 に 使 われる.form 要 素 にJavaScript を 組 み 合 わせると,Web ページの 使 用 感 はさらに 向 上 する form 及 び 使 用 するオブジェクト 等 (1)form の 構 文 form 要 素 は, 入 力 や 出 力 をここで 行 う ということを 明 確 にするための 枠 (エリア) を 用 意 するようなものである. 枠 自 体 に 対 する 細 かな 設 定 は,form 要 素 に 対 するプロ パティやメソッドで 指 定 するが, 省 略 しても 構 わない. 枠 の 中 に 何 を 表 示 させるかなど の 処 理 は,<form>と</form>の 間 に 記 述 された 処 理 に 丸 投 げすることが 多 い. 書 式 :<form> 処 理 内 容 </form> (2)select 要 素 の 構 文 select は 商 品 の 注 文 など 複 数 のものから1つを 選 ぶ 選 択 欄 を 構 成 するときに 使 う. form で 作 った 枠 に 対 し, 用 意 した 選 択 肢 からユーザーに 選 択 させることができる. onchange 属 性 は3.8 節 で 詳 しく 述 べるイベントハンドラのひとつで,これを 指 定 する ことでユーザーが 選 択 すると 同 時 にその 結 果 が 画 面 に 反 映 される. 本 項 では, 選 択 肢 の 中 から 選 択 された 番 号 を this.selectedindex で 取 得 し, 選 択 肢 の 何 番 目 の 番 号 かをvalue 属 性 に 与 えたうえで,さらにその 内 容 を 通 知 ウィンドウで 知 ら せるためのプロパティ alert に 渡 す. 78

93 4.8. form 要 素 を 用 いた 応 用 書 式 :<form> <select onchange="alert(this[this.selectedindex].value)"> 選 択 肢 リスト </select> </form> (3)option 要 素 の 構 文 option は,form 要 素 とselect 要 素 で 準 備 した 選 択 欄 の, 選 択 肢 を 指 定 する. プロパティ value で,スクリプト 側 で 扱 うためのデータを 指 定 し, 選 択 肢 として 表 示 させる 文 字 列 を<option>と</option>の 間 に 書 く. option は,1 要 素 に1 選 択 肢 を 指 定 する. 従 って, 用 意 する 選 択 肢 の 数 だけ,option 要 素 を 用 いる. 以 下 の 書 式 は, select と 組 み 合 わせた 時 の 例 である. 書 式 :<form> <select onchange="alert(this[this.selectedindex].value)"> <option value="スクリプト 側 の 内 容 1"> 表 示 させる 文 字 列 1</option> <option value="スクリプト 側 の 内 容 2"> 表 示 させる 文 字 列 2</option> <option value="スクリプト 側 の 内 容 n"> 表 示 させる 文 字 列 n</option> //option は 必 要 なだけ 行 を 追 加 する// </select> </form> 演 習 4-12 ソース 集 のスクリプトを 入 力 し,ファイルに 保 存 したうえで ブラウザから 開 き, 動 作 を 確 認 しなさい. (4)function の 構 文 function ( 関 数 ) とは, 引 数 として 受 け 取 った 値 を 元 に, 決 められた 処 理 を 行 い, 得 られた 結 果 を 戻 り 値 として 返 すためのオブジェクトである. 引 数 処 理 戻 り 値 を ユーザーが 自 由 に 定 義 できるため,スクリプトの 管 理 を 容 易 にする 目 的 で 用 いられる. function には 名 前 をつけ,その 直 後 に () をつける. 命 令 群 は, { と } の 間 に 書 く. 書 式 :function 命 令 群 名 (){ 命 令 群 } (5)parseFloat の 構 文 79

94 第 4 章 JavaScript による 動 的 なWeb ページ スクリプト 内 の 別 の 処 理 から 渡 されるデータの 型 は, 文 字 列 の 場 合 や 数 値 の 場 合 な どがある. 数 値 型 にも 整 数 型 と 実 数 ( 浮 動 小 数 ) がある.この 型 を 異 なって 受 け 取 ると, スクリプトは 期 待 通 りには 動 かないことがある.このとき, 文 字 列 は 実 数 に 変 換 される 必 要 がある. ここでは,オブジェクト document で 取 得 した 文 字 列 を 数 値 に 変 換 する 時 に 使 う. 書 式 : 変 数 名 =parsefloat( 変 換 対 象 の 文 字 列 ); 例 : xx=parsefloat(document.form1.text1.value); (6)input の 構 文 form オブジェクトで 作 った 枠 に,ユーザーに 入 力 を 促 す 場 合 はinput 要 素 を 使 う. input にはいくつかの 属 性 があり, 通 常 は type とともに 使 う. type を 省 略 した 時 は,デフォルトの 値 である text が 適 用 される. 属 性 の 値 は,ダブルクォーテー ション で 囲 む. 書 式 :<input type=" 入 力 の 型 を 指 定 "> input では, type の 他 に form をより 便 利 に 使 うための 属 性 が 用 意 されてい る. 例 えば, 入 力 されたデータを 変 数 に 渡 したい 場 合 は, name 属 性 で 変 数 名 を 指 定 する. 変 数 名 は で 囲 む. 書 式 :<input type=" 入 力 の 型 を 指 定 " name=" 変 数 名 "> マウスでクリックするボタンを 作 成 する 場 合 は,type 属 性 の 値 に button を 指 定 する.ボタンに 表 示 する 文 字 をvalue 属 性 の 値 として 指 定 する. 押 された 後 の 処 理 を onclick 属 性 で 指 定 する.onclick 属 性 もイベントハンドラである.いずれの 値 も で 囲 むことを 忘 れてはならない. 書 式 :<inputtype= 入 力 の 型 を 指 定 value= ボタンの 上 に 表 示 する 文 字 列 onclick= クリックされた 時 の 処 理 を 指 定 > 演 習 4-13 ソース 集 のスクリプトを 入 力 し,ファイルに 保 存 したうえで ブラウザから 開 き, 演 習 4-12 との 動 作 の 違 いを 確 認 しなさい. 80

95 4.9. イベントハンドラの 基 礎 4.9 イベントハンドラの 基 礎 イベントハンドラとは JavaScript は,すべてのものをオブジェクトとして 扱 うことはすでに 述 べた.コン ピュータ 上 で 行 われる 動 作 もすべてオブジェクトである.これらのオブジェクトを 特 に イベントと 呼 ぶ. 例 えば,マウスがクリックされることがイベントである. 発 生 したイベントに 対 して 何 らかの 処 理 を 行 うための 指 示 コマンド(ハンドラ) を,イベントハンドラという. 先 の 例 では,マウスのクリックに 対 応 する 動 作 の 指 示 が,イベントハンドラである. このようにイベントハンドラは,リアルタイムで 処 理 したい 時 に 使 われる.イベントハ ンドラは, 該 当 するオブジェクトとともに 指 定 する リアルタイム 処 理 関 連 の 指 定 (1)HTML 側 のイベントハンドラOnLoad を 理 解 する HTML の 要 素, body の 要 素 に 対 する 属 性 onload はイベントハンドラである. イベントの 発 生 時 点 は,HTML 文 書 全 体 の 読 み 込 みが 完 了 した 時 点 である.このとき 属 性 値 の 内 容 をスクリプトとして 実 行 する. (2)HTML 要 素 body の 属 性 onload で 指 定 する 関 数 を 宣 言 する 名 前 を 付 けて 関 数 (スクリプト) を 宣 言 するオブジェクト function を 用 いる. 書 式 :function スクリプト 名 ( 必 要 なら 引 数 ){ スクリプトの 内 容 ; } (3) メソッド settimeout これはタイマーをセットするためのメソッドで, 間 隔 は ミリ 秒 単 位 である. 演 習 4-14 ソース 集 のスクリプトを 入 力 し, 動 作 を 確 認 しなさい. if 文 は4.4 節 を,システム 日 付 の 取 得 は4.5 節 を, オブジェクト form は4.8 節 を 参 照 のこと. 81

96 第 4 章 JavaScript による 動 的 なWeb ページ 4.10 ラジオボタンの 基 礎 ラジオボタンの 指 定 の 基 礎 ラジオボタンは, 単 独 または 複 数 の 選 択 肢 に 対 し,その 選 択 をマウス 等 で 指 定 するた めに 使 われる 印 で, 指 定 されると 印 の 中 に 小 さな 印 がつく. オブジェクト Form の 大 枠 の 中 で,input 要 素 のtype 属 性 の 値 として radio を 指 定 する. 手 順 としては,イベントハンドラ onclick で,ラジオボタンがマウス 等 で 指 定 さ れた 時 の 動 作 を 指 定 する.さらに, onclick に alert を 指 定 することで, 確 認 ウィ ンドウを 出 現 させる. なお, Form にname 属 性 を 指 定 することで, 別 に 指 定 したオブジェクト function を 呼 び 出 すことができる.エラー 処 理 などをしたい 時 などに 利 用 される オブジェクト document に 対 するプロパティの 整 理 オブジェクト document には 非 常 に 多 くのプロパティが 存 在 する. 本 節 で 利 用 し たプロパティのみ, 以 下 に 整 理 する. document.location:ブラウザで 表 示 するページを 指 定 する. document.check: チェックしたいメソッド 等 を 指 定 する. 演 習 4-15 ソース 集 のスクリプトを 入 力 してファイルに 保 存 したうえでブラウザ から 開 きなさい.ラジオボタンをクリックし, 動 作 のおかしい 点 を 指 摘 しなさい. 演 習 4-16 ソース 集 のスクリプトを 入 力 し,ファイルに 保 存 したうえでブラウザ から 開 きなさい.ラジオボタンをクリックした 時, 演 習 4-15 との 動 作 の 違 いを 確 認 しなさい 主 な 演 算 子 一 覧 if 文 やfor 文 で 使 用 することのできる 演 算 子 を 以 下 にあげる. 82

97 4.11. 主 な 演 算 子 一 覧 表 4.3: 主 な 演 算 子 一 覧 種 類 演 算 子 算 術 演 算 + - * / % (%は 剰 余 ) インクリメント ++( 変 数 の 値 を1 増 やす) デクリメント --( 変 数 の 値 を1 減 らす) 代 入 演 算 = += -= *= /= %= (a+=1 はa=a+1) 比 較 ==( 等 しい)> < >= <=!=( 等 しくない) 論 理 演 算 &&(ともに 成 り 立 つ) (どちらか1つ 以 上 が 成 り 立 つ)!( 論 理 式 の 否 定 ) 文 字 列 演 算 + += 83

98

99 第 5 章 Webページ 作 成 の 法 的 留 意 点 5.1 Web ページ 作 成 と 法 的 問 題 Web ページは, 個 人 や 団 体 の 意 見 を 不 特 定 多 数 の 人 間 に, 比 較 的 簡 単 に 作 成 発 信 することができる.しかし, 作 成 発 信 が 簡 単 だということは, 何 でもやっていいとい うこととは 全 く 違 う. Web ページ 作 成 には,そのコンテンツが 法 的 に 問 題 を 抱 えないものでなければならな い. 本 章 では,Web ページ 作 成 に 関 係 する 法 的 問 題 について 述 べる.なお 本 章 は,2010 年 9 月 時 点 において,Web ページ 作 成 時 に 注 意 すべき 法 的 問 題 についてまとめたもの である 違 法 行 為 と 不 法 行 為 の 違 い 社 会 で やってはいけないこと やらなければいけないこと と, 合 意 すべきことが 社 会 正 義 にかなう 項 目 は, 法 律 として 制 定 され, 広 く 知 らされる.その 代 表 例 が 刑 法 である. 刑 法 などの 法 律 で やってはいけないこと やらなければいけないこと リス トの 項 目 に 触 れる 行 為 のことを, 違 法 行 為 という. 一 方, 民 法 のいう 故 意 又 は 過 失 に よって 他 人 の 権 利 又 は 法 律 上 保 護 される 利 益 を 侵 害 ( 民 法 709 条 ) する 行 為 のことを, 不 法 行 為 という. 違 法 行 為 に 対 しては 刑 事 罰 が, 不 法 行 為 に 対 してはその 行 為 の 差 止 請 求 や 損 害 に 対 す る 賠 償 請 求 などが 待 っている. 例 えば,Web ページ 作 成 時 に 特 定 の 人 物 などを 傷 つけようとする 意 図 が 無 かったと しても(つまり 過 失 であったとしても), 結 果 的 に 何 らかの 被 害 が 発 生 しなくてもWeb ページ 公 開 の 差 止 が 命 じられる 場 合 がある. 実 際 に 何 らかの 被 害 が 発 生 すれば, 損 害 賠 償 を 請 求 されることなどがある. その 他 にも, 表 現 しようとする 内 容 に 関 連 する 法 律 の 有 無 を 事 前 に 調 査 しなければな らない. 例 えば, 厚 生 労 働 省 で 認 可 された 薬 以 外 の 物 質 に の 病 気 に 効 く などと 85

100 第 5 章 Web ページ 作 成 の 法 的 留 意 点 誤 解 を 招 く 表 現 を 使 うことは 法 律 で 禁 じられている( 薬 事 法 68 条 ). このように,Web ページを 作 成 するという 行 為 には, 気 づかないうちに 違 法 行 為 や 不 法 行 為 を 行 う 可 能 性 が 常 に 潜 んでいる. 法 律 によっては, 刑 事 罰 と 各 種 請 求 の 両 方 を 認 める 場 合 がある.その 代 表 例 が, 著 作 権 法 である. 違 法 行 為 と 不 法 行 為 は 法 学 における 大 きな 研 究 テーマであるが,ごく 簡 単 にまとめる と 以 下 のようになろう. (1) 違 法 行 為 とは,やってはいけない やらなければいけないと 法 制 化 された 行 為 である. (2) 違 法 行 為 と 認 められると, 刑 事 罰 が 科 せられることがある. (3) 不 法 行 為 とは, 人 や 企 業 や 社 会 が 持 つ 利 益 や 権 利 を 侵 害 する 行 為 である. (4) 不 法 行 為 と 認 められると, 行 為 差 止 や 損 害 賠 償 などが 請 求 される インターネットに 関 する 各 国 間 の 法 的 協 調 インターネットは, 世 界 中 からのWeb コンテンツの 提 供 閲 覧 を 可 能 にした.これ らのコンテンツには, 残 念 なことに 違 法 不 法 なデータも 含 まれる.そのデータを 利 用 して 自 分 のコンテンツを 作 り 上 げた 場 合,その 事 実 を 知 っていた( 法 律 用 語 では 悪 意 という) か,あるいは 知 らなかった( 同 じく 善 意 という) かは,ほとんどの 場 合 考 慮 されない.つまり, 善 意 で 使 ったとしても 自 分 もその 違 法 不 法 行 為 を 助 長 したことに なってしまう. しかし, 何 を 違 法 不 法 とするかは, 各 国 の 法 律 によって 時 には 大 きく 異 なる. 従 っ て, 当 該 データが 提 示 されていた 海 外 Web ページに 法 的 問 題 をクリアしています と 書 いてあったとしても,それはそのWeb ページが 置 かれたサーバがある 国 での 法 的 問 題 がクリアされていることを 保 証 しているに 過 ぎない.つまり, 日 本 でもそれが 違 法 ではないとの 保 証 は 何 もない. このため,インターネットの 特 性 をふまえて, 各 国 間 で 共 通 の 問 題 としてサイバー 犯 罪 を 捉 えようとする 試 みがなされてきた.この 試 みは, 少 しずつではあるが, 各 国 間 で の 法 律 面 の 協 調 という 形 で 実 りつつある. 今 後 も 新 しい 条 約 や 法 律 が 制 定 されていくこ とが 十 分 に 予 想 されるので, 常 に 注 意 を 払 い 続 けることが 重 要 である. 国 境 を 簡 単 に 越 えてしまうデジタル データを 自 分 のWeb ページに 取 り 込 む 際 の 注 意 としては, 具 体 的 には 以 下 の3 点 に 集 約 することができよう. 86

101 5.1. Web ページ 作 成 と 法 的 問 題 (1)Web ページに 書 かれた 法 律 問 題 をクリアしています は 全 て 疑 ってかかる (2) 利 用 しようとするデータが 違 法 不 法 なものでないか 必 ず 確 認 する (3) 少 しでも 確 認 のとれないデータは 使 わない 日 本 における 法 整 備 の 動 き インターネットに 関 する 法 的 問 題 は, 今 年 勉 強 したからそれで 十 分 ということには ならない. 例 えば, 日 本 は,2009 年 4 月 1 日, 青 少 年 が 安 全 に 安 心 してインターネッ トを 利 用 できる 環 境 の 整 備 等 に 関 する 法 律 が 施 行 された.これは,いわゆる 出 会 い 系 サイト など 有 害 Web ページから 青 少 年 を 保 護 するために,フィルタリングの 積 極 活 用 を, 公 的 組 織,プロバイダ, 青 少 年 の 保 護 者 に 対 し, 促 進 させることを 目 的 とした 法 律 である. しかも, 技 術 の 発 達 に 従 って 問 題 の 焦 点 も 変 化 する.インターネットを 利 用 してWeb ページを 公 開 する 際 には, 常 に 法 改 正 の 動 向, 新 たに 可 決 された 法 令,その 施 行 に 関 す る 注 意 点 に 常 に 注 意 を 払 う 必 要 がある. これらをまとめると, 以 下 の2 点 に 集 約 することができよう. (1) 法 律 は 常 に 新 しく 作 り 続 けられている (2) 法 律 は 常 に 改 正 され 続 けている 問 題 を 抱 える 年 齢 層 の 拡 大 Web ページ 作 者 やWeb ページアクセス 者 に 関 する 問 題 は, 年 ごとに 増 えているが, それらのトラブルを 起 こす,または 巻 き 込 まれる 人 間 の 年 齢 の 幅 は 広 くなっている. 特 に 未 成 年 者 は 自 分 の 行 為 に 対 し 十 分 な 責 任 を 負 うことができないとみなされるた め,Web ページ 製 作 者 はこれらの 年 代 に 対 する 内 容 や 表 現 方 法 に, 特 段 の 注 意 を 払 う 義 務 がある(5.6.1 参 照 ). 一 方,PC を 使 いこなす 高 年 齢 層 も 多 くなっている. 年 齢 が 高 くなると, 若 い 頃 と 同 様 の 正 常 な 判 断 能 力 の 一 部 が 失 われる 人 も 出 てくる.しかし,そのような 状 態 に 至 るま でに 習 得 した 技 術 は, 判 断 能 力 の 状 況 に 関 わらず 正 常 であることが 多 い.すると, 正 常 な 技 能 から 正 常 ではない 行 為 が 生 じる 可 能 性 が 否 定 できない. 87

102 第 5 章 Web ページ 作 成 の 法 的 留 意 点 しかし,Web のアクセス 記 録 からは,アクセス 者 の 年 齢 やその 判 断 能 力 を 確 定 する ことはできない.これに 対 しては 民 法 をはじめとした 一 般 原 則 が 適 用 されることになろ う.しかし, 一 旦 問 題 が 生 じると,その 解 決 までに 非 常 に 時 間 がかかることは 否 めない. このように, 一 般 の 社 会 情 勢 を 取 り 巻 く 問 題 と,それが 何 故 法 律 で 解 決 できないのか を, 一 般 的 な 理 論 として 理 解 しなければ, 法 律 の 条 文 だけを 追 って 思 わぬ 落 とし 穴 に 落 ちることになる. 自 分 の 理 解 できた 領 域 だけにとどまらず, 自 分 の 属 する 社 会 のありよ うを 十 分 に 考 えることは, 自 分 や 自 分 のまわりを 守 るために 今 後 ますます 重 要 になろう. これらをまとめると, 以 下 の2 点 に 集 約 できよう. (1) 閲 覧 者 に 対 する 配 慮 は 法 規 制 社 会 的 規 制 の 両 面 から 考 えるべきである (2) 閲 覧 者 の 年 齢 をアクセス 記 録 から 推 測 することはできない 5.2 文 字 データに 対 する 配 慮 自 らが 創 作 した 文 字 データは, 当 然 ながら 著 作 権 法 にふれることはない. 他 者 が 作 成 した 文 字 データの 扱 いは,すでに 公 表 されたものと, 未 公 表 のもので, 対 応 が 変 わる 公 表 済 みのデータ 公 表 済 みのもののうち, 書 籍 データは, 著 作 権 法 で 認 められた 引 用 や 要 約 の 形 に 適 切 に 則 っている 限 り, 許 諾 は 不 要 である. Web コンテンツは,ユーザーID やパスワードを 利 用 し 閲 覧 者 制 限 がかけられている 場 合 は, 公 表 されたコンテンツとみなすことは 難 しい.このようなデータに 関 しては, 許 諾 が 必 須 である. 許 諾 を 得 ずにWeb データを 転 載 した 場 合 は 著 作 権 法 に 違 反 してい るとみなされよう. 具 体 的 には, 著 作 者 に 認 められている 著 作 者 人 格 権 の1つ 公 表 権 や,インターネットを 利 用 して 情 報 を 送 信 する 権 利 に 関 わる 送 信 可 能 化 権 を 侵 害 しているとみなされる. それ 以 外 のWeb コンテンツに 関 しては, 書 籍 データと 同 じく, 完 全 に 公 表 されたも のとして, 書 籍 データと 同 じ 扱 いをすることができる 未 公 表 のデータ 未 公 表 の 文 字 データは, 公 表 するかどうかを 著 作 者 が 決 める 権 利 を 持 つ 著 作 者 人 格 権 ( 公 表 権 ) で 守 られている. 著 作 者 からの 許 諾 が 必 須 である. 88

103 5.3. 静 止 画 動 画 データに 対 する 配 慮 5.3 静 止 画 動 画 データに 対 する 配 慮 静 止 画 や 動 画 の 中 でも, 特 に 人 物 の 静 止 画 をWeb コンテンツとして 掲 載 することに は, 細 心 の 注 意 が 必 要 である. 以 下 本 節 は,これらをまとめて 画 像 データ または 単 に 画 像 と 呼 ぶ 防 犯 上 の 配 慮 防 犯 上 の 観 点 から,たとえWeb ページ 作 者 自 身 の 画 像 であっても,その 掲 載 の 必 要 性 は 真 剣 に 考 えるべきである. 不 用 意 に 人 物 の 画 像 をWeb ページに 掲 載 した 結 果,ス トーキング 被 害 にあった 事 例 は 少 なくない. 他 者 の 画 像 であれば,なおさら 真 剣 な 検 討 が 必 要 である. どうしても 人 物 の 画 像 を 使 用 しなければならない 場 合, 被 写 体 となった 人 物 の 許 諾 が あったとしても, 可 能 な 限 り 人 物 の 特 定 を 避 ける 画 像 処 理 を 施 すべきである. 両 目 が 隠 れる 程 度 の 幅 で 顔 面 に 不 可 逆 的 画 像 処 理 を 施 すだけで, 人 物 の 特 定 は 難 しくなる. 群 衆 画 像 の 場 合 は, 画 面 全 体 に 画 像 処 理 を 施 すべきである 肖 像 権 の 問 題 人 物 画 像 には, 肖 像 権 が 発 生 する. 肖 像 権 は 法 律 として 明 文 化 されたものではない が, 判 例 で 認 定 され, 実 質 上 認 められた 人 権 の 一 部 である. 従 って,Web ページ 作 者 自 身 が 撮 影 した 他 者 の 画 像 を 利 用 する 時 も, 被 写 体 である 他 者 に 必 ず 掲 載 の 許 諾 を 得 な ければならない. 許 諾 なしに 利 用 した 場 合 は, 肖 像 権 の 侵 害 とみなされる 出 所 不 明 の 画 像 の 取 扱 い 出 所 不 明 の 他 者 の 画 像 は,データがすでに 公 開 されているか 否 かに 関 わらず, 使 用 の 可 否 を 真 剣 に 考 えるべきである. 原 則 として,すでに 公 表 されたデータには, 著 作 権 に おける 引 用 のルールを 適 用 すればよい.しかし,インターネットにおける 出 所 不 明 の 画 像 データは, 送 信 可 能 化 権, 肖 像 権, 公 表 権 などを 侵 害 した 違 法 なデータである 可 能 性 が 捨 てきれない.あえて 利 用 すれば, 自 らも 違 法 行 為 の 一 旦 を 担 ったと 判 断 される 可 能 性 がある.このようなデータは, 原 則 として 利 用 すべきでない. 89

104 第 5 章 Web ページ 作 成 の 法 的 留 意 点 その 他 の 画 像 に 対 する 取 扱 い その 他 の 画 像 データの 問 題 点 は, 文 書 データの 扱 いに 準 ずる. 5.4 無 断 リンクの 問 題 他 者 が 既 に 作 成 し, 公 開 しているWeb ページにリンクを 張 ることは, 原 則 として 著 作 権 侵 害 にはあたらないと 考 えられている.しかし,いくつかの 例 外 が 指 摘 されている ので, 侵 害 行 為 を 起 こさないよう, 十 分 な 注 意 が 必 要 である 原 則 として 侵 害 ではない 理 由 これは,リンク 元 がリンク 先 のコンテンツの 内 容 をコピーしていないからである. 実 際 にそのWeb ページの 内 容 を 見 ようとするならば,そのリンク 先 に 直 接 アクセスする 必 要 がある.それは, 例 えばWeb 検 索 エンジンを 使 って 表 示 されたリンクからアクセ スすることと, 根 本 的 には 何 の 違 いもない. 従 って, 複 製 権 の 侵 害 にはならない. また, 会 員 制 のWeb ページを 作 ることは 難 しくない. 特 定 の 条 件 下 からのアクセス を 選 択 的 に 拒 みたいならば,そのように 設 定 する 機 会 がリンク 元 にはあったはずであ る. 従 って, 特 定 のユーザーID やパスワードで, 不 特 定 多 数 からのアクセスを 防 ぐ 仕 掛 けが 施 していないWeb コンテンツは, 公 開 されたデータであるといえる 原 則 からはずれると 判 断 される 場 合 但 し, 無 断 リンクによって,あたかも 自 らが 創 作 したかのようにコンテンツの 一 部 を 直 接 に 表 示 できるような 場 合 は, 明 らかに 著 作 権 法 違 反 となる.そのようなリンクの 張 り 方 は 違 法 である. 最 後 に, 上 記 のリンク 問 題 については, 自 らも 見 知 らぬ 誰 かからリンクを 張 られる 可 能 性 があるということを 忘 れてはならない. 複 数 のHTML ファイルを 作 成 する 場 合, それぞれのファイル 毎 に 細 やかにアクセス 制 限 を 設 定 することができる. 何 を 公 開 ペー ジとすべきか,あるいは 非 公 開 ページとすべきかは,Web ページの 計 画 段 階 で 峻 別 す べきである. 90

105 5.5. Web コンテンツと 表 現 の 自 由 5.5 Web コンテンツと 表 現 の 自 由 表 現 の 自 由 は,インターネット 上 に 限 らず, 憲 法 21 条 でひろく 認 められている.し かし,それは 何 をどのように 表 現 しても 良 いということとは 直 結 しない 表 現 の 自 由 が 認 められない 例 表 現 の 自 由 は 権 利 の1つである. 権 利 とは,それを 主 張 したり 行 使 したりすること で, 他 者 の 権 利 を 侵 害 する 場 合 までを 認 めるものではない( 民 法 1 条 3 項 ). 例 えば, 事 実 に 基 づかない 誹 謗 中 傷 により 第 三 者 が 何 らかの 被 害 を 被 ったならば, 威 力 業 務 妨 害 と して 刑 事 罰,および 損 害 賠 償 請 求 の 対 象 となることがある.たとえ 事 実 であったとして も,アクセス 制 限 をかけておらず 万 人 が 見 ようと 思 った 時 に,いつでも 見 ることができ る 状 況 にあるWeb ページであれば, 公 表 とみなされるため, 名 誉 毀 損 の 罪 に 問 われる ことがある. また, 犯 罪 予 告 を 思 わせる 表 現 は,その 内 容 に 応 じた 刑 事 罰 の 対 象 となることがある. さらに, 個 人 情 報 は,Web ページの 性 質 と 作 者 の 立 場 によっては, 違 法 不 法 行 為 とみなされる 場 合 がある.たとえ 人 名 ひとつであったとしても,それが 誰 のことを 指 し ているのか 特 定 可 能 な 情 報 の 提 示 は, 厳 に 慎 むべきである 表 現 の 自 由 が 認 められなかった 場 合 のその 後 にあげた 例 のような 事 情 を 考 慮 することなく, 違 法 不 法 なWeb コンテンツを 公 開 した 場 合, 個 人 であればプロバイダからの 退 会 を 命 じられることもある. プロバイダには, プロバイダ 責 任 制 限 法 という 法 律 を 守 る 義 務 がある.この 法 律 は, 公 開 されたWeb コンテンツの 中 に 違 法 や 不 法 な 行 為 が 発 見 された 場 合 に,それを 排 除 したり, 被 害 者 に 対 して 情 報 開 示 をしたりしなければ,プロバイダにも 責 任 がある とされるものである. これらの 事 項 は,プロバイダと 個 人 との 契 約 時 に, 契 約 書 に 必 ず 記 載 されているもの である. 従 って,それに 違 反 する 行 為 を 行 った 場 合 は, 最 悪 の 場 合,そのプロバイダか らの 強 制 退 会 というペナルティにさらされることになる. もちろん,プロバイダからの 強 制 退 会 があったとしても,それを 理 由 に 刑 事 罰 や 民 事 訴 訟 を 免 れることはできない. 91

106 第 5 章 Web ページ 作 成 の 法 的 留 意 点 5.6 青 少 年 に 対 する 配 慮 インターネットの 普 及 とともに,インターネットを 利 用 した 情 報 のやりとりを 通 じ て,トラブルに 巻 き 込 まれる 青 少 年 が 多 くなった. Web ページ 製 作 者 側 の 自 主 規 制 として, 閲 覧 者 が18 歳 以 下 であることの 確 認 を 求 め る 画 面 を 設 置 することが 行 われてきた.しかし, 自 主 規 制 は 以 下 の 問 題 から, 有 効 とは 認 められてこなかった. 1. 閲 覧 者 が 実 際 は18 歳 以 下 であるにもかかわらず, 自 主 的 に18 歳 以 上 を 対 象 とするページにアクセスするケースが 後 を 絶 たない. 2. Web ページ 製 作 者 側 には,アクセスしてきた 閲 覧 者 が18 歳 以 上 か, 以 下 か,を 確 認 する 手 段 を 持 たない. 3. 不 適 切 な 情 報 の 定 義 があいまいであったため,Web ページ 製 作 者 は 適 切 と 思 っていても 青 少 年 を 保 護 する 立 場 に 置 かれた 機 関 や 保 護 者 から 不 適 切 で あると 思 われるケースがある. このような 事 情 から,Web データ 製 作 者 側 にだけ 努 力 を 課 すのではなく, 青 少 年 を 保 護 する 立 場 に 置 かれた 機 関 や 保 護 者 からも, 自 主 的 にフィルタリングを 行 うことを 強 制 するための 枠 組 みと,そのためのツールが 準 備 されてきた. ところが,フィルタリングのための 条 件 が 厳 しすぎると,できるだけ 多 くの 人 に 見 て もらいたい 情 報 が,フィルタリング 対 象 になる 可 能 性 が 出 てくる.これでは, 簡 単 に 情 報 発 信 するための 機 会 を 失 われることにもつながりかねない. 従 って,Web ページを 作 ろうとする 時 点 だけでなく,そのページを 維 持 運 営 する 間 は, 何 がフィルタリング 対 象 となるのかを 注 意 深 く 確 認 する 必 要 がある. 本 節 では,2009 年 4 月 1 日 から 施 行 された 新 たな 法 律 を 中 心 に 解 説 する 青 少 年 への 配 慮 の 根 拠 未 成 年 は,さまざまな 問 題 に 対 し, 客 観 的 かつ 多 角 的 に 判 断 する 能 力 を 十 分 に 持 って いるとは 言 い 難 い.このため, 法 律 上 はさまざまな 制 約 を 受 ける. 例 えば, 婚 姻 のため の 年 齢 制 限 はそのひとつである. 一 方 大 人 は,それらの 能 力 を 十 分 に 発 揮 することができる,とみなされる( 必 ずしも そうでない 大 人 もいるが, 法 律 上 の 成 人 とは,そのようなものと 規 定 される).こ れらの 独 自 の 価 値 判 断 は, 必 ずしも 社 会 の 健 全 な 発 展 にとって 好 ましいものばかりとは 92

107 5.7. 公 開 後 のコンテンツ 消 去 限 らない.しかし 大 人 は, 常 識 と 自 分 の 価 値 判 断 と 置 かれた 状 況 を 総 合 判 断 して,それ に 適 切 に 対 処 する 方 法 を 知 っている,とされる.これらを 総 称 して, 判 断 能 力 と 呼 ぶ 青 少 年 に 対 する 具 体 的 配 慮 大 人 が 持 っているべき 判 断 能 力 は, 未 成 年 ではまだ 十 分 に 養 われていない. 未 成 年 に 健 全 な 判 断 能 力 を 育 成 するには 偏 りすぎている 情 報 のことを, 有 害 情 報 と 呼 ぶ. 昨 今 のインターネット 上 の 情 報 は, 必 ずしも 青 少 年 が 安 全 にインターネットを 利 用 で きる 環 境 にあるとは 言 えない. 例 えば, 犯 罪 など 深 刻 な 被 害 や 結 果 をもたらすようなサ イトにアクセスしてしまう,などがあげられる. 日 本 では 平 成 21 年 4 月 1 日, 青 少 年 が 安 全 に 安 心 してインターネットを 利 用 できる 環 境 の 整 備 等 に 関 する 法 律 ( 平 成 二 十 年 六 月 十 八 日 法 律 第 七 十 九 号 ) が 施 行 された.こ の 法 律 では, 有 害 情 報 を インターネットを 利 用 して 公 衆 の 閲 覧 ( 視 聴 を 含 む. 以 下 同 じ.) に 供 されている 情 報 であって 青 少 年 の 健 全 な 成 長 を 著 しく 阻 害 するもの と 定 義 されている( 同 法 2 条 3 項 ).また, 有 害 情 報 の 具 体 例 として 以 下 の3つがあげられて いる( 同 条 4 項 ). 1. 犯 罪 若 しくは 刑 罰 法 令 に 触 れる 行 為 を 直 接 的 かつ 明 示 的 に 請 け 負 い, 仲 介 し, 若 しくは 誘 引 し, 又 は 自 殺 を 直 接 的 かつ 明 示 的 に 誘 引 する 情 報. 2. 人 の 性 行 為 又 は 性 器 等 のわいせつな 描 写 その 他 の 著 しく 性 欲 を 興 奮 させ 又 は 刺 激 する 情 報. 3. 殺 人, 処 刑, 虐 待 等 の 場 面 の 陰 惨 な 描 写 その 他 の 著 しく 残 虐 な 内 容 の 情 報. これらの 情 報 が 掲 載 されているWeb サイトが 青 少 年 の 目 に 触 れないように,フィル タリングをかける 義 務 を 課 すことが 法 律 の 趣 旨 である. 従 って, 青 少 年 からのアクセス も 受 け 入 れる 場 合 は,トップページ 以 下 のすべてのWeb ページに,これらの 有 害 情 報 を 含 まないようにする 配 慮 が 必 要 である. 5.7 公 開 後 のコンテンツ 消 去 一 旦 公 開 したコンテンツは, 消 去 不 能 と 考 えておくほうがよい.Web サーバへのデー タのアップロードの 前 には 必 ず, 本 当 にそのデータを 公 開 してよいのか, 慎 重 に 再 考 す る 習 慣 をつけることが 望 ましい. Web サーバにアップロードされ, 公 開 されたWeb コンテンツは, 引 用 のためにコ ピーを 自 由 にとることが 著 作 権 上 許 されている. 従 って, 不 用 意 な 内 容 を 含 むコンテ 93

108 第 5 章 Web ページ 作 成 の 法 的 留 意 点 ンツは, 時 として 大 きな 問 題 を 引 き 起 こす. 自 らの 不 行 状 を 安 易 に 書 いてしまったため に, 必 要 のない 騒 ぎを 引 き 起 こす 事 例 は 後 をたたない. 問 題 が 起 きた 後 でオリジナルデータをWeb サーバ 上 から 消 したとしても,コピーデー タは 半 永 久 的 にネット 上 をさまよう.これらのコピーを 根 絶 することは 不 可 能 である. 例 えば,Web ページ 作 成 者 以 外 がそのページをまるごとコピーしておける, ウェブ 魚 拓 というサイトがある. ウェブ 魚 拓 に 掲 載 されているポリシーは,この 問 題 に 関 する 法 律 の 考 え 方 とも 合 致 する. 一 度 でも 公 開 された 情 報 ならば,それについて 言 及 する 権 利 が 万 人 にあります. テレビ 局 が 番 組 の 公 式 サイトを 閉 鎖 したからといって,その 番 組 を 放 送 した 事 実 は 消 えません. 出 版 社 が 書 籍 を 絶 版 にしたとしても, 絶 版 になった 書 籍 から 引 用 することはでき ます. 削 除 された 記 事 に 言 及 する 権 利 より 5.8 Web ページ 公 開 後 のトラブル 万 全 の 態 勢 をとったにも 関 わらず,チェックミスや 意 思 疎 通 がうまくいかずに,Web ページを 公 開 した 後 にトラブルを 抱 えることがある. このような 場 合 は 本 節 を 読 み 返 し,トラブルの 本 質 が 法 的 問 題 なのか,それともモラ ルや 感 情 の 行 き 違 いによる 双 方 の 主 観 的 問 題 なのか, 問 題 の 所 在 を 切 り 分 けることが 第 一 である. その 上 で, 法 的 問 題 であることが 明 らかになった 場 合 は, 一 刻 も 早 く 違 法 不 法 状 態 を 解 消 することが 重 要 である. また,モラルや 感 情 の 行 き 違 いである 場 合 は,まずは 誠 意 を 尽 くして 真 意 を 伝 えるこ とである.その 上 で, 相 手 が 望 む 解 決 方 法 を 確 認 し, 可 能 な 限 りその 意 向 に 沿 うことで ある. どうしてもトラブルが 解 消 できない 場 合, 裁 判 所 の 判 断 を 仰 ぐ 可 能 性 も 考 えなければ ならない.そのような 場 合 は,すみやかに 弁 護 士 による 法 律 相 談 を 考 えるべきである. 学 生 の 場 合 は, 大 学 の 学 生 課 などの 窓 口 に 出 向 き, 事 実 を 証 拠 (Web のデータや 相 手 と のメールの 記 録 など) とともに 伝 え, 対 処 の 方 向 性 を 相 談 するのも 手 段 の1つだろう. 94

109 第 II 部 Webページの 運 用 と 管 理

110

111 第 6 章 UNIXの 基 本 操 作 6.1 はじめに HTML やCSS などを 用 いて 作 成 されたWeb ページは,サーバ 上 にアップロード (Upload) することによって,インターネット 上 から 閲 覧 できる.サーバとして 使 われ るコンピュータのOS は 一 般 家 庭 に 普 及 しているWindows OS やMac OS ではなく, UNIX 系 のOS である 場 合 が 多 い( 以 下, 必 要 に 応 じて UNIX と 略 称 する 節 参 照.). ウィンドウを 用 いたOS 操 作 に 慣 れてしまうと, 新 規 ファイルを 作 成 するといった 作 業 をしても, 初 心 者 の 場 合 は 直 観 的 なイメージがなかなか 得 られない. 学 習 者 がWeb ページの 運 営 管 理 が 行 えるようになるためには,サーバで 用 いられるOS の 特 徴 を 理 解 し,UNIX などのOS 上 でファイルやディレクトリ(フォルダと 同 義 ) を 混 乱 なく 操 作 できることが 求 められる. 第 II 部 では,Windows とは 異 なるUNIX 上 でのPC 操 作 の 基 本 を 習 得 し,アップ ロードしたWeb サイトをUNIX サーバ 上 で 運 営 管 理 する 基 礎 的 な 技 術 を 学 ぶ. 6.2 OS のタイプ OS はコンピュータ 画 面 の 見 た 目 や 操 作 感 の 点 からいうと, 大 きく2つに 分 類 できる. 以 下 で 説 明 するGUI とCUI という2つの 概 念 である GUI これまで 情 報 の 基 礎 を 学 ぶために 用 いてきたPC のOS は,Windows などで 知 られ るように,ウィンドウでアプリケーションを 開 き,マウスで 操 作 ができるなど, 初 心 者 であっても 視 覚 的 に 扱 いやすいものであった.このように,ウィンドウや 画 像 アイコン などで 操 作 性 が 平 易 になるよう 設 計 された 情 報 表 示 をGUI(GraphicalUserInterface) という. 97

112 第 6 章 UNIX の 基 本 操 作 視 覚 や 操 作 感 にわかりやすさや 柔 軟 性 を 追 求 すると,それだけでOS のプログラムの データ 量 が 膨 れ 上 がる. つまり,OS の 見 た 目 や 機 能 などが 充 実 すればするほど,OS を 格 納 するハードディ スクや 処 理 中 に 扱 うメモリなどの 記 憶 装 置,CPU といったコンピュータの 電 算 装 置 そ のものに 大 きな 負 荷 がかかる.ネットワークでは,ホストコンピュータに 一 度 に 多 くの 操 作 やアクセスが 集 中 すると,コンピュータの 動 作 が 鈍 くなったり, 場 合 によってはシ ステムダウンが 起 こったりすることも 考 えられる CUI GUI 系 のインターフェイスが 普 及 するまでは,コンピュータへのデータ 入 力 や 処 理 指 示 は 文 字 列 のみで 行 うことが 一 般 的 であった.したがってコンピュータに 対 する 情 報 入 力 も 命 令 もキーボードのみで 行 うことになる.このようなインターフェイスをCUI(Character UserInterface) あるいは コマンドライン 型 という. CUI 系 のOS は 機 能 の 拡 張 にも,ユーザーの 行 う 命 令 を 促 すプロンプト(prompt) 1 や, 命 令 記 号 (コマンド) など 文 字 列 の 約 束 事 に 重 点 が 置 かれるため,GUI 系 のOS よ りプログラム 総 量 が 少 ない. Windows の 前 身 であるMS-DOS もCUI 系 のOS である.その 名 残 を コマンドプ ロンプト (6.2.3 参 照 ) というアプリケーションにみることができる. 同 じように, 学 術 機 関 や 企 業 の 研 究 所 などに 普 及 しているUNIX にも, 場 合 によってGUI を 使 ったり CUI を 使 ったりする.UNIX は,アメリカのAT&T 社 の 研 究 所 で 開 発 されたOS で,C 言 語 というプログラム 言 語 で 記 述 され,ソースコードが 比 較 的 コンパクトである. 学 術 機 関 やコンピュータメーカーはこの 基 本 システムを 利 用 して, 独 自 の 拡 張 をおこない, 多 くの 派 生 OS が 開 発 された.こうしたUNIX 系 のシステム 体 系 を 持 ったOS を 総 称 的 にUNIX と 呼 ぶことが 多 い. 1 プロンプトはCUI の 操 作 画 面 やウィンドウを 指 していうこともある. 98

113 6.2. OS のタイプ 主 なUNIX 系 OS SunMicrosystems 社 のSolaris とSunOS, HewlettPackard 社 のHP-UX, IBM 社 のAIX,SGI 社 ( 旧 SiliconGraphics 社 ) のIRIX, CalderaSystems 社 ( 旧 SantaCruzOperations 社 ) のUnixWare, カリフォルニア 大 学 バークリー 校 (UCB) のBSD と FreeBSD などの 派 生 OS, LinusTorvalds 氏 のLinux など 操 作 感 のちがい 例 えば,GUI のOS(Windows) 上 で,デスクトップに 新 しいフォルダを 作 成 するに は,マウスポインタがデスクトップ 上 にある 状 態 でマウスを 右 クリックし, 新 規 作 成 フォルダ へとたどり,マウスを 左 クリックすれば,デスクトップ 上 にフォルダのア イコンが 現 れる.フォルダを 作 成 した 場 所 を 確 かめるには,エクスプローラなどの 画 像 でグラフィカルに 表 示 される.つまりユーザーは,ヴァーチャル(Virtual; 仮 想 的 ) に フォルダが 存 在 する 感 覚 を 持 ち,その 保 存 箇 所 を 確 認 することができる. CUI では,この 作 業 をコマンド 入 力 で 行 う.ここでは,Windows 上 でコマンド 入 力 を 行 って,デスクトップ 上 にフォルダを 作 成 してみよう. 手 順 1 コマンドプロンプトの 表 示 スタートメニュー すべてのプログラム アクセサリ コマンドプロンプト コマンドプロンプトが 開 くと,コンピュータの 中 の 個 別 環 境 につながるパスが 表 示 さ れ, 行 の 最 後 でカーソルが 点 滅 している. 2 2 作 業 する 環 境 (カレントディレクトリ) をデスクトップに マイコンピュータ 個 人 環 境 の 設 定 されているドライブ 3 Documents and Settings 登 録 されたユーザー 名 ( 自 分 の 環 境 のID 名 ) デスクトップのフォルダ 2 Windows98 やWindowsMe では,MS-DOS プロンプトというものが 存 在 したが,これはMS-DOS のコマンドを 利 用 するためのアプリケーションである. 99

114 第 6 章 UNIX の 基 本 操 作 上 のようにフォルダをたどり,フォルダウィンドウのアドレスバーに 表 示 されている デスクトップのパスをコピーする. ちなみに,コマンドプロンプトでCドライブからDドライブへ 移 動 して,コマンド 入 力 したい 時 は, 直 接 D: と 入 力 して,そのあとに cd とパスを 表 記 (ペースト) する.( 詳 しくは6.4.5 参 照 ) 3 コマンドプロンプト 上 での 作 業 コマンドプロンプトのウィンドウにもどり, cd と 入 力. 半 角 スペースを 空 けて,2 のコピーをペースト 4 enter 4 フォルダ(ディレクトリ) の 作 成 図 6.1: コマンドからのフォルダ 作 成 mkdiraaa と 入 力 してenter ( mkdir と aaa の 間 は 半 角 空 ける) 上 記 の 作 業 で 何 をしたのか 今 ひとつ 理 解 できない 場 合 は,UNIX の 学 習 が 一 通 り 済 ん だ 段 階 で,もう 一 度 この 節 の 手 順 を 繰 り 返 し 行 うことを 勧 める.そうすると,CUI と GUI のちがいや,カレントディレクトリ,パスなどの 概 念 を 確 認 することができるで あろう. 6.3 Web サーバOS への 遠 隔 ログイン telnet Web サーバは 通 常 個 人 が 使 用 するPC とは 別 のコンピュータに 存 在 するので,ユー ザーはサーバのOS にログインするためのアカウント(ID やパスワード) を 取 得 する 必 4 ペーストは ctrl + V,あるいはマウス 操 作 でも 行 うことができる. 100

115 6.3. Web サーバOS への 遠 隔 ログイン 要 がある. 個 人 が 使 用 しているのとは 別 の 遠 隔 コンピュータにログインするには,telnet という 方 式 を 用 いる.そのためには, 遠 隔 コンピュータのOS を 自 分 のPC 環 境 で, 端 末 とし て 働 かせるためのソフト( 端 末 エミュレータ) が 必 要 となる. ここでは,Windows 上 からUNIX を 操 作 することを 想 定 する.そしてWindows 用 の 端 末 エミュレータとして,フリーのソフトウェアであるTeraTermPro がインストー ルされていることを 前 提 として 説 明 する. 図 6.2: PC のOS とサーバのOS TeraTermPro による 通 信 1Tera Term Pro の 起 動 Tera Term Pro を 起 動 した 後 は 基 本 的 にキー 入 力 のみの 作 業 となる. 初 めて 起 動 す る 場 合 には, Setup( 設 定 ) メニューから Keyboard を 選 択 すると, backspace や delete キーを 有 効 にすることができ, 自 分 の 入 力 の 習 慣 に 合 わせることができる. また,TeraTermPro は 初 期 状 態 で 漢 字 コードが SJIS(orUTF-8) になっている ことが 多 く,そのまま 使 用 すると 日 本 語 が 文 字 化 けする.UNIX(Linux) で 漢 字 コード はEUC を 使 用 するので, 漢 字 コードを 変 更 する 必 要 がある. キーボード 設 定 の 時 と 同 じく, Setup メニューから Terminal( 端 末 ) を 選 び(バー ジョンによって 手 順 が 異 なる 場 合 がある), Kanji(Receive; 受 信 ) と Kanji(Transmit; 送 信 ) をEUC( 場 合 によってEUC-JP) に 変 更 し, 設 定 を 保 存 する. 2リモートホスト(Web サーバ) への 接 続 本 体 ウィンドウの 前 にダイアログが 表 示 されるので, Host の 欄 にアカウント 発 行 書 の サーバ 名 を 入 力 し, OK をクリックする. 101

116 第 6 章 UNIX の 基 本 操 作 3Web サーバにログイン login: にアカウントの ユーザー 名 を 入 力 してEnter を 押 す. Password: にアカウントの 仮 パスワード を 入 力 してEnter を 押 す. login1% などのようなプロンプトが 表 示 されればログインができている( 図 6.3). 図 6.3: TeraTermPro のログイン 画 面 3ログアウト プロンプトが 表 示 された 状 態 で,ログアウト 用 のコマンド exit (あるいは logout ) と 入 力 してEnter を 押 す.そうするとTeraTermPro のウィンドウも 消 える. 注 意 : リモートホストとの 通 信 を 絶 つときは, 必 ず exit (あるいは logout ) コマンドで 終 了 する.[ウィンドウの 閉 じる ] ボタンをクリックしてもログアウトはできていない. 4パスワードの 変 更 発 行 されたアカウントのパスワードが 仮 のもので, 文 字 列 が 覚 えにくい 場 合 は,パス ワードの 変 更 を 行 い,ログインしやすくすることができる.Web サーバにログインし, パスワードを 変 更 するためのコマンド 操 作 を 行 う. コマンド passwd を 入 力 してEnter を 押 すとパスワード 変 更 手 続 きが 始 まる(OS のバージョン 等 によって passwd ユーザー 名 のようなコマンド 入 力 もある). 手 続 きは 次 の 指 示 にしたがって 入 力 を 行 う. 102

117 6.3. Web サーバOS への 遠 隔 ログイン Currentpassword: 現 在 の( 仮 の) パスワードを 入 力 する. 5 Newpassword: 新 しいパスワードを 入 力 する. Retypenewpassword: 確 認 のためもう 一 度 同 じパスワードを 入 力 する. 正 しく 手 続 きが 進 めばその 旨 が 表 示 される. 手 続 きに 不 備 があれば, 上 の 手 続 きを 再 び 行 う. パスワードはサーバを 運 営 する 主 体 によって, 必 ず 2 文 字 以 上 のアルファベットと 1 文 字 以 上 の 数 字 か 記 号 を 含 む こと などのような,ローカルルールが 設 定 されてい る 場 合 があるので,よく 注 意 してパスワードを 決 める 必 要 がある. Windows のネットワークPC の 場 合 と 同 様 に,パスワードは 忘 れないものにし, 自 己 責 任 で 管 理 することが 必 須 である. 5 端 末 エミュレータにWeb サーバを 登 録 TeraTermPro を 起 動 してホスト 名 を 入 力 するウィンドウで[Cancel] をクリックす る.メニューの[Setup( 設 定 )] から[TCP/IP] を 選 ぶ. [Hostlist(ホスト 一 覧 )] の 欄 にアカウントの サーバ 名 を 入 力 し,[Add( 追 加 )] を クリックする( 図 6.4). これで 次 回 から 登 録 したサーバのアドレスを 入 力 せずに 接 続 できるようになる. 図 6.4: ホストリストの 作 成 画 面 103

118 第 6 章 UNIX の 基 本 操 作 6.4 UNIX の 基 本 操 作 コマンド 入 力 と 実 行 UNIX を 操 作 するには 特 定 のコマンドを 入 力 して, 動 作 命 令 を 与 える. 例 えば,パス ワードの 変 更 に 用 いた passwd や,ログアウトに 用 いた exit などがそれである. 実 際 にコマンドを 入 力 して 機 能 を 実 行 させる 際 には, 以 下 の 点 をよく 理 解 しておく 必 要 がある. TeraTermPro 経 由 で 見 ている 画 面 はCUI なので, マウスは 使 わずにすべてキーボードでの 操 作 となる. 入 力 する 文 字 列 は, 直 接 コンピュータに 命 令 を 与 えるものなので, 必 ず 半 角 の 英 数 で 入 力 する. 演 習 6-1 プロンプトのあとにユーザー 情 報 を 表 示 させるコマンドを 入 力 しなさい. ユーザー 情 報 を 示 すコマンドは whoami 6 で, 入 力 後 にEnter を 押 すと 次 のよう な 表 示 が 現 れる. (ユーザーID)( 使 用 している 端 末 名 )(ログインした 日 時 ) 演 習 6-2 以 下 のコマンドはどのような 働 きをするものか. 実 行 して 確 かめなさい. 1cal 2cal cal ファイルの 操 作 ここではファイルの 作 成, 削 除 など, 基 本 的 なファイル 操 作 を 扱 う.まず, 基 本 的 な ファイル 操 作 のコマンドを 下 の 一 覧 に 示 す( 表 6.1). (1) ファイル 作 成 ここでは 日 付 表 示 のテキストを 書 き 込 んだファイルの 作 成 を 行 う.まず, 次 のコマン ドをそれぞれ 実 行 させ, 返 ってくる 結 果 を 比 べてみよう. 1date 2date>ima 1を 実 行 させると,コマンドを 実 行 した 時 点 の 年 月 日 と 時 刻 が 表 示 される. 6 バージョンや 設 定 によっては, who/whoami. 104

119 6.4. UNIX の 基 本 操 作 表 6.1: ファイル 操 作 に 用 いるコマンド 一 覧 テキストファイルの 内 容 閲 覧 cat ファイル 名 ( 以 下, 略 して F 名 ) ファイルのコピー 現 ディレクトリ 内 を 表 示 ファイルの 削 除 ファイルの 移 動 ファイル 名 の 変 更 cp コピー 元 F 名 コピー 先 F 名 ls rmf 名 mvf 名 ディレクトリ 名 mv 元 のF 名 新 しいF 名 1 画 面 に 収 まらない 場 合 (その 逆 ) less(more)f 名 2を 実 行 させると 何 も 表 示 されない.2で 実 行 されたのは, date コマンドを 実 行 する.ただし,ディスプレイに 表 示 させる 代 わりに,ファイルima に 書 き 込 め とい う 命 令 である. つまり,コマンドdate を 実 行 してあらわれた 年 月 日 時 刻 情 報 のテキストが 書 かれた ima というファイルが 作 成 されたことになる. もしこれまでの 自 分 のUNIX 環 境 にファイルima がなければ,この 時 点 で 新 規 作 成 されている. 既 に 同 名 ファイルがある 場 合 は, 今 回 のものが 書 き 換 え( 上 書 き) されて いる. この 操 作 で 用 いたコマンドとファイル 名 をつなぐ 記 号 > をリダイレクション 記 号 という. リダイレクション 記 号 (>) は, 出 力 先 を 切 り 替 えるために 用 いる.date コマンドで UNIX が 返 す 年 月 日 時 刻 の 情 報 を,TeraTermPro から 見 ることができたが,2 の 実 行 は 出 力 先 をテキストファイル 内 に 切 り 替 えたことになる. もし, date>>ima のようにリダイレクション 記 号 を 用 いると, 既 存 のファイルの 末 尾 に 書 き 足 すことができる. UNIX での 標 準 的 なファイルの 扱 いは,Windows のときと 必 ずしも 同 じではない. 最 低 限, 次 の 知 識 は 持 っておくとよい. ファイル 名 のルール: ファイル 名 に 使 える 文 字 記 号, 文 字 数 はUNIX の 種 類 により 異 なる.ただ, 文 字 数 14 字 以 内, 英 字 数 字 ピリオドのみを 使 用 すると 無 難 で ある. 拡 張 子 :Windows のようなOS にはアプリケーションがあるので, 拡 張 子 によってファ イルの 種 類 を 区 別 する 必 要 がある.UNIX はその 点 にこだわらないので 特 には 必 105

120 第 6 章 UNIX の 基 本 操 作 要 ではない.しかし,C 言 語 プログラムを 作 成 した 場 合,UNIX にはC 言 語 を 動 かすコマンドがあるので.c と 書 く. (2) ファイル 内 容 の 閲 覧 (1) で 作 成 したファイル ima の 中 を 閲 覧 する.ファイル 閲 覧 のコマンドは cat を 用 いる.コマンド cat のあと 一 文 字 分 スペースを 空 けてファイル 名 ima と 入 力 する. cat ima これでファイルima に 書 き 込 まれたテキストを 閲 覧 することができる. 次 のコマン ドで, 改 めて date を 実 行 して 出 力 内 容 を 比 較 するとわかりやすい. (3) ファイルのコピー (1) で 作 成 したファイル ima をコピーして, 同 じ 内 容 のファイル ima1 を 作 成 する.ファイルコピーのコマンド cp の 次 にコピー 元 の ima を, 次 に 新 規 作 成 の ima1 を 入 力 する. cpimaima1 演 習 6-3 (3) で 作 成 された ima1 は 本 当 に ima と 同 じテキスト 内 容 を 持 つかどうか, 閲 覧 して 確 認 しなさい. 演 習 6-4 ファイル ima1 をコピーして ima2 を 作 成 しなさい. できたら ima2 の 内 容 を 閲 覧 して 確 認 しなさい. (4) その 場 にあるファイル 名 の 一 覧 コマンド ls を 実 行 させると, 現 在 のディレクトリ(カレントディレクトリ; 後 述 ) にある 全 てのファイル 名 を 一 覧 することができる. 演 習 6-4 まで 行 った 段 階 では, ima ima1 ima2 が 存 在 しているはずである. (5) ファイルの 削 除 コマンド rm を 用 いてファイルを 削 除 することができる. ima2 を 削 除 するには 次 のように 入 力 する. rm ima2 106

121 6.4. UNIX の 基 本 操 作 演 習 6-5 ファイル ima1 を 削 除 し,2 つのファイルが 削 除 されて 存 在 しないことを,コマンド ls で 確 認 しなさい コマンドのマニュアル オプション (1) マニュアル コマンドの 用 途 や 意 味 がわからない 場 合 は, man というコマンドを 用 いて 説 明 (マ ニュアル) を 見 ることができる. 日 本 語 で 説 明 を 読 みたい 場 合 は jman を 用 いる(た だし 仕 様 によっては 設 定 されていないものもある). man コマンド 名 / jman コマンド 名 (2) オプション コマンドには, オプション と 呼 ばれる 付 属 の 追 加 命 令 が 用 意 されている.コマン ドのあとにハイフン(-) でオプション 記 号 をつける. コマンド 名 オプション コマンドにオプションをつけて 実 行 すると,つけないときとは 少 し 違 う 動 作 を 返 し てくる.また,それぞれのコマンドにどのようなオプションが 用 意 されているかは,マ ニュアル(man) で 確 認 することができる. ここでは,どのようなファイルがあるか 確 認 するls コマンドにオプションをつけて みる. 例 1 ls にオプション l をつける ls l このオプションでは,ファイル 名 の 前 にいろいろな 情 報 があらわれる.あらわれるの は 次 のものである. 保 護 モード リンク ID アクセスできるグループ ファイルサイズ 作 成 または 最 終 変 更 日 時 ファイル 名 UNIX ユーザーは 必 ず 何 らかのグループに 属 している.サーバ 管 理 者 がそのように 設 定 している( 詳 細 は 次 章 の 保 護 モードで 述 べる). 例 2 ls にオプション a をつける 107

122 第 6 章 UNIX の 基 本 操 作 このオプションでは,ファイル 名 に... のようなピリオドがつく.これはファ イルが 存 在 するパスの 位 置 関 係 を 示 している(6.4.5 参 照 ). オプション 記 号 を2つ 並 べると 複 数 のオプションを 使 うことができる.オプションを 並 べる 順 序 は 問 わない. ( 例 )ls-al(-la) 例 1 例 2 で 表 示 した 内 容 は,Web ページのファイルを 管 理 する 際 に 重 要 な 情 報 であるので, 活 用 できるようにしておきたい ディレクトリの 操 作 Windows やMacOS でフォルダと 呼 んでいるものは,UNIX やMS-DOS ではディレ クトリという.ここではディレクトリに 対 するコマンドの 扱 い 方 ( 表 6.2) とディレクト リの 階 層 関 係 を 学 習 する. 表 6.2: ディレクトリ 操 作 に 用 いるコマンド 一 覧 ディレクトリの 作 成 mkdir ディレクトリ 名 ディレクトリの 削 除 ディレクトリへの 移 動 カレントディレクトリの 表 示 rmdir ディレクトリ 名 cd ディレクトリ 名 pwd (1) ディレクトリの 作 成 コマンド mkdir で dr という 名 前 のディレクトリを 作 成 する. mkdir dr コマンド ls を 実 行 すると, 表 示 されるのは ima と dr のはずである.つま り 同 じ 場 所 にファイルとディレクトリが 並 存 している. 演 習 6-6 ディレクトリdr1 を 作 成 しなさい. (2) ディレクトリにファイルをコピー (1) で 作 成 したディレクトリ dr の 中 に,ファイル ima をコピーする. ファイルのコピーを 行 う 場 合 は,コマンド cp を 用 いる. 今, ima というファイ ルをディレクトリ dr にコピーするので,コマンドの 書 き 方 は, 108

123 6.4. UNIX の 基 本 操 作 cpimadr のようになる. cp(コピー) する,ima をdr に という 気 分 で 配 列 すればよい. dr の 中 にコピーされたファイル ima が 存 在 するか 確 認 するには,ファイル 一 覧 を 表 示 するコマンド ls を 用 いればよいが, 特 定 のディレクトリの 内 部 を 指 定 する ので,ここでは lsdr と 入 力 する. (3) ディレクトリにファイルを 移 動 ファイル ima を dr1 に 移 動 する.ファイルを 移 動 させるにはコマンド mv を 用 いて, mvimadr1 のように 入 力 し 実 行 する. 表 記 の 順 はコピー(cp) のときと 同 じ ように 考 えればよい. (4) ディレクトリにあるファイルを 指 定 して 閲 覧 テキストファイルの 内 容 を 閲 覧 するには, ファイルの 操 作 でやったように, catima だが,この 時 点 では, そのようなファイルは 存 在 しない という 意 味 でerror メッセージが 出 る. これまでのコマンド 操 作 を 全 て 行 うと,ファイル ima はディレクトリ dr の 中 ( 実 際 は 下 ) にあるはずである.したがって,ディレクトリの 中 にあるファイルを 閲 覧 す るという 指 定 を 行 う 必 要 がある.ディレクトリ dr の 中 のファイルを 指 定 するのであ れば, catdr/ima のように 入 力 する. ここに 出 てくる dr/ima のスラッシュ(/) は,パス(Path) の 区 切 りである.これ は ディレクトリ dr の 下 にあるファイル ima という 意 味 になる.パスを 表 記 す る 方 法 は 第 1 章 で 述 べたが,その 区 切 り(/) や, 相 対 パス(. や.. ) はUNIX では 必 須 である. そのためにはツリー 構 造 の 理 解 が 不 可 欠 で, 重 要 なことは,ツリー 構 造 と 相 対 パスの 表 記 を 常 に 意 識 することである.わからない 時 は 図 示 しながら 考 えるとよい. 次 節 (6.4.5) に 改 めて 解 説 してあるので 参 照 してほしい. 109

124 第 6 章 UNIX の 基 本 操 作 演 習 ディレクトリdr のファイルima をdr1 の 下 にa25 の 名 で コピーしなさい. 2. ディレクトリdr1 のファイルa25 をdr にbbb の 名 で 移 動 させなさい. 3. ディレクトリdr の 内 部 を 一 覧 で 確 認 しなさい. 4. ディレクトリdr のファイルbbb を 削 除 しなさい. 5. ディレクトリdr の 下 にディレクトリdrr を 作 成 しなさい. 6. コマンドdate を 実 行 し, 新 たにディレクトリdrr の 下 に ファイルccc を 作 成 しなさい. 解 説 1. ima ima1 のコピー,ディレクトリ 内 のファイルのパス 表 記 を 思 い 出 す. 2. 移 動 前 後 のディレクトリとファイルの 指 定 方 法 を 考 える( dr1 のa25, dr のbbb ). 5. ディレクトリの 下 にファイルを 作 ったように,ディレクトリの 下 にディレクトリを つくる. dr の 下 の drr だから,パスを 用 いて mkdirdr/drr となる. 6. コマンド date をテキストファイルにする 方 法 を 思 い 出 す. これをディレクト リ drr の 下 に 作 成 するから date>dr/drr/ccc となる. (5) ディレクトリのコピー ディレクトリ dr 全 体 を dr2 という 名 前 でコピーする.コマンドの 記 述 は 次 の ようになる. cp-rdrdr2 コピーのコマンド cp にオプション -r をつける.これで 再 帰 的 にコピーする という 命 令 になるが, 要 はまるごとコピーができると 考 えて 差 し 支 えない.あとは,コ ピー 元 dr,コピー 先 dr2 の 順 にディレクトリを 指 定 する. 完 了 したら,dr とdr2 の 中 身 が 同 じかどうか, 一 覧 表 示 で 確 認 してみよう. (6) ディレクトリの 削 除 コピーしてあらわれた dr2 を 削 除 する.ディレクトリを 削 除 するにはコマンド rmdir を 用 いるが,ディレクトリの 削 除 はディレクトリの 内 部 ( 下 層 ) が 空 でないと 実 行 できない.そこで2つの 方 法 が 考 えられる. 1 先 に dr2 の 配 下 を1つずつ 全 て 削 除 する 方 法 2 dr2 を 下 層 も 含 めてまるごと 削 除 する 方 法 1の 手 順 としては, lsdr2 でディレクトリの 内 部 を 確 認 後, 順 次 ファイルを 削 除 す る.(6.4.2,(5) ファイルの 削 除 を 参 照 ) 110

125 6.4. UNIX の 基 本 操 作 2の 手 順 は,コマンド rm にオプション -r をつける.(5) と 同 じオプションだ が,こちらは 文 字 通 り ディレクトリをまるごと 削 除 という 意 味 を 持 っている. rm-rdr ツリー 構 造 とカレントディレクトリ ツリー 構 造 OS がWindows のとき,フォルダを 開 くとウィンドウのアドレスバーに, C: \ Documents and Settings \ (ユーザー 名 ) \ My Documents のような 表 示 が 見 られる.これは,コンピュータ 中 のマイドキュメントの 位 置 を 示 すパ スである. 住 所 のように 考 えるとよい.ディスプレイ 上 の 見 た 目 では,C ドライブの 中 に DocumentsandSettings ファイルがあり,その 中 に ユーザー 名 フォルダがあ り,その 中 に MyDocuments フォルダがあるというイメージを 持 ちやすい. Windows やMacOS はGUI で フォルダの 中 にファイルを 入 れた という 見 せ 方 を しているので, ~の 中 に とイメージするが, 実 際,コンピュータ 上 のファイルは, 必 ずどこかのフォルダ=ディレクトリの 下 に 所 属 しているという 構 造 で 考 えている. つまり, C: などのドライブからたどってフォルダを 選 びながら 目 的 のファイルへ 行 きつくというのは,ディレクトリの 下 で 分 岐 をしながら 下 へたどっていることになる. この 構 造 を 木 の 枝 に 例 えてツリー 構 造 と 呼 んでいる( 図 1.3). UNIX にログインして 最 初 に 入 るディレクトリはホームディレクトリと 呼 ばれる.こ れまで 操 作 してきたディレクトリ 階 層 がホームディレクトリである.これを 仮 にGUI 系 OS のデスクトップと 考 えてみるとイメージしやすいだろう. Windows などのOS では,ドライブ 名 (C:) などだけで 示 される 最 上 位 のディレクト リのことを,ルートディレクトリ(rootdirectory = 根 っこのディレクトリの 意 ) と 呼 ん でいる.UNIX では, 複 数 ドライブが 存 在 しても,それらを1つのディレクトリの 下 に 管 理 するやり 方 なので,ルートディレクトリは1つである. カレントディレクトリ Windows では, デスクトップにある マイ ドキュメント フォルダを 開 いて, 内 部 のファイルを 操 作 することがある.ディスプレイは 平 面 だから 認 識 しづらいかもしれな いが, 現 在 操 作 するフォルダやファイルのウィンドウは 色 が 他 と 異 なって 最 前 面 にきて いる.これは 操 作 するディレクトリの 立 ち 位 置 が 変 わっていることを 表 している. 111

126 第 6 章 UNIX の 基 本 操 作 これをUNIX の 考 え 方 に 置 き 換 えると, デスクトップ という 階 層 のディレクトリ から, マイドキュメント という 階 層 のディレクトリへ 移 動 して,その 視 点 からファイ ルを 操 作 していると 考 えることができる. このように 立 ち 位 置 を 変 えて 操 作 している, 今 現 在 (current) のディレクトリのこと をカレントディレクトリという. (1) ディレクトリの 移 動 ディレクトリの 立 ち 位 置 を 移 動 するには,currentdirectory を 表 す cd コマンドを 用 いる.コマンド cd のあとに 移 動 先 のディレクトリ 名 を 指 定 する.このとき,1 回 のコマンド 入 力 で 移 動 できるように,ディレクトリの 階 層 図 をイメージして,パスを 正 確 に 入 力 できることが 望 ましい. ディレクトリを 指 定 せずに cd だけで 実 行 すると,ホームディレクトリに 移 動 する. 演 習 コマンド cddr1 を 入 力 して,ディレクトリ dr1 へ 移 動 しなさい. 2. コマンド ls を 実 行 してディレクトリ dr1 の 中 身 を 確 認 しなさい. 3. ディレクトリ drr へ 移 動 し,ディレクトリの 中 を 確 認 しなさい 回 のコマンド 入 力 でもう1 度 dr1 へ 移 動 しなさい. (2) カレントディレクトリの 表 示 UNIX の 階 層 構 造 に 不 慣 れであるときは,カレントディレクトリがどこなのかがわか らなくなることがある.その 場 合 は,コマンド pwd を 用 いてカレントディレクトリ を 絶 対 パスのかたちで 表 示 することができる. ディレクトリ drr へ 移 動 して,コマンド pwd を 実 行 すると, /home/(ユーザー 名 )/dr/drr のように 表 示 される.このうち, /home/(ユーザー 名 )/ の 部 分 が, 各 ユーザー のホームディレクトリを 表 している. 演 習 コマンド cd. と cd.. は,それぞれ 相 対 的 にどこへ 移 動 するつもりか 考 えなさい. 2. コマンド ls を 実 行 したら ima のみが 表 示 された. カレントディレクトリはどこか, 考 えなさい. 112

127 第 7 章 サーバでのWebページの 運 用 7.1 はじめに 本 章 では, 作 成 したWeb サイトのファイルをサーバへアップロードして, 管 理 して ゆくための 基 礎 知 識 を 述 べる. 7.2 サーバへのアップロード 自 分 のPC 環 境 で 作 成 してきたWeb ページ 各 ファイルの 情 報 は,サーバを 介 したネッ トワークから 閲 覧 者 に 提 供 される.そのためにはサーバに 作 成 したファイルをアップ ロード(Upload) しなければならない. ここでは,UNIX で 構 築 されたサーバに,インターネット 上 で 公 開 されているFFFTP というフリーのソフトウェアを 使 ってアップロードする 方 法 を 紹 介 する FFFTP のセッティング まず,FFFTP をダウンロードし,インストールする.その 後, 初 めて 起 動 させた 時 点 を 仮 定 して 説 明 すると, 利 用 するまでの 手 順 は 大 体 次 のようになる. 1 図 7.1 のような 画 面 が 現 れたら, 接 続 メニュー ホストの 設 定 へたどる. 2 ホスト 一 覧 ウィンドウが 出 たら 新 規 ホスト ( 右 列 最 上 ) をクリックする. 3 ダイアログボックス( 図 7.2) が 出 たら, 基 本 タブで 以 下 の 項 目 を 書 き 込 む. ホストの 設 定 名 ;わかりやすい 名 前 ( 例 : 大 学 サーバ ). ホスト 名 ;アカウント Loginserver に 書 かれた 名 前. ユーザー 名 (U);アカウントの ユーザー 名. パスワード/パスフレーズ(P);アカウントに 書 かれた( 変 更 した) パスワード. ローカル 初 期 フォルダ(L);FFFTP を 接 続 した 時 に 最 初 に 出 てくるローカル 側 ( 自 分 側 ) のフォルダを 指 定 する.テキストボックス 右 の 四 角 いボタンでフォルダ(ディレク 113

128 第 7 章 サーバでのWeb ページの 運 用 図 7.1: FFFTP の 画 面 ( 画 像 : 図 7.2: FFFTP ホストの 設 定 ダイアログ トリ) を 指 定 する. 例 ) 自 分 のPC 環 境 のルートディレクトリ (あるいは マイドキュメント ) など. ホストの 初 期 フォルダ(R); 上 と 同 じくホスト 側 (サーバ 側 ) のディレクトリを 指 定 す る. 普 通 はサーバのホームディレクトリ /home/(unix のユーザー 名 ) anonymous; 特 にチェックなどをしなくてもよい. 4 設 定 ( 記 入 ) が 終 わったら OK をクリックする. 114

129 7.2. サーバへのアップロード 接 続 の 手 続 きで 設 定 を 完 了 すると, ホスト 一 覧 ダイアログに 自 分 の 作 ったサーバ のアイコンが 出 ているので,それを 選 択 してダイアログ 右 側 の 接 続 をクリックする. すでに 設 定 されたもの(2 回 目 以 降 ) に 接 続 するときは, 接 続 メニュー 接 続 ホスト 一 覧 ダイアログの 接 続 をクリックする. 接 続 すると 左 右 両 方 の 画 面 にフォルダなどが 表 示 される. 表 示 される 画 面 の 左 側 は 自 分 が 使 っているPC の 環 境 (Windows), 右 側 がサーバ 側 の 環 境 (UNIX) である( 図 7.1) 転 送 自 分 の 環 境 のファイル 群 をサーバ 側 にアップロードする 手 順 は 次 のように 行 う. (1) 転 送 先 の 確 認 サーバ 側 ( 右 側 ) 画 面 に puclichtml といったフォルダ(ディレクトリ) がある 場 合 は,ダブルクリックをして,その 中 にアップロードする.これを 行 わないとアップロー ドをしてもブラウザに 表 示 されない. puclichtml がない 場 合 はディレクトリを 作 成 する. (2) 転 送 元 の 確 認 自 分 側 ( 左 ) でアップロードするファイルなどの 場 所 を 探 す. (3) アップロード ファイル 群 を 見 つけたらアップロードしたいファイルを 選 び,ツールバーの を 押 す.または 左 画 面 のファイルを 右 画 面 にドラック&ドロップする.ウィンドウが 出 てき て 帯 が 出 たら, 転 送 している 状 態 にある. (4) アップロードの 完 了 ウィンドウが 消 えればアップロードの 完 了 である. 全 てのアップロードが 終 わったら 接 続 を 切 る. 方 法 としては 次 のような 手 順 がある. ツールバー コンセントに 印 ( 左 から3 番 目 ) を 押 す. プリケーションを 終 了 すればFTP 接 続 も 切 れる. (ダイアルアップ 接 続 の 場 合 は 別 途 切 断 手 続 きをとる) ダウンロードは 転 送 作 業 の 逆 の 手 順 を 踏 む.すなわち,サーバ 側 でファイルを 選 択 し ダウンロード を 押 す. 115

130 第 7 章 サーバでのWeb ページの 運 用 転 送 結 果 の 確 認 転 送 ができたらWeb ブラウザを 起 動 し, 自 分 のWeb ページのURI にアクセスし, 自 分 のWeb ページが 閲 覧 できるか 確 認 する.URI は 例 えば 以 下 のようになる. xx /public html/index.html (xx はWeb サーバにおける 自 分 のlogin 名 を 仮 定 ) 7.3 サーバ 上 でのページの 運 用 サーバ 上 で 動 くプログラム HTML 文 書 作 成 の 際 には,プログラムの 入 門 編 を 兼 ねてJavaScript の 実 装 を 行 った. Web サイトでよく 使 われるスクリプトでは,JavaScript のほかにCGI やPHP などが ある.いずれも 動 的 にWeb ページを 生 成 するWeb サーバの 拡 張 機 能 である. JavaScript はWeb ページにアクセスした 閲 覧 者 のPC 上 でWeb ブラウザが 処 理 をし て 結 果 を 返 すが,CGI やPHP はブラウザ 上 で 操 作 をするとサーバ 上 のOS がスクリプ トを 起 動 して 動 作 結 果 を 返 し,サーバを 介 してブラウザ 上 に 結 果 を 表 示 する( 図 7.3). CGI やPHP のスクリプトをサーバ 上 に 設 置 し,HTML 文 書 にそれらを 起 動 させる スプリクトを 組 み 込 んでおけば,ブラウザやPC に 大 きな 負 担 をかけることなく, 各 閲 覧 者 の 要 求 に 自 動 的 に 応 えさせることができる. 図 7.3: サーバ 上 スクリプトの 処 理 イメージ CGI CGI(CommonGatewayInterface) を 使 うことによって,Web サイトはプログラムの 処 理 結 果 に 基 づいて 動 的 に 文 書 を 生 成 し, 送 出 することができるようになった. 現 在 で はほとんどのWeb サーバソフトがCGI に 対 応 している.CGI はどのような 開 発 言 語 116

131 7.3. サーバ 上 でのページの 運 用 でも 記 述 できるが, 多 くの 場 合 Perl というプログラム 言 語 が 用 いられる. 身 近 な 実 用 例 には 次 のようなものがある. アクセスカウンタ: ブラウザでダウンロードが 行 われるたびに 数 字 の 画 像 を 変 更 し,ア クセス 数 などを 表 示 することができる. 掲 示 板 : テキストボックスにコメントを 書 き, 送 信 ボタンなどでテキストをサーバに 転 送 すると,サーバ 上 でHTML 文 書 上 に 上 書 きされ, 書 き 込 み 結 果 を 返 して 表 示 する. アンケート: ブラウザ 上 の 回 答 フォームで 入 力 送 信 されたデータを 集 計 し 公 表 する. クッキー(Cookie):Web サイトの 提 供 者 が, 閲 覧 者 のアクセス 時 のデータをコンピ ュータに 一 時 的 に 保 存 させるしくみ.CGI スクリプトで 返 すHTML 文 書 にクッ キーをつけて 閲 覧 者 のブラウザに 送 信 する.これによってユーザーを 識 別 できる ので, 認 証 システムやWWW によるサービスをユーザーごとにカスタマイズす るための 要 素 技 術 として 利 用 される. PHP PHP(PHP:HypertextPreprocessor) は,XML のサポートや 各 種 データベースとの 連 携 に 優 れている 点 などから, 近 年 普 及 しつつある.プログラムの 表 記 法 はC 言 語,Java, Perl の 各 言 語 から 転 用 したものがベースとなっているが,PHP 独 自 のものもある CGI スクリプトの 設 置 ~アクセスカウンタ ここでは, 前 節 で 説 明 したスクリプトを 実 装 運 用 するために,Web ページにアク セスカウンタを 設 置 する.ただし,ここではスクリプトでシステムを 組 み 上 げることは 省 略 して,Web サイトからフリーでダウンロードできるものを 利 用 する. (1) 必 要 なものの 準 備 ブラウザの 検 索 エンジンから, カウンタ フリー などのキーワードからWeb サイ トの 素 材 提 供 サイトを 探 し,カウンタのパッケージをダウンロードする. 大 抵 のサイト では, 設 置 の 方 法 や 説 明 が 詳 細 に 書 かれているので,ダウンロードから 設 置 に 至 るまで 説 明 に 忠 実 に 行 う. 基 本 的 に 必 要 なものは, xxx.cgi xxx.dat (xxx は 仮 のファイル 名 ) のような 拡 張 子 をもった 同 じ 名 のファイルのセット,そしてカウンタの 表 示 に 必 要 な 数 字 (0~9) の 画 像 である. 画 像 は 自 分 で 作 成 してもよいし,アクセスカウンタを 提 供 しているサイト 117

132 第 7 章 サーバでのWeb ページの 運 用 では, 数 字 画 像 のgif ファイル 群 やフォルダがダウンロード 用 に 準 備 されていることが 多 い. (2)UNIX 上 での 作 業 次 に,(1) でそろえた 素 材 をサーバに 設 置 する.そのためにサーバのUNIX にログイ ンし,CGI スクリプト(プログラム) を 置 くための 場 所 を 用 意 する. 例 えば,ダウンロードサイトで 次 のようなディレクトリ 構 成 が 示 されていれば,それ に 従 う. ディレクトリ 構 成 例 public_html / index.html ( ここにカウンタを 設 置 する) +-- cgi-bin / xxx.cgi [755 or 705] xxx.dat [666 or 606] +-- gif / 0.gif 1.gif... 9.gif lock [777 or 707] 図 7.4 は 上 記 の 構 成 例 を 描 き 直 したものである. 図 7.4: カウンタのディレクトリ 構 成 例 118

133 7.3. サーバ 上 でのページの 運 用 このディレクトリ 構 成 の 考 え 方 は 次 の 通 りである. (ア) publichtml ディレクトリにWeb ページのファイルを 置 くので, 同 じ 階 層 にディレクトリ cgi-bin を 作 成 する. (イ) cgi-bin にはCGI スクリプトを 設 置 する. 同 じ 階 層 には スクリプトで 使 う 数 字 画 像 を 設 置 するディレクトリ gif と, データの 同 時 処 理 の 不 具 合 を 防 ぐ lock ( 排 他 制 御 ) という ディレクトリを 作 成 する. コマンドで 設 置 する 時 の 入 力 は 次 のようになる. > cd public html > mkdir cgi-bin > cd cgi-bin > mkdir gif > mkdir lock > は 各 行 頭 を 示 すので 入 力 しない (3)HTML 文 書 への 実 装 作 成 したWeb ページ(トップページ) のソースに,サイトの 例 に 従 って 数 字 画 像 を 表 示 するタグを 書 き 込 む. 最 もシンプルなアクセスカウンタは, 下 に 示 すように 表 示 させ る 画 像 の 桁 数 だけタグを 記 述 するものもあれば,1 つのタグでよいものもある.ダウン ロードサイトの 説 明 をよく 読 み,それに 忠 実 にソースを 書 く 必 要 がある. 一 例 として4 桁 の 例 を 示 しておく.ここでは, 設 置 する 桁 数 の 分 だけ, 右 のタグから 左 のタグへの 順 に, 引 数 を 数 字 ( 桁 数 )で 記 述 している. <img src="cgi-bin/xxx.cgi?4"> <img src="cgi-bin/xxx.cgi?3"> <img src="cgi-bin/xxx.cgi?2"> <img src="cgi-bin/xxx.cgi?1"> カウント 番 号 は 横 並 びになるので, 改 行 ( <br>) などはしない (4) サーバへの 転 送 (3) までの 準 備 が 完 了 したらWindows 上 に 保 存 してある 各 ファイルをWeb サーバへ 転 送 する. 119

134 第 7 章 サーバでのWeb ページの 運 用 1. FFFTP を 起 動 しWeb サーバに 接 続 する. 2. Web サーバの publichtml の 中 に 自 分 のWeb ページを 転 送 ( 上 書 き) する. 3. カウンタの cgi ファイルと dat ファイルを cgi-bin ディレクトリ に 転 送 する. 4. gif ディレクトリの 中 に 画 像 ファイル 0.gif~9.gif を 転 送 する. 5. FFFTP を 開 いて 保 護 モード(パーミッション) を 設 定 する.( 次 節 参 照 ) 7.4 保 護 モード Web サーバはUNIX で 作 られることが 多 い.UNIX は 複 数 の 人 が 同 時 にアクセスで きる 利 点 がある 反 面, 他 人 に 自 分 のディレクトリやファイルにアクセスされるという 欠 点 が 存 在 する.そこで,ディレクトリやファイルにアクセスする 権 限 を 設 定 する 必 要 が ある. コンピュータのハードディスクなどに 保 存 されている,ファイルやディレクトリに 対 するユーザーのアクセス 権 のことを 保 護 モード,またはパーミッション(permission) という. パーミッション は, 一 般 にUNIX システムにおけるアクセス 権 を 指 す 言 葉 として 用 いられる. UNIX システムのパーミッションでは, オーナー(Owner):ファイル/ディレクトリの 所 有 者 グループ(Group): 同 じマシンを 利 用 できるユーザー 全 体 その 他 (Other):その 他 全 て に 対 して,それぞれ 読 み 込 み 書 き 込 み 実 行 の3 種 類 の 権 限 を 与 えるかどうか を 個 別 に 設 定 する FFFTP での 設 定 保 護 モードの 設 定 とはどういうことかを 理 解 するために,まずFFFTP で 設 定 する. FFFTP では, 保 護 モードを 切 り 替 える 操 作 を 属 性 変 更 と 呼 ぶ. 1FFFTP でホストのディレクトリを 開 いた 状 態 ( 接 続 中 ) にする. 2 ホストディレクトリのフォルダやファイルをマウスで 右 クリックし 属 性 変 更 を 選 ぶ. 3 属 性 変 更 をクリックすると,ダイアログボックスが 表 示 される. 現 在 属 性 の 数 値 を 書 き 換 えることで 設 定 変 更 する. 120

135 7.4. 保 護 モード 図 7.5: FFFTP の 属 性 変 更 ダイアログ 図 7.5 ではチェックボックス( 上 段 ) と, 現 在 の 属 性 を 示 す3 桁 の 数 字 テキストボック ス( 下 段 ) がみられる.まず,チェックボックスの 説 明 を 行 う. チェックを 入 れた 項 目 は アクセス 権 を 認 める という 意 味 で,オーナーにはページ 管 理 のために 閲 覧 も 書 き 込 みもプログラムの 実 行 もすべて 権 限 を 持 たせる.したがって 全 てにチェックがある. グループ その 他 には,ファイルの 閲 覧 やプログラムの 実 行 は 認 められるが, 勝 手 な 書 き 込 みによる 不 正 利 用 は 困 るので 書 込 以 外 がチェックされている. 上 段 のチェックに 伴 って, 下 段 の 現 在 の 属 性 の 数 値 は 変 化 する. 現 在 の 属 性 に ある 755 については, 次 のUNIX のパーミッションとともに 理 解 する UNIX のパーミッション TeraTermPro からTelnet を 行 ってUNIX にログインし, 以 下 の 操 作 を 行 う. cd(ホームディレクトリへ 移 動 ) ls-l( 全 てのファイルの 一 覧 を 詳 細 表 示 ) 一 覧 の 詳 細 表 示 を 実 行 すると,ファイルやディレクトリの1 番 左 に -rw-r r や drwxrwxrwx などの 文 字 列 が 表 示 される.これはファイルやディレクトリの 保 護 状 態 を 表 している.これらの 文 字 列 は4つの 部 分 に 分 けることができる. 先 頭 の 記 号 は 表 示 するものの 種 類 が ファイルかディレクトリか を 示 しており, d がディレクトリ, - は そうではない ということを 示 すので,ファイルの 識 別 である. 121

136 第 7 章 サーバでのWeb ページの 運 用 図 7.6: UNIX のパーミッション その 後 に 続 く9つの 記 号 は3つずつのセットになっており, 左 オーナーに 対 する 保 護 状 態 ( 読 取 (r) 書 込 (w) 実 行 (x)) 中 グループ 員 に 対 する 保 護 状 態 ( 読 取 書 込 実 行 ) 右 その 他 に 対 する 保 護 状 態 ( 読 取 書 込 実 行 ) と 分 かれる( 図 7.6). 記 号 がアルファベットで 表 示 されている 箇 所 はアクセスの 許 可 を,そうではない - の 箇 所 はサクセスの 禁 止 をそれぞれ 示 している. つまり, 上 述 で 挙 げた2 例 のパーミッションは, -rw-r r : オーナーは 読 み 書 き 可 能 でグループ 員 とその 他 は 読 取 のみ 可 能 である ファイル drwxrwxrwx : 誰 でも 読 み 書 き 実 行 可 能 なディレクトリ ということを 表 している UNIX での 保 護 状 態 の 変 更 UNIX でパーミッションの 設 定 を 変 更 するには chmod コマンドを 用 いる.コマン ドの 打 ち 方 としては, chmod [3 桁 の 数 字 ] [ 保 護 状 態 を 変 更 したいファイルの 名 前 ] のようになる. 122

137 7.4. 保 護 モード ここで 重 要 なのが[3 桁 の 数 字 ] である.3 桁 の 数 字 は8 進 数 (0~7) で 表 さなければ ならない.1 桁 1 桁 がそれぞれ オーナー グループ その 他 の 設 定 を 表 している. 1 桁 の 数 字 のみで, 読 取 書 込 実 行 の 合 計 3 種 類 を 設 定 する. 数 字 の 仕 組 みは 次 のように 考 える. 記 号 r,w,x の 許 可 はそれぞれ 点 数 を 持 って おり,r は4 点,w は2 点,x は1 点 となる.これらの 許 可 するものの 合 計 点 数 で 許 可 または 禁 止 の 状 態 を 表 現 する. 計 算 例 読 取 書 込 実 行 ならば r とwが 許 可 となり 4+2+0=6 となる. 読 取 書 込 実 行 ならば r とxが 許 可 となり 4+0+1=5 となる でみたFFFTP での 保 護 モード 設 定 のダイアログ( 図 7.5) には 755 となって いた.これは, 上 述 の8 進 数 の 組 み 合 わせで, オーナー:rwx ともに 可 (4+2+1)= 7 グループとその 他 :r-x(4+0+1)= 5 を 連 ねたものである. 演 習 7-1 次 のパーミッションの 対 象 (ファイル/ディレクトリ) と 設 定 ( 数 字 3 桁 ) を 答 えなさい. (1) -rw-r-xr-x (2) drwxr-xr-x 定 番 のパーミッション 上 述 した 例 のように,フリーダウンロードしたWeb コンテンツにパーミッションの 指 定 がある 場 合 は, 提 供 サイトの 指 示 に 従 ってパーミッションを 設 定 する. これは,それぞれのファイル ディレクトリは 仕 事 が 違 うから, 慣 れないうちの 独 断 は 避 けるべきだという 理 由 もあるが, 指 定 された 以 外 のパーミッション 設 定 すると,コ ンテンツが 動 かないようにプログラミングされたものもあるからである. 時 々,サーバによっては 指 示 通 りに 指 定 しても 動 かないときがある.そういう 時 はと りあえず 755 に 設 定 して 様 子 をみるのが 無 難 である. 123

138 第 7 章 サーバでのWeb ページの 運 用 表 7.1: よく 使 われる 定 番 のパーミッション 値 値 意 味 644 誰 でも 読 み 込 みが 可 能 で, 自 分 は 書 き 込 みも 可 能. 通 常 のHTML ファイルなど. 666 誰 でも 書 き 込 みと 読 み 込 みが 可 能. CGI が 書 き 込 む 掲 示 板 のログファイルなど. 755 誰 でも 実 行 と 読 み 込 みが 可 能. 通 常 のディレクトリ,コマンド,CGI の 実 行 ファイルなど. 777 誰 でも 読 み 書 き 実 行 が 可 能.( 何 でもOK の 状 態 ) CGI がファイルを 作 成 するディレクトリなど サーバ 上 スクリプトのまとめ 以 上,フリーのスクリプトの 設 定 を 通 して,サーバ 上 にアップロードしたWeb サイ ト 運 営 の 基 礎 を 述 べてきた.ここで 取 り 扱 った 例 はアクセスカウンタだったが, 掲 示 板 やその 他 のコンテンツでも 基 本 的 には 同 じ 考 え 方 で, 設 置 や 利 用 は 可 能 である.もう 一 度, 一 連 の 手 順 を 簡 単 に 示 しておく. 1 提 供 サイトで 使 いたいスクリプト 一 式 のダウンロード. 2 サイトの 指 示 に 従 ってWeb ページの 書 き 換 え. 3 サーバに 接 続 してスクリプトを 設 置 するための 準 備 (ディレクトリの 構 成 をよく 考 える). 4 サーバへの 転 送 ( 上 書 き) パーミッションの 設 定. 2と3の 手 順 はどちらが 先 でもよい. 7.5 Web ページへのアクセス 認 証 Web サイトやページはインターネット 上 のサーバに 公 開 されており,いわば,どこ からでも 誰 でもアクセスして 閲 覧 ができる.この 性 質 を 利 用 すれば, 遠 隔 地 にいる 人 た ちの 情 報 共 有 の 場 として 用 いることが 可 能 である.しかし, 組 織 やサークルなどの 幹 事 会 や 会 議 など, 機 密 性 を 保 持 したい 情 報 共 有 においては, 利 用 の 目 的 とシステムの 利 点 が 矛 盾 してしまうことになる. そこで 本 節 では, 特 定 のWeb サイトやページに 対 して, 特 定 の 人 のみがアクセスを 許 すという 手 法 を 紹 介 する.Web サイトを 作 成 し 自 前 で 運 営 する 場 合 には 知 っておく と 便 利 である. 124

139 7.5. Web ページへのアクセス 認 証 ディレクトリに 対 するアクセス 認 証 特 定 の 人 のみがアクセスできるようにするための 手 っ 取 り 早 い 方 法 は,アクセス 権 者 にID とパスワードを 発 行 して 認 証 する 方 法,あるいは,1 組 のID とパスワードをア クセス 資 格 者 のみで 共 有 する 方 法 がある. ID とパスワードを 求 めてアクセス 認 証 をするには,.htaccess というファイルを, サーバのディレクトリに 設 置 することが 一 般 的 に 普 及 している..htaccess はApache(Web サーバソフトウェアの1つ) などのWeb サーバ 上 で, Web サーバの 動 作 をディレクトリ 単 位 で 制 御 するためのファイルである..htaccess ファイルで 設 定 した 内 容 は,.htaccess ファイルがあるディレクトリとその 配 下 のディ レクトリ(サブディレクトリ) に 有 効 で,それらのディレクトリに 入 っているファイル すべてにも 影 響 を 与 える. また,.htaccsess はサブディレクトリにも 別 に 置 くことができる.このとき, 両 方 のファイルの 制 限 が 影 響 を 与 える. 制 限 が 矛 盾 するときはサブディレクトリの 設 定 が 優 先 される htaccess の 作 成.htaccsess ファイルの 作 成 は 次 の 手 順 で 行 う. (1) テキストエディタでの 作 業 テキストエディタ(メモ 帳 など) に 次 のような 内 容 を 書 く. AuthType Basic AuthName( 表 示 されるメッセージなど) AuthUserFile(ID パスワード 格 納 ファイルの 所 在 ) require valid-user 2 行 目 の 表 示 されるメッセージ は, ID とパスワードを 入 力 してください(Input youridandpassword.) などのようなテキスト 表 示 を 指 定 するものである( 図 7.7). 日 本 語 を 記 述 すると,InternetExplorer 以 外 のブラウザでは 文 字 化 けする 場 合 があ るので, 半 角 英 数 で 記 述 しておくのが 無 難 である. 3 行 目 はWeb サイト ページの 作 成 者 が 発 行 するID とパスワードを 記 述 したファイ ルを 作 成 し(7.5.3),.htaccess とともにアップロードするファイル(.htpasswd ) の 所 在 をフルパス( 絶 対 パス) で 記 述 する. 125

140 第 7 章 サーバでのWeb ページの 運 用 図 7.7: ID パスワード 入 力 ダイアログ ( 画 像 : ここでいうフルパスは, 作 成 したHTML 文 書 をアップロードしたサーバ 内 である. FFFTP でいうとサーバ 側 ( 右 側 ) の 上 に 表 示 されるものを 見 ればよい 転 送 結 果 の 確 認 で 示 した 例 を 参 考 にすると 次 のようになる. /home/xx /public html/.htpasswd 以 上 の 例 をまとめて, 改 めてテキストファイルの 内 容 を 示 すと 次 のようになる. AuthType Basic AuthName Input your ID and Password. AuthUserFile/home/xx /public html/.htpasswd require valid-user (2) htaccsess.txt の 形 で 保 存 Windows にファイルを 保 存 する 時,ドット/ピリオド(. ) から 始 まるファイル 名 をつけることはできない.ひとまず 表 題 のファイル 名 で 保 存 し,ファイルをサーバに アップロードしてから,サーバ 上 でファイル 名 を 変 更 する htpasswd の 作 成.htaccess の 制 御 に 対 応 するID とパスワードを 登 録 するファイルを 作 成 する. 作 成 方 法 には,テキストエディタよるものと,サーバ 上 でのコマンド 操 作 によるものが 126

141 7.5. Web ページへのアクセス 認 証 ある. (1) テキストエディタでの 作 成 1 ユーザー 名 (ID) とパスワードの 決 定 Web サイトにアクセスするためのID とパスワードを 決 める.ここでは 仮 にID を goma,パスワードを hirake として 話 を 進 める.アクセスできる 人 にそれぞれ 配 布 する 場 合 は, 複 数 決 定 しておき, 忘 れないようにメモをしておく. ID:goma/passwd: hirake ID:shiro/passwd: kokohore 2 パスワードの 暗 号 化.htpasswd に 記 述 するパスワードは 暗 号 化 されたものである. 暗 号 化 はサーバ 上 でできるが,これは 次 の(2) で 説 明 する. インターネット 上 で,.htpasswd 生 成.htpasswd 暗 号 化 といったキーワード で 検 索 をかけると, 暗 号 化 できるサイトが 提 示 されるので 活 用 するとよい. hirake UZoq7sCP3yZ1E 3 テキストエディタに ID: 暗 号 化 されたパスワード を 記 述 テキストエディタを 開 いて, 決 定 したID と 暗 号 化 したパスワードをコロン( : ) で つないで1 行 で 記 述 する. 複 数 のアカウントを 発 行 した 場 合 は,1 つのアカウントにつ き1 行 ずつ 記 述 する. goma:uzoq7scp3yz1e shiro:8lkrqtjy5pots 4 htpasswd.txt の 形 で 保 存.htaccess の 時 と 同 じように, 上 述 のようなファイル 名 で 保 存 する( 参 照 ). (2) コマンドラインでの 作 成 1 ユーザー 名 とパスワードの 決 定 アクセスする 人 に 配 布 するアカウントをあらかじめ 決 めておくのは,(1) の1と 同 じ である. 2telnet を 行 ってサーバへ 接 続 コマンドプロンプトやTeraTermPro などの 端 末 エミュレータを 使 って,サーバへ 接 続 し, 自 分 のアカウントのID とパスワードでログインする. 127

142 第 7 章 サーバでのWeb ページの 運 用 3 格 納 ファイルの 作 成 htpasswd コマンドを 用 いてID とパスワードを 設 定, 登 録 するとともに,それを 格 納 するファイルを 作 成 する.ファイル 名 は 何 を 指 定 してもよいが,.htaccess に 記 載 したものと 同 じでなければならない. 本 書 では.htpasswd としておく.コマンドの モデルは 次 のようになる. htpasswd-c[ファイル 名 ][ID] htpasswd-c.htpasswd goma オプション -c をつけると,1 つのID に 対 するファイルの 新 規 作 成 のみを 指 示 す る. 次 の 行 には NewPassword: が 表 示 され,6.3.2 で 行 ったパスワード 変 更 と 同 様 の 手 順 で,ID に 対 するパスワードを 登 録 する. オプション -b を 追 加 すると,コマンドラインから 直 接 パスワード 登 録 をすること ができる. htpasswd-cb[ファイル 名 ][ID][ 登 録 するパスワード] htpasswd-cb.htpasswd goma hirake Addingpasswordforusergoma のようなコメントがあらわれたら 登 録 完 了 である. 4 2 つ 目 以 降 のアカウント 登 録 2 つ 目 以 降 のアカウントは 新 規 ファイルを 作 成 する 必 要 がないので,オプション -c は 必 要 ない. htpasswd[ファイル 名 ][ID] htpasswd.htpasswd shiro コマンド 入 力 後 の 手 続 きは3と 同 じである ファイルの 設 置 作 成 した.htaccess と.htpasswd をサーバに 設 置 する.アップロード 先 は,HTML を 設 置 しているディレクトリの 最 上 部, 本 書 の 場 合 なら,/home/xx /public html 内 に 設 置 する. テキストファイルをアップロードする 場 合, 転 送 後 のサーバ 上 のファイル 名 を 書 き 換 える 必 要 がある. 128

143 7.5. Web ページへのアクセス 認 証 htaccess.txt.htaccess htpasswd.txt.htpasswd パスワード 格 納 ファイルをコマンドラインで 作 成 する 場 合 も, 事 前 に cd コマンド を 用 いて, 設 置 すべきディレクトリに 移 動 しておくか, 作 成 後 に mv コマンドでファ イル 移 動 することを 忘 れないように 注 意 する まとめ 以 上 の 作 業 を 行 って,ブラウザからURI を 入 力 し, 図 7.7 のようなダイアログが 出 れば 成 功 である. 小 規 模 の 無 料 サーバなどでは,こうしたサーバ 設 定 ができない 場 合 も あるので,レンタルサーバなどを 利 用 する 際 は,よくサーバの 状 況 を 把 握 しておくこと が 肝 要 である. 129

144

145 第 III 部 画 像 処 理

146

147 第 8 章 画 像 データの 基 礎 8.1 はじめに 現 代 の 世 の 中 において,コンピュータによる 画 像,いわゆるデジタル 画 像 は 様 々なと ころにあふれている.デジタルカメラや 地 上 波 デジタル 放 送 の 開 始 だけでなく,Web ページに 載 っている 写 真,ポスターなど,デジタル 画 像 を 扱 っているコンテンツは 数 多 い. この 章 では, 主 に 静 止 画 のデジタル 画 像 とは 何 かを 学 ぶ. 8.2 画 像 のデジタル 処 理 我 々の 生 活 は 様 々なデジタル 画 像 に 囲 まれている.しかし,デジタル 画 像 とそうでな い 画 像 の 区 別 というのはほとんどつかないと 言 える.これは,デジタル 画 像 の 処 理 や 加 工 技 術 の 進 歩 によって, 人 間 が 見 た 場 合 の 現 実 世 界 とデジタル 世 界 が 近 づいたおかげで ある. そもそも, 静 止 画 像 は 空 間 的 に 連 続 的 に 変 化 するアナログ 情 報 である.アナログ 画 像 をデジタル 画 像 に 変 換 するには,まず, 元 の 画 像 を 規 則 的 に 並 んだ 正 方 形 の 格 子 状 に 分 ける.こうした 作 業 をサンプリングという.サンプリングの 格 子 が 小 さければ 小 さい 程, 元 の 画 像 に 近 いなめらかな 表 現 をすることが 可 能 になる. サンプリングができれば,その 格 子 の 明 るさを 平 均 化 して,あらかじめ 設 定 された 何 段 階 かのレベルに 振 り 分 ける.この 変 換 作 業 を 量 子 化 と 呼 ぶ. 8.3 デジタル 画 像 の 表 現 デジタル 画 像 は,コンピュータで 再 生,すなわち, 表 現 する 必 要 がある. 扱 うデータ がデジタル 情 報 であると 同 時 に,それを 表 現 する 機 器 もデジタル 方 式 なのである.デジ タル 画 像 は, 点 (マス 目 ) の 集 まりとして 表 現 される. 画 像 を 構 成 する 各 点 を 画 素 (ピク セル pixel),もしくは,ドット(dot) という. 133

148 第 8 章 画 像 データの 基 礎 図 8.1: 解 像 度 が 高 い 場 合 ( 左 ) と 低 い 場 合 ( 右 ) の 違 い 画 像 の 品 質 は, 情 報 をサンプリング, 量 子 化 する 機 器 や 画 像 処 理 ソフトの 設 定 やプリ ンタの 機 能 によって 決 定 される. 例 え 同 じ 画 素 の 画 像 であっても, 出 力 する 機 器 の 違 いによって 品 質 が 変 わるので 注 意 が 必 要 である.こうした 場 合 の 指 標 とな るのが, 印 刷 解 像 度 (dpi:dotsperinch) という 指 標 である. 印 刷 解 像 度 とは,1 イ ンチあたりに 何 個 の 画 素 が 入 るかを 表 した 密 度 である. 図 8.1 に 示 したように, 印 刷 解 像 度 が 高 い 画 像 と 低 い 画 像 を 同 じ 大 きさ で 並 べてみ ると,その 違 いが 明 確 である.このように,デジタル 画 像 は 印 刷 解 像 度 が 高 いほど 品 質 の 高 い 画 像 になるのである. 8.4 デジタル 画 像 の 色 の 表 現 人 間 には, 特 定 の 波 長 に 対 して 感 知 する 細 胞 ( 錐 体 ) が3 種 類 あり,その 視 細 胞 がそれ ぞれの 波 長 を 色 に 変 換 して 知 覚 するのである. 人 間 はその 細 胞 により,およそ500nm の 光 は 青,500~600nm の 光 は 緑,600nm 以 上 の 光 は 赤 として 感 じるのである.こうし た 人 間 の 色 知 覚 の 基 本 である, 青, 緑, 赤 は 光 の3 原 色 と 呼 ばれる.デジタル 画 像 もこ の3 原 色 を 利 用 して, 人 間 に 色 を 認 識 させるのである. 光 の 場 合 は, 波 長 という 連 続 体 であるが,デジタル 画 像 の 場 合 は, 本 来 1 か 0 のデータである.このデータにおいて, 最 も 単 純 に 色 のデータを 示 すならば, 1 を 黒, 0 を 白 というように 扱 うことになる. 当 然,この 段 階 では 線 を 表 現 することができて も, 色 を 表 すことができない. 例 えば, 図 8.2 の 左 に 示 した 画 像 は, 1 か 0 のデー タで 表 した 場 合 の 画 像 である. 単 純 に 1 と 0 で 表 すと, 画 像 の 鮮 明 さが 失 われる のである. 色 の 情 報 をさらに 詳 細 にデータ 化 する 方 法 が, 階 調 化 と 呼 ばれる 手 法 である.この 階 調 化 では, 光 の 強 さを 段 階 的 に 認 識 してデータ 化 するのである. 例 えば, 明 るさ 情 報 を 134

149 8.4. デジタル 画 像 の 色 の 表 現 図 8.2: 2 階 調 で 表 した 画 像 ( 左 ) とグレースケールで 表 した 画 像 ( 右 ) 256 階 調 に 分 けて 表 現 したのがグレースケールと 呼 ばれるものである. 図 8.2 の 右 の 画 像 は, 左 の 画 像 と 同 じものをグレースケールで 表 したものである.こうすると, 灰 色 情 報 だけであってもより 現 実 に 近 い 画 像 になっている. 黒 白 の 画 像 の 場 合 は, 細 かく 階 調 化 することで, 現 実 に 近 い 映 像 になったが,カラー 画 像 の 場 合 も 同 じである. 赤, 青, 緑 それぞれに256 階 調 を 用 意 すれば,256 3 で,16,777,216 の 色 を 再 現 することができる.これだけの 階 調 化 を 行 う 場 合 をフルカラーと 呼 ぶ.フル カラーでは, 赤 (Red), 緑 (Green), 青 (Blue) のそれぞれの 階 調 を 数 字 で 表 す.この 値 はRGB 値 と 呼 ばれる. 絵 の 具 で 色 を 表 現 する 場 合 は, 目 印 となる 色 を 抽 出 するが,デ ジタル 画 像 の 場 合 は,このRGB 値 を 指 定 することで 色 を 決 定 するのである. デジタル 画 像 では, 原 理 的 には,さらに 階 調 を 増 やすことで 色 を 増 やすこともでき る.ただし, 階 調 を 増 やすということは, 処 理 しなければならない 情 報 も 飛 躍 的 に 増 え ることを 意 味 するのである. 実 際,フルカラー 画 像 をそのまま 扱 おうとした 場 合,コン ピュータの 処 理 速 度 が 追 い 付 かないこともある.ビデオカードは,インデックスカラー と 呼 ばれるデータを 扱 い, 処 理 速 度 を 上 げるのである.インデックスカラーとは,RGB 値 ではなく, 代 表 的 な 色 をあらかじめ 数 値 として 指 定 してデータ 化 しておくのである. そうすることで, 処 理 にかかる 時 間 を 削 減 できるのである. 演 習 8-1 Photoshop を 起 動 して, 自 分 の 好 きな 色 のRGB 値 が どの 数 値 なのかを 確 認 しなさい. 135

150 第 8 章 画 像 データの 基 礎 8.5 デジタル 画 像 とファイルの 大 きさ 解 像 度 と 色 の 節 (8.3,8.4) でふれたように, 解 像 度 や 扱 う 色 が 増 えるほど 必 要 なデー タの 量 が 増 える. 大 は 小 を 兼 ねる という 諺 のように,デジタル 画 像 を 作 成 するとき もはじめから 大 きなデータ 量 の 画 像 を 扱 えば 良 いと 思 うかもしれない.しかし,Web ページに 使 用 する 画 像 を 考 えてもらいたい.Web ページは,インターネットを 通 して, サーバから 画 像 の 情 報 が 転 送 されてくる. 近 年 では,ブロードバンド 環 境 が 普 及 してお り,あまり 気 にはならないかもしれないが,ファイル 容 量 の 多 い 画 像 の 場 合, 転 送 に 時 間 がかかる. 個 人 的 な 経 験 で 言 えば, 表 示 に 時 間 のかかるページは 見 ようとする 気 持 ち をなえさせてしまうものである.そのため,デジタル 画 像 を 作 成 する 場 合 は, 用 途 に 合 わせてピクセル 数 を 決 定 しておくべきである. 実 際 に 画 像 の 大 きさを 決 定 する 場 合 は,dpi と 全 体 の 画 素 数 から 計 算 できる. 先 述 し たように,dpi は1インチ 当 たりの 画 素 の 数 である.1 インチが2.54cm であることを 考 えるならば,100dpi で, ピクセルの 画 像 を 作 成 したならば, 印 刷 のサイ ズとしては, cm のサイズになるのである. 同 じ 印 刷 サイズの 画 像 でも, 解 像 度 が 上 がれば, 中 に 入 るピクセル 数 が 増 加 するため,データ 量 が 多 くなるのである. ちなみに, 印 刷 をするときを 目 安 にすると, 商 業 誌 では,300~350dpi とされている. 演 習 dpi で ピクセルの 画 像 を 作 成 したならば, 印 刷 のサイズがどのくらいになるかを 計 算 しなさい. 8.6 デジタル 画 像 による 線 の 表 現 デジタル 画 像 で 線 を 表 現 する 場 合 は,ピクセルの1つ1つを 塗 りつぶすことになる. このように, 画 素 1 つの 濃 度 値 で 画 像 を 表 現 する 画 像 を,ラスタ 画 像 (または,ビット マップ 画 像 ) と 呼 ぶ. 図 8.3 の 左 はラスタ 形 式 で, あ を 表 したものである.ラスタ 画 像 の 場 合, 画 像 を 拡 大 すると, 画 素 もそのまま 大 きくなっていくため, 斜 め 線 や 曲 線 を 表 す 時 に 生 じるギザギザが 目 立 ってしまうのである. この 問 題 が 起 こらないように 工 夫 したものがベクタ 画 像 (ベクトル 画 像 ) と 呼 ばれる ものである. 図 8.3 の 右 は,ベクタ 画 像 で あ を 表 したものである. 先 ほどのラスタ 画 像 に 比 べて, 線 のガタガタ 感 が 感 じられないであろう.これは, 画 素 ではなく, 直 線 136

151 8.7. レイヤによる 画 像 の 作 成 図 8.3: ラスタ 画 像 で 表 した あ ( 左 ) とベクタ 画 像 で 表 した あ ( 右 ) の 始 点 や 終 点 の 座 標 といったデータによって 画 像 を 表 現 したためである. 例 えば, 始 点 (0,0), 終 点 (4,4)で 斜 めの 線 を 引 くならば,y=x という 数 式 で 表 すことができる. この 線 の 長 さを2 倍 に 拡 大 するときは, 始 点 (0,0), 終 点 (8,8)というように, 数 式 に 基 づいて 始 点 と 終 点 の 位 置 を 再 計 算 することで, 常 に 同 じ 線 を 引 くことができる.す なわち,ベクタ 画 像 は, 点, 直 線, 円,などの 幾 何 的 な 記 述 ( 計 算 式 ) によって 図 形 を 表 現 するものである. 画 面 への 表 示 などは,その 幾 何 的 な 記 述 に 基 づいて,1 つ1つの 画 素 の 色 が 計 算 され, 表 示 される. ラスタ 画 像 は, 写 真,Web(Flash 除 く) 向 け, 映 像 向 けの 形 式 である. 主 に,Paint やPaintShop,Photoshop のようなソフトで 扱 われる. 一 方,ベクタ 画 像 は,イラスト,ロゴ,DTP( 写 真 除 く) などの 印 刷 出 力 向 けの 画 像 で ある. 主 に,Microsoft のOffice 製 品 や,Adobe のIllustrator,PaintShop,Photoshop のようなソフトで 扱 われる. アプリケーションによって 保 存 される 形 式 が 異 なるため, 保 存 形 式,および,その 拡 張 子 の 理 解 は 必 須 である( 付 録 A 参 照 ). 8.7 レイヤによる 画 像 の 作 成 実 際 に 絵 を 書 く 場 合 は,1 枚 の 紙 に 向 かって 構 図 を 決 める.ただし,このようなやり 方 では, 多 くの 画 像 を 作 成 する 際 に, 手 間 と 時 間 がかかってしまう. 一 方,アニメのセ ル 画 では, 透 明 なシートに, 背 景 や 人 物 といった 画 像 を 張 り 合 わせて 画 像 の 作 成 を 行 う.レイヤによる 画 像 の 作 成 とは,まさに,アニメのセル 画 の 作 成 と 同 じ 作 業 である. レイヤで 画 像 を 作 成 するということは, 単 純 な 図 形 ( オブジェクト という) を, 透 明 な 紙 ( レイヤ という) に 描 いて, 上 から 重 ねて 見 ることになる.この 場 合, 重 ね る 順 序 を 変 えることで, 異 なった 画 像 を 作 成 することができる. 図 8.4 はレイヤで 右 を 137

152 第 8 章 画 像 データの 基 礎 図 8.4: レイヤを 用 いたイラストの 概 念 図 向 いた 目 のイラストと, 左 を 向 いた 目 のイラストを 書 いた 場 合 の 例 である.レイヤを 用 いれば,2 つの 目 の 画 像 をはじめから 作 る 必 要 がなく, 部 品 を 作 成 して, 組 み 合 わせる だけで 済 むのである. 上 述 したように,レイヤを 用 いることで,アニメのような 一 部 分 だけ 異 なる 複 数 の 画 像 を 作 成 することができる.しかし, 画 像 処 理 ソフトのレイヤの 機 能 はそれだけではな い.レイヤの 種 類 をうまく 使 うことで, 画 像 を 様 々に 加 工 することができる. 代 表 的 な レイヤの 種 類 は 以 下 の 通 りである. ラスタライズされたレイヤ: ラスタレイヤという 言 葉 も 用 いられるが,ラスタ 画 像 ( 写 真 や 幾 何 学 的 に 表 示 されないオブジェクトや 機 能 ) を 扱 うときに 使 用 するレイヤ. ベクタ 画 像 で 作 成 しても, 画 像 に 何 らかの 効 果 を 入 れる 場 合 は,このラスタライ ズされたレイヤに 変 換 しなければならない. ベクタレイヤ: オブジェクトの 描 画 や 作 成 に 使 われるレイヤ.ベクタ 画 像 を 作 成 する. 調 整 レイヤ: 画 像 の 明 るさやコントラストの 調 整 などを 行 うときに 用 いるレイヤ. 元 の 画 像 の 状 態 を 保 存 した 状 態 で, 複 数 の 調 整 を 行 う 場 合 に 用 いると 便 利 である. マスクレイヤ: 画 像 の 一 部 を 隠 したり, 画 像 の 一 部 を 調 整 しないようにしたりすると きに 使 うレイヤ. 画 像 を 合 成 するときや,フォトレタッチをするときに 用 いると 便 利 である. 8.8 動 画 動 画 の 基 本 デジタルであれ,アナログであれ, 動 画 の 基 本 原 理 は,パラパラ 漫 画 である.すなわ ち,いくつかの 画 像 を 高 速 で 入 れ 替 えることで 生 じる 人 間 の 運 動 知 覚 を 利 用 したもの 138

153 8.8. 動 画 である.こうした 知 覚 された 運 動 は 仮 現 運 動 と 呼 ばれる.この 仮 現 運 動 の 原 理 をうまく 利 用 すれば, 実 際 には 動 きのない 画 像 であっても, 動 いているように 知 覚 されるのであ る.テレビの 場 合 は, 大 体 1 秒 間 に30 コマ(フレーム) で 画 像 を 切 り 替 えることで 動 画 像 を 作 っている デジタル 動 画 の 圧 縮 技 術 動 画 は 基 本 的 に 静 止 画 の 切 り 替 えで 表 現 されている.ただし,フレーム 数 や, 静 止 画 像 の 大 きさによりデータの 容 量 が 増 えてしまう.データ 容 量 が 増 えると, 保 存 できるメ ディアが 制 限 されてしまったり,インターネットでの 配 信 に 適 さなくなったりしてしま う.そこで,デジタル 動 画 ではいくつかの 圧 縮 技 術 を 利 用 してデータ 容 量 を 減 らしてい る. 圧 縮 形 式 の 代 表 的 な 技 術 の 規 格 として,MPEG(Moving PictureExperts Group) がある.MPEG の 圧 縮 方 式 の 基 礎 は 以 下 のようなものである. 動 画 のもとになっている 画 像 には, 背 景 のように 変 化 しない 部 分 がある. 変 化 しない 部 分 は 冗 長 な 情 報 となる.そこで, 前 後 のフレーム 間 で 変 化 する 部 分 と 変 化 しない 部 分 を 検 出 し, 別 々に 記 録 すれば, 情 報 量 を 少 なくすることができる.また, 濃 淡 の 情 報 に ついても, 変 化 の 少 ない 部 分 をひとまとめにして 平 均 化 すれば,データの 節 約 をするこ とができるのである. データを 圧 縮 することでデータ 容 量 を 減 らすことができるが,それなりの 問 題 点 も ある.YouTube などの 動 画 を 見 ているときに, 画 面 に 四 角 いノイズ(ブロックノイズ) が 走 ったり, 線 がにじむようなノイズ(モスキートノイズ) が 見 えたりすることがある. これらは 圧 縮 によって 元 の 情 報 が 失 われたことに 起 因 する.デジタル 動 画 を 作 成 する 場 合 は, 公 開 する 場 に 応 じて 適 切 な 圧 縮 形 式 を 選 択 する 必 要 がある( 付 録 A 参 照 ). 139

154

155 第 9 章 画 像 処 理 ソフトの 利 用 9.1 画 像 処 理 とアプリケーション デジタル 画 像 を 作 成, 処 理 する 技 術 は, 特 殊 技 術 であったが, 現 在 では 一 般 的 に 手 に 入 るソフトでかなりの 技 術 が 実 現 されている. 画 像 処 理 ソフトの 代 表 的 なものとし て,PictBear(フリーソフト),PaintShop,Photoshop があげられる.この 章 では, 主 にPhotoshopCS5 を 使 用 した 場 合 の 画 像 処 理 の 方 法 を 紹 介 する. 9.2 Photoshop の 起 動 とツール Photoshop は, スタート すべてのプログラム の 中 から, AdobePhotoshop CS5 ( 一 連 のAdobe 製 品 がインストールされている 場 合 は,Adobe 製 品 のフォルダの 中 ) で 起 動 できる. 起 動 後 の 画 面 を 図 9.1 に 示 す. 図 9.1: PhotoshopCS5 の 起 動 画 面 141

156 第 9 章 画 像 処 理 ソフトの 利 用 図 9.2: Photoshop 新 規 ファイル 作 成 ウィンドウ 左 に 出 ているのがツールバーで,おもに 描 画 をするときに 用 いる. 上 部 が,メニュー バーで,メニューを 選 択 する 場 合 に 用 いる.メニューバーの 下 部 がオプションバーで, ツールのオプションを 設 定 するときに 用 いる. 右 に 出 ているのが,パレットで, 色 の 調 整 や,レイヤの 状 況 などを 確 認 する. すでにあるデジタル 画 像 を 編 集 する 場 合 は,ファイルメニューの ファイル 開 く から 既 存 のファイルを 呼 び 出 す. 新 規 に 画 像 を 作 成 する 場 合 は, ファイル 新 規 作 成 を 選 択 すると, 図 9.2 のウィンドウが 出 現 する.ここで, 作 成 するファイルの 大 きさや 解 像 度, 用 いる 色 などを 設 定 する. ファイルの 保 存 は, ファイル 保 存 を 選 択 すると, 図 9.3 の 左 のような 画 面 に なる.この 時, 保 存 するファイル 形 式 を 指 定 することができる. 例 えば,jpg ファイル で 保 存 する 場 合 は, 図 9.3 の 右 のような 場 面 に 続 く.この 時,jpg ファイルに 変 換 する ときの 圧 縮 率 を 指 定 することができる. 9.3 線 を 描 く ブラシで 線 を 書 く ツールバーからブラシを 選 択 すると,ブラシの 特 性 に 合 わせて 線 を 引 くことができ る. 線 の 色 は,パレットで 設 定 できる.この 時 の 色 は,RGB 値 で 指 定 することができ るが,スウォッチのタブを 選 択 すると,インデックスカラーが 用 意 してあるので,それ を 基 準 にして, 色 を 決 定 することができる. 142

157 9.3. 線 を 描 く 図 9.3: 保 存 場 面 ( 左 ) と 圧 縮 率 の 決 定 場 面 ( 右 ) ブラシは 特 性 によって, 大 きさ, 硬 さなどを 設 定 できる. 鉛 筆 で 書 いたような 線 や, 筆 で 描 いたような 線 をオプションバーで 設 定 できる.また,ブラシプリセットピッカー の 中 には, 星 型 や, 草 のような 形 などが 入 っている.こうしたブラシを 用 いれば,ポッ プなデザインの 画 像 を 作 成 することもできる. 直 線 を 描 きたい 場 合 は,Shift を 押 しながら 始 点 と 終 点 をクリックすると,その 点 を 結 んだ 直 線 を 描 いてくれる. 演 習 9-1 様 々な 形 のブラシと 色 で 線 を 作 成 し,その 画 像 をjpg 形 式,png 形 式, gif 形 式 でそれぞれ 保 存 しなさい ベクタモードで 線 を 描 く ベクタモードで 線 を 描 くには,ペンツールを 用 いる.ペンツールで 作 成 する 画 像 は, シェイプレイヤ, パス, 塗 りつぶした 領 域 を 作 成 の3つのオプションがある. 単 純 に 直 線 を 描 くだけならば,ラインツールで 作 成 すればよい. 多 角 形 を 作 成 する 場 合 は,シェイプレイヤを 選 択 し 多 角 形 を 選 択 して 作 成 することができる. 演 習 9-2 Photoshop を 用 いて, 多 角 形 を 作 成 しなさい. 143

158 第 9 章 画 像 処 理 ソフトの 利 用 図 9.4: パスからブラシで 線 を 描 く 場 合 のキャンパス 画 面 曲 線 を 描 く Photoshop やPowerPoint では,ベジェ 曲 線 と 呼 ばれる 方 式 で 曲 線 を 描 く.ベジェ 曲 線 とは,3 次 式 を 用 いて 曲 線 を 描 く 手 法 で,アンカーポイントと 方 向 線 で 曲 線 を 設 定 す ることのできる 方 式 である. Photoshop で 曲 線 を 持 つ 形 を 作 成 する 場 合 は,マウスドラッグで 最 初 のアンカーポイ ントと 方 向 を 作 成 する. 別 の 場 所 で 同 じ 作 業 を 行 うと,それぞれのアンカーポイントが 曲 線 でつなげられるのである.シェイプレイヤの 場 合 は,それぞれのアンカーポイント が 直 線 で 結 ばれる. ブラシを 使 った 曲 線 を 描 きたい 場 合 は,ペンツールを 用 いて,パスを 作 成 する.パス が 作 成 されたら,キャンパスのレイヤが 表 示 される 箇 所 でパスのタブを 選 択 し, ブラ シでパスの 境 界 線 を 描 く を 選 択 すると, 指 定 しているブラシツールの 設 定 で 曲 線 を 描 いてくれる. 演 習 9-3 Photoshop を 用 いて, 曲 線 を 作 成 しなさい. 144

159 9.4. オブジェクトを 呼 び 出 し,レイヤの 順 番 を 変 える 図 9.5: レイヤの 順 番 を 入 れ 替 えた 例 9.4 オブジェクトを 呼 び 出 し,レイヤの 順 番 を 変 える 長 方 形 や 円, 正 多 角 形 などは,ペンツールを 選 択 肢 時 に 出 てくるオプションで 選 ぶこ とができる.また,カスタムシェイプツールを 選 択 すると, 様 々な 形 を 選 ぶことができ る.この 時, 形 ごとにレイヤを 作 成 しておけば,その 順 番 の 入 れ 替 えや 位 置 を 変 えるこ とで, 異 なる 画 像 を 作 り 出 すことができる. レイヤに 作 成 したオブジェクトを 移 動 させる 場 合 は, 移 動 ツールを 用 いる.レイヤの 順 番 を 変 える 場 合 は,レイヤパレットで 順 番 を 変 えたいレイヤをドラッグすることで 順 番 を 変 えることができる. 演 習 9-4 Photoshop を 用 いて, 図 9.5 とほぼ 同 じ 図 形 を 作 成 しなさい. 9.5 テキストの 作 成 テキストを 作 成 する 文 字 を 作 成 するには,テキストツールを 選 択 すればよい.テキストの 修 飾 は, ウィ ンドウ 文 字 を 選 択 すると, 図 9.6 のようなオプションウィンドウが 開 く.ここ で,フォントや 大 きさ, 書 体, 文 字 間 隔 などを 調 整 することができる. 145

160 第 9 章 画 像 処 理 ソフトの 利 用 図 9.6: テキストの 作 成 と 編 集 画 面 文 字 を 歪 める Photoshop では, 水 平 に 文 字 を 並 べるだけではなく,アーチや 波 形 などの 効 果 とそれ に 見 合 った 文 字 の 変 形 を 行 うことができる.この 配 置 と 変 形 の 組 み 合 わせにより 表 現 さ れた 文 字 列 を,ワープテキストという. テキストを 変 形 させるには,テキストを 作 成 するときのオプションウィンドウで, ワー プテキストを 作 成 のボタンを 押 す.すると, 図 9.7 のような,ワープテキスト 編 集 画 面 が 出 てくる.そこから, 自 分 のデザインにあったテキストを 作 成 する. 演 習 9-5 Photoshop を 用 いて, 歪 んだ 文 字 列 を 作 成 しなさい パスに 合 わせて 文 字 を 配 列 する ワープテキスト 作 成 では 十 分 ではないというときは,パスに 合 わせて, 文 字 が 並 ぶよ うな 文 字 列 を 作 成 すればよい.まず,ペンツールや 図 形 作 成 ツールを 使 って,パスのみ を 作 成 する.パスを 作 成 した 後,テキストを 選 択 し,パスのライン 上 に 合 わせる.そこ までできれば,あとは 文 字 を 入 力 するだけである.そうすると, 図 9.8 のように,パス に 合 わせた 配 列 の 文 字 を 作 成 することができる. 文 字 の 表 示 位 置 はツールバー 内 のパス コンポーネント 選 択 ツールで 変 更 する. 146

161 9.5. テキストの 作 成 図 9.7: ワープテキスト 編 集 画 面 図 9.8: パスに 合 わせて 描 画 したテキスト 演 習 9-6 パスに 合 わせた 文 字 列 を 作 成 しなさい. 147

162 第 9 章 画 像 処 理 ソフトの 利 用 図 9.9: ドロップシャドウで 立 体 感 を 出 したテキスト レイヤの 効 果 を 使 って 文 字 を 修 飾 する Photoshop では,レイヤのスタイルを 設 定 する 事 で,レイヤ 上 の 図 形 や 文 字 を 修 飾 す る 事 ができる.レイヤのスタイルは,ファイルメニューの レイヤ レイヤスタイ ル を 選 択 する 事 で 選 ぶことができる. 例 えば, 図 9.9 の 文 字 は,レイヤスタイルのド ロップシャドウを 使 って, 文 字 に 立 体 感 を 出 したものである. 演 習 9-7 テキストを 作 成 し,レイヤスタイルを 使 って 修 飾 しなさい マスクレイヤを 使 ったテキストの 作 成 文 字 の 内 部 を 複 雑 なパターンや 情 景 にしたい 場 合 には,Photoshop に 組 み 込 まれてい るパターンだけでは 不 十 分 な 場 合 がある.このような 場 合 に 利 用 できるのが, 文 字 マス クツールである. 文 字 マスクを 使 うというのは, 図 9.10 に 示 しているように, 背 景 画 像 の 上 に, 文 字 の 部 分 だけを 抜 き 取 ったマスクを 使 って, 背 景 の 一 部 を 文 字 内 のパター ンとして 使 う 方 法 である.ロゴの 作 成 や,レタリングなど,こうしたマスクツールを 使 うことで, 効 果 的 なテキストを 作 成 する 事 ができる. 148

163 9.6. 画 像 の 大 きさを 調 整 する 図 9.10: マスクレイヤを 使 った 文 字 の 修 飾 の 例 図 9.10 のような 修 飾 を 行 う 場 合,Photoshop を 用 いる 場 合 では,まず 背 景 となる 画 像 を 開 き,そこに 新 しいレイヤを 作 成 する.テキスト 作 成 ツールの 横 書 き 文 字 マスク ツールで,テキストを 作 成 する.この 場 合, 文 字 の 部 分 が 点 滅 する 点 線 で 囲 まれる.こ の 状 態 で,ファイルメニューの 選 択 範 囲 選 択 範 囲 を 反 転 を 選 択 すると,テキ スト 部 分 以 外 の 箇 所 が 選 択 される.その 後, 塗 りつぶしを 行 うと 図 のような 修 飾 を 行 う ことが 可 能 である.また, 新 しいレイヤを 作 成 せず, 同 様 の 作 業 を 行 った 場 合 は, 選 択 範 囲 を 反 転 した 時 点 で,Delete を 押 すと, 同 じような 効 果 が 期 待 できる. 演 習 9-8 背 景 のパターンを 利 用 して,テキストを 修 飾 しなさい. 9.6 画 像 の 大 きさを 調 整 する Web ページなどで 画 像 を 利 用 する 場 合, 画 像 が 大 きすぎるとダウンロードに 時 間 が かかったり, 小 さすぎる 画 像 を 大 きく 表 示 すると,ガタガタになってしまったりするな ど 様 々な 問 題 がある.また, 画 像 を 加 工 する 場 合, 不 必 要 な 部 分 はなくしてしまわなけ ればならない.こうした 場 合, 画 像 処 理 ソフトを 使 って 大 きさを 調 整 する 必 要 が 出 て くる 画 像 をトリミングする 画 像 のファイルサイズを 小 さくしようと 思 えば, 空 白 部 分 や 使 いたくない 部 分 などを 切 り 取 れば,サイズを 小 さくすることもできる.こうした 作 業 は,トリミングと 呼 ばれ 149

164 第 9 章 画 像 処 理 ソフトの 利 用 図 9.11: トリミング 画 面 ( 上 ) とオプションバー( 下 ) る.トリミングは, 解 像 度 を 変 えることなく, 画 像 のサイズを 変 更 することになる. Photoshop でトリミングを 行 うには, 切 り 抜 きツール を 選 択 して, 画 面 上 をドラッ グする.そうすると, 図 9.11 のように, 切 り 抜 き 範 囲 が 点 線 で 囲 まれる. 切 り 抜 く 範 囲 が 決 定 したら, 右 クリックか, 決 定 ( ) を 選 択 すると 切 り 抜 きができる. 正 方 形 ではなく, 角 度 に 合 わせて 調 整 したい 場 合 は, 点 線 の 外 側 にポインタを 移 動 さ せると,カーブした 矢 印 に 変 わるので,その 時 に,ドラッグをして 角 度 を 変 えることが できる. 傾 いた 対 象 を 正 立 な 画 像 として 使 いたい 場 合 は,こうしたトリミングが 便 利 で ある. 切 り 取 りの 範 囲 を 指 定 したい 場 合 は,トリミング 範 囲 を 決 定 する 前 に, 図 9.11 の 下 のようなオプション 画 面 が 出 るので,そこで, 切 り 取 りたい 箇 所 の 大 きさや 解 像 度 を 指 定 すればよい. 演 習 9-9 画 像 を 用 意 して, 不 必 要 な 場 面 をトリミングしなさい. 150

165 9.6. 画 像 の 大 きさを 調 整 する 図 9.12: カンバスサイズ 変 更 場 面 画 像 のキャンバスサイズを 調 整 する 画 像 の 大 きさは,キャンバス(カンバスcanvas) のサイズを 変 更 することで 変 えるこ ともできる.キャンパスサイズを 変 更 するということは, 不 要 な 余 白 スペースや 描 画 範 囲 を 広 げるということになるため,キャンパスサイズを 小 さくするときは,トリミン グと 同 じ 効 果 になる.すなわち, 解 像 度 を 変 えずに 画 像 のサイズをけるのである. Photoshop では,ファイルメニューの イメージ カンバスサイズ を 選 択 する と, 図 9.12 のようなウィンドウが 開 く.このウィンドウで 変 更 する 画 像 サイズを 決 定 するのである.カンバスサイズ 変 更 は, 幅, 高 さ のそれぞれに, 数 値 を 記 入 すれば その 数 値 に 合 わせた 変 更 を 行 ってくれる.その 時,どの 範 囲 が 大 きく( 小 さく) なるか は, 基 準 の 位 置 の 矢 印 で 示 される. 矢 印 が 内 側 に 向 けば,その 方 向 に 切 り 取 られ, 外 側 に 向 けば 新 たな 領 域 が 追 加 される. 追 加 の 位 置 や 方 向 を 変 更 したい 場 合 は,それぞれの 矢 印 をクリックすれば,ある 程 度 の 調 整 をしてくれる. カンバスサイズの 変 更 には, 相 対 と 絶 対 がある. 相 対 の 場 合 は, 現 在 のカンバスを 基 準 として 変 えたい 場 合 に 用 いる.この 切 り 替 えは,ウィンドウ 中 部 の 相 対 にチェッ クマークを 入 れれば 変 えることができる. 現 在 のカンバスから 狭 めたい 場 合 は,マイナ 151

166 第 9 章 画 像 処 理 ソフトの 利 用 図 9.13: 解 像 度 変 更 のウィンドウ ス - をつけて, 加 えたい 場 合 は,そのまま 数 値 を 加 えればよい. 演 習 9-10 画 像 のカンバスサイズを 現 在 よりも50mm 広 げた 場 合 と, 狭 めた 場 合 の 画 像 を 作 成 しなさい 画 像 の 解 像 度 を 調 整 する トリミングも,カンバスサイズの 変 更 も,ファイル 内 に 存 在 している 画 像 の 解 像 度 自 体 は 変 わらない.しかし,Web ページに 載 せる 写 真 などは, 全 体 の 構 造 を 保 持 したま まファイルサイズを 変 更 しなければならない 場 合 もある.こうした 場 合 に 用 いるのが, 画 像 解 像 度 の 変 更 である. Photoshop を 使 って 解 像 度 を 変 更 する 場 合 は,ファイルメニューの イメージ 画 像 解 像 度 を 選 択 すると, 図 9.13 のようなウィンドウが 開 く.ピクセル 数 の 調 整 は, 画 像 の 再 サンプリングを 行 う 場 合 のみ 有 効 である. 画 像 の 再 サンプリングとは, 画 像 の ピクセル 数 または 解 像 度 を 変 更 することによって, 画 像 データ 量 を 変 更 することであ る.この 再 サンプリングを 行 わない 限 りは,データのファイル 容 量 は 変 更 されない. 152

167 9.7. 画 像 の 色 を 調 整 する ピクセル 数 は,ドキュメントサイズや 解 像 度 の 変 更 に 連 動 して 変 化 する. 例 えば, 図 9.13 のような 大 きさの 画 像 の 場 合, 幅 を250mm に 変 更 すると, 幅 のピクセル 数 は2953 に 変 わる.また, 解 像 度 を100 に 変 えると,ピクセル 数 は1088 に 変 わる.すなわち, 解 像 度 や 画 像 サイズが 小 さくなることで,ピクセル 数 も 減 少 するのである. 解 像 度 を 変 えるにはピクセル 数 に 対 するカラー 値 の 割 当 を 変 更 しなければならない. 新 しいピクセルにカラー 値 を 割 り 当 てる 補 間 方 式 には, 以 下 のものがある. ニアレストネイバー 法 : 高 速 だが, 精 度 の 低 い 方 法. 画 像 内 のピクセルを 複 製 する.こ の 方 式 は,アンチエイリアスされていないエッジのあるイラストにおいて, 鮮 明 な 線 を 保 持 し,ファイルサイズを 小 さくする 場 合 に 使 用 する.ただしこの 方 法 で は, 画 像 を 変 形 したり, 拡 大 縮 小 したり,1 つの 選 択 範 囲 に 対 して 複 数 の 処 理 を 実 行 すると, 修 正 部 分 がギザギザになる 可 能 性 がある. バイリニア 法 : 周 辺 のピクセルのカラー 値 を 平 均 してピクセルを 追 加 する 方 式. 標 準 的 な 画 質 が 得 られる. バイキュービック 法 : 周 辺 ピクセルの 値 の 調 査 に 基 づき, 低 速 ながらより 精 度 の 高 い 補 間 を 行 う 方 式.より 複 雑 な 計 算 を 使 用 するため, ニアレストネイバー 法 や バイリニア 法 よりも 色 調 のグラデーションが 滑 らかになる. バイキュービック 法 ( 滑 らか): 画 像 を 拡 大 するための 優 れた 方 式. バイキュービック 法 の 補 間 に 基 づいているが,より 滑 らかな 結 果 が 得 られる. バイキュービック 法 (シャープ): 画 像 を 縮 小 するための 優 れた 方 式.バイキュービッ ク 法 の 補 間 に 基 づき,シャープ 化 を 強 化 する.この 方 法 では, 再 サンプルされた 画 像 でもディテールが 保 持 される. 演 習 9-11 画 像 の 解 像 度 を 変 えて, 画 像 がどのように 変 化 するかを 確 認 しなさい. 9.7 画 像 の 色 を 調 整 する Web などで 旅 行 記 を 載 せる 場 合,デジタルカメラで 撮 った 画 像 を 載 せると,その 時 の 雰 囲 気 を 閲 覧 者 に 伝 えやすい.しかし, 光 の 加 減 など, 実 際 に 見 て 感 じた 風 景 と 写 真 にした 画 像 が 異 なる 場 合 がある.こうした 時, 画 像 処 理 ソフトを 使 えば, 自 分 で 感 じた 風 景 に 画 像 を 近 づけることが 可 能 になる.また,フォトデザインをする 場 合 に, 実 際 の 画 像 の 色 合 いを 調 整 することで, 自 分 の 構 想 に 近 づけることができる. 153

168 第 9 章 画 像 処 理 ソフトの 利 用 図 9.14: 明 るさとコントラストの 調 整 前 ( 左 ) と 調 整 後 ( 右 ) 画 像 の 明 るさとコントラストを 調 整 する Web やデザインで 画 像 を 使 いたい 場 合, 画 像 が 暗 くて, 注 目 を 集 めたい 対 象 が 不 鮮 明 であったり, 逆 に 明 るすぎて 目 立 たせたくないものまで 目 立 ってしまったりすること がある.そのような 場 合, 画 像 の 明 るさやコントラスト( 明 暗 差 ) を 調 整 すると, 自 分 の 理 想 の 画 像 に 近 づけることができる. 図 9.14 は, 明 るさとコントラストを 調 整 する 前 の 画 像 と, 調 整 後 の 画 像 である. 同 じ 画 像 でも, 明 るさとコントラストを 調 整 すると 感 じが 変 わるのが 分 かるであろう. Photoshop の 場 合,ファイルメニューの イメージ 色 調 補 正 明 るさとコ ントラスト を 選 択 するか, レイヤ 新 しい 調 整 レイヤ 明 るさとコントラ スト を 選 択 すると, 図 9.15 のようなウィンドウが 出 てくる. 明 るさとコントラスト の 調 整 は,それぞれのスライダーの 位 置 で 調 整 する. 明 るさの 場 合,スライダーを 右 に 移 動 させると 画 像 全 体 が 明 るく, 左 に 移 動 させると 画 像 全 体 が 暗 くなる.コントラスト の 場 合 は,スライダーを 右 に 移 動 させると,コントラストが 高 く( 明 暗 の 差 がはっきり する), 左 に 移 動 させると,コントラストが 低 く( 明 暗 の 境 界 が 緩 やかに) なる. 演 習 9-12 画 像 の 明 るさとコントラストを 調 整 しなさい 画 像 の 色 を 調 整 する 画 像 を 利 用 する 場 合,さまざまな 色 の 調 整 が 必 要 になることがある. 例 えば,Web ページに 使 う 場 合 や 印 刷 物 に 使 う 場 合, 最 初 に 想 定 した 色 が 使 えない 場 合 がある.ま た,カメラで 写 真 を 撮 った 時,その 時 の 光 源 の 状 態 によって,こちらが 想 定 していな 154

169 9.7. 画 像 の 色 を 調 整 する 図 9.15: 明 るさとコントラストの 調 整 ウィンドウ かった 画 像 に 仕 上 がってしまうこともある.こうした 場 合, 色 情 報 の 変 更 や, 色 調 の 調 整 が 必 要 になってくる. (1) 画 像 の 色 を 減 らす 画 像 を 印 刷 する 場 合, 色 付 きで 印 刷 するとコストが 高 くなってしまう.そのため, 事 前 にグレースケールに 変 換 する 必 要 がある.また,Web ページに 載 せる 場 合, 色 情 報 は 使 えるが, 制 限 がかかる 場 合 がある.そうした 場 合, 色 情 報 が 制 限 されても, 使 える 画 像 を 作 成 しなければならない.これらの 場 合, 元 の 画 像 の 色 情 報 を 変 換 した 画 像 を 作 成 しなければならない. Photoshop 場 合,ファイルメニューの イメージ モード から 色 情 報 の 変 更 を 行 うことができる.グレースケールで 画 像 を 作 成 したい 場 合 は, イメージ モー ド の 中 にある 選 択 して, 色 情 報 の 調 整 が 可 能 である.それぞれの 機 能 は, 以 下 の 通 り である. モノクロ2 階 調 :256 階 調 ではなく, 黒 か 白 かで 画 像 を 作 成 する. グレースケール:256 階 調 の 灰 色 で 画 像 を 構 成 する.モノクロ2 階 調 よりも, 形 情 報 が 保 持 される. ダブルトーン:1 色 から4 色 のカスタムインクを 使 用 してモノトーン,ダブルトーン (2 版 ),ダブルトーン(3 版 ) およびダブルトーン(4 版 ) のグレースケール 画 像 を 作 成 する. インデックスカラー: 最 大 256 色 を 使 用 して,8 ビット 画 像 を 再 現 する.Web ページ に 使 う 画 像 などを 変 換 する 場 合 に 便 利 である. RGB カラー:RGB モデルに 基 づいて 各 ピクセルに 照 度 値 を 割 り 当 てる 方 式.RGB モ デルとは, 光 の3 原 色 ( 赤, 緑, 青 ) が 基 調 になる 色 のモデルである.コンピュー 155

170 第 9 章 画 像 処 理 ソフトの 利 用 タではこの 方 式 が 用 いられている. CMYK カラー: 各 ピクセルに 各 プロセスインキのパーセント 値 を 割 り 当 てる 方 式.カ ラープリンタはRGB ではなく,シアン,マゼンダ,イエロー,ブラックの4 色 を 用 いて 色 を 再 現 している.そのため, 印 刷 物 を 作 成 するときは,このCMYK カラーで 画 像 を 作 成 しておかなければ,PC 上 と 印 刷 物 で 色 の 感 じが 変 わること があるので, 注 意 が 必 要 である. Lab カラー:PC やプリンタの 制 限 ではなく, 人 が 色 を 認 識 する 仕 組 みを 利 用 してカ ラーを 再 現 する 方 式.PC やプリンタにかかわらず 同 じ 状 態 を 再 現 したい 場 合 は, このモードが 便 利 であろう. マルチチャンネル: チャンネルごとに256 階 調 のグレーを 使 用 する 方 式. 例 えば, 赤 のみで 画 像 を 表 したい 場 合 なのは,この 方 式 を 用 いる. 演 習 9-13 カラー 画 像 をグレースケールとインデックスカラーの 画 像 に 変 換 しなさい. (2) 色 みの 調 整 光 源 の 状 態 によって, 写 真 に 色 みがかかることがある. 例 えば, 晴 れた 日 の 中 の 日 陰 は 青 かぶりが 生 じ, 室 内 蛍 光 灯 下 では 緑 かぶりが 生 じ, 白 熱 灯 下 では 赤 かぶりが 生 じや すい.こうした 場 合, 実 際 に 感 じた 写 真 と 現 像 した 写 真 が 異 なって 表 現 されてしまう. こうした 場 合,カラーバランスを 調 整 することで 補 正 が 可 能 である. それぞれの 色 味 に 対 しては, 以 下 のようなバランスのとり 方 が 良 いとされる. 青 かぶり: 赤 と 緑 を 強 めにする 緑 かぶり: 赤 と 青 を 強 めにする 赤 かぶり: 緑 と 青 を 強 めにする 実 際 にPhotoshop を 使 ってカラーバランスを 調 整 するには,ファイルメニューの イ メージ 色 調 補 正 カラーバランス を 選 択 する. 図 9.16 のような 調 整 ウィ ンドウが 出 てくるので,スライダーを 調 整 してカラーバランスを 変 えればよい. カラーバランスのオプションとして, 階 調 のバランスを 選 択 する 箇 所 がある.これ は,どの 階 調 のカラーを 調 整 するかを 示 している.シャドウは 階 調 の 最 も 暗 い 部 分, 中 間 調 は 階 調 の 中 心 部 分,ハイライトは 階 調 の 最 も 明 るい 部 分 を 調 整 することになる. 最 も 目 につく 部 分 を 調 整 したい 場 合 は, 中 間 調 を 選 択 してカラーバランスを 行 うと 良 い. 156

171 9.7. 画 像 の 色 を 調 整 する 図 9.16: カラーバランスの 調 整 ウィンドウ 色 味 や 色 合 いの 調 整 は,カラーバランスだけでなく, 同 じ 色 調 補 正 の 色 相 彩 度 や レンズフィルタ, バリエーション を 用 いても 調 整 することができる. 演 習 9-14 画 像 のカラーバランスの 赤 と 緑 を 変 化 させ, 全 体 の 色 合 いの 違 いを 確 認 しなさい ヒストグラムを 使 った 調 整 上 述 した 画 像 の 色 合 いの 調 整 は, 画 像 そのものを 見 ながら, 自 分 の 感 覚 と 経 験 に 応 じ て 調 整 をしなければならない.しかし,そうした 調 整 では, 何 をどのように 変 えている のかが 分 かりにくい.そこで,より 直 感 的 に 色 合 いを 調 整 する 方 法 が,ヒストグラムを 使 った 調 整 である. ここでいうヒストグラムとは,256 階 調 であれば, 各 階 調 ごとに 対 応 するピクセルの 数 を 数 え,その 個 数 をグラフ 化 したものである. 図 9.17 の 上 は, 円 状 に 描 かれたグラ デュエーションをヒストグラムに 表 したものである. 図 9.17 の 下 は, 逆 のパターンで 同 じものを 表 したものである. これらのヒストグラムでは, 最 も 明 るい 部 分 ( 白 ) がヒストグラムの 右 側 に, 最 も 暗 い 部 分 ( 黒 ) がヒストグラムの 左 側 におかれていることが 分 かるであろう.すなわち, 明 るい 部 分 がハイライト, 暗 い 部 分 がシャドウ,それ 以 外 が 中 間 調 ということになる.こ うしたヒストグラムを 見 比 べることで,どの 階 調 の 色 が 多 いのかを 知 ることができる. 157

172 第 9 章 画 像 処 理 ソフトの 利 用 図 9.17: グラデュエーションパターンとその 階 調 ごとのヒストグラム それに 基 づけば,どの 階 調 のものを 補 正 すればよいかが 分 かりやすくなるのである. 図 9.18 はヒストグラムを 利 用 して 調 整 した 画 像 の 例 である.この 場 合,ハイライトとシャ ドウ 部 分 を 強 調 し, 中 間 色 の 暗 い 部 分 を 強 調 することでよりはっきりとした 画 像 を 作 り 出 している. 図 9.18: レベル 補 正 による 調 整 前 の 画 像 と 調 整 後 の 画 像 Photoshop では, イメージ 色 調 補 正 レベル 補 正 を 選 択 すると, 図 9.19 のようなウィンドウが 開 く.このウィンドウに 表 示 されるヒストグラムの 下 のスライド を 調 整 すれば, 入 力 レベルが 変 わり, 画 像 の 色 合 いを 変 更 することができる.より 詳 細 な 設 定 がしたい 場 合 は, イメージ 色 調 補 正 トーンカーブ を 選 択 するとよ り 詳 細 な 設 定 を 行 うことができる. レベル 補 正 やトーンカーブを 使 って 補 正 をするときには, 階 級 飛 び(ジャンプ) と 呼 ば れる 現 象 に 注 意 しなければならない. 図 9.20 は, 補 正 前 の 画 像 とそのヒストグラムと, 158

173 9.8. フィルタ 処 理 図 9.19: レベル 補 正 ウィンドウ 画 面 補 正 後 の 画 像 とそのヒストグラムを 示 したものである.この 図 を 見 ればわかるように, 補 正 前 にはぎっしり 詰 まっていたヒストグラムが, 補 正 後 はあちらこちらで 空 白 部 分 が 生 じている.これが 階 級 飛 びと 呼 ばれる 現 象 で,ヒストグラムを 変 更 することで, 本 来 そこに 存 在 していた 情 報 が 別 の 階 級 に 移 ってしまったがために 起 こるのである.あまり 無 理 な 補 正 は 大 幅 な 階 級 飛 びを 生 じさせ,そのために 必 要 な 情 報 が 失 われることもある ので, 補 正 は 調 整 レイヤを 使 いながら 行 う 方 が 良 いであろう. 演 習 9-15 レベル 補 正 を 用 いて 画 像 のレベルを 変 化 させ, 補 正 前 のヒストグラムと 補 正 後 のヒストグラムの 違 いを 確 認 しなさい. 9.8 フィルタ 処 理 フィルタ 処 理 とは 画 像 処 理 を 行 う 場 合, 上 述 したカラーバランスの 調 整 や 明 るさの 調 整 は, 画 素 の1 点 1 点 に 対 して 計 算 を 行 う, 点 処 理 で 画 像 の 変 換 がおこなわれていた.しかし, 画 像 処 理 159

174 第 9 章 画 像 処 理 ソフトの 利 用 図 9.20: レベル 補 正 前 の 画 像 とヒストグラムと 補 正 後 の 画 像 とヒストグラム は 近 傍 処 理 と 呼 ばれる 方 法 でも 行 われる. 近 傍 処 理 とは,その 点 と 周 囲 ( 近 傍 画 素 ) を 取 り 出 して 変 更 する 方 法 で, 空 間 フィルタリングとも 呼 ばれる.Photoshop やPaintShop で 行 う 特 殊 効 果 は,このフィルタリング,すなわち,フィルタ 処 理 を 用 いて 行 われる. フィルタ 処 理 とは, 安 居 院 と 長 尾 (1992) によれば, 画 像 上 の 任 意 の 画 素 (i,j) の 新 しい 階 調 値 g(i,j) を, 画 素 (i,j) の 近 傍 の 画 素 の 階 調 値 から 決 定 する 局 所 演 算 を 画 像 上 のすべての 画 素 に 対 して 実 行 することによって,エッジの 強 調 や 雑 音 処 理 などの 画 像 処 理 を 実 行 する 操 作 である. と 定 義 される.すなわち, 画 像 に 何 らかの 計 算 式 をあては めて,その 計 算 結 果 を 画 像 に 再 現 する 処 理 のことである. この 処 理 を 大 別 すると,フーリエ 変 換 とフィルタ 行 列 を 使 う 方 法 の2つに 分 けられ る.フーリエ 変 換 による 処 理 は, 画 像 にかかわる 周 波 数 をフーリエ 解 析 によって 算 出 し,そこから 必 要 な 周 波 数 帯 だけを 取 り 出 して, 逆 フーリエ 変 換 することによって, 画 像 を 処 理 する 方 法 である.フーリエ 変 換 はデジタル 画 像 だけでなく, 実 際 の 波 長 によっ てあらわされる 画 像 にも 用 いることができる. 一 方,フィルタ 行 列 とは,フィルタ 行 列 と 呼 ばれる 数 字 の 並 びを 使 って, 直 接 画 素 の 値 を 計 算 処 理 し, 計 算 結 果 を 求 める 方 式 である. 事 前 に 計 算 式 を 構 築 する 必 要 がある が,フーリエ 変 換 に 比 べて 処 理 速 度 が 速 いことがその 特 徴 である. 画 像 処 理 ソフトで は,フィルタ 行 列 を 用 いた 処 理 が 使 われることが 多 い. フィルタ 処 理 を 用 いると, 以 下 のようなことが 行 えるのである. 160

175 9.8. フィルタ 処 理 ぼかし: 画 像 にぼかしを 入 れる. シャープ: 画 像 内 の 対 象 の 境 界 線 をはっきりさせる. エッジ 検 出 : 画 像 内 の 対 象 の 境 界 線 を 検 出 する. 特 殊 効 果 :エンボスやモザイク 処 理 など, 特 殊 な 効 果 を 再 現 する 画 像 をぼかす 画 像 をぼかすということは, 特 定 の 画 像 領 域 を 近 傍 処 理 で 平 均 化 することで, 画 像 の 境 界 の 差 を 小 さくするということである. 図 9.21 はそうした 処 理 作 業 の 概 略 を 図 に 示 したものである. 例 えば, 画 像 の 左 上 4 3のピクセルを 平 均 化 すると,それぞれの 階 級 値 が 平 均 化 されて 同 じになっている 様 子 が 見 て 取 れるであろう.この 場 合 は, 指 定 さ れた 領 域 が 一 様 になるが,それぞれのピクセルに 対 してフィルタ 行 列 を 当 てはめると, ピクセルごとの 差 が 緩 やかになる.そのため,ぼかしを 入 れると 画 像 内 の 対 象 の 境 界 が 不 明 瞭 になるのである.ぼかしを 入 れることで, 画 像 内 の 境 界 線 および 影 付 き 部 分 の くっきりとしたエッジに 隣 接 するピクセルが 平 均 化 されて, 滑 らかな 効 果 が 得 られるの である. 図 9.21: 平 均 化 によるぼかし 処 理 の 概 念 図 Photoshop では,ファイルメニューの フィルタ ぼかし を 選 択 すると,いく つかの 方 法 でぼかしを 入 れることができる. 例 えば, 図 9.22 は,ぼかしフィルタの 内, ぼかし( 表 面 ) を 選 択 した 時 に 出 てくる 調 整 ウィンドウである. 半 径 は,ぼかしフィ ルタで 平 均 化 を 行 う 範 囲 である.この 半 径 が 大 きくなればなるほど, 画 像 のぼかし 具 合 が 強 くなる. しきい 値 は,ぼかしの 効 果 をどの 階 調 まで 行 うかを 指 定 する 値 である. しきい 値 が 高 くなればなるほど,ぼかしが 適 応 される 範 囲 が 広 くなるため, 画 像 全 体 に ぼかしが 入 ることになる. 161

176 第 9 章 画 像 処 理 ソフトの 利 用 図 9.22: ぼかし( 表 面 ) の 調 整 ウィンドウ 演 習 9-16 画 像 にぼかしを 入 れて,なめらかな 画 像 を 作 成 しなさい 画 像 を 鮮 明 にする フィルタ 処 理 を 使 えば,ぼかしとは 逆 に, 画 像 内 の 対 象 の 境 界 線 を 鮮 明 にすることが できる. 例 えば,ピンボケ 写 真 の 修 正 にこのフィルタを 用 いることができる.シャープ フィルタは, 隣 接 したピクセル 間 のコントラストを 強 調 することによって, 画 像 の 境 界 線 を 明 確 にするのである.このフィルタの 程 度 を 強 めると,データサイズが 大 きくなっ たり, 画 像 内 に 存 在 するノイズも 強 調 されたりするために, 注 意 が 必 要 である.また, あまりにもひどいピンボケは 修 正 することができないことを 留 意 しておいたほうが 良 い であろう. Photoshop の 場 合 は,ファイルメニューの フィルタ シャープ を 選 択 すると, いくつかの 方 法 でシャープフィルタをかけることができる.シャープの 程 度 を 指 定 した い 場 合 は, アンシャープマスク を 選 択 すると, 図 9.23 の 中 央 のような 調 整 ウィンド ウが 出 現 する. 量 は,シャープ 効 果 の 強 さを 決 める.これが 多 くなればなるほど, 境 界 162

177 9.8. フィルタ 処 理 図 9.23: アンシャープマスクの 設 定 画 面 調 整 前 ( 左 ), 設 定 ウィンドウ( 中 ), 調 整 後 ( 右 ) がくっきりすることになる. 半 径 は,フィルタ 処 理 の 範 囲,しきい 値 はフィルタを 適 用 する 階 調 のレベルである. 図 9.23 の 左 はマスクをかける 前, 右 はマスク 処 理 をした 後 の 画 像 である. シャープマスク を 用 いてできる 修 正 は 限 りがあるが, 建 物 などをよ りくっきりと 示 したい 場 合 には, シャープフィルタ を 用 いると 良 いかもしれない. 演 習 9-17 画 像 にシャープフィルタをかけて, 補 正 前 と 補 正 後 の 画 像 を 比 較 しなさい 画 像 のエッジを 検 出 する エッジ 検 出 とは, 画 像 中 の 物 体 の 境 界 線 を 求 める 処 理 である.コンピュータで 様 々な 画 像 処 理 / 画 像 認 識 を 行 う 場 合, 境 界 線 によって 物 体 を 認 識 したりすることが 出 来 るた め,エッジ 検 出 は 非 常 に 重 要 な 処 理 である. ここでいうエッジとは, 値 が 急 激 に 変 化 する 箇 所 である. 変 化 量 が 大 きい 場 所 を 検 出 するためには, 一 般 的 に 微 分 処 理 を 行 うことになるが,デジタルデータの 場 合 は,2 つ の 値 の 差 分 を 求 めることを 意 味 する. 実 際 にエッジ 検 出 フィルタをかけた 画 像 を 図 9.24 に 示 す.エッジフィルタをかける ことで, 実 写 画 像 がスケッチのように 変 わるのが 見 えるであろう.エッジ 検 出 は,こう した 効 果 だけではなく,エッジ 検 出 をかけた 後 に,そのエッジを 利 用 して 新 たな 画 像 を 作 成 することも 可 能 になるのである. Photoshop を 用 いる 場 合 は,ファイルメニューの フィルタ 表 現 手 法 の 中 か ら, エッジの 光 彩, 輪 郭 のトレース, 輪 郭 の 検 出 の3つがエッジ 検 出 フィルタを 用 いた 変 換 に 当 たる. 図 9.24 は 輪 郭 検 出 を 用 いて 変 換 したものである. エッジの 光 彩 163

178 第 9 章 画 像 処 理 ソフトの 利 用 図 9.24: エッジ 検 出 による 画 像 の 変 化 は,カラーのエッジを 識 別 し,ネオンのような 光 彩 をさらに 加 えるフィルタである. 輪 郭 のトレース は, 明 るさが 大 きく 変 化 する 部 分 を 検 出 し, 各 カラーチャンネルで 等 高 線 のような 細 いラインを 作 成 するフィルタである. 演 習 9-18 画 像 に 輪 郭 の 検 出 フィルタをかけて,スケッチのような 画 像 を 作 成 しなさい 特 殊 効 果 を 使 った 画 像 処 理 基 本 的 なフィルタ 処 理 は 上 述 したが,Photoshop には,さまざまなフィルタ 処 理 があ る. 図 9.25 はPhotoshop の 他 のフィルタによって 変 換 した 画 像 である.こうしたフィ ルタ 処 理 を 行 うことでアーティスティックな 画 像 を 作 成 することができる.こうした 技 術 は,ポスターなどのフォトデザインに 必 要 になってくるので,どのフィルタがどの 効 果 をもたらすかを 確 認 しておくとよいであろう. 演 習 9-19 画 像 にフィルタをかけて,どのように 変 換 されるかを 確 認 しなさい. 9.9 画 像 を 合 成 する 写 真 は 現 実 にあるものを 切 り 取 ることのできるものであるが, 画 像 処 理 を 利 用 すれ ば, 現 実 に 存 在 しない 画 像 を 作 り 出 すことができる.ポスターなどの 画 像 をデザインす る 場 合 には, 現 実 性 よりも, 画 像 の 組 み 合 わせを 利 用 することで,より 魅 惑 的 な 画 像 が 要 求 されるため, 合 成 技 術 も 重 要 になる. 164

179 9.9. 画 像 を 合 成 する 図 9.25: いくつかのフィルタ 処 理 を 用 いて 変 換 した 画 像 例 えば, 図 9.26 の 右 の 画 像 は, 左 と 中 央 の 画 像 を 合 成 したものである.このように, 合 成 を 使 えば, 現 実 にない 写 真 を 作 り 出 すことが 可 能 である. 図 9.26: 合 成 前 の 画 像 ( 左 と 中 央 ) と 合 成 後 の 画 像 必 要 な 画 像 を 取 り 出 す 合 成 画 像 を 作 成 する 場 合,たいてい 必 要 なのは, 画 像 の 一 部 分 のみである.そのよう な 場 合, 不 要 な 部 分 を 切 り 取 る, 必 要 な 部 分 だけをコピーするといった 作 業 が 必 要 にな る.その 場 合, 画 像 のトリミングを 利 用 することもできるが, 範 囲 が 大 まか 過 ぎる 為, 合 成 には 適 さない.そのため,より 洗 練 した 方 法 で, 画 像 の 一 部 を 取 り 出 す 必 要 がある. (1) 消 しゴムの 利 用 165

180 第 9 章 画 像 処 理 ソフトの 利 用 最 も 単 純 に 画 像 の 一 部 を 取 り 出 す 方 法 は, 他 の 情 報 を 消 すことである.Photoshop の 場 合 は, 画 像 の 情 報 を 消 すツールとして, 消 しゴムツールが 用 意 されている. 消 しゴム ツールには,3 種 類 がある. ヒストリー 消 しゴムツール: 描 画 を 行 った 時 に,その 作 業 工 程 を 消 すツール. 元 から ある 画 像 には 使 えない. 背 景 消 しゴムツール: 背 景 となっている 画 像,もしくは,レイヤの 情 報 を 消 すのに 用 いることができる. 画 像 の 一 部 を 取 り 出 す 場 合 に 使 える. マジック 消 しゴムツール: 指 定 した 色 と 同 じ 色 を 同 時 に 消 すことができる. 画 像 の 一 部 を 取 り 出 す 場 合 に 便 利 であるが, 抜 き 出 したい 対 象 とそれ 以 外 の 情 報 の 色 が 明 確 に 異 ならない 場 合 には, 必 要 のないところまで 消 してしまうので 注 意 が 必 要 で ある. 演 習 9-20 画 像 内 の 特 定 の 対 象 以 外 を 消 しゴムツールで 消 しなさい. (2) 選 択 範 囲 の 利 用 画 像 内 の 対 象 以 外 の 情 報 は 消 しゴムツールで 消 すことができるが, 結 構 面 倒 である. 画 像 内 の 特 定 の 対 象 を 選 択 するという 場 合 ならば, 選 択 範 囲 を 利 用 する 方 が 便 利 であ る. 選 択 範 囲 を 利 用 して, 選 択 個 所 や 選 択 個 所 以 外 を 消 すこともできるし, 選 択 した 範 囲 のみを 別 のレイヤとして 複 製, 張 り 付 けを 行 うことも 可 能 である. Photoshop では,さまざまな 選 択 ツールが 存 在 している. 最 も 基 本 的 なものは, 長 方 形 選 択 ツール や, 楕 円 選 択 ツール などである.これは, 対 象 が 長 方 形 の 場 合 や, 円 形 の 場 合 に 用 いることができる.ただし, 複 雑 な 対 象 の 選 択 には 適 していない. 合 成 画 像 を 作 成 するのに 利 用 しやすいのは, 多 角 形 選 択 ツール, なげなわツール, マグネット 選 択 ツール のようなユーザーが 選 択 範 囲 を 指 定 できるツールである. な げなわツール は,マウスでドラッグした 範 囲 を 選 択 することができる. マグネット 選 択 ツール は,クリックするごとにポイントを 置 き,そのポイントの 間 で 最 も 目 立 つ 境 界 にそって 選 択 範 囲 を 決 定 するものである. また, 選 択 範 囲 の 境 界 がある 程 度 はっきりしている 場 合 は, 自 動 的 に 境 界 を 検 出 して 選 択 する クイック 選 択 ツール を 利 用 すると 便 利 である. 特 定 の 対 象 を 選 択 できれば,あとは,Delete で 選 択 範 囲 を 消 す,もしくは,ファイ ルメニューで 選 択 範 囲 選 択 範 囲 を 反 転 をしたのち,Delete を 押 すと, 選 択 166

181 9.9. 画 像 を 合 成 する 図 9.27: 選 択 範 囲 の 境 界 線 の 調 整 ウィンドウ した 以 外 の 画 像 が 消 える.また, 選 択 した 状 態 で,コピーして 別 の 画 像 に 張 り 付 けるこ とも 可 能 である. 選 択 範 囲 を 利 用 したとしても,あまりなめらかに 対 象 を 切 り 取 ることができていない 場 合 もある.その 時 には,ファイルメニューの 選 択 範 囲 境 界 線 を 調 整 を 選 択 すると, 図 9.27 のような 調 整 ウィンドウが 現 れる.このウィンドウにより 選 択 範 囲 を 微 調 整 することができるので, 利 用 すると 良 いであろう. 演 習 9-21 選 択 範 囲 を 利 用 して, 画 像 内 の 特 定 の 対 象 以 外 を 消 しなさい レイヤの 利 用 画 像 の 合 成 はレイヤを 利 用 して 行 うものである.ここで, 合 成 した 画 像 が 別 々のもの であれば,レイヤのプロパティを 操 作 することで 様 々な 効 果 を 出 すことができる. 例 え ば, 図 9.28 の 左 の 図 は, 重 なり 合 っているレイヤの 透 明 度 を 操 作 して, 上 に 合 成 した 画 像 を 背 景 に 溶 け 込 ませたものである. 図 9.28 の 右 は,レイヤの 描 画 モードを 変 更 し たものである. Photoshop では, 先 述 したレイヤスタイルや,レイヤパレットを 利 用 することがで きる. 図 9.29 はレイヤパレットを 示 したものである. 透 明 度 は,パレット 右 側 の 不 透 167

182 第 9 章 画 像 処 理 ソフトの 利 用 図 9.28: レイヤのプロパティを 利 用 した 合 成 画 像 明 度 の 数 値 を 変 えることで 変 化 させることができる.この 場 合,100 %が 完 全 な 不 透 明 で,0 に 近 づくほど 透 明 度 が 高 くなる.レイヤパレット 上 部 の 左 側 が,レイヤ 間 のブレ ンド( 描 画 モード) の 設 定 である. 描 画 モードの 設 定 は 多 様 であるので,それぞれどの ような 効 果 が 得 られるかを 確 認 しておくとよいであろう. 図 9.29: レイヤパレットでの 不 透 明 度 と 描 画 モードの 設 定 箇 所 演 習 9-22 演 習 9-21 で 切 り 取 った 画 像 と, 別 の 画 像 を 組 み 合 わせて 合 成 画 像 を 作 成 し, 描 画 モードによりどのように 変 化 するかを 確 認 しなさい. 168

183 9.10. フォトデザイン 合 成 画 像 の 調 整 合 成 画 像 の 基 本 は, 画 像 の 一 部 を 切 り 取 り, 別 の 画 像 に 合 わせることである.ただし, 合 成 した 画 像 同 士 の 本 来 のサイズが 同 じとは 限 らず, 状 況 に 応 じて 様 々な 調 整 を 行 わな ければならない. 大 きさの 調 整 であれば, 画 像 を 選 択 し, 自 由 変 形 により 変 えることが できる.その 他, 合 成 画 像 同 士 がより 自 然 に 溶 け 込 むようにするためには, 合 成 した 画 像 のカラーや 明 るさの 調 整, 画 像 間 の 境 界 を 滑 らかにするなど, 様 々な 工 程 を 経 なけれ ばならない.そのためには, 用 いる 画 像 処 理 ソフトの 機 能 をある 程 度 理 解 したうえで 行 うべきである. 演 習 9-23 合 成 写 真 を 作 成 しなさい フォトデザイン デジタル 画 像 を 用 いれば,ポスターやビラなど,さまざまなフォトデザインを 行 うこ とができる.そうした 場 合 に,これまでに 述 べた 画 像 の 調 整 や 合 成 の 方 法 を 利 用 するこ とができる.しかし,デザインを 行 う 上 では,こうした 技 術 よりも, 構 図 が 重 要 である. では, 写 真 をかっこよくデザインするにはどのようにすればよいであろうか.まず, 目 的 を 考 える 必 要 がある. 作 成 するものが, 観 光 用 のポスター, 雑 誌 の 広 告 ページ,Web サイトのタイトル 画 像,ポストカードなど, 用 途 に 応 じてデザインの 構 図 は 変 わる. 次 に, 大 まかな 構 図 を 決 めて, 主 役 と 脇 役 を 決 めることが 重 要 である.どの 対 象 も, というよりは, 舞 台 や 映 画 のように 写 真 を 演 出 すると, 構 図 が 固 まってくるはずである. その 上 で, 何 を 伝 えたいのかを 考 え, 見 せたい 部 分 を 意 図 的 に 強 調 することを 考 えね ばならない.デザインのテーマを 考 え, 用 いる 画 像 が 決 定 したら,その 写 真 のどこを 強 調 したいか,その 写 真 を 使 って 何 を 伝 えたいかを 考 えなければならない. 例 えば, 人 物 の 視 線 の 強 さや,ネコの 毛 のふわふわした 手 触 り, 冬 の 景 色 の 寒 々とした 季 節 感 など, その 写 真 の 持 つ 特 徴 にあったデザインを 考 えることが 重 要 である.そのためには,デザ インを 先 に 考 えて, 主 題 にあった 写 真 を 探 したり 撮 影 したりするのもよいであろう. 主 題 と 素 材 がそろえば, 演 出 の 方 法 を 考 えなければならない.その 場 合 の 例 をいくつ か 紹 介 しておく. 169

184 第 9 章 画 像 処 理 ソフトの 利 用 トリミングを 利 用 する: 主 題 にあった 構 図 にするため, 不 要 な 部 分 を 取 り 除 き,クロー ズアップする. バックの 空 間 をうまく 使 う: 人 物 や 物 ではなく, 空 間 部 分 に 文 字 を 配 置 する.この 時, 主 役 を 中 心 にするだけでなく,あえて 空 間 部 分 を 広 くとるのも1つの 手 である. フィルタなどを 使 ってある 部 分 を 目 立 たせる:1 枚 の 写 真 の 中 には 様 々な 要 素 がある. そのなかで 何 を 一 番 見 せたいのかを 整 理 して, 見 せたい 部 分 を 目 立 たせ,それ 以 外 の 部 分 を 目 立 たないようにフィルタをかける. 光 と 影 の 効 果 を 利 用 : 写 真 は 現 実 のものを 写 しているので, 光 の 当 たっている 部 分 と 影 の 部 分 がある. 自 然 な 状 態 では, 全 ての 物 に 均 等 に 光 があたっているが,デザ インする 手 法 として, 意 図 的 に 光 と 影 の 操 作 をしてみるのも1つの 手 である. 例 えば, 写 真 の 一 部 分 だけをスポットライトがあたったように 明 るくすると,その 部 分 だけが 強 調 されて 意 味 があるような 印 象 になる.また, 意 外 性 を 主 題 にした デザインなら, 現 実 にはあり 得 ないような 影 をつけたり, 影 のない 世 界 にしたり する. 色 に 差 をつけて 目 立 たせる: 見 せたい 部 分 とそうでない 部 分 で 色 に 差 をつける. 見 せ たい 部 分 だけ 彩 度 ( 色 の 鮮 やかさ) を 高 くして, 他 の 部 分 の 彩 度 を 少 し 抑 える 程 度 であれば,いろいろな 場 面 で 利 用 できる. 舞 台 や 映 画 のように 写 真 を 演 出 してみる: 現 実 の 状 況 よりも, 頭 の 中 にある 印 象 を 視 覚 化 してみると, 凝 ったデザインになる. 例 えば, 古 い 感 じを 出 したいならば, 画 像 をセピアにしてみるなど,さまざまな 演 出 が 可 能 である. 小 物 や 文 字 による 演 出 : その 写 真 の 雰 囲 気 にあった 小 物 などで, 印 象 を 強 調 すること ができる. 例 えば, 夏 の 写 真 の 飾 りにはヒトデや 貝 殻 をちりばめる,かわいらし さを 強 調 するために, 花 やオモチャをあしらってみる, 写 真 にコメントやタイト ルを 加 える 際 に, 文 字 をメタリックにしたり,かすれたスタンプ 風 にしたりする ことで, 印 象 が 大 きく 変 わる.また, 布 やガラス, 石 などのテクスチャを 写 真 の 背 景 や 額 縁 に 利 用 すると,スクラップ 風 の 作 品 に 仕 上 げることもできる. フォトデザインには,ある 意 味 正 解 や 正 しい 方 法 はないとも 言 える.どれだけのこと を 相 手 に 伝 えられるかは,アイディアとそれをどこまで 実 現 できるかによる.すなわ ち, 技 術 よりも, 様 々なフォトデザインの 作 品 を 見 ながら, 自 分 なりのデザインを 見 つ けだすことが 重 要 とも 言 える. 170

185 9.11. Web 用 動 画 の 作 成 演 習 9-24 体 育 の 日 に 町 内 運 動 会 を 催 すことを 想 定 して, 告 知 用 の チラシを 作 成 しなさい Web 用 動 画 の 作 成 動 画 の 形 式 は 様 々であるが,サーバに 動 画 をおいてリンクを 張 るといったように,Web に 利 用 することが 可 能 である.また,YouTube などの 動 画 サイトに 投 稿 すれば, 既 定 のファイル 形 式 であれば,ブラウザ 上 で 動 画 を 見 ることができる.そうしたサイトに リンクを 張 ることで,Web 上 で 動 画 を 公 開 することもできる.ただし,ブロードバン ド 環 境 にない 場 合 は,そうした 動 画 を 見 るには 大 変 時 間 がかかってしまうという 欠 点 が ある. AdobeFlash 等 のソフトであれば, 比 較 的 軽 い 動 画 を 作 成 することもできるが, 経 済 的 なコストも 結 構 かかるものである.また,JavaScript などのプログラミングを 用 い て, 複 数 の 画 像 を 時 間 的 に 連 続 して 読 み 込 むことで,アニメーションを 作 成 することも 可 能 である.しかし,JavaScript のプログラミングなどの 比 較 的 専 門 的 な 知 識 が 必 要 と なってくる. gif アニメーションであれば,いくつかの 市 販 の 画 像 処 理 ソフトで 作 成 することができ るし,フリーソフトでも 作 成 することができる.サイトのバナーやロゴのようなちょっ としたアニメーションであれば,gif アニメーションを 作 成 する 方 が 技 術 的 にも,コス ト 的 にも 簡 便 であろう Photoshop でgif 動 画 を 作 成 する gif アニメーションは,これまで 紹 介 してきた,Photoshop でも 作 成 することが 可 能 である.ここでは,PhotoshopCS5 でgif アニメーションを 作 成 する 方 法 を 紹 介 する 基 本 画 像 の 作 成 まずは,Photoshop を 起 動 して, 背 景 となる 画 像 を 作 成 する. 一 連 の 作 業 は 以 下 の 通 りである. 171

186 第 9 章 画 像 処 理 ソフトの 利 用 図 9.30: 基 本 画 像 作 成 後 のレイヤパレットと 作 成 された 画 像 1. 背 景 の 画 像 を 作 成 する. 2. 別 のレイヤに 動 かす 画 像 を 作 成 する. 3. そのレイヤを 複 製 する. 4. 複 製 したレイヤの 画 像 を 動 きの 軌 跡 に 合 わせて 少 し 動 かす の 過 程 を 繰 り 返 して, 最 終 的 な 到 達 点 まで 動 かす. この 過 程 を 繰 り 返 すと,レイヤパレットは, 図 9.30 のようになるはずである. 演 習 9-25 gif アニメーションの 基 本 画 像 を 作 成 しなさい レイヤからフレームの 作 成 基 本 となる 画 像 が 作 成 できたら,アニメーションパレットを 利 用 してアニメーション を 作 成 する.アニメーションパレットは, ファイル メニューの ウィンドウ ア ニメーション を 選 択 すると, 図 9.31 のようなパレットが 出 現 する.パレットが 出 現 したら,パレットの 右 上 の を 選 択 するとオプションが 出 てくるので, レイヤから フレームを 作 成 する を 選 択 する. 172

187 9.11. Web 用 動 画 の 作 成 図 9.31: Photoshop のアニメーションパレット アニメーションを 調 整 する レイヤからフレームを 作 成 すると,アニメーションパレット 内 に, 各 レイヤの 画 像 が 入 れられる.1 枚 のレイヤが1つのフレームになる. 上 述 したように 背 景 のレイヤを 設 定 している 場 合 は,それぞれのフレームを 選 択 して,そのフレームに 表 示 する 画 像 とし て 背 景 画 像 も 選 択 することができる. 表 示 するか,しないかは,レイヤパレット 左 のサ ムネイルの 表 示 / 非 表 示 をチェック( 目 のマークをつける) するかしないかで 決 定 される ので, 同 じ 背 景 を 使 う 場 合 は,すべてのフレームで, 背 景 の 表 示 をするようにしておけ ばよい. フレームの 順 番 を 変 える 場 合 は,フレームをドラッグして 横 にスライドすれば 順 番 が 変 わり,フレームを 削 除 する 場 合 は,フレームの 削 除 を 選 択 すれば, 不 要 なフレームを 消 すことができる アニメーションを 動 かしてみる 一 通 りの 作 業 が 終 わったら, 実 際 にアニメーションとしての 動 きを 確 認 しなければな らない.アニメーションパレットの 下 部 に 再 生 ボタン( 右 向 きの 三 角 マーク) を 選 択 す れば,アニメーションを 再 生 することができる. 実 際 に 動 かしてみて, 画 動 きが 速 すぎ る 場 合 は,フレーム 画 像 下 の 秒 数 を 示 してある 箇 所 (フレームディレイを 設 定 ) をクリッ クすると, 図 9.32 のように 次 のフレームが 表 示 されるまでの 時 間 を 設 定 することがで きる. 秒 数 の 詳 細 な 設 定 は, その 他 で 行 うことが 可 能 である. 173

188 第 9 章 画 像 処 理 ソフトの 利 用 図 9.32: フレームディレイ 設 定 画 面 とトゥイーン 設 定 ボタン 実 際 にアニメーションを 滑 らかな 動 きとして 作 成 するには, 移 動 距 離 と 次 の 画 像 が 出 現 するまでの 時 間 を 考 慮 しなければならない.あまり 近 すぎたり, 時 間 の 間 隔 が 短 すぎ たりすると, 残 像 や 同 時 に 出 現 したような 印 象 を 受 ける. 逆 に, 間 隔 が 離 れすぎたり, フレームの 出 現 間 隔 が 長 すぎたりすると, 連 続 していない 画 像 のように 見 えてしまう. こうした 現 象 が 起 きないように, 何 度 も 確 認 しながらアニメーションを 作 る 必 要 がある が,Photoshop では, 自 動 的 にフレーム 間 の 動 きや 出 現 時 の 透 明 度 を 補 間 してフレー ムを 作 成 する,トゥイーンという 機 能 も 付 いている.トゥイーンは, 図 9.32 に 示 した トゥイーン 設 定 ボタンか,オプションの トゥイーン.. で 設 定 することができる. 図 9.33 はトゥイーンの 設 定 画 面 である.それぞれの 設 定 の 機 能 は, 以 下 の 通 りである. トゥイーン: 補 間 するフレームを 入 れる 場 所 を 指 定 する. 次 のフレーム,もしくは, 最 初 のフレーム の 場 合, 選 択 したフレームの 後 に 補 間 するフレームが 入 る. 前 のフレーム,もしくは, 最 後 のフレーム の 場 合, 選 択 したフレームの 前 に 補 間 するフレームが 入 る. 追 加 するフレーム: 補 間 するフレーム 数 を 指 定 する. レイヤ: 補 間 するレイヤを 指 定 する. すべてのレイヤ の 場 合,すべてのレイヤを 含 む 画 像 が, 選 択 したレイヤ の 場 合 は, 選 択 したレイヤのみが 補 間 画 像 として 作 成 される. 174

189 9.11. Web 用 動 画 の 作 成 図 9.33: トゥイーン 設 定 ウィンドウ パラメータ: どのパラメータに 関 して 補 間 するかを 指 定 する. 位 置 は, 最 初 と 最 後 のフレームの 間 で, 新 規 フレームのレイヤの 位 置 を 均 等 に 変 化 するように 補 間 す る. 移 動 するアニメーションを 作 成 したい 場 合 に,このパラメータをチェックし ておく. 透 明 度 は, 最 初 と 最 後 のフレームの 間 で 新 規 フレームの 不 透 明 度 を 均 等 に 変 化 するように 補 間 する.フェードイン,フェードアウトの 効 果 を 狙 う 場 合 は, 不 透 明 度 0 %と100 %のフレームを 用 意 して,このパラメータをチェックす ればよい. 効 果 は, 最 初 と 最 後 のフレームの 間 でレイヤ 効 果 のパラメータ 設 定 を 均 等 に 変 化 するように 補 間 する アニメーションを 保 存 する 作 成 したアニメーションを 普 通 に 保 存 しようとすると, 背 景 とレイヤを 結 合 した 静 止 画 のGif 画 像 が 作 成 されてしまう.そのため,アニメーションとして 保 存 する 場 合 は, ファイル メニューの ファイル Web およびデバイス 用 に 保 存 を 選 択 しなけ ればならない. Web およびデバイス 用 に 保 存 を 選 択 すると, 図 9.34 のような 保 存 設 定 画 面 が 出 てく る.このとき,プリセットで 保 存 するファイル 形 式 やパラメータを 設 定 して, 保 存 を 選 択 すると, 通 常 の 保 存 名 称 設 定 場 面 になる. 保 存 するときの 種 類 には, 175