第11週: 絵を入れる

11. 1 画像データの種類
11. 2 XPaint
11. 3 練習問題 
11. 4 Tgif 
11. 5 練習問題
11. 6 xv
11. 7 LaTeX 文書に画像を貼り込む
11. 8 ウェブページで画像を表示する
11. 9 電子メールで画像を送る 
11.10 練習問題
11.11 宿題
11.12 おまけ

247ページ

一口に画像と言っても，いろいろな種類があります．次のような分類によって整理することができます．

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

    

    写真のように，形や色が不規則なものの表現に向いています．編集は画素単位で行います．拡大すると，一つ一つの画素が拡大されるため，ギザギザになってしまいます．例えば，上の図の一部を拡大すると次のようになります．

    

  • ベクトル画像：幾何学的図形の組合わせによって画像を表現します．模式図のように，規則的な図形の表現に向いています．編集は図形単位で行います． 図形の一種としてビットマップ画像を含めることができる形式もあります．
• 圧縮方法による分類
  • 非圧縮：画像データそのままです．
  • 可逆圧縮：圧縮した形式で保存や転送を行い，表示の時に元通りに伸長します．
  • 不可逆圧縮：元の画像のあまり重要でない情報を省略して圧縮します．伸長しても完全に元通りにはなりませんが，可逆圧縮より圧縮率を高くすることができます．

画像データをファイルに保存するときは，利用目的に合わせて適当な形式を選びますが，コンピュータやソフトウェアの種類によって扱える形式が違います．ウェブページでは GIF(Compuserv Graphic Interchange Format)，PNG(Portable Network Graphics)，JPEG(Joint Photographic Experts Group) などがよく使われます．それぞれの特徴は，CNS ガイドを参照して下さい．

注意: GIF で使われている圧縮アルゴリズムは Unisys 社が特許を持っています．Unisys 社からライセンスを取得していないソフトウェアで GIF 画像を生成し，公開することは禁止されています．以下で説明するソフトウェアの中では，xv がライセンスを取得しています．

256ページ

XPaint はマウスを使ってビットマップ画像を描くためのソフトです．起動するには，端末ウィンドウで次のように入力します．

% xpaint &

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

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

   

保存

描いた図形を保存するときは，ペイント用ウィンドウの [File]→[Save] を実行します．まだファイル名を指定していないときは，ファイル名を指定するためのウィンドウが現れます．

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

保存したファイルを編集する時は，コントロールパネルで[File]→[Open...]を実行します．

CNS ガイドを見て，XPaint の次の機能を使ってみなさい．

1. エアブラシ
2. にじみ
3. 指定した範囲の回転

277ページ

Tgif はマウスを使ってベクトル画像を描くためのソフトです．起動するには，端末ウィンドウで次のように入力します．

% tgif &

1. 左端のモードメニューの中の，折れ線を描く機能 をクリックします．
2. キャンバスでマウスの左ボタンをクリックすると，その点から直線が引けます． 続いて左ボタンをクリックしていくと，その点を結ぶ折れ線になります．最後の点では真ん中か右ボタンをクリックします． マウスボタンの役割は，常にウィンドウの下端に表示されています．
3. この線の位置を調整します．ある図形を変更するには，まずその図形を選択しなければなりません．モードメニューの編集機能 をクリックし，さっき書いた折れ線をクリックすると， 各頂点にハンドル（小さな正方形）がつきます．これが選択された印です．
   • 選択された図形をマウスでドラッグすると，平行移動できます．
   • ハンドルをマウスでドラッグすると，変形できます．
   • メニュー項目で削除やコピーなどの操作ができます．
4. キャンバスの上に並んでいるアイコンを使って，図形の属性を変更できます．それぞれのアイコンは，各属性の現在の状態を表していて，マウスで次のように操作できます．
   • 真ん中ボタンをクリックすると，状態を選択するメニューが表示されます．
   • 左ボタンをクリックすると，メニューに並んでいる順で次の状態になります．
   • 右ボタンをクリックすると，メニューに並んでいる順で前の状態になります．
   さっき書いた折れ線が選択されている（ハンドルがついている）ことを確かめ，線種のアイコンを次のように変更します．

   

   すると折れ線は次のようになります．

   

複数図形の選択

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

• 選択されている図形のどれかをドラッグすると，他の図形も平行移動します．
• [Arrange]→[Group] を実行すると，選択されている図形全部が一つの図形として扱われるようになります．
• 整列・等間隔配置ができます．まず，整列属性の上のアイコンで水平方向の配置を決めます．
  • -：水平方向には移動しない
  • L：図形の左端が整列・等間隔になるよう配置する．
  • C：図形の中央が整列・等間隔になるよう配置する．
  • R：図形の右端が整列・等間隔になるよう配置する．
  • S：図形の間の空白が等しくなるよう配置する．（等間隔配置のみ）
  次に下のアイコンで垂直方向の配置を決めます．
  • -：垂直方向には移動しない
  • T：図形の上端が整列・等間隔になるよう配置する．
  • M：図形の中央が整列・等間隔になるよう配置する．
  • B：図形の下端が整列・等間隔になるよう配置する．
  • S：図形の間の空白が等しくなるよう配置する．（等間隔配置のみ）
  そして，[Arrange]→[Align Objects]（整列）または [Arrange]→[Distribute Objects]（等間隔）を実行します．

文字入力

文字を入力するには，モードメニューの を選びます．

• キャンバスの中で左ボタンをクリックすると，その位置に文字入力用のカーソルが現れます．
• 日本語を入力するには kinput2 を使います．9.17 netscape の文字入力
• 英文字用のフォントを使う設定になっていると，日本語は入力できません．フォント属性のアイコンで，[Ryumin]（アイコンは「あ」）または [Gothic BBB]（アイコンは「の」）を選んで下さい．

注意: キーボードの設定によっては BS はカーソルの次の文字を消します．その場合，カーソルの前の文字を消すには，C-h または DEL を使います．

注意: カーソル移動や文字の削除を行うと，カーソルの直前の文字に従って，自動的にフォントが切り替わります．

保存

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

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

1. まず，保存して .obj ファイルを作ります．
2. 出力形式のアイコンを（EPS）または（PNG）に変更します．
3. [File]→[Print] を選ぶと，さっき保存したファイルの .obj のところが .eps や .gif に変わったファイルが新しくできます．

266ページ

xv はビットマップ画像の表示と編集のためのソフトです．画像ファイルを表示するには，端末ウィンドウで次のように入力します．

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

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

切り取り

画像の中でマウスをドラッグすると，それを対角線とする長方形領域が指定できます．その状態で Crop をクリックすると，指定した領域だけを取り出すことができます．Crop した後で，取り消したい場合は UnCrop をクリックします．また，AutoCrop をクリックすると周辺の余白を自動的に取り除きます．

特殊効果

画像データを一定の方法で書き換えることで，いろいろな特殊効果を出すことができます．例えば，特別教室の画像（上の実行例のファイル）を表示した状態で [Algorithms]→[Emboss] を実行すると，次のような画像が作り出せます．

保存

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

11.7 LaTeX 文書に画像を貼り込む

画像データを EPS 形式で保存し，8.7 図を入れるの説明に従います．

227ページ

HTML で書いた文書の中で画像を表示するには，img 要素を使います．次のような属性を指定できますが，src 属性と alt 属性は必ず書かなければいけません．また，終了タグはありません．

• src 属性：画像ファイルの URL を指定します．
• alt 属性：画像を表示しないブラウザは， 代わりにこの属性で指定された文字列を表示します．画像を表示しない理由としては，画像形式に対応していない，携帯電話のように表示能力が限られている，画像転送に時間がかかり過ぎる，視覚障害者のための読み上げインターフェースである，などが考えられます．
• width 属性，height 属性：画像の幅と高さを指定します．数字だけのときは画素数，後に % を付けると，ブラウザのウィンドウに対する割合を表します．指定された大きさに画像を拡大，縮小して表示します．

<img src="image/01.jpg" alt="特別教室の風景">

176ページ

マルチパートメッセージ（2.14 MIME メッセージ）を使って写真を送ってみましょう．送る写真は /pub/sfc/ipl/1a/exercise/photos/07.jpg を使います．LaTeX で使ったのと同じ写真ですが，ポストスクリプト形式ではなく jpeg 形式 のファイルです．

1. メールの本文を書きます．

   To: t00999xx Subject: photo X-Mailer: Mew version 1.93 on Emacs 20.5 / Mule 4.0 (HANANOEN) Mime-Version: 1.0 ---- 鴨池の写真を送ります。

2. [Mew/draft]→[Prepare Attachments] C-c C-a を実行すると，本文の下に次のような表示が出ます．

   ------------------------------ attachments ------------------------------ Multipart/Mixed 1/ 1 Text/Plain(guess) CoverPage* 2 . --------0-1-2-3-4-5-6-7-8-9----------------------------------------------

   「1 Text/Plain(guess) CoverPage*」という行が，今書いた本文のパートを表しています． 次の行の「2 .」は，2番目のパートにはまだ何も入っていないことを表しています．
3. 「2 .」の行にカーソルがあるはずです．そうでなければ，ここにカーソルを移動します．
4. [Mew/draft]→[Attachment commands]→[Insert a file by linking] l を実行します．
5. エコーエリアに Link from: と出ますので，/pub/sfc/ipl/1a/exercise/photos/07.jpg と入力しま す．
6. エコーエリアに Link to (07.jpg): と出ますので，RET を押します．すると，表示が次のようにな ります．

   ------------------------------ attachments ------------------------------ Multipart/Mixed 1/ 1 Text/Plain(guess) CoverPage* B 2 Image/Jpeg 07.jpg 3 . --------0-1-2-3-4-5-6-7-8-9----------------------------------------------

   「B 2 Image/Jpeg 07.jpg」が今，追加した写真のパートを表しています． 次の行の「3 .」は，3番目のパートには何も入っていないことを表しています．3番目以降にも，同じようにしてデータを追加していくことができます．
7. [Mew/draft]→[Make MIME Message] C-c RET を実行します． すると，表示は次のようになります．

   To: t00999xx Subject: photo X-Mailer: Mew version 1.93 on Emacs 20.5 / Mule 4.0 (HANANOEN) Mime-Version: 1.0 Content-Type: Multipart/Mixed; boundary="--Next_Part(Fri_Jun_16_14:19:35_2000_595)--" Content-Transfer-Encoding: 7bit ----Next_Part(Fri_Jun_16_14:19:35_2000_595)-- Content-Type: Text/Plain; charset=iso-2022-jp Content-Transfer-Encoding: 7bit 鴨池の写真を送ります。 ----Next_Part(Fri_Jun_16_14:19:35_2000_595)-- Content-Type: Image/Jpeg Content-Transfer-Encoding: base64 Content-Disposition: attachment; filename=07.jpg /9j/4AAQSkZJRgABAgEAkACQAAD/4AgTSkZYWAAQ/9j/2wBDAAcFBQYFBAcGBQYIBwcIChEL CgkJChUPEAwRGBUaGRgVGBcbHichGx0lHRcYIi4iJSgpKywrGiAvMy8qMicqKyr/2wBDAQcI CAoJChQLCxQqHBgcKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioq (以下略)

   これが実際に送信されるデータです． 各パートの先頭にある Content-Type: はデータの形式を， Content-Transfer-Encoding: は MIME で決められている符合化方式を示しています．メールを受け取ったコンピュータは，この情報にしたがって元のデータを復元，表示します．
8. [Mew/draft]→[Send Message] C-c C-c を実行すると，送信されます．

写真だけでなく，テキストファイルや LaTeX のソースファイルなど，どんなファイルでも同じようにして送ることができます．

マルチパートメッセージを読むときは，各パートが別々に表示されます．画像データのように，emacs で表示できない場合は，次のようになります．

###### ###### ####### ##### ###### # # # # # # # # # # # # # # # ## ## # # # # # # # # # # # # # # # ###### ###### # # # #### ###### # # # # # # # # # # # # # # ####### # # # # # # # # # # # # # # # # # # ####### ##### # # # # # # Content-Type: Image/Jpeg Encoding: base64 Size: 47975 bytes Filename: 07.jpg Program: xv To execute this external command, type C-c C-e. To save this part, type y. To display this part in Message mode, type C-c TAB.

ここで，C-c C-e を押すと，xv を起動して画像を表示します．また，y を押すとファイルに保存できます．

11.10 練習問題

2番目のパートが LaTeX のソースファイル，3番目のパートが写真であるようなメールを，隣の人に送りなさい．

11.11 宿題

11.12 おまけ

CNS では，他にもいろいろな画像ツールが利用可能です．詳しくは CNS ガイド，市販の参考書などを参照してください．

• xfig：ベクトル画像を描くためのソフトです．日本語入力はできません．
• GIMP：xv よりも高度な画像の加工，編集を行うためのソフトです．
• DESIGNBASE：3次元のモデリング，レンダリングを行うためのソフトです．

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