ヒカラボ at 2014.11.4 https://atnd.org/events/56949 にてお話しさせていただいた際の資料です。 Q co.,ltd.【株式会社キュー】 http://www.q-co.jp/

1. Q（キュー）サイトに学ぶ、
演出のためのHTML5
面白法人カヤック本多大和

2. 自己紹介
本多大和
ほんだやまと
面白法人カヤック所属
HTMLファイ部リーダー
@calmbooks
http://calmbooks.tumblr.com/
HTML5 / WebGL / Unity

3. 最近つくったもの

4. PIXEL LAND @ 東京デザイナーズウィーク2014
ユーザーがマグネットを組み合わせてつくったピクセルアートをWebサイト
上に集め、デジタルの空間内にピクセルアートの街をつくる作品。
WebGLにより、3Dでビジュアライズ。
http://www.tdwa.com/2014/exhibitors/details/005754.html

5. FONTA 一人一文字みんなでつくるフォント
サイト上でユーザに1人1文字書いてもら
い、約7000人で1つのフォントをつくる
サイト。
つくったフォントはダウンロードできた
り、Webフォントとして使えたりする。
http://fonta.kayac.com/

6. 紹介させていただく事例

7. Q co.,ltd.
株式会社キューコーポレートサイト
広告からアパレルまで、多岐にわたる
デザインを手がけるデザイン会社Q（キュー）
赤ペンで◯を書くと動画がでるなど、
前衛的な表現を取り入れたコーポレートサイト
http://www.q-co.jp/

8. Canvas？

9. <canvas></canvas>
グラフ、画像処理、ビジュアライズ、etc.

10. サイト上にペンで描く！

11. ・HTML5 Canvas 使用（ペン自体はDOM）
・mousemoveイベント時のマウス座標を利用して描画

12. ● mousemoveのマウス座標
moveTo、lineTo で結ぶだけだと滑らかな線にならない...

13. 1. マウスの通った各座標（黒い点）の中点を算出（黄色い点）
2. 各座標（黒い点）をハンドルに、2次ベジェ曲線で結んでいく
→ 味のある滑らかな線に！

14. ページ上どこにでも描ける！

15. DOMの上にも、動画の上にも、どこにでも描ける

16. ドラッグ中は、Canvasがページブロック
（セクション）全面に広がっている

17. mouseup時に、必要なサイズにCanvasをトリミング

18. ◯を描くと◯の中に動画！

19. ・始点と終点が近ければどんな形でもいける
・Tumblrで社員さんが日々投稿している
・1つの動画につき2つのCanvas

20. 1. mousemoveでの座標群を配列に保持しておく
2. 座標群を結んだパスで、動画をclip() ！（マスクみたいな）
3. 線のほうは描き終わったら更新不要なので、更新が必要な
動画とはCanvasを分けた（そのほうが軽かった

21. スクロールで描かれる筆跡！

22. ・スクロールに連動して描かれていく
・社長直筆の手書き文字

23. こんな感じの座標をまとめた配列を持っておき、
スクロール値から計算して適切な数の点を結んで描画

24. 社員さんの手書きメッセージ

25. ・社員さん一人一人オリジナルの手書きメッセージ
・メンバーページ（/member）にいくと、筆跡アニ
メーションが描かれる

26. ・管理画面内に専用のツールを作成
・ドラッグで描くことで、座標を集めた配列を生成できる
・新しく社員さんが入社してもこのツールで追加できる！

27. ☆やパックマンを描くと・・？

28. ☆を描くと・・？

29. パックマンを描くと・・？

30. 何かが起こる？

31. /img/common/other/check_star.png
表側では使わない、上のような画像を用意

32. 簡易的に画像類似度を求めて検出

33. Thank you !!