CSSのBox-Shadowでロアちゃんを描く

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/faf45242-0081-b24d-f801-6aa4e5cf155d.gif" alt="move_roa" width="100%">

####[完成品](http://michinosuke.com/linked/dot-roa.html)

## <img width="30px" alt="dot-roa.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/578d7eb6-7b67-ddf3-edda-b74c6492453c.png">Box-Shadowの仕組み
Box-Shadowプロパティを使えば、簡単に影をつけることができます。
<img width="186" alt="スクリーンショット 2019-04-24 19.15.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/09ca2b99-0993-b958-5cce-9003b113ef11.png">

```css
box-shadow:8px 8px 8px black
```
---
今回はドット絵なのでぼかしは使いません。

<img width="173" alt="スクリーンショット 2019-04-24 19.15.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/c9da7dc4-c837-7399-e37e-29e9626d7166.png">

```css
box-shadow:8px 8px black
```

---

影をもっとずらしてみましょう。  
影がありえないところに飛び出してきました。

<img width="255" alt="スクリーンショット 2019-04-24 19.15.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/6a9b90f5-c320-b52b-c28c-647e54372f23.png">

```css
box-shadow:100px 100px black
```
---

影を増やして、色も変えてみましょう。

<img width="362" alt="スクリーンショット 2019-04-24 19.15.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/69dc5fc4-5203-fee0-f049-4950dd674c01.png">

```css
box-shadow:100px 100px crimson
,200px 100px lightgreen
,100px 200px lightgreen
,200px 200px crimson
```

これをもっと増やすと...ドット絵がかけそうですね！！  
その前に、左上に残ってる本体を透明にしましょう。

<img width="261" alt="スクリーンショット 2019-04-24 19.15.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/75fa962c-7d5d-9cf4-7028-e40bb01cdfab.png">

もう原型をとどめていませんが、これで準備は完璧です。

## <img width="30px" alt="dot-roa.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/578d7eb6-7b67-ddf3-edda-b74c6492453c.png">Excelで自動化
ここまで`Box-Shadow:`の説明を読んで、こんなコードを30マス×30マス=**900行**も書くことの大変さが理解できると思います。  
なので、ExcelのVBAで自動化しましょう。

```vb
Sub CellColorToCSS()
    Dim width As Integer: width = Range("width")
    Dim height As Integer: height = Range("height")
    Dim rgb As String
    Dim firstflg As Integer '初回出力を判別するため
    
    Debug.Print ".art.shadow::before{ box-shadow: "
    
    For h = 2 To width + 1
        Debug.Print ""
        Debug.Print "/* " & h - 1 & "列目 */"
        For w = 3 To height + 2
'セルの背景色を取得と同時に、#000000形式の文字列に変換
            rgb = RGBconverter(Sheet1.Cells(h, w).Interior.Color)
            If Not rgb = "#FFFFFF" Then
'最初の出力以外は最初に','をつける
                If firstflg = 0 Then
                    firstflg = 1
                Else
                    Debug.Print ", ";
                End If
                Debug.Print (w - 1) * 10 & "px " & (h - 2) * 10 & "px " & rgb;
            End If
        Next w
    Next h
    Debug.Print "}"
End Sub

'背景色の256^3の整数を'#000000'の文字列に変換する
Function RGBconverter(value As Long)
    Dim R As String
    Dim G As String
    Dim B As String
    

    If value >= 65536 Then
        B = Format(Hex(value \ 65536), "00")
        value = value Mod 65536
    Else
        B = "00"
    End If
    
    If value >= 256 Then
        G = Format(Hex(value \ 256), "00")
        value = value Mod 256
    Else
        G = "00"
    End If
    
    R = Format(Hex(value), "00")
    
    RGBconverter = "#" & R & G & B
    
End Function
```
コメントで少し解説を入れておいたので、参考にしてみてください。  
汎用性を持たせるために、横の長さと縦の長さは`width`と`height`という名前をつけたセルに指定してあります。  

また、`#ffffff`(真っ白、何も色を入れてない）は透過されます。

<!--

*そんなんよりそのExcelファイルよこせ*

という声が聞こえた気がしたので、ダウンロードできるようにしておきました。  
  
<a href="http://michinosuke.com/download/box-shadow.zip">box-shadow.xlsmをダウンロード</a>

-->


## <img width="30px" alt="dot-roa.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/578d7eb6-7b67-ddf3-edda-b74c6492453c.png">対象を知る
これが最も重要な行程になります。  
何事も、相手を知らなければなりません。  
ロアちゃんを描くには、まずロアちゃんを知らなければならないということです。  
動画を見に行きましょう。
↓↓↓

[![ロアちゃんの動画](http://img.youtube.com/vi/lZKjYFjvxQ4/0.jpg)](http://www.youtube.com/watch?v=lZKjYFjvxQ4)

## <img width="30px" alt="dot-roa.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/578d7eb6-7b67-ddf3-edda-b74c6492453c.png">ドット絵を描く
Excelにロアちゃんを描きましょう。  
あんまりよくわからないけど、色数制限はないので、たくさん色を使うといい感じにできる気がします。
<img width="561" alt="スクリーンショット 2019-04-24 15.16.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/707f3c95-ba06-df0f-0fa7-0236b0f437e9.png">


## <img width="30px" alt="dot-roa.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/578d7eb6-7b67-ddf3-edda-b74c6492453c.png">参考
box-shadowについて、とても参考になりました。
[box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる](https://kuroeveryday.blogspot.com/2018/10/draw-and-animate-pixel-art-using-only-css.html)  
  
絵心がない僕が、「ドット絵」で画像検索して一番好みだったので、参考にしながら描きました。  
霰餅粉（あられもちこ）さんという方の絵です。かわいい

<a href="https://skima.jp/profile?id=2274"><img width="300" alt="参考にしたドット絵" src="https://cdn-common.skima.jp/item/152/980/152980/showcase-7b1e65c7f002b76f4a36fe51b9a5a356-20190327004022.jpeg"></a>

## <img width="30px" alt="dot-roa.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/578d7eb6-7b67-ddf3-edda-b74c6492453c.png">HTMLに埋め込む
このHTMLにペーストするだけです。簡単！  
コードの参考にしたサイトを下に記載しています。

```html
<html>
<head>
<meta charset="utf-8">
<style>
html{
background-color: aqua;
}
.container{
width:270px;
height:310px;
margin:30px auto 0;
}
.art{
position: relative;
}
.art::before{
position: absolute;
top:-10px;
left:-10px;
background-color:transparent;
width: 10px;
height: 10px;
content: "";
}

/* ここに生成したコードを挿入 */

</style>
</head>
<body>
<div class="container">
<div class="art shadow"></div>
</div>
</body>
</html>
```


## <img width="30px" alt="dot-roa.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/578d7eb6-7b67-ddf3-edda-b74c6492453c.png">まとめ
### 速度について
`<img src="">`で画像を読み込む一般的な方法と違い、I/Oが発生しないのでやっぱり格段に早いです。  
safariで計測したところだいたい
> box-shadow: **30ms**  
> gif: **300ms**

ぐらい違います。かなりばらつきがあるので参考程度ですが、**1/10**ぐらい早くなりますね！
まばたきが300msらしいので、まばたきより早いです(たぶん)

### スマホ表示について
スマホで表示させると、白い線が入ってしまうことを確認しました。(`iOS 12.2 Safari`)  
スマホの利用が多い今日ですので、これは致命的です。  

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/7dcf1c4e-52a2-ab29-c2a1-3496d4c612d9.gif" width=300px>

### 実用性について
正直、ドット絵程度の容量なら外部ファイルから読み込んでも体感速度は変わりません。  
[阿部寛](http://abehiroshi.la.coocan.jp)さんに勝つためには有効ですが、実用的ではないでしょう。


### ここからどうしてみるか
~~せっかくCSSで書いたのですから、アニメーションをつけてみたいです。~~
つけてみました!
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/faf45242-0081-b24d-f801-6aa4e5cf155d.gif" alt="move_roa" width="100%">
かわいい


[HTML5のCanvasにドット絵を描く](https://qiita.com/Yamazin/items/cdca50471af475e6300a)みたいな記事も見つけたので、box-shadowで描くなんてひねくれたことしないで、正攻法で書いてみたいです。