AIと少し仲良くなってみた

前から気になっていたギャラリーの折り畳み開閉ボタンのデザインと挙動について。

▲gif動きます

これを、1つのボタンで開閉できる仕様にしたいと思っていました。
javascriptを使えば実現できそうなのはわかったのですが、ぐぐってもそのものズバリのコードはわからず、いつものコピペ戦法は通用せず。

ゼロからjavascriptを体系的に学ぶのはいつかやりたいけど、今はそういう気分じゃなく。

そういえば、こういう時のAIだなと思い出し、助けを乞うことに。
ChatGPTはよくわからなかったので、登録不要で使えるBing AIに聞いてみました。

続きを読む 🔽

試行錯誤の結果、こんな感じで質問してみたら目当てのコードを教えてもらえました。

▲「1つの」ボタンと言わないと意図が通じないようで、バラバラに独立したボタンを勧めてきます。

▲fontawesomeを使いたいことを明示しないと、innerHTMLではなくtextContentを勧めてくるのでアイコンフォントが使えません。

質問の仕方に少しコツがいりますが、ここまでほぼそのままちゃんと使えるコードを出してくれたことには驚きました。
しつこいくらい細かく指示してあげないと、知識のない素人がそのまま使えるようなコードにはならないですが。
現状、検索エンジンより多少あいまいに検索できるくらいの使用感かなぁと思いました。（それでも物凄い助かりました。ぐぐるだけじゃ絶対こんなすぐに実装できなかったので）

人間との会話と違って、向こうから「それはこういうことですか？」と汲み取るような質問返しをしてくれないので、こっち側に多少の知識がないと会話にならないのかなと思いました。
あと、相手が人間だったら、絵や図を描いて説明することができるので、それができないAIに対して、知識がなくふわっと浮かんでるだけのやりたいことを全部文字にして説明するのも結構大変な気がしました。
逆に言うとそれができるようになったらマジで下手な人間のオペレーターよりよっぽど優秀ですね…。

引き合いに出して申し訳ないけどロリポップのAIアシスタントは凄く期待した割に思ってたものと全然違ってガッカリしたのでこれは嬉しい驚き。

最終的に出来上がった開閉ボタンはこんな感じ。

▲gif動きます

狙い通りの挙動をしてくれて大満足です！！
なおトグルボタンのサイドバー常駐はPCのみで、液晶の小さい端末では本文内に設置しています。

続き>>252
　

#AI #手打ちサイト #カスタマイズ #javascript #備忘録