東京ガスのWebページでログインボタンをクリックした時のローディングアニメーションが斬新だと話題に

今回は東京ガスのWebページでログインボタンをクリックした時のローディングアニメーションが斬新だと話題になっていることについての記事になります。

東京ガスのローディングアニメーションが斬新

東京ガスのログイン時のローディングの見せ方が斬新。 pic.twitter.com/yuOH9o9nqq
— ckazu (@ckazu) February 6, 2023

よく確認せず tweet してしまいましたが、ブラウザも東京ガスも悪くなく、入れていた Chrome 拡張が悪さをしていました。
Merlin という ChatGPT の拡張です。
体験してみたい方は Chromium 系のブラウザに入れると見れるはず！
— ckazu (@ckazu) February 6, 2023

この件改めて確認してみましたが、Merlin さんはページロード後に、`.loader` というクラスをみな無条件に回転させる CSS を挿入します。
なので、例えばこんな感じで loader クラスをつけてあげれば何でも回せます。
拡張を書くときはもうちょっとお行儀良く書いてほしいものですね pic.twitter.com/PnqO9YQw3l
— ckazu (@ckazu) February 6, 2023

issue あげようと思ったら 2 時間前に上がっていたhttps://t.co/dbD3awqgVY
— ckazu (@ckazu) February 6, 2023

ちょっと補足をぶら下げておくと
* どのサイトでも起こり得る
* .loader は Merlin の通信読込時に表示しCSSで回転させる
* 修正はCSSのセレクタを限定するのが望ましいと思う
* Merlin がやっていること自体は正当なもの

それよりも、回転させるのめっちゃ楽しいですhttps://t.co/VV0O5jjyjv
— ckazu (@ckazu) February 7, 2023

バグの原因はChromeの拡張機能が原因だったようです。「Merlin」というChatGPTを使用するためのWebブラウザプラグインが悪さをしていたようです。拡張機能が崩れの原因になるパターンは気が付きにくいので要注意ですね。

ChatGPT（チャットジーピーティー）はOpenAIが2022年11月に公開したチャットボットです。OpenAIのGPT-3ファミリーの言語モデルを基に構築されており、リアルな会話文を生成することが可能です。

会話だけでなくマークアップ言語のHTMLやPythonのようなプログラミング言語の生成も可能です。また、表計算ソフトの関数も得意としています。