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のセキュリティサービスについて、詳しくは以下のメニューからお進みください。
Webシステム開発
既存事業のDXによる新規開発、既存業務システムの引継ぎ・機能追加、表計算ソフトによる管理からの卒業等々、様々なWebシステムの開発を行っています。
iOS/Androidアプリ開発
既存事業のDXによるアプリの新規開発から既存アプリの改修・機能追加まで様々なアプリ開発における様々な課題・問題を解決しています。
リファクタリング
他のベンダーが開発したウェブサービスやアプリの不具合改修やソースコードの最適化、また、クラウド移行によってランニングコストが大幅にあがってしまったシステムのリアーキテクチャなどの行っています。
ご相談・お問い合わせはこちら
APPSWINGBYのミッションは、アプリでビジネスを加速し、
お客様とともにビジネスの成功と未来を形作ること。
私達は、ITテクノロジーを活用し、様々なサービスを提供することで、
より良い社会創りに貢献していきます。
T関する疑問等、小さなことでも遠慮なくお問合せください。３営業日以内にご返答致します。
ご相談・お問合せはこちら
APPSWINGBYのミッションは、アプリでビジネスを加速し、お客様とともにビジネスの成功と未来を形作ること。
私達は、ITテクノロジーを活用し、様々なサービスを提供することで、より良い社会創りに貢献していきます。
IT関する疑問等、小さなことでも遠慮なくお問合せください。３営業日以内にご返答させて頂きます。
