情報活用演習 2007年6月14日 担当：奥村晃史
画像（ラスター）データ加工の基礎
0. 重要
完成したウェブページを実際に見てでき具合を評価します．必ず今日の成果が
http://home.hiroshima-u.ac.jp/b012345/test.html
で閲覧できるようにしてください．b012345 にはあなたのアカウント名が入ります．
このURL (インターネット上のアドレス）はそれを知らない人に見られることはありません．
==================================
１．着席したらすぐ，GIMPを起動する．
スタート ＞ すべてのプログラム ＞ GIMP ＞ GIMP 2.0
『GIMPユーザインストールへようこそ』 全部 『次へ』を選択．
GIMP今日の技『GIMPへようこそ！』 閉じる．ウインドウが二つ開いた状態でそのままに．
+++++++++++++++++++++++++++++++
２．画像の情報処理：基礎の理屈
http://home.hiroshima-u.ac.jp/kojiok/imagebasic.html
３．画像の情報処理：ラスターとベクター，解像度
http://home.hiroshima-u.ac.jp/kojiok/joho1707.html
最も重要な内容
★表現方法と必要な情報量 （dpi = dots (pixels) per inch; 1 inch = 25.4 mm）
コンピュータ画面 ＝ 72 dpi 普通の画面は 1024×768=0.8 Mega dots (pixels)
PowerPoint のスライドは 720 × 540 pixels
Web用の写真： 幅・高さ < 700 pixel
プリンタでの印刷 ＝ (200〜) 300 dpi はがき全面 1200×1800＝2.16 Mega pixels
A4全面 2500×3600＝9 Mega pixels
300dpi は理想的な品質．150 dpi くらいでも見られる．
商業印刷物（最低限） ＝ 350 dpi
商業印刷物（高級・詳細）= 600 dpi
どの表現方法を選ぶか，画像をどのくらいのサイズで見せるかによって情報量（pixel数）を
調整する．サイズの調整は画像編集ソフト（GIMP, PHOTOSHOP）で行い，ホームページの
中や，PowerPointのスライド上では決して行わないこと（画像劣化，見苦しい発表）．
++++++++++++++++++++++++++++++++++++
出席メール
++++++++++++++++++++++++++++++++++++
４．写真の加工
GIMPは写真加工アプリケーションとして最も優れたものの一つで，かつ無料である．
有料のアプリケーションとしては Adobe Photoshop が業界標準だが，最近では簡略版が カメラに付属する．
-----------------------------
ブラウザで次の写真を開く．
http://home.hiroshima-u.ac.jp/kojiok/monuments.jpg
この写真をウェブページに載せて共有したい．
自分で準備したjpeg画像（幅＞800 pixel 以上）がある人はそれを使って同じ加工をしてもよい．
★幅1024 pixel の画面で幅800 pixelのブラウザウインドウに表示．
★写真の幅は 700 pixels 前後（ブラウザに余白を残す）
(1) ブラウザで写真が開かれたら写真の上をクリックしてデスクトップにドラッグする．
自動的に保存されてダウンロード完了（一般のページでは知的財産権に配慮すること）．
(2) GIMPの The GIMP ウィンドウを選ぶ．起動していない人は１の手順に戻る．
GIMP ファイル ＞ 開く ＞ デスクトップの monuments.jpg
(3) 処理の手順を考える（重要）
表示 ＞ 情報ウインド ピクセル寸法 1600×1200 ピクセル 解像度 72×72 dpi RGB
-->> 幅を変えなければならない．情報ウィンドウを閉じる．
さらに，画像は右へ傾いている，散漫（前景が広すぎ），色が淡くてパンチがない．．．
手順：傾きを補正-->>トリミング-->> ピクセル寸法調整 -->> 色調整 -->> 別名で保存（オリジナルは残す）
(4) 傾きの補正
選択 ＞ 全てを選択，道具 ＞ 変換ツール ＞ 回転，角度 −2 （マイナス2度） を入れてみる 回転をクリック
(5) トリミング
ウインドウのサイズを変える（右下隅ドラッグ），スライダーで表示範囲を選ぶ，最適の構図を見つける．
主題を中央に置かない，目立つオブジェは全部入れるか全部消すか，地平線を上下の中央にしない．．．
ここでは全体の４分の１強の範囲を選んでください．
The Gimp ウインドで ファイル(F)の下の破線の四角（長方形選択ツール）を選ぶ．
選べるとポインタの右下に破線で囲まれた四角形が表示される．
矢印の付いた十字が出る場合：選択＞なし を選ぶ；レイヤーウインドに背景以外のレイヤー（目の印）がある場合は，
上のレイヤーをクリック＞青反転＞右クリックで『レイヤーを固定』
十字カーソルで画像が動いてしまった時：編集＞アンドゥ で元に戻す．
切り抜きたい範囲の左上から右下へドラッグ長方形が描かれ，ボタンを放すと破線で選択範囲が表示される．
回転でできた白地を含まないように注意．
その状態で 画像 ＞ 画像の切り抜き これで選択範囲だけを含む画像ができた．
ここで ファイル＞別名で保存
名前は monuments2.jpg とする．場所は public_html フォルダ．OK. 品質0.85確認，OK.
(6) ピクセル寸法調整
表示 ＞ 情報ウィンドウ ピクセル寸法で 幅（最初の数字）を確認，これより小さなピクセル数に変更する．
情報ウィンドウを閉じる．
画像 ＞ 拡大縮小，新しい幅を決める 680 とする．高さをクリックすると自動的に（縦横比一定）決まる． OK．
(7) 色調整
道具 ＞ 色ツール ＞ レベル
グラフは明るさ（左端が黒，右端が白）の分布を示す．中間にまとまるから，色が淡く見えている．
グラフ左下の黒三角を右へ動かす（下の数字50前後まで），
グラフ右下の白三角を左へ動かす（下の数字230前後まで）
グラフ真ん中下の灰色三角を左右へ動かして全体の明るさを調整．
いろの変化を見ながら，暗すぎ，明るすぎ，どぎつすぎをさけて程よく調整する．できたらOK．
(8) 画像をシャープに
表示 ＞ ズーム ＞ 100％，表示 ＞ 画面の大きさの窓で表示
これで写真の１pixel が画面の１pixelに対応．
フィルタ ＞ 強調 ＞アンシャープマスク たとえば 半径 3.3, 量 0.35, しきい値 8 （時間がかかる）
編集 アンドゥ，リドゥを繰り返して効果を確かめる．これもやりすぎないこと．
完成！
このほかにも様々な調整や書き込み，修正，色調整が可能ですが，時間があれば試します．
(9) 保存，GIMP終了
++++++++++++++++++++++++++++++++++++++++++++++++++
５．日本語入力を可能にする．写真をウェブページに入れる．
(1) エディタで先週作った自分の test.html を開く
(2) 最初の <html> を削除する．そこに下記３行をコピー，貼り付け
３行に分かれる．２行目の長い行に改行が入らないようにする．
メモ帳の場合には，書式 ＞ 右端で折り返す をクリックして チェックを消す．
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
(3) <head> の行と <title> myname's homepage </title> の行の間に空白行を入れる．
その空白行に下記の行１行をコピー・貼り付け．
<meta http-equiv="content-type" content="text/html;charset=shift_jis" />
============冒頭は以下のようになるはずである===============
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis" />
<title>myname's homepage</title>
</head>
<body bgcolor="99FFCC">
以下略
================================================
これで日本語を入力しても正しく表示される．
全てのhtml文書には，上で追加したエンコーディングを指示する行が必要．上の例は shift_jis がエンコーディングを示す（２カ所）．
日本語を表示する文書の冒頭には必ず，上で追加した３行＋１行が含まれること-->>次からはコピーするだけでよい．
あるいは下記のソースを保存した後エディタで開いて表示したい内容を書き換える．
http://home.hiroshima-u.ac.jp/kojiok/japanesetemplate.html
表作成機能を作って横幅を制御する例
http://home.hiroshima-u.ac.jp/kojiok/japanesetemplate2.html
日本語以外の場合 shift_jis の部分に別のエンコーディングが指定される．
(4) 画像の配置
<body> の適当な場所に以下の行を入れる． sex:male / female の次の行に入れる．
<br><p><img src="monuments2.jpg"></p>
(5) その次の行に日本語で説明を入れてみる．
<br><p>モニュメントバレーに行ってきました．アメリカは広い！</p>
(6) ウェブページが正しく表示されることをブラウザで確かめる．
http://home.hiroshima-u.ac.jp/b012345/test.html
b012345 にはあなたのアカウント名が入ります.
奥村の作ったページ．表示＞ソースを表示 で html文書の中身も見てください．
++++++++++++++++++++++++++++++++++++++
6. 重要
完成したウェブページを実際にみてでき具合を評価します．
必ず今日の成果が
http://home.hiroshima-u.ac.jp/b012345/test.html
で閲覧できるようにしてください．b012345 にはあなたのアカウント名が入ります．
このURL (インターネット上のアドレス）はそれを知らない人に見られることはありません．
公開して誰にでも見てもらえるようにしたい場合，最初の入り口ページの名前を，index.htmlとします．
［その場合も同じ内容のファイルを必ず test.html で保存してください．評価できなくなります．］
［血液型，使用言語，氏名，性別は不特定多数の人に知らせる必要のない情報です．公開時は削除すること．］
公開する場合，個人情報，知的財産権，基本的人権，公序良俗に十分に配慮してください．
*********************************************************************
7. ウェブページの改良のために
HTML文書作成支援アプリケーションを自分でインストールする．無料アプリケーション多数．
http://www.vector.co.jp/vpack/filearea/win/net/htmledit/
気に入ったウェブサイトがあったら，ソース（html文書）を開いて自分用に改変してみる．
ブラウザの 表示＞ソースを表示 表示されたら 別名で保存（名前を付けて保存）
あるいはウェブページが表示された状態で，保存 html ソース を選ぶ．
後者の場合，知的財産権に注意すること．一般的なタグの使い方を参考にすること．丸写しは犯罪．
MS Word, MS Excel は（できそこないだけど）直接 html 文書を書き出すこともできる．
奥村 晃史