←ニュース購読編 ↑おもちゃ箱 →ツール編

¶ PC-UNIXで Web 作成編

1．HTMLの書き方
2．HTMLの文法チェック
3．ペイントツール／ドローツール／画像処理ソフト
4．画像の編集
5．画像の透明化／インターレス化
6．グラデーションを作る
7．背景
8．画材／アイコン／テキスチャを拾いに行く
9. SSI/CGI/ISMAPに手を出す

━━━━━━━━━━━━━━━━━━━━━━━━━━━━


　ここはUNIXのツールで、自分の Web ページをなんとかやりくりしようという 少数派のためのページです。 PhotoShopみたいなできのいい市販ソフトを使いたいけど貧乏で使えない、微軟等 大きな会社は嫌いだ、人と同じことはしたくない等、それぞれ理由はおありでしょう が、ベーシックなツールで頑張ってみたい方、加工の楽しみには UNIXはぴったり です。私が試行錯誤でやってるのことを羅列してみます。間違いなどを指摘して いただけると、大変嬉しいです。

1．HTMLの書き方

　最近雑誌に付録でついてたりしますが、翔永社の 「インターネット　ホームページデザイン」 って本を買ったら、これが結構良かったです。
私がHTMLの書き方を述べるのはおこがましいので、以下のような各種ガイドページ を読みに行きましょう。


2．HTMLの文法チェック


HTMLができたら、さっさと Web ページをオープン…というのは、 ちょっとお待ちを。Netscape Navigatorや MS-Internet Explororで見えた ということは、HTMLが正しいということにはなりません。 何が正しいかをつきつめるとまた難しいのですが、とにかく jweblintのページ がおすすめです。UNIX/Windows95,NT/Macintoshで使える最新の DTDに対応した 文法チェックソフト jweblintを使うのが便利ですが、ちょっと調べるだけなら 文法チェックができるWebページ(CGI) も良いでしょう。Doctor HTMLのホームページ 診断では、URLを指定するとそのページの文法、リンク先がアクセスできるか等 を診断してくれます。

3．ペイントツール／ドローツール／画像処理ソフト


文才もなく、Web で主張する内容のない私のような方でしたら、 画像である程度誤魔化さなければなりません。使えるツールを駆使しましょう。
○FreeBSDに portされているもの
●未portだがコンパイルできたもの
○xpaint （ペイント＋画像処理）
私はもっぱらこれを使ってます。お絵書きそのものは上手でない ので、手書き文字やアイコン用GIFを作るときなどには便利。 基本的なフィルタはついています。 日本語訳のマニュアルもあったりします。

○gimp
gimp(the General Image Manipulation Program)は、非常に高機能なペイントソフト。 ただし、メモリ消費量も多いので、 FreeBSDでは、コンフィグレーションファイルを
options SYSVSHM
options SYSVSEM # enable for semaphores
options SYSVMSG # enable for messaging
 として、共有メモリ／セマフォ／メッセージキューを使えるようにした カーネルを再構築して、更に
options "SHMMAXPGS=2048" のようにして共有メモリを増やしておかないと(デフォルトは1024ページ)、 複数のウィンドウが使えないことに気をつけましょう。 日本語 gimp ももうすぐ portsで使えそうです。

○xfig （ドロー）
X window systemで使われる基本的なドローイングツールだが、tgifより判りやすいと、根強いファンがいます。

○tgif （ドロー）
おなじみ、Xで最もよく使われているドローイングツール類。 デカイ文字を描くにはいいでしょう。文字を書いたら、 等で、日本語のタイトル文字が割とインスタントに作れます。

○idraw （ドロー）
InterViewを使ったドローイングツール。 最近、FreeBSDの日本語portが作られています。

●fdraw （ドロー）
X11R6のFrescoを使ったサンプルソフトです。ボタンがかっこいい。

○xv （画像表示＋画像処理）
皆さんご存知のシェアウェア。適当にいじると使えます(^^;) フィルタ類はImageMagickに次いで豊富。

○netpbm （画像処理）
画像ファイルを変換／処理するUNIX風コマンド群。 覚えきれないけどとっても便利。シェル上で画像の一括処理もラクチン。 フィルタ系ではかなり細かい指定が可能です。 WWWでおなじみの透明化、インターレス画像作成も可。

○ImageMagick （画像表示＋ドロー＋画像処理）

ドローツールの機能も持った画像処理ソフト。操作法はユニーク。 扱える画像フォーマットの種類はピカ一。フィルタ処理も大変多い。

4．画像の編集

ImageMagickは displayコマンドを使った場合です。以下「Ｍ右」はマウス右ボタンの意味です。

　切り出し 
xpaint     -- Ｍ左で領域指定⇒Fileメニュー⇒Save Region⇒OKボタン
xv(方法１) -- Ｍ左で領域指定⇒Saveボタン⇒Selected Areaをチェック⇒OKボタン
xv(方法２) -- Ｍ左で領域指定⇒Cropボタン⇒Saveボタン⇒OKボタン
ImageMagick -- PixelTransformプルダウン⇒Crop⇒Ｍ左で領域指定⇒Cropボタン

　修正（ゴミを削る） 
xpaint     -- Regionボタン⇒領域指定⇒BackSpaceキー（これが便利）
ImageMagick -- Editプルダウン⇒Cut⇒Ｍ左で領域指定⇒Cutボタン

　色の修正（パレット変換） 
【一色毎に描画パレット設定】
xpaint     -- 色ボックスでＭ右プルダウン⇒Editを選択⇒Color Selectorで選択
【一色毎にパレット修正】
xv         -- eキー（Wondosプルダウン⇒Color Editor）⇒カラーマップ
	      ⇒左上マップ上でＭ左で256パレット選択しRGB/HSVメータで修正
【全パレット】
xv         -- eキー⇒ColorEditorのIntensity/RGBmodificationグラフで可能
	      他Brite/dim,Sharp,Dullボタン、Saturationメータでも可
ImageMagick -- ColorTransformプルダウン⇒Hue,Saturation,Brightness,Gamma,Spiff,
	      Dull,Equalize,Normalize,Negate,Grayscaleは可能、直接指定は不可
【任意の色数に減色】
ImageMagick -- ColorTransformプルダウン⇒Quantize⇒色数指定⇒Quantizeボタン
netpbm     -- % ppmquant 色数 256color.ppm > anycolor.ppm で可能
【フルカラー(24bit) ⇔ 256色(8bit) ⇔ ディザ(4bit) ⇔ グレイスケール(1bit)】
xv         -- Save時にプルダウンメニューで選択
ImageMagick -- ColorTransformプルダウン⇒GrayScale
netpbm     -- ppmquant,ppmdither,pnmdepthで可能

　エフェクト・フィルタ類
xpaint,xv,ImageMagick,gimp,netpbmには非常に多岐にわたるフィルタが 装備されています。

　変形 
xpaint     -- 範囲指定⇒Regionメニュー⇒Flip[X|Y]Axis（反転） Rotate（回転）
xv         -- ALT+t/ALT-Tキー（Algorithmsプルダウン⇒Copy/Clear Rotate）
	        ⇒角度指定⇒回転（画面全体／選択領域共可能）
           -- [⊃][⊂][‖][＝]（左回転）（右回転）（左右反転）（上下反転）
ImageMagick -- PixelTransformプルダウン⇒
   Flop（左右反転） Flip（上下反転） RotateRight（右回転） RotateLeft（左回転）
   Rotate..（任意角度回転） Shear（斜変形）

5．透明化ＧＩＦ／インターレス画像

●giftrans
昔 FreeBSD-2.0.5Rでは一応画像は吐くもののsegmentation faultで落ちたり、 していましたが、今は portがあります。

●giftools
同じく GIF89aの透明化、インターレスができます。
●netpbm
ppmtogifでできます。これは透明化／インターレスを一辺で処理できて実に便利。 
透明化１：% giftopnm 256color.gif  | ppmtogif -transparent "#ffffff" >bar.gif
透明化２：% giftopnm fullcolor.gif | ppmquant 200 | ppmtogif -transparent "#ffffff" >bar.gif
インターレス：% giftopnm foo.gif | ppmtogif -interlace >bar.gif
ppmtogifはフルカラーは扱えないので、256色以上の画像は「透明化２」の ようにppmquantをかませて、適当な色数に落します。

6．グラデーションを作る

netpbmのpgmrampPC-UNIX上でグラデーションを作るソフトはこれ と gimpしか知りません。なんだグレースケールだけじゃないか。とお思いでしょうが、加工すれば使えます。例えば、白黒の文字ファイル [WELCOME(monochrome image)] があります。
これは、240 x 50ピクセルの画像なので
 % pgmramp -tb 240 50 | pgmtoppm "#20a00ff-#ffff00" \
      > col_grad.ppm
上下方向の同サイズのグレースケールのグラデーションを作り、青→黄色の pixmapに変換しました。これで、文字とグラデーションを合成してGIFに するとのは以下のようになります。
 % pnmarith -add welcome.pgm col_grad.ppm | ppmtogif > welcome_grad.gif
更に前述の透明化１を施すと [WELCOME(transparented image)]

7．背景

Netscapeのためのテキスチャは、WEBサーバをめぐって拾うこともできますが、 netpbmでもppmforgeというコマンドで、「雲のある空」「星空」を作ることが できます。このページの背景は、
       % ppmforge -night -power 0.5 -width 120 -height 120 | ppmquant 6 \
          | ppmtogif >bgpaper.gif
としてできたGIFを xvで色調整しただけのものです。インタラクティブに いじってみたい人は、フラクタル画像のページ でやってみましょう。 フリーのテクスチャエディタってどこかにありませんかねぇ。


8．画材／アイコン／テキスチャを拾いに行く

9．SSI/CGI/ISMAPに手を出す

そろそろ、少しずつ凝ったことがしてみたい..という方は、 技術情報が書かれたWEBページで情報を集めて 下さい (^^;) 私のページでやってることに関しては技術メモ を参照して下さい。 ただし、嘘を書いてる可能性もあるので、十分お気をつけ下さい(^^)