第 7 回(2005.06.06) -- 画像処理 II

画像処理第 II 部では，図式編集，つまり draw ツールとして Tgif, Dia 等について学んだ後，画像処理ツールである gimp について学ぶ.

Tgif

Tgif とは，図形を描く「ドロー系ソフト」であり， unix 上にかなり古くからあるものである. TeX や gnuplot などの unix の他のツールとの組み合わせて使う機能が発達しており，理系学生がレポートをコンピュータで作成するには覚えておくべきソフトの一つである.
残念ながら windows 用は存在しないが(windows 用を作る気はあるが忙しくて出来ない，と作者は言っている)，かなり Tgif に近く，windows 用もあり，かつフリーのソフトとして Dia (windows版) というものがあるので，それを利用するのがよいだろう.
また，まだまだ発展途上ではあるが SVG 編集ツールとして Sodipodi や Inkscape といったツールが使い勝手も良く，かつ，将来性があるものとして注目されている. なにかの折りには触れてみるのもよいだろう.

起動, 終了方法 (Tgif)

起動: 阪大教育用計算機システムでは，左上のメニューから
アプリケーション → グラフィックス → Tgif
で起動する.

もしくは，GNOME 端末や kterm 中で tgif & と入力してもよい.
終了: tgif の "ファイル" メニューで "終了" を選択.

参考文献 (Tgif)

tgif に関しては，本講義参考文献「新 The Unix Super Text (改訂版)」の下巻第53章に使い方の詳しい解説がある. また，下記の資料や，google などの検索で見つけた資料などを参照するとよい.

「GIMP/GNUPLOT/Tgif で学ぶグラフィック処理」 … 皆本氏，坂上氏著, サイエンス社, 1999, ISBN4-7819-0934-5, \2,200. … bk1 による書評
Tgif でドローイング … 東京電機大学松田氏の web
tgif について … 九州工業大学藤武氏の web
Tgif 超簡単利用マニュアル … 京都産業大学の大本氏の web
tgif+(ver 2.2.4)の使い方 … 電気通信大学の齋藤氏の web (著松田氏)
Tgif -- WWW Hypertext Home Page … Tgif 作者の web

Tgif の簡単な使用

Tgif の使用は以下のような順番になる.

まず，Tgif を起動する.
→ 次に，基本的に左側にある作図メニュー(矢印，"T", □，等が上から並んでいるバー) を見て，やりたい作業に合致するものを選択する.
# もし作図メニューがなければ，Canvas(真ん中の白いところ)でマウスの第三ボタン (一番右のボタン)をクリックすれば作図メニューが出てくるはずだ.
→ 作業する．
→ 違う作業をしたければ，また作図メニューからその作業に合致するものを選択.
→ 作業する．
→ 以下繰り返し.
→ 最後に Tgif を終了.

よって，コツがあるとすれば

「今何をしようとしているモードなのか」を常に意識するようにする
よくわからなくなったら図形選択メニューなどを選択して「状況をニュートラルにする」

のがコツといえばコツだろう.

Tgif の使用例 … 長方形を描いて，いじってみる.
長方形を描き，それを編集してみることでまずは Tgif に慣れてみよう.

長方形を作図する.
1. まず，作図メニューの "□" (上から三番目)をクリックする.
  これで「長方形を描くモード」になる.
2. 次に，マウスを Canvas の好きなところへ持っていき，クリックする…が，ボタンを離さないこと!.
  これは長方形の頂点の一つを決めたことになる.
3. マウスボタンを押したまま，マウスを移動させる.
  すると，マウスのポインタが，上で決めた頂点と対角にある頂点になっていることがわかるだろう.
4. 適当なところでマウスボタンを離す.
  これで長方形が描かれる.
長方形のサイズや位置を後から変更する
1. 作図メニューの "矢印" (一番上)をクリックする.
  これで「図形を操作，編集するモード」になる.
2. すると，今描いたばかりの図形(長方形)が選択され，周囲に「コントロールポイント」や「ハンドル」と呼ばれる小さな正方形の点が複数(長方形の場合は 9つ)表示される.
  どの図形も選ばれていないという場合や，他の図形を選びたいという場合は，選びたい図形にカーソル(マウスのポインタ)を持っていきクリックするか，カーソルを選びたい図形を囲むようにするかすれば OK.
3. この状態で，ハンドルをクリックし，ボタンを離さずにそのままマウスを移動させれば，変形ができる.
  同様に，ハンドルを繋ぐ線をクリックし，ボタンを離さずにそのままマウスを移動させれば，移動ができる.
長方形を回転させる
1. 作図メニューの "回転マーク" (一番下)をクリックする.
  これで「図形を回転するモード」になる.
2. すると，今描いたばかりの図形(長方形)が選択され，周囲に「コントロールポイント」と呼ばれる小さな正方形の点が複数(長方形の場合は 9つ)表示される.
  どの図形も選ばれていないという場合や，他の図形を選びたいという場合は，選びたい図形にカーソル(マウスのポインタ)を持っていきクリックするか，カーソルを選びたい図形を囲むようにするかすれば OK.
3. この状態で，ハンドルをクリックし，ボタンを離さずにそのままマウスを移動させれば，回転ができる.
長方形の内部の色や模様を変える
1. 作図メニューの "矢印" (一番上)をクリックする.
  これで「図形を操作，編集するモード」になる.
2. すると，今描いたばかりの図形(長方形)が選択され，周囲に「コントロールポイント」や「ハンドル」と呼ばれる小さな正方形の点が複数(長方形の場合は 9つ)表示される.
  どの図形も選ばれていないという場合や，他の図形を選びたいという場合は，選びたい図形にカーソル(マウスのポインタ)を持っていきクリックするか，カーソルを選びたい図形を囲むようにするかすれば OK.
3. 画面右上のメニューでいろいろ変更できる. メニューと変えられる内容の対応は以下の通り.
  - 通常は"NONE" となっている欄 : 模様
  - 通常は"NONE" となっている欄の右 : 色. これは「模様」を変えてから. なぜなら，最初の模様は「透明な模様」になっているので，色を変えても見えないのだ(^-^).
長方形の線のサイズや種類や色を後から変更する
1. 作図メニューの "矢印" (一番上)をクリックする.
  これで「図形を操作，編集するモード」になる.
2. すると，今描いたばかりの図形(長方形)が選択され，周囲に「コントロールポイント」や「ハンドル」と呼ばれる小さな正方形の点が複数(長方形の場合は 9つ)表示される.
  どの図形も選ばれていないという場合や，他の図形を選びたいという場合は，選びたい図形にカーソル(マウスのポインタ)を持っていきクリックするか，カーソルを選びたい図形を囲むようにするかすれば OK.
3. 画面右上のメニューでいろいろ変更できる. メニューと変えられる内容の対応は以下の通り.
  - 通常は"NONE" となっている欄の右 : 色
  - "-1-" 等と表示されている欄 : 線の太さ
  - 通常は"NONE" となっている欄の下 : 線の模様
  - 通常は"SOLID(に下線)" となっている欄 : 線の種類(実線, 鎖線など)
  - 通常は"→" となっている欄 : 矢印の端の種類. これは，長方形の場合は使えない. 線分や折れ線を描いた場合に使える.

実習上記の作業を一通り行ってみよ.

Tgif での文字入力

Tgif での文字入力も他の似たようなツールとあまり変わらないので，そんなに恐れることはない.

具体的には，作図メニューの "T" (上から二番目)を選択し，それから文字列を置きたい場所で実際にキーボードから文字列を入力すればよい.
この時，フォントを日本語用に変更すれば，日本語を入力することもできる. フォントの変更は，上側にあるメニューで通常は " L " となっている欄の右の欄を "明" とするか "角" などとすればよい．
これは各々，"明" は明朝体(Ryumin フォント)を，"角" はゴシック体(GothicBBB フォント) を意味している．

ちなみに，Tgif で日本語入力をしようとして " 変換 " キーを押すと変な window が開いてしまったり，なぜか日本語入力ができないことがある．こういうときはしかたないので，

英数字入力状態(要するに日本語入力でない状態)で，一文字以上文字を入力する．
それから " 変換 " キーを押して日本語入力モードに切り替える．
先ほど入力したダミーの文字を消してから，入力したい文字を入れる．

という操作などをしてみるとよい．うまくいく可能性が高い．日本語に関しては他にも似たような tips があると思われる.

実習
自分の名前など，適当なテキストを入力してみよ.
ただし，いきなり日本語入力に挑戦せず，まずはアルファベット表記から試してみるのがよいだろう.

Tgif で描いた図のファイルへの出力

描いた図形をファイルに出力したい，というときは，Tgif はちょっとややこしい. Tgif で図形をファイルに出力するには基本的に次のような手順を踏む.

Tgif-obj 形式でファイルにセーブ(保存)する.
具体的には，左上側にある "ファイル" メニューを選択し， "保存" を選択する. するとファイル名を聞かれるので，適切なファイル名を入力する(拡張子は入力しないこと).
ここでは例のために dummy と入力した，としておく. するとこの段階で dummy.obj というファイルが作成される.

Tgif-obj 形式とは，図形データをファイル化するための Tgif 独自の形式である. この形式で保存しておけば，後日，ファイルを読込んで再編集することができる.
# 拡張子(ファイルの名前の . 以降のところ) は通常は .obj である… が, .obj という拡張子は他のソフトでも使われるので，この拡張子だから Tgif のファイルだ，とは言えない.
左上のメニューに "LATEX(EPS)" や， "プリンタの絵" になっている欄がある. この欄をクリックして，好みのファイル形式を選択する.
かつては選択肢の中に実用度の高いファイル形式は少なかったのだが，最近は Tgif のバージョンアップとともに多くなってきており，
- LATEX(EPS)と書いてある EPS 形式 (TeX で用いることができる)
- PNG と書いてある png 形式 (web での公開に適している)
- PDF と書いてある PDF 形式 (複雑かつ大規模な画像の保存によい)
- GIF と書いてある gif 形式 (web での公開に適していた…過去形)
などの多くのファイル形式が選択できる．
よって，用途に応じて上の形式のいずれかを選ぶ.
具体的には，「TeX で使うならば… EPS 形式」「web で使うならば… png 形式」を選択するとよいだろう．

なお，画像の種類やファイル形式に関しては前回の授業の内容 (画像の種類) を参照するとよい．
ファイルへ出力する.
具体的には，左上側にある "ファイル" メニューを選択し， "印刷" を選択する.
これで，今回の例だと dummy.eps (EPS 形式を選んだ場合) か dummy.png (png 形式を選んだ場合) というファイルが Tgif によって作成されたはずである.
保存ではなくて,なぜか「印刷」によって出力することになっているので要注意である.

ちなみに… 上の方法で出力した pngファイルがなぜか「ファイルサイズ=0」となりうまくいかない場合がある. その場合は次のようにするとよい.

"ファイル"メニューのカラー印刷を選択しておく.
印刷の出力形式として，PBM を選ぶ.
"印刷" する.
これにより，(dummy.obj という保存ファイル名の場合は) dummy.ppm という名前のファイルが出来ているはずなので，特に環境をいじっていない人は GNOME端末ないしは ktermなどで次のコマンドを打ち込む.
pnmtopng dummy.ppm >| dummy.png

ただし，環境をいじって csh 系のシェルを使っている場合は次のようにする.
pnmtopng dummy.ppm >! dummy.png
これで dummy.png というファイルができているはずである.

実習いろいろ図を描いてみたあと，png ファイルへ出力せよ. そして，出力した図を web で公開せよ.

web での画像の表示については，以前の授業で習った画像を web で公開するにはを参照せよ.

Dia

上にも述べたように，同様のツールとして Dia がある. 時間に余裕のある者は，Dia に対しても同様の実習を行ってみるとよいだろう.
起動方法は Tgif と同様である.

gimp

gimp は unix のツールとしては比較的新しいものであるが，画像に関する処理のほとんどが可能と言われるぐらい高機能なツールである. 一般に画像処理ソフトウェア, 特にフォトレタッチソフトとよばれる高機能なものとしては Adobe Photoshop が有名であるが，gimp はそれに匹敵すると言われる. また，gimp はフリーであり，その点からも望ましい. また，gimp にも windows 版が存在する(Mac 版もあるらしい).

起動, 終了方法 (gimp)

起動: 左上のメニューから
アプリケーション → グラフィックス → The GIMP
で起動する.
もしくは，GNOME 端末や kterm 中で gimp & と入力してもよい.
初めて起動した時のみ，様々な初期設定を尋ねられることがあるが，基本的に「次へ」のボタンをすべて押してしまって問題ない．
また，起動すると通常は「GIMP 今日の技」というwindow が開き，簡単な技を一言で紹介してくれる. 結構ためになるので，よく読んでおこう.
ちなみに，この window は閉じても問題ない．
終了: gimp の [File] メニューで exit もしくは quit を選択.

参考文献 (gimp)

gimp に対する資料は(unix 用ツールであることと，比較的新しいことを鑑みると)非常に多いと言える. 特に web での資料も多いので，下の資料だけでなくネットワーク検索を積極的に用いて文献を探すのが良いだろう.

「GIMP/GNUPLOT/Tgif で学ぶグラフィック処理」 … 皆本氏，坂上氏著, サイエンス社, 1999, ISBN4-7819-0934-5, \2,200. … bk1 による書評
他，書籍多数…
the GIMP … 本家.
TheGimp … Iccii氏の web
GIMP ユーザーズマニュアル … 後藤氏，白崎氏，木戸氏，山内氏らの web
GimP … こむぎ氏の web
とほほの Gimp 入門 … 杜甫々氏の web

gimp を簡単に試してみる

実習
gimp の機能は多すぎて，説明を先にしてもかえって混乱して把握できなくなるだろう.
そこで，体感によってまずは感覚として操作を把握してもらいたい.

■ gimp で操作を行ってみるためのサンプル写真(題材) ■

著作権的に問題のない図(写真)である. これを対象にして，いろいろな画像処理操作を実際にやってみよう. # 詳しい人間が見れば，この PC には 6台のモニタが接続されることが分かるだろう.

まず，上の写真データを自分のホームディレクトリなどにダウンロードしよう.
具体的には，Mozilla では上の写真の上でマウスの右ボタンを押し， "画像に名前をつけて保存" を選択する. すると，ダウンロード先とダウンロードファイル名を確認も兼ねて聞いてくるので，適切に設定して OK すればよい.
# 普通にダウンロードすれば，photo-sample.jpg というファイル名になるはずである.
次にダウンロードができたか確認する.
具体的には，ファイルマネージャ等でダウンロードしたファイルをダブルクリックすればよいはずだ. ファイル名を変えたりせずにきちんとダウンロードしていれば，画面に写真が表示されるだろう.
# web 上では 1/4 に縮小して見せているので，ダウンロードしたファイルを直接見ると web での 4倍の大きさに見えるはずだ.
念の為に，写真データのバックアップをとる. データをいじる場合は，どのようなデータでも常にバックアップを取っておくのがよい.
具体的には，ファイルマネージャ等でファイルのコピーを選び，違う名前 (photo-sample-org.jpg など)でコピーするよう設定して実行すればよい. バックアップ用ディレクトリを作成して，そこへコピーするというのも手だろう.
gimp を起動する.
写真データを読込む.
具体的には， "ファイル" メニューから "開く" を選択し，あとはダウンロードしたファイルを選ぶだけである.
gimp が表示している画像の上で右クリック(マウスの第3ボタンを押す)すると様々なメニューが出るので，これを用いていろいろ画像をいじってみる.

ただし，処理したあと，他の処理も試してみるために元に戻しておこう. 元に戻すには，右クリックメニューのうちから， "編集" → "アンドゥ" を選択すればよい.
アンドゥは複数回効くので，何回か行なってしまった処理で元に戻せる. あきらめずにアンドゥしよう.

以下に変更が分かりやすい例をいくつか示す. 試してみるとよい.
- モノクロに変更 : 右クリックメニュー → "画像" → "モード" → "グレースケール"
- よりくっきり, よりぼや～っと : 右クリックメニュー → "画像" → "色" → "明るさ-コントラスト"
- ポスターっぽく : 右クリックメニュー → "画像" → "色" → "ポスター化"
- 大きさ変更 : 右クリックメニュー → "画像" → "拡大縮小"
- 油絵風に変更 : 右クリックメニュー → "フィルタ(Filter)" → "芸術的効果" → "Oilify"
- 旧い写真風に変更 : 右クリックメニュー → "Script-Fu" → "装飾" → "古い写真"
その他，フィルタ系にも多くのフィルタがあるのでこれだけでもたいていの簡単な処理は済んでしまうだろう.
文字を入力してみる.
ただし，文字入力の前に文字の色を先に決めておく必要がある.
具体的には，色を決めるボタンは GIMP のメニューボタンの中でひときわ大きいボタンで □が二つ折り重なっているボタンである. このボタンの左上の□が「描画色」で，右下が「背景色」である. まあ，詳しく考えずに左上の□を押せば，色を選択するモードになるので，素直にそうしろ(^-^). ちなみに，今扱っている写真の上に重ねて文字を入力するという場合は，写真と比べて色対比(コントラスト)が強い色を選ばないと文字が良く読めないので注意すること.

次に文字を入力，表示させる. 具体的には，文字入力ボタンをクリックしてから文字を入力したい場所でマウスをクリックすれば「何と入れるか」を聞いてくるので，文字の大きさ等も一緒に指定すればよい.
ちなみに… 日本語フォントを適切に選択(つまり， "IPAMincho" や "IPAGothic" などを選ぶ) してから文字入力を行うと日本語入力が行える．

gimp で文字入力および簡単な編集を行った例

右に文字を「空中に浮かんでいるように見えるように」入れてみた例を載せておいた. このように，簡単に高い効果が得られるので，いろいろ遊んでみると良い. Mozilla で右クリック→ 画像を表示として見てみるとよい.

レポート課題(単位認定要件)

以下に示す課題について能う限り賢明な調査と考察を行い，

InformationLiteracy-02

という題名をつけて e-mail にて教官宛にレポートとして提出せよ(教官のメールアドレスは授業中に口頭で伝える).
なお，レポートを e-mail の代わりに TeX で作成した書面にて提出してもよい.

なお，本レポートは単位認定のための必須要件の一つであるので，きちんと提出すること.
注意こちらの要求に沿っていないレポート，出来の悪いレポート，は未提出扱いにするので，ろくなレポートができなかった場合は単位が得られないものと提出時に覚悟しておくこと.

(gnuplot 課題) f(x) = x - x³/6 と g(x) = sin(x) の二つの関数を -1 ≤ x ≤ 1 の範囲で一枚のグラフ上に描画し，そのグラフを web で公開せよ．
(gnuplot 課題) 次のデータは 2005年4月1日～14日の平均気温(摂氏)をならべたものである (データは，気象庁 web 気象統計情報(昨日までのデータ)) より引用している.

ちなみに… 気象庁の web はデータも豊富で見易く参考になる. 時々見てみるとよいだろう.

10.8 12.6 12.2 8.7 11.0 15.8 17.9 16.6 15.6 19.3 12.9 10.5 11.5 13.5
このデータを横軸に日を，縦軸に気温を並べたグラフにせよ. そして web で公開せよ．
(Tgif 課題) セキュリティ上問題にならないように留意しながら，自宅周りの簡単な地図を作成し，web で公開せよ．
# 「ストーカーの役に立たないように適切に省略せよ」，ということである.
(Tgif 課題) gnuplot で f(x) = sin(x)/x を -15 ≤ x ≤ 15 の範囲で描画したものを Tgif で編集して何か追加して書きこみ，それを web で公開せよ.
(gimp 課題) 阪大豊中キャンパスマップを題材としていろいろ画像処理を施し，web で公開せよ.

注意上のファイルは gif 形式なので，(色数制限があるため)そのままではあまり画像処理を施せない．そこで，gimp で読み込んだ後に
"右クリック"→ "画像"→ "モード"→ "RGB" と選択することで色数制限をはずしてから作業をした方がよい．
(gimp 課題) 自分の web 用の「ロゴ」を作成し，web で公開せよ.
以上ができたら，教官宛のメールにてそれぞれの課題についてどのように作業を行ったか「詳しく」報告せよ. 詳しくない場合は未提出扱いである.
ただし，メールが文字化けしている場合は未提出と見なすので注意すること.
また，メール本文内に「自分の名前，所属，学籍番号, ログイン名」の全ての項目が並記してきちんと明記されていないものは提出者不明扱いであるので注意すること.

最終更新日 … $Date: 2005-06-14 14:46:36+09 $