この記事の所要時間: 84

引き続き、セミナーの様子を・・・

本日は第3セッション 松田さんのセミナーについてですが第1セッション・第2セッションについて書いています。こちらも併せてどうぞ。
!important #05 -コーダー & フロントエンドに贈るハンズオン祭り- に参加しました! Part 1
!important #05 -コーダー & フロントエンドに贈るハンズオン祭り- に参加しました! Part 2

!important #05 -コーダー & フロントエンドに贈るハンズオン祭り-

2017年10月14日(土)に行われたセミナー

「!important #05 -コーダー & フロントエンドに贈るハンズオン祭り-」に参加しました!

今回も私はスタッフという立場で参加させていただきまして・・・

その上、勉強させていただいた・・・という、大変ありがたい内容でしたので、復習がてらシェアしたいと思います。

今回はハンズオンという性質上、その場にいないと触れられないコードや環境構築もありますので雰囲気と「擬音」で構成されるような気配もありますが、ぜひご覧ください。

第3セッション 松田 直樹(まつだ・なおき)さんのSVG Maniax in FUKUOKA(セッション+ハンズオン)

第3セッション、株式会社まぼろし の松田さんの登壇です。

さぁ、はじまります!!

冒頭からドギモを抜かれます!

イクラの軍艦がカワイイw

写真:SVGデモ いくら びっくりポンの図
イクラの軍艦巻きに顔がついていて クリックすると 顔が 「びっくり」 になって イクラが ほうぼう 散らばる!っていう SVG デモを見せていただきました。

SVG でアニメーションやるならライブラリを使いましょう〜ってことでおすすめを教えてくださいました!

SVG で出来ることの紹介ではフィルターも見せていただきました。

すごいいろいろ出来るんだなぁ〜って感覚。
むしろSVGについてなにもわかってなかったってことね・・・。

こんな資料も教えてくださいました!

ど、同感です・・・・。

このあと実践

こんなことが出来る SVG

こんなことが出来るっていう紹介のあとにコードを見せていただきました。
松田さんもおっしゃってましたが、第2セッションの JavaScriptの理解があったおかげでソースがすんなり入ってくる・・・という感覚になった方も多いのではないでしょうか。

あらためてすごいセミナーです。3本立てのメリットですね。

ハンズオンでは事前にダウンロードしていたファイルを調整しています。
この時間は ai ファイルを開いてオブジェクトにidをつけるところからはじまったのですが
私ですね、マシンに Illustratorが入っていないのでぷらぷらしてました・・・すみません。

でも、最近のIllustratorは SVG出力出来るんですね。素晴らしい。

その後のパラメータを調整して動きを確認するところは本当に面白かった!

調整して家の出方とかいろいろやってみました!
※この後の動画は通常のパターンです。

ちょっとしたアニメーションやちょっとエフェクトが欲しいときにはすごく便利です!

キラーン! おれもやりたいw

皆さん楽しかったようで、感想が・・・

松田さん、大変ありがとうございました!!

大変有意義な内容でした!!(個人的に)

松田さん、質問にもお答えいただいておりました。ありがとうございました!!

Twitter おすすめトレンド入り

最近は !important でTwitter担当しているのは私です!
今回もトレンド入り果たしました!

ご協力いただいた皆様ありがとうございました!!

鍋坂先生

セクスィー鍋坂先生はこのセッションでも大活躍!

重ね重ねありがとうございました!!