講義第8回:HTML の続き

今日はHTML 文書に絵を入れてみるなど、もう少し気の利いたものにしてみる。 絵をファイルにする方法はいろいろなので、ここで紹介出来るのは一部だけで ある。

tgif によるお絵書き
図の取り込み
もっと別な絵の作り方
ファイルとその大きさ

tgif によるお絵書き

例えば

といったような図を書くにはどうすればいいだろうか。

絵を書くには mule のような文書専用のエディタではなく、 idrw とか tgif などのプログラムを使う。これは、シェルウインドウ(左下)で tgif なり idraw なりを実行する(コマンド名をいれてリターンする)と、絵を書く画面 が出てきてあとはメニューをつかっていろいろ操作するというだけである。あ まりいちいち操作を説明するというものでもないので、いろいろやってみるこ と。 idraw については、ワークブッ クの方に詳しい説明がある。以下では tgif のほうを簡単に説明する。

図の取り込み

HTML文書 で、 tgif で書いた図を取り込むには次のように書いておく。

<IMG src="tgifsample.gif">
文章と図の配置等について、細かい指定をしたければ、適当な本とかガイドの 文書を見てみること。

もっと別な絵の作り方

絵の作り方はたくさんあるが、ここでは「画面に出ている絵を切りとってしま う」方法について説明する。idraw とか gimp で絵を描いたりまた netscape で画面に何かを表示しておいて(この時には、著作権の問題がないことを確認 する必要がある)、その絵が出て いる状態で、 xv というコマンドを実行する。xv と書かれたウインドウが出 てきたところで、そこでマウスの右ボタンを押すと、 xv controls と書かれ た新しいウインドウが出てくる。

その右下の Grab というところで今度は左ボ タンを押すと、さらにもう一つウインドウがでてくる。

で、何をすればいいかは書いてあるとおり。あるウインドウ全体を切りとることと、指定した範囲を切りとることができる。「Grab」と書いてあるところをクリックしてから、

ここで、 xv controls のほうに戻って、こんどは Save を押すと、

こんなウインドウが出てくる。ここで Save file: のところに名前をいれてや り(ここでは xv_controls.gif)、 Format が GIF、 Colors が Full Color になっていることを確認して(そうでければ変更して) Ok を押せば指定した 名前のファイルができる。

ファイルとその大きさ

さて、ここで指定したもののうち、 Colors のほうはまあわからなくはない。 Full Color は文字通りの意味、 Grayscale は白黒であり、 B/W Dithered と いうのは、白黒でさらに一点は白と黒のどちらかで中間調がない時に、複数の 点で灰色を表現するもの、最後の reduced color というのは、 Full Color とは違って色の数を減らそうというものである。

なぜこういうものがいろいろあるかということを少し考えてみる。例えばこの 画面全体は、 横1024 縦 768 で約 80万点にそれぞれ色、明るさを指定するこ とで表示されている。

一つの色、明るさは点はではどうやって指定されているかというと、最近の普 通の機械では3原色 (赤、緑、青)の明るさをそれぞれ 0-255 までの 256 段階に分けて指定して いることになる。

ここで、255という半端な数が出てきたが、これは 2 進法で 8 桁の数を使っ ているからである。 計算機の中では2 進法で数を表しているというのは聞い たことがあるかもしれないが、 2 進法の 10011001 というのは 10 進に直す と128 + 16 + 8 + 1 = 153, 11111111 は 255 というようなことになる。2進 法ではそれぞれの桁が 1 と 0 の2つの状態しかないので、電子回路で表現す るのが簡単になる。

なお、この2 進法のひと桁のことを bit ビットという。計算機が 32 ビット とか、ゲームマシンが 64 ビットとかいうのは 2 進法 32 桁とか 64 桁の数 を一度に扱えるというような意味である。

この、ビットという単位を使うと、画面1点の一色は 8 ビット、3色合わせる と 24 ビットということになる。画面全体だとおよそ 2千万ビットになるわけ である。 なお、8ビットをまとめたもののことをバイトといい、ファ イルの大きさとかはこのバイトを単位に数えることが多い。これだと 画面1点の一色は 1バイト、、3色合わせる と 3 バイトということになる。で、さらに 1024バイトをキロバイト(KB)、 1024キロバイトを 1 メガバイト(MB)という習慣がある。これをつかうと画面全体 が2.5メガバイトということになる。

これが大きいか小さいかということが問題であるが、例えばこの HTML 文書は 10 キロバイト程度である。これは、漢字1文字は2バイトで表現出来るからで ある。 2 バイトで全部で 65536種類の文字が使える。また、アルファベット だと1バイトで表現されている。 もちろん、こういった文書(テキスト)でも、画面に表示するときには、 1ドットごとに点を表示しているわけだが、ファイルにしまうと大した量には ならない。例えば400字詰め原稿用紙が 800バイトになるので、原稿用紙300枚 程度(ちょっとした本くらい)で 240 KBにしかならない。

言い替えれば、ただ画面全体というだけで本 10 冊分くらいの大きさ(情報量) があるわけである。ここで「情報量」といっているのは、あくまでも 2 進数 のつながりとして表現したときに何ビットになるかということで、人に役に立 つかどうかとかには関係ないということに注意してほしい。

と、こんな話にどういう意味があるかというわけだが、要するに絵のファイル はそのままでは大きくなるということである。これが音であるとか、あるいは 動画になるとまたもっと桁違いに大きくなる傾向がある。

絵1枚に2メガバイトも使うと、あっという間にディスクがいっぱいになってし まう。例えば、現在ここの計算センターではひとりあたりのディスクスペース が数十メガバイトに制限されているので、それを超えると面倒なことがおきる。

そこで(というわけでもないが)、絵などをファイルにしまうのにもっとうま い方法がないかということが問題になる。 "Format" というのがいろいろあるうちのいくつかはそのためのもので、デー タをいろいろな方法で「圧縮」してしまっておくのである。 GIF というのは そのなかでももっとも広く使われている方法の一つで、 CG で作ったアニメー ションのような、色数が少ないものには具合がよい。デジカメでとった写真な どでは JPEG という方式が使われていることが多い。 Netscape はこのどちら も解釈して、圧縮されたものを復元して表示できる。

練習

画面に表示されているいろいろなものを xv で切りとってファイルにしてみて、 その大きさがどうなるか、またそれがファイルの format によりどう変わるか を見てみよう。 GIF と JPEG ではどう違うか?

来週の予定

来週は、 HTML よりももっときれいな、 Desktop Publishing にも使えるよう なものということで、 Latex というシステムをちょっと使ってみる。