情報科教育法 II 2002 ＃ 7
久野靖∗

2003.12.10

はじめに前回著作権についてやりましたが、既に別の講義でやっているという人が思ったより多かったです (昨年はゼロだったのに…そういう風にカリキュラム構成が変わったら私に連絡が欲しいところですよね…)。ですが、全く知らないという人もいるのでいちおう今回続きをやっておきます。生徒さんに教える上でも大切なところですし。

1

著作権 (2)

1.1

著作権法の目的と意義

著作権について「著作権ばかり主張されて制限されるのは嫌だ」という主旨の意見を述べる人もいます。あなたもそう思いますか?
実は、著作権法の目的は著作物並びに実演、レコード、放送及び有線放送に関し、著作者の権利およびこれに隣接する権利を定め、これらの文化的所産の公正な利用に留意しつつ、著作者等の権利の保護を図り、もって文化の発展に寄与するとなっている。どういうことだか分かりますか?
次のような素朴な疑問を抱いたことはないでしょうか?

• レンタル CD 店で借りた CD を MD にコピーするのは著作権法違反?
• 学校の授業で新聞や雑誌のコピーを資料に配るのは著作権法違反?
• 図書館で本を貸り出すのは著作権法違反?
• 図書館で本や雑誌のコピーを取るのは著作権法違反?
• 自分のレポートや論文に資料の一部を許諾なしに引用するのは著作権法違反?
実はこれらはどれも OK。つまり、著作権法というのは「著作物は文化的なものであり、それを公正に利用できるように範囲や条件を定める」という面もあるわけだ。図書館で本が読めなかったらお話にならないでしょう?
もう 1 つ、もし著作権者の権利がまったく保護されていなかったとすれば…たとえば、苦労して小説や楽曲や映画を作ったり写真を撮ったりしてもコピーし放題、だったとすれば、それらで「食べて行ける」人は減ってしまい、良質な作品そのものが減ってしまうと思いませんか? だから、著作者に一定の権利を認めることでその労作に報いる、皆がお金を払う価値があると思うような著作物を作ればそれなりに儲かる、というふうにしているわけだ。
そして、その保護は無期限ではない。著作権法では、個人による著作物の場合、作者の死後 50 年が保護の及ぶ期限ということになっている。「青空文庫」って知っています?
∗筑波大学大学院経営システム科学専攻1http://www.aozora.gr.jp/
これは作家の死後 50 年経過して著作権が消滅した作品をボランティアで入力して相互利用しようという活動で、既にかなり多くの文学作品が読めるまでなっている。また、文学や日本語の研究をする人にとっても貴重な材料になっている。 (どんな語彙があるかとか計算機でデータ処理して調べられるから。 )同様なわけで、たとえばベートーベンの「第 9」をクリスマスに演奏会でやっても、ベートーベン家の子孫にお金を払う必要はない。
このように、著作権法によってどこまではいい、どこから先は許諾が必要、という境界が引かれているからこそ、我々は安心して先人の文化的遺産の恩恵に浴することができるわけだ。

1.2

二次的著作物

二次的著作物とは、ある著作物を土台として別の著作物を作ったものを言う。原作をもとに映画化したりコミックやアニメを製作することは一般的に行われるが、この場合原作が土台となる著作物、映画、コミック、アニメが二次的著作物。
二次的著作物を製作するには、当然ながら土台となる著作物の著作権者に許諾を得る必要がある。また、元の著作物の著作権者は二次的著作物の利用に関しても権利を持つ。
たとえば、「キャンディ・キャンディ」というコミックの名作があるが、これには原作があった。しかしコミックの方がはるかに有名。で、コミック作者がキャンディのコマ絵を公告会社に利用許諾したのに対し、原作者が利用停止を求めて訴訟を起こし、訴えが認められた。つまり原作のあるコミックではその絵だけ利用するのであってもコミック作者の勝手にはならず、原作者の権利が及んでいるということ。

1.3

著作権の構成著作権の構成は前回も少し説明したが、次の 3 つに大別される。

(1) 著作者人格権 — 著作物を作った人の名誉等に関わる権利。「公表権」(いつ、どうやって公表するか決める権利)、「氏名表示権」(著作物にどのような名前をどのように表示する/しないを決める権利)、「同一性保持権」(勝手に著作物を改変されない権利)、の 3 つから成る。
(2) 経済的著作権 (狭い意味での著作権) — 著作物を用いてお金儲けをすることに関わる権利。後で詳しく。
(3) 著作隣接権 — 著作物を伝達する人の権利。後で詳しく。

1.4

著作者人格権

著作権は著作物が創作された時「自動的に発生」することは述べたが、さらに著作者人格権については他人に譲渡したり放棄したりできない。著作者人格権の内容としては次の 3 つがある。

• 公表権 — 著作物を、いつ、どのような形で公表するか決める権利。いちど公表してしまえばこの権利は効力がなくなる。
• 氏名表示権 — 著作物に名前を表示するか否か、表示するとしたら、どのように、どの名前 (例: 本名、ペンネーム、…) を表示するか決める権利。
• 同一性保持権 — 著作物の内容を勝手に変更されない権利。たとえば文章を勝手に書き換えたり、絵を修正したり、写真をトリミングしたりされないなど。

2

1.5

経済的著作権の内容

経済的著作権は次のような権利から成る。

• 複製権 — 著作物を印刷、写真、録音、録画等により複製する権利• 上演権・演奏権 — 音楽を演奏したり劇を上演したりする権利• 上映権 — 映画を上映する権利• 公衆送信権 — 著作物を公に送信 (放送等) したり、そうできる状態に置く (自動公衆送信) 権利。後者はWWW みたいなのを前提としている。
• 口述権 — 著作物を口述 (朗読) する権利
• 展示権 — 美術の著作物、未発効の写真の著作物を展示する権利• 頒布権 — 映画を頒布する (フィルムを複製/回覧する) 権利• 譲渡権 — 映画を除く著作物を原作品または複製の譲渡により公衆に提供する権利• 貸与権 — 映画を除く著作物を複製の貸与により公衆に提供する権利• 翻訳権・翻案権等 — 著作物から二次的著作物を作る権利• 二次的著作物の利用に関する原著作者の権利 — 原著作者が二次的著作物を利用する権利

1.6

著作隣接権

著作隣接権とは、著作物を伝達する役割の者に認められる権利。というと分かりにくいが、音楽だったらやっぱり歌手や演奏者が違えば全然違うわけで、これらの人にも権利が認められている (ただし著作者よりはずっと弱い権利)。次のような「伝達者」ごとの権利がある。

• 実演家 — 録音・録画権、放送・有線放送権、送信可能化権、譲渡権、貸与権、商業用レコードの二次使用料請求権• レコード製作者 — 複製権、送信可能化権、譲渡権、貸与権、商業用レコードの二次使用料請求権• 放送事業者 — 複製権、再放送権、有線放送権、テレビジョン放送の伝達権• 有線放送事業者 — 複製権、再放送権、有線放送権、有線テレビジョン放送の伝達権

模擬授業

2

今回の模擬授業は「情報 C」p.116-117「情報化の問題点」です。先生役の人、よろしく。

3

著作権 (3)

3.1

こういう行為は OK?

概要についてはだいたい学んだので、具体的に「これはやっていいのか?」を取り上げながら個別のテーマについて解説していこう。

• 他人が作った Web ページの内容をいただいて自分のページを作った。著作権法違反?
• 他人が作った Web ページのタグをコピーして、文章は入れ換えて自分のページを作った。著作権法違反?
• 他人が作った Web ページに無断でリンクを張った。著作権法違反?
• 他人が作った Web ページを自分のページの「フレーム内」に表示させた。著作権法違反?
• 他人が作った Web ページと同じタイトルのページを作った。著作権法違反?
3

• 他人が作った Web ページの内容に異論があるので、該当部分を無断で引用して、反論を書いた。著作権法違反?
まず、Web ページも著作物だから、他人のページの内容をいただいたら当然×。しかし、内容ではなく HTMLのタグとかだと、それは創作的なものではないと思われるから○ (色づかいとか配置の工夫が創作的だということで争われたら×になるかも知れない…)。リンクを張ることは単にありかを示すだけだから○。ただし無断リンク禁止とか言っている人はしつこく抗議してくるだろうから、断っておいた方が面倒はない。いっぽう、自分のページの「中にあるかのように」表示させることは、たとえコピーはしていなくても× (判例あり)。タ
イトルや題名は単なる目印だから著作物ではないので○。ただし、俳句や川柳みたいに短くても創意工夫のあるもの (標語とかでも) は著作物なので注意。最後にどのような著作物でも (小説とかでも)、批評、論評などの目的で (1) 出所を明示し、(2) 必要最小限の量を、(3) 他の部分から明確に区別できるようにして、引用することは認められているので○。ただし、あくまでも引用される部分が「従」であること。だから「引用だ」と強弁してパクるのはダメ。また、絵や写真や動画などは引用に難しいところがある (改編したら同一性保持権を侵害してしまうし)。
もうちょっとやて t みよう。

• Web ページに雑誌の写真をスキャナで取り込んだものを利用した。著作権法違反?
• Web ページに TV 番組の一場面を取り込んだものを利用した。著作権法違反?
• Web ページに自分で描いた「ドラえもん」の絵を入れた。著作権法違反?
• Web ページで松浦亜弥の新曲を自分が歌っているのを流した。著作権法違反?
• Web ページでシューベルトの「野ばら」を自分が歌っているのを流した。著作権法違反?
• Web ページでシューベルトの「野ばら」を CD から取り込んだものを流した。著作権法違反?
雑誌は写真を含め全部著作物だからスキャナで取り込んで使うのは当然× (批評等の引用はいいが)。TV 番組も著作物だから同じで×。では、コミックそのままはダメだとして、自分で描いたのはどうか? 自分で描いても、それが著名なキャラクタを表していると認められるなら、どこかの特定のコマを写したのではないとしても著作権侵害であるという判例があるので×。次は、曲や歌詞は著作物だから自分で歌おうが当然×。しかし著作権法では、個人の著作物は死後 50 年で消滅としているから、シューベルトさんがそれ以前に死んでいる
以上これは○。しかしそれを歌った実演家 (歌手) にも著作隣接権があるので、 CD から取って流すと×。
Web ページから離れて、日常生活においても実は注意しないと著作権を侵害してしまう行為はいろいろある。

• 学校で授業の時間に先生が雑誌のコピーを配った。著作権法違反?
• 学校で授業に使うソフトを先生が生徒用の各マシンにコピーした。著作権法違反?
• 学校のクラブ活動で合唱する楽譜をコピー機でコピーした。著作権法違反?
• お気に入りのドラマを録画したが保存用にそれをもう 1 つのテープにコピーして保管することにした。
著作権法違反?
• その保管用テープを見逃した友人に貸してあげた。著作権法違反?
• 大学の図書館で参考になる資料が見つかったので該当ページをコピーした。著作権法違反?
まず、学校で授業のために教師が必要なだけのコピーを作ることは認められているので○。しかしこの条項には「著作権者の権利を不当に侵害しない範囲で」という注記があり、ソフトウェアをコピーして授業に使うのはこの範囲を超えるとされているのでこちらは×。また、教育目的なら何でもいいわけではなく、あくまでも授業だけが対象なので部活のためのコピーは×。TV 番組は著作物だがビデオ録画するのは私的利用なので、いくつコピーしようが自分だけが使うのなら○。しかしそれを他人に渡すのは× (だから見逃した番組は VTRや DVD 等で発売されるか再放送されるのを待つかしかない)。図書館でのコピーは○だが、ただしここでいう図書館とは大学図書館、公共図書館など司書が配置されている公式の図書館でなければいけない。

43.2

著作権に関するまとめ

著作権法は我々が日常接している放送、出版、音楽産業などと深く関わっている。そしてコピー技術や WWWなどネットワークの発達により自分がなにげなく行う行為が問題になる機会も増えている。だから注意が必要。
ただし、著作権法はむやみに何でも禁止しているわけではなく、「文化の発展」も目的としていて、そのためにこういう場合は利用できる、ということも多く定めている。正しく理解し使いこなすことが重要 (個人として)。また、教える場合、生徒にもその辺をちゃんと理解させたい。

4HTML 教室

4.1

クラス指定とスタイルシート

前回表をやりましたが、「表のこのセルだけ色を変えたいのだけど…」ということもあるでしょうね。また
表のセルに限らず「この段落だけ」「この見出しだけ」特定の表現を指定したいことはよくある。そのような場合に、HTML+CSS では「クラス指定」を使う。考え方としては簡単で、まず特定の指定をしたい要素 (範囲) の開始タグに「class="名前"」という指定をつける。この「名前」は英字ではじまり英数字が並んだものであれば、自分の好きな (覚えやすい) ものをつけてよい。

<h1 class="important">サンプル 1</h1><table border="2"><tr><th>東京</th><th class="important">名古屋</th><th>大阪</th></tr></table>そして、CSS の指定でも「このクラス指定があるものはこう」という書き方をする。CSS ではその場合「. クラス名」というふうに、「.」に続けてクラス名を指定する。

<style type="text/css">th { background-color: rgb(200,240,180); padding: 3mm }th.important { background-color: red }.implotant { text-decoration: underline }</style>
上のように「××要素で important 指定のものはすべて」という指定と、「何であれ important 指定のものはすべて」という指定の両方が使える。

4.2

span 要素と div 要素

ところで、ここまでは CSS で指定する範囲はすべて「HTML の要素単位」であり、その要素としては見出し全体、段落全体、表のセル全体、というふうに「何か全体」しかなかった。しかし実際には、段落の中で特定の単語にだけ色をつけたり、見出しと段落が複数ならんだ全体を枠で囲んだりといったこともしたい。そのためには、次のタグを使う。

• <span class="名前">...</span> — 段落や見出しなどの中の一部分の範囲を指定する。
• <div class="名前">...</div> — 複数の段落や見出しなどが集まったグループの範囲を指定する。
たとえば、1 つの段落の中で特定の語だけ色を変えたり点滅させたりとび出させたりしてみる。

<p>スタイルシートと span 要素を<span class="blink">組み合わせて</span>使えば、<span class="enhance">このように</span>一部分だけを目立たせることができます。 </p>5

対応するスタイルシート指定を次のようにする。

.blink { text-decoration: blink }.enhance { background-color: yellow }逆に、見出しと段落とを合わせたものを囲んだり色をつけたりしてみる。

<div class="boxed"><h1>サンプル 3</h1><p>また、div 要素を使って囲むことで、見出しや段落などが集まったグループ全体にまとめて色をつけたり囲んだりすることもできます。 </p></div>
このようにまとめたい範囲を<div>...</div>で囲み、これに対してスタイルを指定する。

.boxed { background-color: rgb(200,220,240);
border: blue solid 4px; padding: 3mm }4.3

流し込みと独立位置指定

最後の大技として「流し込み」と「独立位置指定」を見ておこう。まず「流し込み」は「float: right」または「float: left」という CSS 指定で行うもので、指定された要素がページの右または左にくっつき (通常、幅も指定する)、余った側に後に続く本文テキストが流し込まれる。

<h1>サンプル 3</h1><div class="leftbox"><h2>ヒント</h2><p>よく囲み記事は左や右に寄せて、空いた場所には本文を「流し込む」ことが行われる。 </p></div><p>CSS では流し込みは「float: left」「float: right」というプロパティで指定できる。流し込みを使うとコラムみたいなものを本文に隣接させて配置できるのでちょっとかっこいい。ただし、あんまりやりすごると見た目がごちゃごちゃするのでその辺は注意が必要だと思う。また、流し込みを終わらせるには、終わらせたい要素に「clear: both」というプロパティ指定する必要がある。 </p>ここで「<div>...</div>」の部分が囲みとなって後に続く段落が流し込まれるようにする。そのための CSS指定を示す。

.leftbox { background-color: pink; border: blue double 6px;
padding: 3mm; float: right; width: 60% }もう 1 つの「独立位置指定」は、「position: absolute」という指定で行うもので、ページ全体の配置とは独立に指定した要素の位置を決められる (通常、「top: 長さ」、「left: 長さ」を一緒に指定する。指定するのは小さいものにするのが普通。

<div class="overlay"><h1>ぼよーん</h1></div>
6

これに対応する CSS 指定を次のようにする。

.overlay { position: absolute; top: 1cm; left: 8cm }すると、「ぼよーん」がページの上から 1cm、左から 8cm の位置に固定で表示される。流し込みも独立位置指定も、<div>...</div>に対して指定することが多い

4.4
cp

演習
~kuno/work/css4.html なんとか.html

で HTML ファイルをコピーしてきて、編集する。そこに記入されている内容を上の説明と照らし合わせてみる。納得したら、設問をやってみる。
配付するファイルの内容は次の通り。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html lang="ja"><head><title>Sample</title><meta http-equiv="Content-type" content="text/html; charset=euc-jp"><meta http-equiv="Content-style-type" content="text/css"><style type="text/css">
body { background-color: white }div.prob { margin: 3mm 2cm 1mm 2cm; border: green solid 2px }th { background-color: rgb(200,240,180); padding: 3mm }td { background-color: rgb(180,240,200); padding: 3mm }th.important { background-color: red }.important { text-decoration: underline }.blink { text-decoration: blink }.enhance { background-color: yellow }.boxed { background-color: rgb(200,220,240);
border: blue solid 4px; padding: 3mm }.leftbox { background-color: pink; border: blue double 6px;
padding: 3mm; float: right; width: 60% }.overlay { position: absolute; top: 1cm; left: 8cm }/* この後ろに指定を追加して行くこと */</style></head><body><h1 class="important">サンプル 1</h1><table border="2"><tr><th>東京</th><th class="important">名古屋</th><th>大阪</th></tr></table><h1>サンプル 2</h1><p>スタイルシートと span 要素を<span class="blink">組み合わせて</span>使えば、<span class="enhance">このように</span>一部分だけを目立たせることができます。</p><div class="boxed"><h1>サンプル 3</h1><p>また、div 要素を使って囲むことで、見出しや段落などが集まったグループ全体にまとめて色をつけたり囲んだりすることもできます。</p></div>

7

<h1>サンプル 3</h1><div class="leftbox"><h2>ヒント</h2><p>よく囲み記事は左や右に寄せて、空いた場所には本文を「流し込む」ことが行われる。</p></div><p>CSS では流し込みは「float: left」「float: right」というプロパティで指定できる。流し込みを使うとコラムみたいなものを本文に隣接させて配置できるのでちょっとかっこいい。ただし、あんまりやりすごると見た目がごちゃごちゃするのでその辺は注意が必要だと思う。また、流し込みを終わらせるには、終わらせたい要素に「clear: both」というプロパティ指定する必要がある。</p><h1>サンプル 4</h1><div class="overlay"><h1>ぼよーん</h1></div><h1>ここから演習</h1><table border="2"><tr><th colspan="3">テスト</th></tr><tr><th>1</th><th class="test1">2</th><th>3</th></tr></table><div class="prob">
設問 1: 「class="test1"」のセルの背景を好きな色に。ヒント:
background-color を指定するだけ。
</div><p>著作権法で定めている権利は大きく分けて<span class="test2">著作人格権</span>と<span class="test3">経済的著作権</span>とに分けることができます。</p><div class="prob">
設問 2: 「class="test2"」の span 範囲を下線つき、文字は赤色に。
「class="test3"」の span 範囲を背景青に。
</div><div class="test4"><h2>簡単な囲み</h2>
簡単に囲んでみました。
</div><p>この部分は流し込みのテスト用。この部分は流し込みのテスト用。
この部分は流し込みのテスト用。この部分は流し込みのテスト用。この部分は流し込みのテスト用。この部分は流し込みのテスト用。この部分は流し込みのテスト用。この部分は流し込みのテスト用。</p><div class="prob">
設問 3: 「class="test4"」の div 範囲を好きな色の枠で囲み (ヒント:border: solid 色指定 幅指定)、左に寄せて右に流し込む (ヒント:float: right)。
</div><div class="prob">
設問 4: ここまで終わって暇だったら好きなものをここに追加して

8

絶対位置指定その他試してみてください。
</div></body></html>9