View Transitions API
View Transitions APIとは、異なるDOM要素間のアニメーション化されたトランジションを簡単な記述だけで作成することができるメカニズムのことです。
要約すると他のライブラリー等を使用することなく、滑らかな画像イメージの切り替えができるようになるのが、View Transitions APIです。
例えば、動的なウェブページを構成する際に、サムネイル画像をクリックして、メインエリアに配置された画像を切り替える際に、スムーズな画像の切り替えを表現する際に利用します。
近年、iPhoneやAndroidに使い慣れたユーザーが、画像の切り替えが滑らかではないウェブを見ると、古いや使用感に違和感を感じるといった印象を持つといった声が聞こえてくるようになりました。View Transitions APIは、画像の切り替えをスムーズにし、UIを大幅に向上させることができます。
トランジションとは
トランジション（Transition）とは、直訳すると推移、移行、変遷となり、IT用語としては、Webページなどのページ遷移の際に用いられる演出効果のことを指しています。トランジションは、画像と画像を切り替える際に滑らかな切り替わり効果だけではなく、波紋効果やワイプなど様々効果を加えた遷移（手法）が用いられています。
View Transitions APIに対応したブラウザ
ウェブシステムを開発したは良いが、ウェブシステムを利用するブラウザ側が対応されていないのでは十分なメリットを享受することはできません。View Transitions APIの各ブラウザの対応状況は以下の通りです。
ChromeのView Transitions APIサポート
Googleが提供するウェブブラウザ Chromeは、バージョン111.0.5563.64 からサポートView Transitions APIをサポートしています。
代表的なブラウザのサポート状況
2023年3月時点での各ブラウザのView Transitions APIサポート状況は以下の通りです。
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| Transitions API | 111 | 111 | No | No | 111 | No |
関連用語
今更聞けないIT用語集
コンポーネント | 今更聞けないIT用語集
APPSWINGBYの
ソリューション
APPSWINGBYのセキュリティサービスについて、詳しくは以下のメニューからお進みください。
モダンアプリケーション開発
クラウドネイティブ技術とアジャイル手法を駆使し、市場投入スピード（Time-to-Market）を最大化。「進化し続けるアプリケーション」を開発します。初期リリースを最速化し、拡張性と柔軟性を備えた、ビジネスの成長に追従できるアプリケーションを開発します。
DX・AI戦略支援
「何から手を付けるべきか分からない」「AIを導入したいが、費用対効果が見えない」といった経営課題に対し、技術とビジネスの両面から解を導き出します。 絵に描いた餅で終わる戦略ではなく、エンジニアリングの実装能力に基づいた、「実現可能で、勝てる技術戦略」を策定します。
リファクタリング・リアーキテクチャ
「システムが古くて改修できない」「障害が頻発する」といった技術的負債を解消します。既存資産の徹底的な診断に基づき、コードのクリーン化（リファクタリング）や、クラウドへの移行（リアーキテクチャ）を行い、システムの寿命を延ばしコストを最適化します。
ご相談・お問い合わせはこちら
APPSWINGBYのミッションは、アプリでビジネスを加速し、
お客様とともにビジネスの成功と未来を形作ること。
私達は、ITテクノロジーを活用し、様々なサービスを提供することで、
より良い社会創りに貢献していきます。
T関する疑問等、小さなことでも遠慮なくお問合せください。３営業日以内にご返答致します。
ご相談・お問合せはこちら
APPSWINGBYのミッションは、アプリでビジネスを加速し、お客様とともにビジネスの成功と未来を形作ること。
私達は、ITテクノロジーを活用し、様々なサービスを提供することで、より良い社会創りに貢献していきます。
IT関する疑問等、小さなことでも遠慮なくお問合せください。３営業日以内にご返答させて頂きます。