##
ぬり絵アプリを
HTML5で作ろう!
[Co-KoNPILe (ここんぱいる) #5](https://cokonpile.connpass.com/event/175698/)(2020/06/13) @furandon_pig
https://furandon-pig.github.io/study-memo/docs/cokonpile/20200613.html
### きょうのおはなし * HTML5でぬりえアプリを作成した話 * https://furandon-pig.github.io/nurie/
### 背景 * 新型コロナウイルス状況下でのStay Home * 各企業によるStay Home施策 * その一つとして「ぬりえ」データの提供
#### ぬりえ * [岩手さちこ](https://twitter.com/iwate_vtuber/status/1258950633794625537) * [JR西日本](https://www.westjr.co.jp/fan/coloring/) * [JR九州](https://www.jrkyushu.co.jp/train/playhome/) * [三菱鉛筆](https://www.mpuni.co.jp/special/nurie.html) * [キユーピー株式会社](https://www.kewpie.com/education/information/coloring/)
#### PDFや画像でのぬりえデータ提供 * 印刷を前提としたデータ * とはいえ印刷するのは少し面倒... * よりお手軽にぬりえを楽しみたい...🤔
### Webブラウザでぬりえが
できれば良さそう!💡
#### Webブラウザでぬりえアプリ * 必要そうな技術要素 * HTML5 Canvas * [Canvasに図形を描く](https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes) * Event * [mosemove event](https://developer.mozilla.org/ja/docs/Web/API/Element/mousemove_event)
## これならできそうだ!😃
(フラグ)
#### しかし、世界はそんなに甘くなかったのです...😭
### ハマりどころ * Canvasに直接描画だとダメ * グレースケール画像。 * 二値化しよう(ただし閾値) * マウスの座標取得(ただしスクロールを考慮)
### Canvasに直接描画だとダメ * [サンプル](https://furandon-pig.github.io/nurie/sample/sample02/index.html) * 画像をCanvasにロードする。 * マウスイベントに応じてCanvasに描画。 * 描画色で下絵が塗り潰される...😭 * ごく当たり前の結果なので対応が必要。 * 下絵とぬりえの2つのCanvasで対応
### グレースケール画像。 * [サンプル](https://furandon-pig.github.io/nurie/sample/sample03/index.html) * ぬりえの下絵はPDF等をPNGに変換して利用 * 白・黒の二色ではない...😭 * PNG変換時に二値化する? * ぬりえアプリ側で二値化する? * 今回はぬりえアプリ側で二値化
### 補足:ぬりえアプリ側で二値化 * [サンプル](https://furandon-pig.github.io/nurie/sample/sample04/index.html) * 下絵を変更しても対応できる * 準備は単にPDFをPNGにするだけ * 下絵を作成する際の手間が減る * ただし適切な閾値は考慮が必要...🤔
### マウスの座標取得(ただしスクロールを考慮) * ペン先とペンのサイズを表現したい * マウスの座標が欲しい * Webブラウザでのマウスの座標 * 単にEvent.{x,y}の取得だと問題がある * スクロールすると値がずれる...😇 * スクロール分を考慮した処理が必要
### まとめ * HTML5でぬりえアプリを作成する話 * Canvasで下絵・ぬりえを分けて処理する * 二値化して下絵と塗り絵を合成する * マウス座標の取得はスクロールの考慮が必要
### ご清聴ありがとうございました😃