[レポート]「MTDDC MEETUP HOKKAIDO 2018」に参加してきました〜SVG is on your side.〜

2018年6月9日（土）に札幌で「MTDDC MEETUP HOKKAIDO 2018」が開催されました。
デザインやIllustratorのセッションがあるのでどうですか？とお声がけいただき、初めてセッションを聴講しに行ってきました。

MTDDC MEETUP HOKKAIDO 2018

こちらのブログでは、「SVG is on your side.」についてレポートします。

セッション概要

勧告から10年以上を経て、ようやく脚光を浴びはじめた遅咲きの画像フォーマット「SVG」。
マルチデバイス対応が当たり前となった今、アクセシビリティやパフォーマンス、コンテンツファーストといった、ビジュアルそのものとはまた別の視点での「デザイン」が重要視されるようになってきました。そんな状況下において、このSVGならではの、担える機能や使用法があります。
SVGの特徴を包括的に知っていただいたうえで、需要があるであろうアニメーションについて重点的に紹介いたします。

セッションレポート

登壇者プロフィール

株式会社まぼろし CCO／デザイナー 松田直樹 氏
ゲーム業界にて企画開発に従事した後、web業界に転身。webサービス・アプリ、管理画面等の情報・構造設計、UI設計を得意として数多くのデザインを手がける。SVGが好き。
主な著書に『これからのWebサイト設計の新しい教科書』（共著）、『Web制作者のためのIllustrator＆ベクターデータの教科書』（共著）、『Webサイト、これからどうなるの? キーワードから探るWeb制作の未来像』（共著）などがある。
また、ライフワークとして日本史の歴史系メディア運営、ライティング活動も行っている。

SVGがどんな場面で使われているのか

今や、いろいろなところでSVGが使われている。
企業ロゴ・アイコン、Google Analytics、Photoshopのカラーフォントなど。

SVGの特徴

XML文書である

• すべてが要素（DOM）
• 文字情報を内包
• 再利用可能

HTML内に直接含めることができる

• 外部ファイルを画像として表示させる
• HTMLの中にSVGコードを置く

viewBox（座標系）の概念

• viewBox：描画領域の座標系を定義
• width / height

非破壊な効果（フィルター、マスク、パターン）

アニメーションの実装方法が豊富

• SMILE：要素だけでアニメーション
• CSS Animationsアニメーション：CSSのアニメーションも使える
• JavaScript：なんでもできる

SVGアニメーション

【JSによるSVGアニメーション】
Q,どのライブラリを使う？
A,とにかく動かしたいならTweenMax

どういったときにTweenMaxを選ぶのか。

• DOMアニメーション専用ライブラリである。
• リクエストアニメーションフレーム（英語）で動作がなめらか。
• 非エンジニアでもそれっぽく動かせる。
• タイムライン機能が強力である。

～やり方～

1. イラストレーターで絵を書く



2. レイヤーの動かしたいオブジェクトに、しっかりレイヤー名をつける
3. 書き出しの際に、オブジェクトIDをSVGに設定する
4. 静止画のSVGファイルを保存

ーここからJavaScriptー

5. タイムラインのインスタンスを用意



6. 山を動かす



7. つづいて太陽と気球を動かす



8. 動かしたい順に積んでいくだけ



9. 複数の要素をまとめて動かす
10. さらに複数の要素をまとめて動かす



11. タイムラインを関数化して、イベントリスナをバインド



12. 複数のタイムラインを新たなタイムラインに合体

これだけ覚えておけば動かせる！

• from()
• to()
• fromTo()
• set()
• staggerFrom()
• staggerTo()
• staggerFromTo()

とにかく、タイムライン機能が細かい調整に効く。

【途中から動かす】

【スピードを調整可能】

このようにTweenMaxを使っておけば、あとからでも微調整が容易である。

SVGならではのこと

• SVGは一枚絵の「中身」を動かせる
• SVGは「属性」「CSS」で作られている→属性の値は動かせる（ViwBox、filter）
• SVGは最新のCSSも使える（CSS Variablesなど）

まとめ

SVGとは、すばらしきかな器用貧乏である。
大きく使っても、小さく使っても、動かしても、静止画でもOK＝Scalable（拡張可能）

感想

SVGは聞いたことはありましたが、実際にどんなものかがよくわかっていなかったので、このセッションを楽しみにしていました。まさかここでJavaScriptが出てくるというのは予想外でしたが、とてもわかりやすいセッションで素人の私でもできそうな気がしました。アニメーションは一切やったことがないですが、機会があればやってみたいと思います。