suin.io

D3モジュール用モジュールアイコンを楽しく作る方法

suin2008年7月10日

一アイディアとして、D3モジュール用のモジュールアイコンの作り方を提案したいと思います。こまごましたところですが、D3モジュールの問題点を挙げると...

  1. 複製したモジュールのアイコンのデザインがまったく同じで、ぱっと見区別がつかない。
  2. アイコンにモジュール名が動的にプリントされるが、フォントがどことなくぎこちない。

そこで今回、アイコンがぱっと見わかりやすく、プリントされるモジュール名もそれなりになるようにコーディングしなおしてみました。しゃのさんの「システムロゴメカ」を参考にした上で、主に講じた対策は次です。

  1. 背景色をモジュール名によって変える。(もちろん動的に)
  2. プリントされる文字はドットではっきりとプリントするようにする。(もちろん動的に)

そして、できあがったのがこれです↓

さて、いかがでしょうか?個人的には整然としていてかなり良い感じだと思います。ロジック的には、モジュール名をシードにmt_rand()で背景色を生成し、ロゴ画像とマージ。その上に、文字をドットで描画する。という至って単純な仕組みです。(もちろん、GDが使えるというのが前提ですが。)ランダムでロゴの背景色を決めますが、モジュール名(正確にはディレクトリ名)が変らない限り、一端決まった色も変りません。なので、毎回色が変って混乱するなんていうことはありません。ちなみに、ランダムで背景色が決まる関係で、管理者はおろか作った私すらもどんな色になるかは、実際に画像を見てみなければ分かりません(笑)それがまた楽しみでもあるかと思います。

どんなコードか気になる人は↓を見てください。(リリース前で恐縮ですが)

RELATED POSTS