通常、ページを遷移するときは画面の切り替わりがおこるため、 一瞬画面の切り替わりが生じます。
「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属性を変えておきたいところ。
先日、プロジェクト用の新規サイトをアップするサーバーにおいて、既存の本社データベース内に作成して欲しいという依頼がありました。
接頭語を変更すれば、同じデータベースでもインストール可能ではあるものの、データベースを一緒にするというケースがこれまでになかったのと、そもそもデータベースを一緒にして、今後問題ないのだろうかという不安がよぎりました。
店舗情報のように、入力項目をあらかじめ定義しておくことで、入力のばらつきを無くすのに必須のカスタムフィールド。
基本的にはプラグインでフィールドの設定をしますが、WordpressのカスタムフィールドはAdvanced Custom Fieldsがもっとも有名で、カスタマイズ方法も多く見つかるので安心して使用できるのですが、「繰り返しフィールド」を使うためのアドオンが有料で、金額も年払いなので、なかなか使いづらいところです。
フォントサイズやwidth、heightをレスポンシブルにあわせて可変する方法としては、vw、vhなどを使用するのがオーソドックスですが、デザインはイラストレーターやXDのようなツールで作成されるため、単位がpxになっています。
そのため、これを置き換える計算が面倒であったり、もし自動化できたとしても、デザインと比較する時に単位が違うと面倒であったります。