WWW ページの作成(2)

					2006年05月30日
コンピュータリテラシ

                                       筑波大学 電子・情報工学系
                                       コンピュータサイエンス専攻
                                       新城 靖
                                       <yas@is.tsukuba.ac.jp>

このページは、次の URL にあります。
http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2006/2006-05-30
あるいは、次のページから手繰っていくこともできます。
http://www.coins.tsukuba.ac.jp/~yas/
http://www.cs.tsukuba.ac.jp/~yas/

■連絡事項

Unix Super Text 上巻「第27章 World Wide Web」、「第17章プリンタ」参考。
次回6月3日金曜日は、体芸棟４階(５４Ｃ０１) に集合。講義室 3A309 でも実習室 3C205 でもない。
共通科目「情報処理(実習)」手引き追補版を持って来る。
統一認証システムのパスワードを変更していない人は Twins の初期パスワードを書いた紙を持って来る。

■補足

HTML の文書は、木構造になる。
箇条書き<UL><OL><DL>は、見出し(<H1>など)の内側に書く。逆は不可。
- ok: <H1>...</H1> <UL> ... </UL> <H1>...</H1>
- bad: <UL> ... <H1>...</H1> ... </UL>

■著作権

インターネットは、「史上最強のコピー・マシン」である。１人ひとりが、新聞社や放送局を持っている。

他人の著作物を、自分のＷＷＷページやネットワーク・ニュースの記事に利用する時には、著作権を侵害してないか、注意する。

新聞記者や放送局の記者は、自分が知っていることを何でも報道するわけではない。他人の著作権の他に、他人の名誉やプライバシーを損ねてはならない。

◆著作権法抜粋

[全文]

著作権法
（昭和四十五年五月六日法律第四十八号）

				最終改正：平成一七年六月二九日法律第七五号

　　　第一章　総則

　　　　第一節　通則 

（目的）
第一条 　この法律は、著作物並びに実演、レコード、放送及び有線放送に関し
著作者の権利及びこれに隣接する権利を定め、これらの文化的所産の公正な利
用に留意しつつ、著作者等の権利の保護を図り、もつて文化の発展に寄与する
ことを目的とする。

（定義）
第二条 　この法律において、次の各号に掲げる用語の意義は、当該各号に定め
るところによる。

一 　著作物　思想又は感情を創作的に表現したものであつて、文芸、学術、美
術又は音楽の範囲に属するものをいう。

七の二 　公衆送信　公衆によつて直接受信されることを目的として無線通信又
は有線電気通信の送信（有線電気通信設備で、その一の部分の設置の場所が他
の部分の設置の場所と同一の構内（その構内が二以上の者の占有に属している
場合には、同一の者の占有に属する区域内）にあるものによる送信（プログラ
ムの著作物の送信を除く。）を除く。）を行うことをいう。

八 　放送　公衆送信のうち、公衆によつて同一の内容の送信が同時に受信され
ることを目的として行う無線通信の送信をいう。

九の二 　有線放送　公衆送信のうち、公衆によつて同一の内容の送信が同時に
受信されることを目的として行う有線電気通信の送信をいう。

九の四 　自動公衆送信　公衆送信のうち、公衆からの求めに応じ自動的に行う
もの（放送又は有線放送に該当するものを除く。）をいう。

　　　第二章　著作者の権利

　　　　第一節　著作物

（著作物の例示）
第十条 　この法律にいう著作物を例示すると、おおむね次のとおりである。
一 　小説、脚本、論文、講演その他の言語の著作物
二 　音楽の著作物
三 　舞踊又は無言劇の著作物
四 　絵画、版画、彫刻その他の美術の著作物
五 　建築の著作物
六 　地図又は学術的な性質を有する図面、図表、模型その他の図形の著作物
七 　映画の著作物
八 　写真の著作物
九 　プログラムの著作物

２ 　事実の伝達にすぎない雑報及び時事の報道は、前項第一号に掲げる著作物
に該当しない。

３ 　第一項第九号に掲げる著作物に対するこの法律による保護は、その著作物
を作成するために用いるプログラム言語、規約及び解法に及ばない。この場合
において、これらの用語の意義は、次の各号に定めるところによる。
    一 　プログラム言語　プログラムを表現する手段としての文字その他の記号及
         びその体系をいう。
    二 　規約　特定のプログラムにおける前号のプログラム言語の用法についての
         特別の約束をいう。
    三 　解法　プログラムにおける電子計算機に対する指令の組合せの方法をいう。


　　　　　第五款　著作権の制限


（私的使用のための複製）
第三十条 　著作権の目的となつている著作物（以下この款において単に「著作
物」という。）は、個人的に又は家庭内その他これに準ずる限られた範囲内に
おいて使用すること（以下「私的使用」という。）を目的とするときは、次に
掲げる場合を除き、その使用する者が複製することができる。
    一 　公衆の使用に供することを目的として設置されている自動複製機器（複製
    の機能を有し、これに関する装置の全部又は主要な部分が自動化されている機
    器をいう。）を用いて複製する場合
    二 　技術的保護手段の回避（技術的保護手段に用いられている信号の除去又は
    改変（記録又は送信の方式の変換に伴う技術的な制約による除去又は改変を除
    く。）を行うことにより、当該技術的保護手段によつて防止される行為を可能
    とし、又は当該技術的保護手段によつて抑止される行為の結果に障害を生じな
    いようにすることをいう。第百二十条の二第一号及び第二号において同じ。）
    により可能となり、又はその結果に障害が生じないようになつた複製を、その
    事実を知りながら行う場合

２ 　私的使用を目的として、デジタル方式の録音又は録画の機能を有する機器
（放送の業務のための特別の性能その他の私的使用に通常供されない特別の性
能を有するもの及び録音機能付きの電話機その他の本来の機能に附属する機能
として録音又は録画の機能を有するものを除く。）であつて政令で定めるもの
により、当該機器によるデジタル方式の録音又は録画の用に供される記録媒体
であつて政令で定めるものに録音又は録画を行う者は、相当な額の補償金を著
作権者に支払わなければならない。

（図書館等における複製）
第三十一条 　図書、記録その他の資料を公衆の利用に供することを目的とする
図書館その他の施設で政令で定めるもの（以下この条において「図書館等」と
いう。）においては、次に掲げる場合には、その営利を目的としない事業とし
て、図書館等の図書、記録その他の資料（以下この条において「図書館資料」
という。）を用いて著作物を複製することができる。
    一 　図書館等の利用者の求めに応じ、その調査研究の用に供するために、公表
    された著作物の一部分（発行後相当期間を経過した定期刊行物に掲載された個
    個の著作物にあつては、その全部）の複製物を一人につき一部提供する場合
    二 　図書館資料の保存のため必要がある場合
    三 　他の図書館等の求めに応じ、絶版その他これに準ずる理由により一般に入
    手することが困難な図書館資料の複製物を提供する場合

（引用）
第三十二条 　公表された著作物は、引用して利用することができる。この場合
において、その引用は、公正な慣行に合致するものであり、かつ、報道、批評、
研究その他の引用の目的上正当な範囲内で行なわれるものでなければならない。

２ 　国若しくは地方公共団体の機関、独立行政法人又は地方独立行政法人が一
般に周知させることを目的として作成し、その著作の名義の下に公表する広報
資料、調査統計資料、報告書その他これらに類する著作物は、説明の材料とし
て新聞紙、雑誌その他の刊行物に転載することができる。ただし、これを禁止
する旨の表示がある場合は、この限りでない。

（時事問題に関する論説の転載等）
第三十九条 　新聞紙又は雑誌に掲載して発行された政治上、経済上又は社会上
の時事問題に関する論説（学術的な性質を有するものを除く。）は、他の新聞
紙若しくは雑誌に転載し、又は放送し、若しくは有線放送することができる。
ただし、これらの利用を禁止する旨の表示がある場合は、この限りでない。
２ 　前項の規定により放送され、又は有線放送される論説は、受信装置を用い
て公に伝達することができる。

（政治上の演説等の利用）
第四十条 　公開して行なわれた政治上の演説又は陳述及び裁判手続（行政庁の
行なう審判その他裁判に準ずる手続を含む。第四十二条において同じ。）にお
ける公開の陳述は、同一の著作者のものを編集して利用する場合を除き、いず
れの方法によるかを問わず、利用することができる。
２ 　国若しくは地方公共団体の機関、独立行政法人又は地方独立行政法人にお
いて行われた公開の演説又は陳述は、前項の規定によるものを除き、報道の目
的上正当と認められる場合には、新聞紙若しくは雑誌に掲載し、又は放送し、
若しくは有線放送することができる。
３ 　前項の規定により放送され、又は有線放送される演説又は陳述は、受信装
置を用いて公に伝達することができる。

（翻訳、翻案等による利用）
第四十三条 　次の各号に掲げる規定により著作物を利用することができる場合
には、当該各号に掲げる方法により、当該著作物を当該各号に掲げる規定に従
つて利用することができる。
    一 　第三十条第一項、第三十三条第一項（同条第四項において準用する場合を
    含む。）、第三十四条第一項又は第三十五条　翻訳、編曲、変形又は翻案
    二 　第三十一条第一号、第三十二条、第三十六条、第三十七条、第三十九条第
    一項、第四十条第二項、第四十一条又は第四十二条　翻訳
    三 　第三十七条の二　翻案（要約に限る。）

（出所の明示）
第四十八条 　次の各号に掲げる場合には、当該各号に規定する著作物の出所を、
その複製又は利用の態様に応じ合理的と認められる方法及び程度により、明示
しなければならない。
    一 　第三十二条、第三十三条第一項（同条第四項において準用する場合を含
    む。）、第三十三条の二第一項、第三十七条第一項若しくは第三項、第四十二
    条又は第四十七条の規定により著作物を複製する場合
    二 　第三十四条第一項、第三十七条の二、第三十九条第一項又は第四十条第一
    項若しくは第二項の規定により著作物を利用する場合
    三 　第三十二条の規定により著作物を複製以外の方法により利用する場合又は
    第三十五条、第三十六条第一項、第三十八条第一項、第四十一条若しくは第四
    十六条の規定により著作物を利用する場合において、その出所を明示する慣行
    があるとき。
２ 　前項の出所の明示に当たつては、これに伴い著作者名が明らかになる場合
及び当該著作物が無名のものである場合を除き、当該著作物につき表示されて
いる著作者名を示さなければならない。
３ 　第四十三条の規定により著作物を翻訳し、編曲し、変形し、又は翻案して
利用する場合には、前二項の規定の例により、その著作物の出所を明示しなけ
ればならない。

◆著作権法の大事な部分

著作権法は、次の２つのバランスをとるためのもの。著作者の権利を無限に認めたものではない。

著作者の保護
著作物の公正な利用

著作権。著作隣接権。演奏家。俳優。

パブリシティ権、芸能人の氏名・肖像が持つ顧客吸引の経済的な利益ないし価値を排他的に支配する財産的権利。

著作者人格権（公表権、同一性保持権、著作者の名誉を害する方法による利用を妨げる権利）

著作権法で保護されないもの

事実、データ、時刻表、物理法則
心の中で思ったこと（表現されていない）
方式、アルゴリズム、アイディア
法律、プロトコル(規約)
誰が書いても同じようになるプログラム

キャラクタの表現は、著作物になる。

公衆送信の４つの形態

放送: 公衆送信のうち、公衆によつて同一の内容の送信が同時に受信されることを目的として行う無線通信の送信をいう。
有線放送: 公衆送信のうち、公衆によつて同一の内容の送信が同時に受信されることを目的として行う有線電気通信の送信をいう。
自動公衆送信: 衆送信のうち、公衆からの求めに応じ自動的に行うもの（放送又は有線放送に該当するものを除く。）をいう。
その他: 　放送でも有線放送でも自動公衆送信でもないもの

World Wide Web は、「自動公衆送信」。第３９条、４０条は、「有線放送」と「放送」について規定している。「自動公衆送信」は、できない。

雑誌のコピーは、よい。本はだめ。図書館で本をコピーするのは、よい。

公表された著作物を「引用」するのは、常によい。ただし、「公正」の視点で、「正当な範囲」でなら。

映画、音楽（歌詞、楽譜）関係は、非常に厳しい。

ハイパーリンクは、著作権法上何の問題もない。フレームは、怪しい(判例はない)。

<frameset cols="180,*" border=1>
<frame name="side" src="side.html">
<frame name="body" src="main.html">
<noframes>
<body>
<p><A HREF="main.html">フレームなし</A></p>
</body>
</noframes>
</frameset>

フレームの中から別のページへの参照

<A href="URL" target="_blank">リンク</A>: 新しいウインドウに開く
<A href="URL" target="_top">リンク</A>: 画面全体で開く

■スタイルシート

HTML は、「本来は」、文書の構造を記述する。

HTML で記述できる文書の構造:

ヘッダ（文書の題目）
見出し、章立ての木構造
段落
箇条書
表

HTML では、文書の構造を記述することができるが、「表示の方法」を記述することは、本来はでない。ワープロは、紙に印刷した時の、このような表示の方法を設定するためのプログラムである。

表示の方法:

文字フォントの種類、大きさ、色
行間
左詰め、中央寄せ、右詰め
肩付き、下付き

表示の方法を記述するには、スタイルシートを用いる。

Cascading Style Sheets (CSS)
Extensible Stylesheet Language (XSL, XML用)
その他

■カスケーディング・スタイルシート

◆例

見出しを青くする。

H1 { color: blue; }

◆カスケーディング・スタイルシートで記述できること

段落書式

行揃え。text-align:, text-justify:
表示範囲。height:, width:, overflow:, text-overflow:,
余白。 margin:, margin-left:, margin-right:, margin-top:, margin-bottom:
表示位置。position:, top:, bottom:, left:,
境界。border-style:, border-width:, border-color:, padding:

文字書式

色。color:, background-color:
フォント。font: font-family:
大きさ： font-size:
その他、飾: font-style:, font-weight:, text-decoration:

箇条書き

印の形状。list-style-type:, list-style-image:
印の位置。list-style-position:

イメージ

枠線: border-style
テキストとの位置: float:, clear:, vertical-align:, margin-right:
ズーム: zoom:
背景。background-image:, background-repeat:, background-position:

その他:

カーソルの形状。 cursor:
表示(非表示)。visibility:, display:
内容の自動挿入。content:

◆スタイルシートを書く場所

HTML のヘッダに書く。

<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<STYLE TYPE="text/css"><!--
(ここにスタイルシートを書く)
--></STYLE>
</HEAD>

別ファイルに書いて読み込む。スタイルシートのURLは、filename.css のようなファイル名が多い。

<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<LINK rel="stylesheet" type="text/css" href="スタイルシートのURL">
</HEAD>

<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<STYLE TYPE="text/css"><!--
@import url(スタイルシートのURL);
(ここにスタイルシートを書く)
--></STYLE>
</HEAD>

複数 @import することもできる。複数のスタイルは、混ぜられる（カスケード）。対立する定義は、後から出てきた方が有効になる。

HTML のタグの属性として書く。宣言部分だけ。

<P STYLE="color:#444444">文。文。文。</P>

◆コメント

コメントとは、あるコンピュータ言語の中に記述する、人間が読むために書かれた部分。コメントは、/* と */ で括る。この表記法法は、Ｃ言語やＪａｖａ言語と似ている。コメントは、デバッグ時など一時的にコンピュータ言語の機能を無効にしたい時にも使える。

◆基本的な文法

次のような規則の並び

セレクタ  { 宣言;  }
セレクタ, セレクタ, ..., セレクタ { 宣言;宣言;宣言;  }

１つひとつの宣言は、次の形式。

プロパティ:式

「式」には、数、文字列、%、単位つきの長さ、URL などが書ける。

◆書式の有効範囲(セレクタ)

HTML の要素(タグ)ごと。<H1>,<H2>,<H3>,<P>,<BODY>など
- 全体。<BODY></BODY>の間
- 段落。<P></P>の間
クラス(class)ごと。
IDごと。

クラス(class)ごと、IDごとの場合は、次のタグで範囲を指定する。

部分。<DIV></DIV>の間
部分（段落より小さい範囲）。<SPAN></SPAN>の間

クラスとは、似たような要素の集まり。同じクラスの要素は、似たような書式になる。 ID(identifier) は、全体の中で１つだけ。

例

H1	{ color:blue; } /* <H1></H1> だけ */
UL LI   { color:blue; } /* <UL></UL>の中の <LI> だけ*/
OL > LI { color:blue; } /* <OL></OL>の直接の子供の <LI> だけ*/
H1 + P  { color:blue; } /* <H1></H1>に隣接する <P> だけ*/
 *      { color:blue; } /* 全ての要素 */

.important    { color:blue; }  /* class="important" と指定したものだけ */
P.important   { color:blue; }  /* <P class="important"></P> と指定したものだけ */
#n10          { color:blue; }  /* id="n10" と指定したものだけ */

P:first-line   { color:blue; } /* <P></P> の中の最初の行だけ */
P:first-letter { color:blue; } /* <P></P> の中の最初の１文字だけ */
A:link    { color:blue; } /* 未訪問のリンク */
A:visited { color:blue; } /* 訪問済みのリンク */
A:active  { color:blue; } /* アクセス中 */
A:hover   { color:blue; } /* カーソルを重ねた時 */

◆書式設定の考え方

余白、境界、パディング（詰め物）がある四角い箱。

　　┌──────────────────────┐
　　│　　　　　　　余白　　　　　　　　　　　　　│
　　│　┌──────────────────┐　│
　　│　│　　　　　境界　　　　　　　　　　　│　│
　　│　│　┌──────────────┐　│　│
　　│　│　│　　　パディング　　　　　　│　│　│
　　│　│　│　┌──────────┐　│　│　│
　　│　│　│　│　内容　　　　　　　│　│　│　│
　　│　│　│　└──────────┘　│　│　│
　　│　│　└──────────────┘　│　│
　　│　└──────────────────┘　│
　　└──────────────────────┘

　　　　　　　　│　エレメントの幅　　│
　　│　　　　　　ボックスの幅　　　　　　　　　　│

◆WWWページデザインの手順

HTML で全部の表示したい内容を記述する。
スタイルシートを埋め込み、見栄えを調整する。

スタイルシートをうまく活用すると、見た目を一度に調整できる。

同じスタイルシートを複数のページで読み込んで使う。
同じページ内でも class をうまく活用する。

いちいち <font> で指定すると、変更したくなった時には、全部変えなければならない。 <span class="classname">のように、クラスを使ってマークしておけば、１個所クラスの設定を変更するだけで全部統一的に変る。 (同様に、ワード・プロセッサでも、スタイルをうまく活用したい。)

注意点

ブラウザによって対応していない場合がある。
対応していても、動作が異なる場合がある。バグも多い。

複数のブラウザ（違うバージョンも含む）で表示を確認したい。

◆CSSの利用例

その他、次のページが参考になる。とほほのスタイルシート入門

◆テーブル・レイアウト

スタイルシートを使わずに、<TABLE> タグを使って配置する方法がある。

■プリンタ

てびき４章

印刷枚数の制限がある。
79ページの表のプリンタ名は、間違っている。 balsam-pr1 のように「-マイナス」ではなく balsam_pr1 のように「_下線」になっている。
lprint, lcancel コマンドは、coins 独自。一般の Unix には存在しない。

プリンタは一種のコンピュータ。PostScript と呼ばれるプリンタ制御用の言語のプログラムが動作する。テキストやワード・プロセッサの文書、ソース・プログラムをそのままプリンタに送っても、印刷されない。

PostScript プリンタに印刷するためには、プリンタにファイルを送る前になんらかの手段でPostScript のプログラムに変換する。

Unix 標準のコマンドは、以下の通り。

lpr: ファイルをプリンタに送る。
lpq: プリンタのキューを表示
lprm: 印刷を取り消す(キャンセル)

キュー（queue）とは、行列(待ち行列)の意味で、先着順にサービスを受けるためのもの。これらのコマンドは、-P オプションで、利用するプリンタを指定できる。標準では、環境変数 PRINTER が使われる。

MacOSX の「プレビュー.app(/Applications/Preview.app)」は、 PostScript のプログラムを PDF に変換して表示したり保存する機能がある。

テキスト・ファイルを印刷するには、a2ps を使う方法もあるが、 Firefox などの WWW ブラウザで開いて、その機能を使って印刷する方法もある。

紙の節約のためには、なるべく両面印刷を使う。

「表示」メニューから「ページのソース」を選ぶ。

★練習問題(109) 共通科目「情報処理(実習)」手引き補足資料

共通科目「情報処理(実習)」手引き補足資料を読みなさい。次の点について、予習しなさい。

ログオン、ログオフ、シャットダウン
筑波大学統一認証システム

★練習問題(110) 電子メールの転送

次の点について復習しなさい。

~/.forwardによる電子メールの転送

★練習問題(111) PostScriptの生成

次のいずれかの方法で、PostScript のプログラムを生成し、ファイルに保存しなさい。

a2ps コマンドの -o オプションを使い、ファイルに保存する。
```
% a2ps -o file.ps file.txt 
```
Firefox などの MacOSX でウインドウを開くプログラム (Aqua) で、印刷のウインドウで、PostScrip ファイルとして保存する。 (左下の「PDF▼」メニューで、「PDF を PostScript として保存」を選ぶ。)
OmniGraffle (/Applications/OmniGraffle\ Professional.app) で、「ファイル」メニューから「書き出し」を選び、ファイル形式として「EPS形式」を選ぶ。EPS とは、Encapsulated PostScript の略で、PostScriptに表示領域の情報を含めたものである。
その他

★練習問題(112) PostScriptファイルのプレビュー

作成した PostScript ファイルを、印刷せずに、次のような方法を使って画面に表示しなさい。

MacOSX の「プレビュー.app(/Applications/Preview.app)」を使って開く。
gs コマンド (GhostScript)、gv コマンド (Ghost Iew) を使う。
```
% gs file.ps 
% gv file.ps 
```
ただし、gs, gv コマンドは、X Window System (X11) の元で動作する。これらのコマンドは、X11 を実行し、その時開かれる端末 (xterm) の中で実行しなさい。

★練習問題(113) PostScriptファイルの印刷

PostScript ファイルを、lpr コマンドを使ってプリンタに送り印刷しなさい。 lpq コマンドで、キューの様子を観察しなさい。

◆課題12 CSSによるWWWページの作成

締め切りは、2006年6月2日金曜日とする。

(1) HTML と CSS で次のような条件を満たす WWW ページを作成しなさい(注意: ホーム・ページでなくともよい)。

課題10の条件をすべて満たす。
２つ以上のタグのスタイルを変更する。そのうち１つ以上は、class を使う。
同じ class のスタイルを、１つ、または、複数の HTML 文書の中の２個所以上で利用する。

上の条件を満たす WWW ページを作成したら、その URL を講義の掲示板に張り付けなさい。

Last updated: 2006/05/30 15:26:20

Yasushi Shinjo / <yas@is.tsukuba.ac.jp>