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サポート状況は以下の通りです。

ChromeEdgeFirefoxSafariChrome AndroidSafari iOS
Transitions API111111NoNo111No
View Transitions API ブラウザのサポート状況

関連用語

トランジション

API

APPSWINGBYの

ソリューション

APPSWINGBYのセキュリティサービスについて、詳しくは以下のメニューからお進みください。

Webシステム開発

既存事業のDXによる新規開発、既存業務システムの引継ぎ・機能追加、表計算ソフトによる管理からの卒業等々、様々なWebシステムの開発を行っています。

iOS/Androidアプリ開発

既存事業のDXによるアプリの新規開発から既存アプリの改修・機能追加まで様々なアプリ開発における様々な課題・問題を解決しています。


リファクタリング

他のベンダーが開発したウェブサービスやアプリの不具合改修やソースコードの最適化、また、クラウド移行によってランニングコストが大幅にあがってしまったシステムのリアーキテクチャなどの行っています。

お問い合わせ・ご相談

「システム構築時から大分時間が経過しているのでセキュリティ対策の状況が不安がある」「脆弱性診断を受けたい」「サイバーセキュリティ対策に不安がある。」など、サイバーセキュリティ対策・情報漏えい対策についてのご質問・ご相談などございましたら、何でもお気軽にお問い合わせください。