NY 滞在再延長、ｵﾜﾀ ＼( ^ o ^ )／

う～ん。蟻地獄のようなプロジェクトですな （￣～￣；）

さて、私は、NY での生活が長引くことも考えて、色々な本を持ってきました。その内の１つが、「ノンデザイナーズ・デザインブック」です。この本は、Web というよりは、出版物全般について書いてあるのですが、その内容は、デザインに関する基礎を学ぶための教科書的なテイストになっています。

私のように独学でデザインを学び、Tips を真似することばかりやっていると、いずれ限界が来ます、というか来ました。このままでは、いけないと思い、基礎を学べる書籍を探して、この本にたどり着いたわけです。

この本の内容が、非常に参考になったので、特に印象に残った、デザインの４大原則（近接、整列、反復、コントラスト）について紹介しておきます。

近接

意味が似ているコンテンツは、グルーピングして近づけることで、一目で分かるようにしておく

整列

複数のコンテンツ、グループを整列させることで、それらコンテンツ間の関連を表現する

反復

色、形、サイズなどの視覚的要素を、作品を通して反復することで、一体感を出す

コントラスト

重要な要素を、意識的に他の要素と差別化することで、注意を促す。

たった、これだけです。おそらく、これらの原則は、誰でも無意識のうちに使っていると思います。しかし、これらを無意識でなく、意識的に行うことが重要です。デザインしていて、"なんとなくデザインが良くないんだけど、どこが悪いか分からない"、といった経験は誰でも１度くらいあると思います。

どこが悪いかを、言葉で表現できないと、デザインを修正することが出来ません。しかし、次のように、悪いところを言語化できるとどうなるでしょう。

「このコンテンツとあのコンテンツは、意味が近いのに離れすぎていて、近接の原則に反している」

「このページには、明確に他と異なる部分がないので、コントラストに欠け、重要な情報がどこにあるか分からない」

どこを修正すればよいか、一目瞭然だと思います。直感でデザインすることに限界を感じている人は、この本を読むと、論理的にデザインをできるようになります。デザイン初心者にオススメです。

ノンデザイナーズ・デザインブック

デザイン変更。

前回のデザインは、フォトレタッチの練習をしたくて、写真を取り入れたため、少し、ゴチャッとした印象を感じたので、今回は、ひたすらシンプルを、目指してみました。

「プログラミングからWebデザインまで」と、エラそうに謳ってますが、実はどちらも中途半端なのは、ヒミツです。

開発が、延び延びになってる、エンコードツールのデザインも、そろそろ仕上げたいところです。

Vista に Gimp を入れるのは、少し不安だったので、今までは、openSUSE の Gimp を使っていたんだけど、Gimp を使うたびに、OS を切り替えるのが面倒なのと、私のブログに、妙に「vista gimp」の検索で飛んでくる人が多いという使命感から（笑）、じゃあ、入れてやろうじゃないか、ということになりました。

Windows Vista and The GIMPというエントリで、フォントの初回読込みで、待たされるということは、知っていたので、そこだけ気をつければ、普通にインストールできました。

↓　フォント読込みで、応答なしになるの図

以前の、Windowsで、Document and Settings 以下に作られていた、ユーザ設定のディレクトリは、Vista では、C:\User 配下に正しく作られました。

ユーザ設定フォルダに、古い OS で使用していた、Script-Fu や Font をコピーしてやることで、そのまま使えることも確認。

↓　以前作った、角丸Script-Fuを試すの図

とりあえず、問題なく使えてます。

 
Script-Fuを登録すると、Gimpが自動的に、上のようなダイアログを作ってくれます。画像のメニューから実行する、Script-Fuの場合、image引数とdrawable引数は、現在の画像が、そのまま使われるので、ダイアログからは設定しません。ここでは、独自の引数である、半径のみが設定可能になっています。ダイアログに設定される要素名を、"Radius (%)"と設定しましたが、このように、簡単なものであれば、"半径 (%)"と、自動的に日本語にしてくれるところも、ポイントです。

引数について、もう少し、説明しておきます。Gimpで指定できる引数は、以下のような種類があります。

今回、半径の指定では、SF-ADJUSTMENTを指定したので、特定範囲の数値を指定できます。デフォルト値で、'(50 0 100 1 1 0 0)と指定していましたが、これは、デフォルト値50、最小値0、最大値100、ステップ幅1、不明?1、小数桁0、スライダーor スピンボタン0、と設定しています。

次に、script-fu-menu-register関数は、次の引数を取ります。

1. 関数名
2. メニューの位置

メニューの位置は、今回、"<Image>/Script-Fu/Render"と指定したので、画像メニューの「Script-Fu → 下塗り」に追加されます。"<Image>/Script-Fu/下塗り"では、ダメなので、注意してください。英語が分からない人は、前回やったように、Gimpを英語環境で起動して、メニューを確認してみましょう。画像メニューではなく、ツールボックスのメニューに追加したい場合は、<Image>の部分を<Toolbox>として、適切なパスを設定すれば可能です。

4.配置して確認する

3の手順で作ったファイルは、Windowsの場合、「C:\Documents and Settings\(ユーザ名)\.gimp-2.2\scripts」に配置します。ファイルに、日本語が含まれている場合は、UTF-8で保存する必要があるので、注意してください。そして、Gimpを再起動するか、または、メニューの「拡張 → Script-Fu → スクリプトリフレッシュ」で、再読み込みさせます。

まずは、プロシージャブラウザで、Script-Fuが追加されていることを、確認してみてください。成功していたら、先ほどの、Script-Fu登録関数で書いた内容が、表示されるはずです。

無事、登録が成功していたら、次は、新規画像を作成して、画像のメニューから、「Script-Fu → 下塗り」と辿ってみます。以下のように、script-fu-register関数で設定した名前が、登録されているはずです。

最後に、Script-Fuを実際に、実行してみます。まずは、適度な大きさの、選択範囲を作り、適当なブラシを選んでください。そして、いざ実行。角丸四角形を作ることが出来たら成功です。

 今回は、実際にScript-Fuを作り、Gimpで動作するところまでの手順を、一通り追ってみたい所存です (^_^) ちなみに、私は、Windows版のGimp2.2.13を使っているので、それ前提で読んでください。

じゃあ、せっかくなので、「rounded」なんて、キーワードを、イキナリ思いつくかい！という方は、Windowsのスタートメニューから、「すべてのプログラム → GTK+ Runtime Environment → Select Language」で、英語を選択して、Gimpを起動してください。メニューが英語化するので、「角を丸める」が「Rounded Rectangle」となっているのが分かるはずです。同様に、検索すると「選択領域をストローク描画」は「gimp_edit_stroke関数」で実行することが分かります。

2.Script-Fuを書く

Apiが分かったら、実際にScript-Fuを書きます。Script-Fuは、Schemeの関数になっている必要があるので、前回のエントリで書いたように、defineを使って、関数を作り、その中に、先ほど検索したApiを使って処理を書いていきます。

(define (script-fu-render-rounded-rectangle image drawable radius)
 (script-fu-selection-rounded-rectangle image drawable radius 0)
 (gimp-edit-stroke drawable)
)

1行目で、関数名と、引数を定義しています。imageは、現在編集中の画像、drawableは、現在編集中のレイヤー（+チャンネル）、radiusが角丸の半径を表す数値(%)です。imageとdrawableは、画像のメニューから、Script-Fuを実行する場合は、必ず引数に指定する必要があります（ツールボックスのメニューからの実行の場合は、いりません）。2行目では、先ほどの、プロシージャブラウザの、検索結果から引数を調べて、script-fu-selection-rounded-rectangle関数に渡しています。プロシージャブラウザでは、関数名の区切りは、アンダースコアですが、Script-Fu内では、ハイフンになっていることに注意してください。また、プロシージャブラウザの説明では、run_modeという引数がありますが、これを渡したところ、エラーになり、実際の関数を調べると、この引数は必要ないことが分かりました。謎です。gimp-edit-stroke関数も、同様の手順で引数を調べて、追加します。

これで完成・・・ではありません。実際に、この関数を実行すると、選択領域の角を丸めるところまでは行きますが、線引きがされません。Script-Fuで行った描画を、画面に反映するには、gimp-displays-flush関数を、呼び出す必要があります。

(define (script-fu-render-rounded-rectangle image drawable radius)
 (script-fu-selection-rounded-rectangle image drawable radius 0)
 (gimp-edit-stroke drawable)
 (gimp-displays-flush)
)

これで、Script-Fuは、完成です。

Script-Fuが、完成したら、次は、Gimpへの登録をして、実際に動作させるわけですが、説明が長くなりそうなので、続きは次回のエントリで書くことにします。

Script-Fuを作って、Gimp上で実際に動作させるまでの手順を解説してみる(2)

Schemeを、少しずつ勉強中。何とかScript-Fuを作れそうなところまで来たので、一度まとめておきます。

1．何はともあれ、()をつける

とにかく、ソースコードに「( )」が出てきます。ファイルから、画像をロードするだけで、以下みたいな感じになります。

(set! image (car (gimp-file-load 0 filename filename)))

2．前置記法

数式は、( 1 + 2 ) ではなく、( + 1 2 ) と書きます。
( 1 + 2 + 3 ) は、( + 1 2 3 ) 。
( 1 + 2 - 3 ) は、( - ( + 1 2 ) 3 ) です。

3．大域変数と局所変数

大域変数（グローバル変数）の宣言は、defineで行い、set!で値を代入します。 ただし、Script-Fuでは、変数宣言をとばして、いきなりset!を実行しても、変数を使えるようです。

(define x 1)1(print x)1(set! x 2)2(print x)2(set! y 3)3(print y)3

 局所変数（ローカル変数）は、(let* )で囲んで、宣言します。囲まれた領域以外で使用すると、エラーになります。(let* )内には、変数だけでなく、変数を使用する評価式も書いてしまいます。

「(let* ((変数1)(変数2)・・・)(評価式1)(評価式2))」

以下では、zという変数を初期値3で定義し、評価式はzそのものを返しています。(let* )の外で、zを使おうとすると、変数未定義エラーになります。

(let* ((z 3)) z)3(print z)ERROR: unbound variable (errobj z)

4．リスト、つまりは配列のようなもの

他の言語でいうところの配列は、Schemeではリストに当たります。()の前に、「’」を付けることで宣言できます。

'( 1 2 3 )'( 1 "two" 3 )  ←数値と文字列が混ざってもOK

リストから、値を取得するときは、「car」「cdr」を使います。「car」は、リストの先頭の要素を取得します。「cdr」を使うと、リストの先頭を除いた全ての要素を取得します。

(car '(1 2 3))1(cdr '(1 2 3))(2 3)

 いまいち使いにくい感じがしますが、関数型言語は、再帰処理を頻繁に利用するので、このような仕様になっているんだと思います。ちなみに、Gimpの関数は、全てリストを返すので、戻り値の取得は、たいていの場合、「car」を使う必要があります。

5．関数の定義

Schemeでは、変数と関数が同列で扱われます。なので、関数の宣言は、大域変数と同じくdefineで行います。以下では、引数「x,y」を足し算する関数「add」を宣言し、その関数を利用しています。

(define (add x y) (+ x y))(add 1 3)4

今作ってる、エンコードツールは、HTMLエンコード、URLエンコード、Base64等、色々対応しているので、ボタンの数が多いです。このボタンは、同じ画像を元に作るのですが、表示される文字列が、それぞれ違っているので、結局、ボタンの数だけ、「テキスト挿入 → GIF形式で保存」という作業を行わないといけません。

1度の作業ということなら、これでもいいのですが、HTMLに表示してみて、気に入らなければ修正したいので、何度も元画像を変更して繰り返すことになります。

これがメンドイので、作業を自動化するため、Script-Fuに挑戦してみることにしました。Script-Fuとは、Gimpに組み込まれている、マクロ言語で、単純な作業の繰り返しを、スクリプト化することが出来ます。

とりあえず、今日は、さわりだけ調べてみたので、分かったことを以下に列挙しておきます。

1．Schemeという関数型言語で記述する

普段、.NETやJavaしか使わない自分には、関数型言語は難しそうです。Cのような手続き型言語とは、全く違うので注意が必要です。（Perl-FuやRuby-Fuなんてのもあるみたいです）

2．Gimpを操作するには、プロシージャブラウザの関数を使う

「ツールボックスのメニュー → 拡張 → プロシージャブラウザ」で、Script-Fuから使える関数の一覧が見れます。自分の環境では、849個ありました。

3．デバッグは、Script-Fuコンソールで

「ツールボックスのメニュー → 拡張 → Script-Fu → Script-Fuコンソールで、1命令だけ入力して、即実行可能な、コンソールが使えます。試しに「(print "Hello World")」と入力したら、「Hello World」が表示されました。

4．自分が作ったスクリプトをGimpに登録できる

自分が作ったスクリプトを、プロシージャブラウザや、メニュー項目に追加できるようです。

今まで、Gimpで作った画像の圧縮形式は、気分で使い分けていたのですが（オイ）、このままではアカンということで、ちゃんと調べてみました。

JPEG

1677万色まで扱える、圧縮方式。可逆圧縮も一応サポートはされているものの、ほとんどの場合、非可逆圧縮として使用される。圧縮の方式上、色数を減らしても、画像サイズは変わらず、また、色が極端に変わる境界では、ノイズが発生するため、同じ色が広範囲に塗られるイラストやアイコンには向かない。主に写真の圧縮に利用される。

GIF

256色まで扱える、 可逆圧縮方式。同一色が連続するほど、圧縮率が高くなるので、イラストやアイコンに向いている。GIFは背景を透明にすることができるが、半透明はサポートせず、完全透明または完全不透明のみを扱える。また、複数の画像を1つのファイルに保存して連続再生するアニメーションGIFという機能も持つ。一昔前、圧縮形式の特許問題が起こったが、2004/06/10で特許が失効し、今は自由に使用することが出来る。

PNG

GIFの特許問題が起こった時代に、代替として作られた方式。280兆色まで扱うことが出来る上に、可逆圧縮で、さらに半透明をサポートするなど、ポテンシャルは高い。しかし、古い形式のブラウザでは表示できない上に、IE6でも、半透明がサポートされておらず、現状では、そのポテンシャルを出し切れていない（IE7は半透明をサポート）。また、GIFの代替だがアニメーションが出来ないという欠点もある。W3Cが使用を推奨している。

ふ～ん (゜ε ゜)

 単純に使い分けるなら、写真にはJPEG、イラスト・アイコンにはGIFかPNG、アニメーションを使うならGIF、透明色を使うならGIFかPNG、半透明ならPNG、といったところでしょうか。

デザインをしていると、Web上で、きれいな色をみかけたとき、その色の情報が欲しくなることがあります。

そんな時に使えるツールを探していて、FireFoxエクステンションの、

色の情報は、スポイトを右クリックして表示されるメニューから、クリップボードにコピーすることが出来ます。便利!！

Gimpで色を選択するときに、RGBのほかに、色相、彩度、明度という基準で選択できるんだけど、いまいち必要性が分からなかったから、これを期に調べてみた。常識中の常識のような気がしないでもないけど、自分と同じく良く分からない人がいることを希望して書いてみる。

色相、彩度、明度は、色を表現するときの体系の一種で、これらの値を変更することにより、全ての色を表すことができる。RGBも色を表現するときの体系だが、これら2つは、ある意味全く関係なくて、色相、彩度、明度で表された色は、RGBでも表すことができるし、同様に、RGB値が決まれば、それに対する色相、彩度、明度の値が決まる。色を表現するという同じ役割をもつ体系でありながら、次元や空間みたいなものが異なっているという感じらしい。

それぞれの定義は以下

色相

色の種類を表す。赤なのか青なのか緑なのかは、この値をみれば分かる。 Gimpでは、0～360

彩度

色の鮮やかさを示す。いわば、その色らしさみたいなもので、 数値が高いほど、色がなんなのか分かりやすい。数値を低くすると、グレーっぽい色になっていく。Gimpでは0～100

明度

色の明るさを示す。低くなるほど、黒に近づく。Gimpでは、0～100

で、こういう尺度があると、何がうれしいのかというと、「人から見たときの分かりやすさ」なんでしょう。例えば、RGBで、54:159:28と言われても、いまいちどんな色か想像するのは難しいはず。でも色相、彩度、明度が、108:82:63と指定されたとき、色相108が黄緑だということが分かれば、彩度82で鮮やかさが高いから黄緑だと分かりやすい色で、明度63だからパステルカラーと黒の中間より若干明るいくらいという推測ができてうれしいというわけ。

Webデザインでのテクニックとして、彩度と明度を最大にしてパステルカラーを作ったり、彩度、明度固定で、色相のみ変更して調和しやすい色を作成したり、色々役立つので知っていて損はないんじゃないでしょうか。