Web サーバの負担を軽減するため、キャンパス内では iplht コマンドを使っ てください。

慶應義塾大学の授業以外での無断利用、複製はご遠慮下さい。
Copyright (c) 1999 慶應義塾大学

第11週: 絵を入れる

先週作ったホームページは文章だけでした．これに絵や写真を入れて表現を豊 かにしましょう．そのためには，画像データの形式や，変換を行うツールにつ いて知らなくてはなりません．

11. 1 画像データの種類
11. 2 XPaint
11. 3 練習問題 
11. 4 Tgif 
11. 5 練習問題
11. 6 XV 
11. 7 その他の画像ツール
11. 8 Web で画像を表示する
11. 9 宿題

• 時間的変化による分類
  • 静止画：写真のように，時間的に変化しません．
  • 動画：映画のように，あらかじめ決められた通りに変化します．
  • インタラクティブアニメーション：見る人の操作に応じて変化します．
• 次元による分類
  • 2次元：平面的な図形から構成された画像です．
  • 3次元：立体的な図形から構成された画像です．ただし，表示装置はディ スプレイやプリンタなどの2次元的なものしかありませんので，3次元から2次 元へ変換してから表示します．3次元の図形データを作ることをモデリング(modeling)，視点や照明を指定して，実際に 見える2次元画像に変換することをレンダリング (rendering)と呼びます．
• 表現方法による分類
  ビットマップ画像とベクトル画像 257ページ
  • ビットマップ画像：画素(pixel)という小さな 点の集合で画像を表現します．例えば，次の絵は横300，縦150の画素が並んで できています． 写真のように，形や色が不規則なものの表現に向いています．編集は画素単位 でしか行えません．拡大すると，一つ一つの画素が拡大されるため，ギザギザ になってしまいます．例えば，上の図の一部を拡大すると次のようになります．
  • ベクトル画像：幾何学的図形の組合わせによって画像を表現します．模式 図のように，規則的な図形の表現に向いています．編集は図形単位で行えます．

XPaint はマウスを使ってビットマップ画像を描くためのソフトです．
ビッ トマップ画像の描画 -- XPaint 266ページ

XPaint を起動するには，端末ウィンドウで次のように入力します．

% xpaint &

すると，コントロールパネルのウィンドウが現れます．

1. コントロールパネルの のところを クリックします．
2. 外周の色を Primary Palette で，中の色を Secondary Palette で選択します．
3. キャンバスでマウスをドラッグすると，長方形が描けます．

1. コントロールパネルの のとこ ろをクリックします．
2. 同じところを右ボタンでクリックすると，設定用のメニューが出ます．今は設 定を変更する必要はありません．
3. グラデーションに使う二つの色を， Primary Palette と Secondary Palette で選択します．
4. キャンバスの，さっき描いた長方形の中をマウスでクリックします．すると， クリックした点と同じ色の部分(この場合は長方形の内部)が，選択した二つの 色で塗り潰されます．

描いた図形を保存するときは，ペイント用ウィンドウの File メニュー の Save を選びます．まだファイル名を指定していないときは，ファ イル名を指定するためのダイアログウィンドウが現れます．

• ファイル名は Save in File: の下の空欄に入力します．
• カレントディレクトリのファイル一覧が表示されますので，サブディレクトリ に保存したいときは，ダブルクリックで選択できます．スクロールバーの使い 方は mule と同じです．
• 右側のボタンをクリックして，ファイル形式を選択します．Web ページに使う ときは GIF，LaTeX の文書に貼り込むときは PS を選択します．ただし，PS 形式で保存すると後で修正ができないため，別の名前で GIF 形式でも保存し ておく方がよいでしょう．

Tgif はマウスを使ってベクトル画像を描くためのソフトです．
日本語を含めた図形の描画 -- Tgif 266ページ

Tgif を起動するには，端末ウィンドウで次のように入力します．
注意: kinput2 を使っ て日本語入力をするためには，Tgif より前に kinput2 を起動しておく必要が あります．

% tgif &

矢印を描いてみます．

1. Mode メニューのところでマウスボタンを押すと，次のようなメニュー が出ます． 折れ線を描く機能 を選びます．
2. キャンバスでマウスの左ボタンをクリックすると，その点から直線が引けます． 続いて左ボタンをクリックしていくと，その点を結ぶ折れ線になります．最後 の点では真ん中か右ボタンをクリックします．
3. この線の矢印と太さを調整します．ある図形を変更するには，まずその図形を 選択しなければなりません．Mode メニューの を選び，さっき書いた直線をクリックすると， 各頂点に小さな黒い四角形がつきます．これが選択された印です．
   • 選択された図形をマウスでドラッグすると，平行移動できます．
   • 小さな黒い四角形をマウスでドラッグすると，変形できます．
4. Graphics メニューの LineStyle で矢印の付け方が， LineWidth で線の太さが選択できます．

複数の図形を同時に選択したい場合は，Mode メニューの を選び，選択したい図形を全部囲むような長 方形を描くようにマウスをドラッグします．あるいはシフトキーを押しながら 図形をクリックすると，その図形が追加で選択されます．複数の図形が選択さ れている状態では，次のようなことができます．

• 選択されている図形のどれかをドラッグすると，他の図形も平行移動します．
• Arrange メニューの Group を選ぶと，選択されている図形全 部が一つの図形として扱われるようになります．
• Arrange メニューの AlignObjsTop などを選ぶと，選択されて いる図形を整列させます．

文字を入力するには，Mode メニューの を選びます．日本語を入力するには， netscape と同様に，mule からの copy and paste とkinput2 による方法の二 つがあります．
4.7 文字の入力

• Mule でコピーした文字列をペーストする場合は，Edit メニューの Selection Paste を選びます．
• kinput2 を使う場合は，文字を入力する状態にして C-Space を押すと，日本語入力用のウィンドウが現れま す．
• 英文字用のフォントを使う設定になっていると，日本語は正しく表示されませ ん．その場合は，その文字列を選択して，Text メニューの Font→Ryumin あるいは Gothic を選んで，日本語フォ ントに変更してください．

図形を保存するためには，File メニューの Save を選びます． ファイル名をまだ指定していない場合は，ファイル名を入力するウィンドウが 現れます．ここでファイル名を入力すると，実際にはその後に .obj を付けた名前のファイルに保存されます．この中には Tgif が使用するデータ が入っているので，このファイルがあれば後で図形を修正することができます．

EPS や GIF 形式のファイルを作るには，次のようにします．

1. まず，保存して .obj ファイルを作ります．
2. のところをクリックすると，順にいろい ろな形式が表示されるので，適当な形式を選びます．
3. File メニューの Print を選ぶと，さっき保存したファイルの .obj のところが .eps や .gif に変わったファ イルが新しくできます．

11.5 練習問題

次のような図を Tgif で描きなさい．図形はきちんと中心が揃うようにしましょう．

XV はビットマップ画像の表示と編集のためのソフトです．
画像の表示 -- XV 266ページ

XV で画像ファイルを表示するには，端末ウィンドウで次のように入力します．

% xv /pub/sfc/ipl/1a/exercise/photos/01.jpg &

すると，新しいウィンドウに指定されたファイルの内容が表示されます．この ウィンドウの中で q を押すと，XV が終了します． また，ファイル名を指定しないと，ウィンドウには起動画面が表示されます．

画像の編集を行う場合や，他の画像を表示する場合には，ウィンドウの中で右 ボタンをクリックすると，コントロールパネルのウィンドウが現れます．

特殊効果を試してみましょう．特別教室の画像を表示した状態で Algorithmsメニューの Emboss を選ぶと，画像データを変換し て次のような画像を作り出します．

Save をクリックすると，ファイル名とファイル形式を入力するウィン ドウが現れます．ファイル名一覧のスクロールバーの使い方は netscape と同 じです．ファイル形式はメニューになっていて，現在の形式が表示されていま す．PS や JPEG の場合は，さらに細かい設定をするウィンドウが現れますが， 特に設定を変更する必要はありません．

11.7 その他の画像ツール

• xscn：オープンエリアに設置されているカラースキャナを使って，紙に描 いた絵や写真をビットマップ画像として取り込むためのソフトです．
  スキャ ナの利用 -- xscn 271ページ
• GIMP：XV よりも高度な画像の加工，編集を行うためのソフトです．
  画像 の加工 -- GIMP 282ページ
• DESIGNBASE：3次元のモデリング，レンダリングを行うためのソフトです．
  3Dモ デルの作成 -- DESIGNBASE 300ページ
• LightWave：3次元アニメーションを作るためのソフトです．オープンエリア の LightWave ブースで使えます．
• Adobe Premiere：ビデオ画像のノンリニア編集を行うためのソフトです． オープンエリアの Macintosh 編集ブースで使えます．
• Media Suite Pro：ビデオ画像のノンリニア編集を行うためのソフトです． オープンエリアと映像スタジオの Indigo2 編集ブースで使えます．

11.8 Web で画像を表示する

HTML で書いた文書の中で画像を表示するには，IMG 要素を使います．SRC 属性で画像ファイルの URI を指定します．終了タグはありません．

<IMG SRC="image/inform_girl.gif">

IMG 要素の開始タグには，SRC 属性以外にもいろいろな属性を書くことができます．

• WIDTH 属性，HEIGHT 属性：画像の幅と高さを指定します．数字だけ のときは画素数，後に % を付けると，ブラウザ のウィンドウに対する割合を表します．指定された大きさに画像を拡大，縮小 します．
• ALT 属性：画像を表示できないブラウザは， 代わりにこの属性で指定された文字列を表示します．画像を表示できるブラウ ザでも，ネットワークが混雑しているときなど，画像データを転送できない， あるいは最初からしない設定にしてあるときに，この属性が使われます．
  画像を表示できないブラウザの例として，端 末ウィンドウで動く lynx や，mule の中で動く w3-mode (M-x w3 で起動)があります．

IMG 要素を普通に書くと，前後の文とつながって， 行の途中に表示されます．別の行にして，中央に表示したいときは，DIV 要素の text-align 属性を center という値にします．DIV 要素は，文章の一部分を区切って何かの属性を付け たいときに使います．

text-align 属性のように文章の外見に関する情 報は DIV 要素の開始タグには書かず，STYLE 要素で別に指定します．STYLE 要素は HEAD 要素の 中に書きます．このようにしておくと，違う環境で文書を表示するときに，内 容を変えずに外見だけ調整することができます．

<HEAD> ...... <STYLE type="text/css"> DIV.centered {text-align: center} </STYLE> ...... <BODY> ...... <DIV class="centered"> <IMG SRC="image/inform_girl.gif" WIDTH="30%" ALT="テスト用画像"> </DIV> ......

DIV.centered {text-align: center} は，class 属性が centered で あるようなすべての DIV 要素に対して，text-align 属性の値を center にせよということです．なお，class 属性の値(この場合 centered)は自分で適当に決めます．

11.9 宿題

1. Tgif で適当な図形を描き，その .obj ファイルと .eps ファイル，.gif ファイルの大きさを比べなさい．また，そのファイ ルを XV で他の形式のファイルに変換し，大きさが変わるかどうか調べなさい． どうしてこのようなことが起こるのでしょうか？
2. 先週作ったホームページに，自分で描いた絵を入れ，楽しいホームページにし なさい．

---