CSS animationをChatGPTとGoogle Bardに作らせてみる

ベトナム語文法変換スクリプトに生成イラストを付与するようになってから、自分のiPhone13 miniの縦画面だとセリフが小さくて読みづらいなと感じていた。


なので、タップすると画面いっぱいに拡大する機能を実装しようと思った。

それで検索して調べると色々な手法があるようだった。

普通、プログラムの世界では車輪の再発明はしないという原則があり、既に存在しているプログラムがあるなら一から作らずに使わせてもらい、手間を減らすのが一般的である。

しかし、JavascriptもCSSも再学習中の私にとっては練習の一環なので既存のスクリプトを流用はせず、ロジックを確認して自分で実装するのが良いと判断して実装。

CSSのclassで拡大時のclass、zoomを別途用意してJavascriptでclassを書き換える。

この方針として実装。ちょっと悩んだところもあったが無事実装完了。


タップして拡大するだけでなく、再度タップすると縮小する処理も実装完了。

ここまで来て、拡大、縮小時にアニメーションで徐々に拡大、徐々に縮小するようにしたいと思った。

またちょっと調べるとCSSのアニメーション処理にはtransitionとanimationがあるらしい事がわかる。

どちらで実装するのが良いかはちょっとわからなかった。

そこでふと思った。ChatGPTに聞いてみようと。

     以下のCSS class right_sideからzoomにjavascriptで切り替えます
その際にcss animationで50%から100%に1秒で変化させたいです
css animationを追加してほしい
     .right_side{
width:50%;
float:right;
      }

      .zoom{
width:100%;
float:right;
      }

するとChatGPTからは以下の返答

ChatGPT
       .right_side{
width:50%;
float:right;
  transition: width 1s;
      }

      .zoom{
width:100%;
float:right;
      }

このアニメーションは、.right_side要素の幅を変更する際に1秒の時間をかけて滑らかにアニメーションさせます。.zoomクラスに切り替えるだけで、幅がアニメーション付きで変化します。

このCSSをHTMLファイルの<style>タグ内に追加するか、外部のCSSファイルに保存してリンクしてください。

CSS animationではなくtransitionを用いている。

そして.zoomクラスに切り替えるとアニメーション付きで変化すると説明があるが、どう見ても.right_sideに切り替えるときにアニメーション付きになり、.zoomの拡大時にはアニメーションしない。

説明とCSSが逆になっている。

しかし、まぁ人間が間違いに気がつけば十分役に立つ。

拡大側の.zoomにもtransitionを追加して実装してみるとなめらかに拡大縮小出来るようになった。

ChatGPT-4にも同じように依頼すると、同じコードが生成された。つまり同じミスをしている。GPT-4の違いはどこでアニメーションを指定しているかをコメントに記載されている点と、Javascriptでclassを切り替える方法も付記されていた点。

こうなるとGoogle Bardにも確認してみたくなる。

Google Bard
CSS
.right_side {
  width: 50%;
  float: right;
}

.zoom {
  width: 100%;
  float: right;
  animation: zoom 1s ease-in-out forwards;
}

@keyframes zoom {
  0% {
    width: 50%;
  }

  100% {
    width: 100%;
  }
}
このCSSを追加することで、.right_sideクラスの要素の幅が50%から100%に1秒かけてアニメーションで変化します。


お、Google BardはCSS animationをきっちり使っている。それに.zoom側をアニメーションさせているので要望通り。
この比較ではGoogle Bardの圧勝でChatGPTはGPT-4でも間違った返答をしている。
実装したアニメーション動作はこの様になっている。



なお、アニメーション動作自体はどちらもほとんど同じで1秒間の間に拡大縮小が行われる。
拡大側の動作はどちらも変わらないが、縮小側の動作についてはページ初回表示時に差がある。
ページを開く時、transitionの方は初期値の縮小状態のまま普通にアニメーション無しで表示される。
animationの方はページを開くときに、拡大状態から縮小状態にアニメーションして表示される。
初期値が縮小状態である事を考えるとアニメーションしないtransitionの方が適切に思えるし、SEOの観点からは読み込み中に画面が動くとCLS値の減点になるのでtransitionの方が良いことになる。
animation指定してしまうとページ読み込み中に100%の画像が表示されて縮小されていくのでSEO的にマイナスなのは勿論、ちょっと鬱陶しく感じるかもしれない。

またtransitionは一行CSSを付与するだけのシンプルな構造だが、animationの方は@keyframesで動作を指定するので行数が多い。

シンプルでわかりやすく、SEO的にもtransitionで実装しておくのが無難に思える。
だがしかし、面白いからGoogle Bardが作成したanimationの方で本番反映しておこう！







コメント

コメントを投稿

このブログの人気の投稿

Googleスプレッドシートの正規表現置換で改行文字

イメージ
Googleスプレッドシートでは正規表を用いた置換が行えて便利だが、置換文字列に\nといった改行文字を入れても文字として\nが入ってしまい改行が出来ない仕様になっている。 しかし、Googleスプレッドシートの正規表現では検索文字列をキャプチャして置換文字列に利用することが出来るので、もしかして改行をキャプチャしてしまえば置換文字列に改行を使うことが出来るんじゃないか？　と思った。  試してみる。 まず、セル内改行を行って 改行 改行 改行 と文字を並べる。  ここで検索対象文字列は(\n)と改行をカッコでくくってキャプチャー対象文字列にする 置換文字列には$1$1とキャプチャーした文字を二つ並べる これで改行が二重になって一行空行が入れば成功    出来た！ 改行 改行 改行 と改行が二重になって空行が増えている！
続きを読む

名作と定評のあるスーパーファミコンの『ザ・モノポリーゲーム２』を今更ながら遊んでみた

イメージ
モノポリーは1935年の販売開始から売れ続けている定番ボードゲームである。 過去の記事にも書いているようにコンピューターゲームとしても移植されているが、その出来は様々であり、良質な移植もあれば、低品質の移植もある。  今回スーパーファミコン版のモノポリーを遊ぼうと思ったのは以前の記事に記したとおりニンテンドースイッチ版の『モノポリー』を遊んでいたらコンピュータープレイヤーが弱すぎた事。 あまりに弱いコンピュータープレイヤーはゲームの張り合いがなくなる。 コンピュータープレイヤーを最高レベルにしても駆け引きも何もなく、こちらが揃ってしまう条件でも簡単に交渉に応じてしまうので負けるのが困難な内容になっている。 詳しくは以前のレビュー記事に記した。 スーパーファミコンの『ザ・モノポリーゲーム２』 『ザ・モノポリーゲーム２』は1995年にトミーから発売されたスーパーファミコン用のゲームソフト。今から26年前のものであり、これが今現在販売されているスイッチ版よりできが良いというのも不思議な話しではある。 しかし、実際に遊んでみると画面デザインの古さ等は感じるものの、面白さでは確かにスイッチ版とは比べられないほど面白いと感じた。 『ザ・モノポリーゲーム２』には対戦モードと一人でプレイで世界チャンピオンを目指すモードが有る。 そしてどちらのモードも共通で個性的なコンピュータープレイヤーが用意されている。 スイッチ版のように無個性で強さが３段階選べるのとは違い、それぞれが異なる見た目、異なる口調、異なる好み（主にカラーグループ）が設定されており、人間と対戦しているような楽しさがある。 そして、コンピュータープレイヤーの強さについてはスイッチ版よりかなり強く、中級クラスキャラでもスイッチ版の『難しい』より遥かに強い。 最強キャラは監修を行っているモノポリー世界大会のチャンピオンをモデルにしたキャラクターが登場する。 対戦モード 対戦モードは人間が１〜５人となっており、５人に足りない場合はコンピュータープレイヤーを選び５人対戦となる。 モノポリーの基本ルールは２〜８人であるが、最も面白いとされるプレイ人数が５，６人と言われるのでこのような仕様になったのであろう。 ゲームバランスの調整、コンピュータープレイヤーの思考ルーチンの調整を考えても５人に限定しておいたほうが強い思考ルーチ...
続きを読む

Googleスプレッドシートのimportxml関数をhtmlに使う

イメージ
 importxml関数は前回記したようにxmlを出力するAPIを利用することが出来る。前回の記事『 Googleスプレッドシートのimportxml関数でWikipedia API（単語の各言語表記を取得） 』 Googleスプレッドシートにはimporthtmlという関数もあるが、こちらはhtml内にある表やリストを指定して取得する関数であり、使いみちが限られる。（まともに使ったことがないので詳細不明） htmlに対しての利用 importxml関数はhtmlに対しても使用できる。 例えば前回APIで取得したWikipediaの情報をAPIを使わずにhtmlから直接取得してしまうことも出来る。（通常APIを用意してあるサイトはAPIを用いて取得すべきなので、これはあくまで例として掲載しているのみであり、APIが用意されているサイトをhtmlでの取得はしないほうが良い） =IMPORTXML("https://ja.wikipedia.org/wiki/"&B6&"","//title") この例だとB6セルに入力したWikipediaの記事名のページからxpath でtitleタグを取得するよう指定しており。ページのタイトルが取得される =JOIN("",IMPORTXML("https://ja.wikipedia.org/wiki/"&B6&"","//*[@id='mw-content-text']/div[1]/p[1]")) さらに、このように指定すると、記事の要約も取得出来る。 JOIN関数で囲んでいるのは記事が複数の段落になっている場合があるためである。xpathで段落<p>タグを指定している為、複数ある場合配列となり、複数セルに展開される。 複数セルに展開したほうが良い場合はJOINで囲む必要はないが、文章が一つのセルに収まってほしい場合はこのようにJOIN関数で配列を一つのテキストにする。 こちらの画像ではLinuxを入力した行とUbuntuを入力した行の２行があり、それぞれtitleと要約を取得しているので計４つのimportxml関数を指定した...
続きを読む