Milkcocoaのドットをbox-shadowで作ってみました。
Milkcocoaの実際のサンプルはこれ。
これは実際に色を変えたところのデータを送信・保存して、ほかのユーザからも見えるようにしたり、照明と連動させたりしています。
私の作ったやつは色を変えるだけでMilkcocoaとの通信はしていません。
（そしてFirefox対応していません。Chromeでご覧ください）
See the Pen dots color change by natsumi (@mayo31) on CodePen.18228
きっかけは、下記のツイートが流れてきたのを見て。
マジレスすると、1×1 の table や div で canvas 的なことをしたら、DOMツリーの制限であんまり大きな描画が出来なかったはず。
というかだから canvas が生まれたというかなんというか。
— 森建 (@printf_moriken) 2015, 10月 20
もう昔みたいにオセロ作る時 div で cell をつくって、それぞれに click イベントを割り当てなくていいんやなって。
— 森建 (@printf_moriken) 2015, 10月 20
milkcocoaのドットはdivだった（僕はcanvasで作った)
— ひゃくそん (@hyakuson) 2015, 10月 20
これを見て、たったひとつのdivで麻雀牌も描画できるCSSすごいの記事で紹介したbox-shadowの表現が自分の中で流行っているので、これでやってみたいなぁと思って作りました。
パフォーマンスとかはどうなんでしょうね。
ただCSSでこういうことできるぜっていうのをアッピールしたかっただけなんや…
同じく手前味噌な記事ですが、画像を使わずにcanvasで描画した日本地図SPAデモで紹介している不動産のサイトなんかは、Firefoxだとすっごく重くなるのでcanvas使うにしてもきっとjsをうまく書かないといけないんだろうなぁと。
box-shadowにしても、最近またFirefoxとChromeで解釈・描画が変わってしまってもうどうしたらいいんだかわかりません。
こういうのに対応し続けなければいけないWebの世界はやっぱり大変ですね。
業務アプリはその点は楽。
Milkcocoaのサンプルでは、divがババババッと並んでいて、さらにその中にdivが入っていて、それぞれのdivに同じclass名がババババッとついていて…ってこういうの私は苦手なんです。フレームワークで生成されたソースが嫌いなのと同じ理由。
SEOとか関係ないのわかってる。わかってるんだけど…中身のないdivが並んだり入れ子になっているのを見ると…(；´Д｀)
そういう意味だと私の作ったやつも空divだから嫌なんだけど。
やっぱおとなしくcanvasにするべきなんだろうね～
もしこれをセマンティックにマークアップ！とか目指すなら、ulを使うかな。
liをずらずらーっと並べて、各ドットのカラーコードかなんかをテキストで入れておく。
そのテキストはfont-size:0;color:transparent;にでもしておく。
これならMilkcocoaみたいに各ドット個別でもイベントつけられるし、座標とる必要もないね。
さらに、style属性で上書きするんじゃなく、data-color=”ff0000″とかなんとかdata-カスタム属性使いたい。
[data-color="ff0000"]{background: #ff0000;}
とにかくhtmlから「見た目」の情報を排したいという思想。