こんにちは！CAMPHOR- 運営メンバーのPanoramaです！

12月18日(土)にピクシブ株式会社のエンジニアの方をお招きして「【pixiv】Webフロントエンドを学ぼう ~ CSSアニメーション・画像変換・配信エンジン ~」というイベントを開催しました！

（↓アーカイブ）

全体の参加者は177人でした。ご参加いただいた皆様ありがとうございます！

それでは実際にイベントがどのような感じだったかご説明します！

ImageFluxのしくみ

担当してくださったのは、ピクシブ株式会社技術開発本部配信技術部におられるusaさんです。

ImageFluxは上の画像にある通り「画像変換・配信エンジン」です。

画像はさまざまなサービスの至るところで使われますが、その容量のことを考えていないとすぐにパフォーマンスが悪くなってしまします。

そして画像を転送する際にはサーバー代が嵩んだり、ユーザーの通信量を多く使用したりとサービス開発者と利用者双方に負担がかかります。

本トークでは最も素朴な画像サイズの指定(クライアントサイドリサイズ)から始まり、ImageFluxの嬉しさやどのように使うのかの簡単なレクチャーをしていただきました。

国内でも最大級に大量の画像を扱うピクシブさんらしい、すばらしいサービスだと改めて感じました。

(実は筆者も以前携わったサービスで大変お世話になりました。)

これから始めるCSSアニメーション

こちらを担当してくださったのは、マーケティング＆ユーザーグロース事業部プレミアムサービス部所属のフロントエンドエンジニア、その他さまざまなCSSアニメーションを活かしたLPを多数作成されている yui540 さんです。

最初にいくつか実際のCSSアニメーションをお見せいただいたり、CSSアニメーション、Webアニメーション技術について講義いただきました。

筆者は初めて知る技術がたくさん出てきてとてもわくわくしました。

(例えば AfterEffects, lottie-web など初めて言葉を知りました。)

そしていよいよCSSアニメーションのハンズオンです。

今回扱うのは animation プロパティとその周辺知識です。まず各プロパティの役割をざっくりと(実際に目で見ながら)確かめて、いくつかのCSSアニメーションの実装に取り掛かります。

またアニメーションの実装方法を考える部分では、パフォーマンスに関して大きな違いが発生する例をご説明いただきました。

筆者は「CSSアニメーションのパフォーマンス」を考えたことがなかったので目から鱗でした...

そして最初に予定していたすべてのCSSアニメーションを実装して終了です。

今回のイベントでは「ImageFlux」や「CSSアニメーション」等から、なぜピクシブさんのサービスのUI/UXが素晴らしいと感じるのか、その一端を垣間見た気がしました。

どちらも大変興味深く、面白かったです。勉強になりました。

参加してくださった皆さん、協賛してくださったピクシブ株式会社さん、そして登壇してくださったusaさん、yui540さん本当にありがとうございました！！！