CSS Loupe(おまけ)とCSSプログラミングの制作について

CSS Programming Advent Calendar 2012の19日目、一週間ぶりです。元バスケ部の友人に「そんなに綺麗なフォームでそんなに入らない意味がわからない」といわれたことがあるくらい美しいフォームに定評のある1026です。CSSフリースローお楽しみ頂けたでしょうか?

さて、今日は元々宣言していたパズルがポシャったのでかるいやつを、ということでCSS Loupeを作りました。JSでたまにあるこういうもののPure CSS版です。

クリスマスっぽい画像を探したら、全体的に赤でちょっと拡大がわかりにくくなってしまったでしょうか…

フィルターかけるボタンとかつけようかとも思ったのですが、付けたところでルーペとしてどうにかなるわけではない(という言い訳で若干面倒くさい)ので辞めました。

適当な解説

画像の上にdivを敷き詰めて、hoverするdivに合わせてルーペが移動。拡大画像はルーペの背景画像になっていて、同じくhoverに合わせて背景の位置が動く仕組みです。元画像と拡大画像の端を合わせるのがちょっと面倒くさかったです。いつも通り、細かいことは、ソース見て下さい。

CSS3でマウス追尾/Mouse Following Arrowあたりと似たような感じのはずです、多分。

コードは短くしよう

できる限り精密に動くように、1×1のdivを敷き詰めようとしたのですが、divの数が云万になり空divとは言え尋常じゃないくらい重くなってしまいました。更に、cssの方はsassさんというかrubyさんというか兎に角その辺に「でかすぎてコンパイル出来ねーよ」と怒られてしまいました。そんなことが起こることを初めて知りました。expandedでコンパイルしてどれくらいだったのでしょうか。単純に考えると10×10の公開作品で6000行なので、1×1なら100倍して60万行?

自動生成できるからといって、サイズが大きくなりすぎるのはやはりよくありませんね。気をつけましょう。(htmlも元はJSで作ったのは秘密)

結局はdivを徐々に大きくしていき、10×10で作りましたがwebkit以外だと未だにかなり重いと思います。

CSSプログラミングについて

作ったものがかるいので、CSSプログラミングの制作について話します。

制作にはどれくらいかかるの?

リアルで人に会うとちょくちょく聞かれます。

実際の作業に関して

「大してかからないんですよ」と答えていますが、実際仕組みを作るということに関しては大してかかりません。特に最近はCSSプリプロセッサーがあるので、CSSプログラミングでよくある面倒くさい繰り返し作業もサラッとやってくれます。

今回の作品群は割りと仕事の空いた時間等でちょこちょこ作っているので何ともいえないのですが、CSS Minesweeperあたりは土日の2日で大体作った気がします。まぁ、二桁時間もかかっていないでしょう。更に、あれは実際にゲームをクリアして作りやすそうな座標をさがすとか、その座標をチマチマhtmlに打つとかそういった作業に時間を食っています。座標打つのは苦痛以外の何モノでもありませんでしたw

CSS Minesweeperは動きがないのでそういった感じでしたが、前回のCSS FreeThrowやCSS Baseballはボールの動きや時間配分を調整するのに時間がかかりました。特に、CSS FreeThrowはボールもCSSで作ったので、その辺や、メーターとボタンの連動に関するデバッグというか調整というか、そういうことに割りと時間をかけています。

まぁ、そういった感じで、CSSプログラミングとはいえ実際の作業は、仕組みを作るより装飾などのほうがよっぽど時間が掛かっています。実際、そこをある程度凝らないと結構な仕組みでもパッと見、大したものに見えなくなりますし、個人的にはゲームとして作ることが多いので見た目をある程度凝ったほうがウケもいいです。そういう意味では、装飾に命をかけたCSSのみで作ったアイコン等のほうが、実際の作業時間としては長いかもしれません。

1%のひらめき

プログラミングにかかる時間は9割が考えたり調べたりする時間で、実際にコードを書くのは1割くらい、などと言う話を聞いたことがありますが、CSSプログラミングに関しても似たようなものです。

ただ、CSSプログラミングにおいてはどう作るかと言うよりは、何が作れるかということを考える時間が長いです。まぁ、「作れるものを考える≒仕組みを考える」みたいなものなんですが。

普段は思いついた時に作るのでいいのですが、今回のAdvent Calenderでは期限が決まっているため、一体何が作れるだろうかと、Flashゲームやスマホゲームを見まくりました。見ても何も思い浮かびませんでしたが…

逆に言えば「あっ、これはCSSで作れそう」というひらめきがなければ、一生作れないかもしれません。

なんでJS使わないの?

ロマンです。

CSSプログラミングをする利点は?

本来の使い方か否かは別にして、CSSには詳しくなれます。また、思わぬバグを発見できたりします。バグを見つけることが利点か否かは置いておくとして、知っておくのはよいことだと思います。先日もテスト用に::before、::afterを使おうとしたら予想以上に面倒くさい現象に出会いました(inputに対する::before、::after)。知らずに実務で遭遇すると詰むようなことも、事前に知っておけるというのは良いことです。(実務で使わないような事のほうが多い気もしますが)

次回

明日は、Tenderfeelさん(16日ぶり2回目)です。急遽名乗り出てくれました。よろしくお願いします。