引き続き、セミナーの様子を・・・
本日は第３セッション 松田さんのセミナーについてですが第１セッション・第２セッションについて書いています。こちらも併せてどうぞ。
!important #05 -コーダー & フロントエンドに贈るハンズオン祭り- に参加しました！ Part 1
!important #05 -コーダー & フロントエンドに贈るハンズオン祭り- に参加しました！ Part 2
!important #05 -コーダー & フロントエンドに贈るハンズオン祭り-
2017年10月14日（土）に行われたセミナー
「!important #05 -コーダー & フロントエンドに贈るハンズオン祭り-」に参加しました！
今回も私はスタッフという立場で参加させていただきまして・・・
その上、勉強させていただいた・・・という、大変ありがたい内容でしたので、復習がてらシェアしたいと思います。
今回はハンズオンという性質上、その場にいないと触れられないコードや環境構築もありますので雰囲気と「擬音」で構成されるような気配もありますが、ぜひご覧ください。
目次[閉じる]
第3セッション 松田 直樹（まつだ・なおき）さんのSVG Maniax in FUKUOKA（セッション+ハンズオン）
第３セッション、株式会社まぼろし の松田さんの登壇です。
さぁ、はじまります！！
冒頭からドギモを抜かれます！
GoogleアナリティクスのグラフもSVGだよ、というお話から始まった松田さんのSVG Maniax in FUKUOKA！すべての図形は要素ごとにtitleなどを付与、文字データを含められる、つまりアクセシビリティを確保できる。いくらの軍艦がカワイイ。 #important05
— サチコ＠日日是好日でいこう (@analogtan) 2017年10月14日
イクラの軍艦がカワイイｗ
イクラの軍艦巻きに顔がついていて クリックすると 顔が 「びっくり」 になって イクラが ほうぼう 散らばる！っていう SVG デモを見せていただきました。
SVG でアニメーションやるならライブラリを使いましょう〜ってことでおすすめを教えてくださいました！
松田さんのおすすめ：GSAP, the standard for JavaScript HTML5 animation _ GreenSock https://t.co/dlOlpFcATS #important05
— おゆき (@kurokoroll) 2017年10月14日
SVG で出来ることの紹介ではフィルターも見せていただきました。
SVG Filter Sample #01 – Capcha Text https://t.co/A8sH2aqLPB#important05
— 我流（ウエスター） (@Garyuten) 2017年10月14日
SVG Filter Sample #02 – Image2dot https://t.co/rqRfOAMjgm#important05
— 我流（ウエスター） (@Garyuten) 2017年10月14日
SVGは
width, heightと
viewBoxと、
ときどき preserveAspectRatioが大事#important05— 我流（ウエスター） (@Garyuten) 2017年10月14日
すごいいろいろ出来るんだなぁ〜って感覚。
むしろSVGについてなにもわかってなかったってことね・・・。
こんな資料も教えてくださいました！
松田さんの「ハマるSVG」。超おすすめ。 #important05https://t.co/b8o44Zn2LM
— まえぽん (@maepon) 2017年10月14日
ああ、おれはSVGのSの字もわかっちょらんかったんやなぁ…。SVGすげぇ。 #important05
— ゆうてん🍔 (@cloud10designs) 2017年10月14日
ど、同感です・・・・。
このあと実践
こんなことが出来る SVG
こんなことが出来るっていう紹介のあとにコードを見せていただきました。
松田さんもおっしゃってましたが、第２セッションの JavaScriptの理解があったおかげでソースがすんなり入ってくる・・・という感覚になった方も多いのではないでしょうか。
あらためてすごいセミナーです。３本立てのメリットですね。
SVGでこんなことが出来る！
これからこの作り方。
SVG Maniax in FUKUOKA
松田 直樹さん のセッション#important05 pic.twitter.com/XWBGagOox6— !important ’17/10/14 (@important_sem) 2017年10月14日
ハンズオンでは事前にダウンロードしていたファイルを調整しています。
この時間は ai ファイルを開いてオブジェクトにidをつけるところからはじまったのですが
私ですね、マシンに Illustratorが入っていないのでぷらぷらしてました・・・すみません。
でも、最近のIllustratorは SVG出力出来るんですね。素晴らしい。
ハンズオンセミナー
皆さん、手を動かしながら聞いてます！SVG Maniax in FUKUOKA
松田 直樹さん のセッション#important05 pic.twitter.com/ZYJSJjFAO8— !important ’17/10/14 (@important_sem) 2017年10月14日
その後のパラメータを調整して動きを確認するところは本当に面白かった！
サンプルをいじって楽しくなってきました！
SVG Maniax in FUKUOKA
松田 直樹さん のセッション#important05 pic.twitter.com/22cQM1BDTj— !important ’17/10/14 (@important_sem) 2017年10月14日
調整して家の出方とかいろいろやってみました！
※この後の動画は通常のパターンです。
楽しい！サンプル
SVG Maniax in FUKUOKA
松田 直樹さん のセッション#important05 pic.twitter.com/4LVrh59No3— !important ’17/10/14 (@important_sem) 2017年10月14日
ちょっとしたアニメーションやちょっとエフェクトが欲しいときにはすごく便利です！
ちょっとしたエッセンスとして使えるテクニック！
たまにキラーンと光るとか（笑）
SVG Maniax in FUKUOKA
松田 直樹さん のセッション#important05— !important ’17/10/14 (@important_sem) 2017年10月14日
キラーン！ おれもやりたいｗ
皆さん楽しかったようで、感想が・・・
SVGとTweenMax、これは悪ふざけして遊んだら覚えるやつかもｗ
#important05— ばなさん (@banashade08) 2017年10月14日
松田さん、大変ありがとうございました！！
松田さんのセッション
終了しました！ありがとうございました！！
SVG Maniax in FUKUOKA
松田 直樹さん のセッション#important05 pic.twitter.com/Wt4Q2Kt5IG— !important ’17/10/14 (@important_sem) 2017年10月14日
大変有意義な内容でした！！（個人的に）
松田さん、早速質問にお答えいただいております。
ありがとうございます！！
SVG Maniax in FUKUOKA
松田 直樹さん のセッション#important05 pic.twitter.com/yNK5Gb1EHp— !important ’17/10/14 (@important_sem) 2017年10月14日
松田さん、質問にもお答えいただいておりました。ありがとうございました！！
Twitter おすすめトレンド入り
最近は !important でTwitter担当しているのは私です！
今回もトレンド入り果たしました！
#important05
おすすめトレンドに。 pic.twitter.com/r6jxfcvvin— 株式会社ジーティーアイ@社員募集中 (@gtijp) 2017年10月14日
ご協力いただいた皆様ありがとうございました！！
鍋坂先生
セクスィー鍋坂先生はこのセッションでも大活躍！
座談会の前に
カメラマン 鍋坂先生のご紹介
本日はありがとうございました！！#important05 #セクスィー #巨匠 pic.twitter.com/mqnOMpYsxZ— !important ’17/10/14 (@important_sem) 2017年10月14日
重ね重ねありがとうございました！！
