こんにちは！新卒2年目エンジニアのtakadaです。
本日は先日開催されたWP HACK DAY #6で僕たちのチームが作成したものについてご紹介をできればと思います！
目次
- 背景と概要
- View Transitions APIとは
- 実装内容
- まとめ
1. 背景と概要
WP HACK DAYとは社内のエンジニアがテーマに沿って1日でプロトタイプの開発を行い、発表まで行うイベントです。
そして今回開催されたWP HACK DAY #6のテーマは「ビジョン実現につながるもの」です！
弊社のビジョンである「21世紀を代表するブライダル会社を創る」につながるようなプロダクトの開発をチームで考えていきました。僕たちのチームでは、「結婚式場探しでウエディングパークのサービスを使う時に、もっと心が動く体験ができたらビジョンに近づけそうだよね！」と議論する中でまとまっていきました。
そのため、「ふたりに、心が動く体験を。」をテーマに、サイトのUIを改善することでユーザー体験の向上を図り、もっと心の動く瞬間を作れるような開発をしようとなりました！
そこで登場したのがView Transitions APIです！
2. View Transitions APIとは？
WP HACK DAY開催の目的の1つとして「技術挑戦の機会づくり」というものがあります。
UI改善をするのであれば、チーム内のエンジニア間で前々から気になっていた「View Transitions API」を使用して技術挑戦をしてみよう！となりました。
View Transitions APIとは、今年3月にChrome111とEdge111でリリースされた
「画面の更新前後の異なるDOM要素間のトランジションを簡単なCSSとJavaScriptで実現するAPI」です。
※引用元：https://zenn.dev/yhatt/articles/cfa6c78fabc8fa
これまで画面遷移に対するアニメーションは実現可能ではありましたが、更新前後のページ間でJavaScript/CSSで表示位置を計算する必要があるなど、とても実装することが大変でした。
しかしView Transitions APIを用いることで、非常にシンプルなJavaScript/CSSで実装することができます！
現時点ではSPA向けのAPIが安定版となっており、MPA向けのAPIは実験的に提供されている段階ですので、今後に期待する部分でもあります！
3. 実装した内容
今回はウエディングパークサイトにView Transitions APIを使用してUI改善を図っていきました！
下記動画は一部ではありますが、実装したものとなっております。 (開発環境のみの実装のため、本番環境での実装は行なっておりません。)
見て分かります通り、ページ遷移をする際に横にスライドして遷移していることがわかります。
使用したコードの量もわずか数十行で、とてもシンプルに実装することができました！
今回は横スライドやフェードアウト、縦スライドなど様々なアニメーションに挑戦をさせて頂きました。
その他にも要素を回転させながら遷移させるなど、たくさんのアニメーションを実装することができるので是非挑戦してみてください！
また、今回同じチームの新卒1年目のデザイナーがサイトのUIを改善する施策を自ら考えて実装をしてくれました！行った内容としては、トップの画面に桜を散らせるアニメーション、カルーセルの要素のうち、メインで表示している1つを拡大するアニメーションの実装などです！
「HTML & CSSに対する経験をもっと積みたい！技術挑戦してみたい！」と自ら手を挙げてくれて技術挑戦をしてくれましたが、それをできるWP HACK DAYは「とても良いイベントだな！」と感じた瞬間でした。
4. まとめ
今回、View Transitions APIを実際に使用してみましたが、
「こんな簡単にアニメーションが付けれるんだ！」と感動するぐらいとてもシンプルに実装をすることができました！
ただMPA向けのAPIが実験的に提供がされているという事やリリースが最近という事もあって、まだまだ記事が少なく仕組みの理解及び不具合に対する原因追求に思ったよりも時間がかかってしまいました！
今後MPA向けのAPIが正式にリリースされる事で、記事の量が増えることに期待しつつ、本番導入も是非視野に入れていきたいですね！
次はWP HACK DAY #7ということで、#6よりもさらに技術挑戦できるようにしていきたいなと思います！🔥
