通常、ページを遷移するときは画面の切り替わりがおこるため、 一瞬画面の切り替わりが生じます。
「View Transitions API」はページを遷移するときに、まるでスマホのアプリのようにシームレスに遷移してくれるCSSです。
これまでは、WebサイトではAJAXやJSフレームワークを使用したりと、簡単に実装できなかった表現方法ですが、View Transitions APIはシンプルなCSSだけで実現できてしまいます。
欠点は、ChromeとEdgeには対応していたもののSafariが対応していないことでした。これが、Safari バージョン18で対応となったため、ほぼ全ての人が「View Transitions API」によるシームレスな画面遷移が可能になったと言えます。 Safari バージョン18は2024年9月に出たばかりなので、クライアントワークで使うにはもう少し時間は必要ですが、バージョン18以下でもページは変わるのでサイト閲覧には問題ないありません。
https://hi-fn.com/test-code/View_Transitions_API_slide/index.html
A-frameには衝突判定がないため、外部ライブラリ「aframe-physics-system」を使うというのが主流のようです。しかしA-Frame v1.3.0以降で効かなくなったようで、残念ながら動かせませんでした。そこでほかの解決策を探ってみました。
VRというと、どうしても専用のヘッドマウントディスプレイやデバイスが必要でプログラムも高度なイメージがあり、気軽に挑戦できないと思ってしまいますが、Javascriptフレームワークの「A-Frame」をつかうとHTMLコーディングのような手軽さでVRコンテンツが作成できる優れものです。
wordpressサイトの場合、カスタムフィールドで入力項目を作ることは、割とよくありますが、項目数が多いと今何を入力しているのか分かりにくくなります。
繰り返しフィールドを使用すると、繰り返した分だけ項目が増えていくので、うっかり違うフィールドに入力していたという事態になりやすく、入力し直しという余計な手間が増えてしまいかねません。
気がつくとデバイスが増えていくにつれて必要なfaviconが複数必要になっていました。
調べると最大で20個以上必要という話もありますが、6個くらいがもっとも多い印象です。
話題のChatGTPの登場でいろいろな仕事がAIに置き換わると言われ、コーディングもAIにできるという主張も見かけますが、はたしで何処まで可能か。
先日、とある案件で一部、ChatGTPを使用してコードを書いてみました。
先日おこなった静的html案件で、途中から数カ国語に展開することがわかり、言語分の変更をどうするか悩みました。
特設サイトで基本的に文字が画像なで、タイトルなどは英語ということもあり、ほとんど変えることはないのですが、HTMLタグのlang属性を変えておきたいところ。
