mieki256's diary

件のアプリのメニュー画面を作る際、「今回はフラットデザインで行くぞ」と意識して作業しました。なんだか流行ってるようだし、このビッグウェーブに、俺も乗らねば！

嘘です…。乗りたくて乗ったわけでは…。

実を言うと、最初の頃はもっとリッチな感じの画面でした。でも、メニュー画面を何枚も作ってるうちに、かなり面倒臭くなってきて。例えば、ボタンの形が複雑になれば、マウスカーソル座標との判定処理も複雑になるわけですよ。

こんなのやってられねー、なんとかインチキできんのか？ てなわけで、シンプルな形のボタンに作り替えてるうちに、「お？ コレ、今流行りの『フラットデザイン』てのにすれば誤魔化せるんじゃね？」と気付いて、舵を切り直したという…。自分、ダメ過ぎですね。

ちなみに、配色に関しては、 _Flat UI Colors というサイトを参考にしました。更に、このサイトで紹介されてる配色を、GIMP、Inkscape で使えるパレットファイル(.gpl)にして配布してくれてる方もいまして。コレを、Inkscape と GIMP に入れて作業しました。

_Rok Fajfar : Flat UI Color Palette for Inkscape / Gimp
_rfajfar/gplflat - GitHub

件の配色だけを使うよう心掛けてる限りは、パッと見でそれっぽくなるのでオススメ…かどうかは知りませんけど、デザインについてはド素人の自分でもソレっぽくなったので助かりました。ありがたや。

DXRuby には、画像を生成する機能もありますので、件のアプリのようなシンプルな画面・シンプルなボタン画像なら、大半はスクリプト上でその都度生成できるはず、なのですが。

その方法では、いくつか問題点があることに気付きまして。故に、画像生成は極力せず、事前に画像を作っておいてソレを表示する方針にしました。配布時のバイナリ容量が大きくなるというデメリットはありますけど、今回は画像で持っておいたほうがいいかなと。

以下、問題になるなと思えた点をメモしておきます。

DXRubyを使って画像生成をするとなると、フォント描画その他の、描画位置調整作業は、以下のようになるわけですが。

1. エディタでスクリプトを修正して数値を調整。
2. スクリプト実行。
3. 位置を確認。
4. 1. に戻る。

こんな作業、やってらんねーです。面倒臭いです。

そんなわけで、レイアウトを決める作業は、Inkscape を使ってやりました。WYSIWYGとまではいかないまでも、GUIでレイアウトを決めて、決まったらその数値をエディタで打ち込むほうが、まだ楽かなと。その関係で、ボタン等も丸々画像で持った方が楽だろうなと。

まあ、本来、Inkscape で作ったSVGファイルをロード・parseして描画する何かを書いたほうが楽だったんじゃないか、という気もしていますが…。

今になって気付きましたが、エディタ上で数値を調整して位置決めする作業って、デバッガを使って作業すれば早く終わったような気も…。もっとも、当時、emacs でスクリプトを書いてたので、デバッガを使うスタイルに気付きませんでした…。Ruby 対応のグッドなIDEが無いのがいかんのや…。

DXRuby は、フォントを描画する際、状況によってアンチエイリアスの有無が違ってくると知りまして。 _DXRuby 1.4.0 リファレンスマニュアル 4.13 フォント描画 で解説されてますが。

当時、試してみたところ、なんだかその時々で描画結果がバラバラだなと首を傾げまして。このあたりハマりそうだったので、最初から別途画像を持っておいて、DXRuby は画像描画に専念させよう、と思った、ような気がします。

たしか、DXRuby 1.5.? dev版では、フォント描画周りでアンチエイリアスの有効無効のオプションが追加された記憶がありますので、DXRuby 1.6.x 等が正式公開された際には、このあたりの状況が変わってくるだろうなと期待していますが。

ただ、Webページのデザインもそうでしょうけど、何としてもこの見た目を寸分違わず提供したいと思った時は、迷わず全部画像にしちゃう、というのはアリじゃないかなと。

DXRubyを使って、自分の好みのフォントデザインでフォント描画をするためには、そのフォントファイルが必要になる ―― スクリプトと一緒に、フォントファイルを同梱しておく必要がありますが。その、フォントファイルの使用条件・ライセンスがどれもなかなか厳しくて、同梱させるのは無理だ、できる限り画像化するしかないなと諦めたのでした。フォント絡みでは、こちらの問題のほうがはるかに大きかったです。

考えてみたら、SVGをparseして、というやり方では、このフォントライセンス問題をクリアできない可能性があるので、あまり意味が無いですね…。描画に使うべきフォントがそれほど選べないのでは…。

このあたり、愚痴り(?)始めると長くなるので、別記事にしておきます。

まあ、思い出したらその都度メモするということで…。