我々はCreateJSをどう使うべきか？

2020年にFlash Playerのサポート終了を控えた今、過去にFlashで作られていたようなアニメーションをブラウザで目にする機会が減っています。一方で、UI/UXを重視する人々からは、動きを伴ったマイクロインタラクションに注目が集まっています。動きを作り出す技術は、時代を問わずに求められています。本セッションでは、HTML5時代にCreateJSをどう用いれば効果的なのか、考えるためのヒントをご紹介します。

Transcript

1. 2017.12.7 (Thu)
   我々はCreateJSを
   どう使うべきか？
   世路庵 沖 良矢
   

   View Slide

2. 沖 良矢
   ◉ 世路庵
   ◉ フリーランス10年目
   ◉ インタラクションデザイナー
   @448jp
   おき よしや
   

   View Slide

3. KASHIYAMA the Smart Tailor
   （2017-）
   

   View Slide

4. 黒歴史トリオ
   （2017）
   

   View Slide

5. Web Designing連載
   （2009-2015）
   

   View Slide

6. 『Flash for HTML5』
   ◉ 電子書籍（PDF / Kindle）
   ◉ 全72ページ
   ◉ 価格：864円
   ◉ 著者：沖 良矢、池田 泰延
   ◉ 出版社：マイナビ出版
   

   View Slide

7. CreateJS Tシャツ
   

   View Slide

8. Grant Skinnerも
   着てます！
   

   View Slide

9. 1. アニメーションが持つ力
   2. CreateJSを使いこなすヒント
   本日お話しすること
   

   View Slide

10. アニメーションが持つ力
    01
    The Power of Animation
    

    View Slide

11. アニメーション
    非アニメーション
    時間軸
    

    View Slide

12. フェナキスティスコープ（和名：驚き盤）
    

    View Slide

13. フェナキスティスコープ（和名：驚き盤）
    

    View Slide

14. 画は静止していても
    動いているように見える
    

    View Slide

15. 語源はギリシア語で
    「騙す」
    

    View Slide

16. アニメーション（animation）
    語源はラテン語で「霊魂（anima）」
    

    View Slide

17. 私たちはアニメーションによって
    そこに存在するはずのない
    嘘を作り出すことができる
    

    View Slide

18. webにおけるアニメーションの技術的制約
    ◉ インタラクションとの関係性
    ◉ 多様な画面解像度
    ◉ 再生環境のスペック依存
    ◉ ベースとする技術の縛り
    

    View Slide

19. webにおけるアニメーションの目的
    ◉ フィードバック
    ◉ 世界観の演出
    ◉ ストーリーの伝達
    

    View Slide

20. webにおけるアニメーションの目的
    ◉ フィードバック
    ◉ 世界観の演出
    ◉ ストーリーの伝達
    CreateJSが強みとするのは、
    このあたり
    

    View Slide

21. 転倒ます型雨量計の例
    

    View Slide

22. テキストの場合
    雨量計の内部に、シーソーの支点（転倒軸）上で結合され
    た2つの容器（枡）からなる転倒ますと呼ばれる機構を持
    つ。受水器が集めた降水は一方のますに注ぎ込み、一定量
    （多くは降水量0.5mm相当）がたまると、その重さによっ
    てシーソーが転倒し、降水は跳ね上がったもう片方のます
    に注ぎ込むようになる。これを繰り返して、1時間当たり
    の左右交互に転倒する回数を数えることによって雨量が測
    られる（大雨の時には猛スピードで転倒が繰り返されるこ
    とになる）。
    引用：https://ja.wikipedia.org/wiki/%E9%9B%A8%E9%87%8F%E8%A8%88
    

    View Slide

23. 画像の場合
    引用：http://www.snwm.co.jp/uryou2.html
    

    View Slide

24. テキスト＋画像の場合
    ① 受水口（雨が降り込んでくる所）
    ② 漏斗 （降り込んだ雨を集める所）
    ③ 転倒ます（水を計る所）
    「受水口」からの雨が「漏斗」で集められ「転倒ま
    す」へ雨水を貯める。0.5mmに達すると「転倒ます」
    が倒れ、溜まった雨水を排水する。倒れる事により反
    対側の「ます」へ再び雨水が溜まりはじめる。
    「転倒ます」が転倒をするたびに接点パルスを発生す
    る。これを計測することによって降水量がわかります。
    引用：http://www.snwm.co.jp/uryou2.html
    

    View Slide

25. アニメーションの場合
    アニメーションを開く
    

    View Slide

26. アニメーションにしか
    伝えられないことがある
    

    View Slide

27. CreateJSを使いこなすヒント
    02
    Tips on using CreateJS
    

    View Slide

28. webにおけるアニメーション技術
    ◉DOMアニメーション
    ◉CSS3アニメーション
    ◉Canvas
    ◉GIFアニメーション
    ◉video要素のインライン再生
    

    View Slide

29. DOMアニメーション
    要素のstyle属性を連続的に変更する
    $("#hoge").animate({
    "color": "#ff0000",
    "backgroundColor": "#00ff00"
    }, 1000);
    

    View Slide

30. CSS3アニメーション（Transitions / Animations）
    CSS3で追加されたCSS TransitionsまたはCSS Animationsを利用する
    #hoge {
    color: "#ff0000";
    transition: 1s ease-in-out;
    }
    #hoge:hover {
    color: "#0000ff";
    }
    @keyframes fadeIn {
    from {
    opacity: 0;
    }
    to {
    opacity: 1;
    }
    }
    #hoge {
    animation-name: fadeIn;
    }
    

    View Slide

31. Canvas（Context2d / WebGL）
    HTML5で追加されたcanvas要素を利用する
    
    フォールバックコンテンツ
    
    

    View Slide

32. 主流はコード思考のアニメーション
    three.js
    

    View Slide

33. CreateJSの強み
    

    View Slide

34. Animate CCによる
    アニメーションの
    圧倒的な作りやすさ
    

    View Slide

35. コード思考
    タイムライン思考
    本来Animateが持つ強み
    

    View Slide

36. 事例紹介
    

    View Slide

37. まとめ
    Conclusion
    

    View Slide

38. アニメーションにしか
    伝えられないことがある
    

    View Slide

39. タイムライン思考の
    アニメーションにしか
    伝えられないことがある
    

    View Slide

40. これからのwebにも
    アニメーションの力が必要
    

    View Slide

41. View Slide

42. ありがとうございました
    沖 良矢
    @448jp
    

    View Slide