Gemini Advancedに、ノーコードを卒業するためのコード例を書いてみてもらいました。
いろいろな操作や記述について書いてみたいと思うものの、コードを書いたりするには気を遣うことが多いんですが、このような感じならいくらでも出来そうな気がしています。
で、このシリーズ、今後、定期的にアップしていきたいなと思います。
今回のGemini Advancedへのプロンプトは、全部ドキュメントにして以下にリンクしていますので、細かい内容はそちらをご覧ください。
題して「テキストを装飾するjsとcssのコード例」です。
目次
Gemini Advancedが書いてくれた諸々
以下、弊社のドキュメントにGeminiから書いていただいた諸々を保存していますので、ご覧ください。
概略
今回、htmlの中に書かれたテキストを装飾するためのcssとJavaScriptを書いてみてもらいました。
この例では、ボタンをクリックするとテキストの色とサイズが変わるようにJavaScriptとCSSを組み合わせています。
かなりざっくりしたプロンプトではありましたが、見事に初心者を卒業するために必要な内容になっていると感じています。
テキストエディタでエディタを開きindex.htmlで保存していただき、もう一度エディタを開き今度はstyle.cssで保存していただき、もう一度エディタを開き今度はscript.jsで保存していただきます。
それぞれ保存したhtmlとcssとjsファイルにGeminiが教えてくれたコードをコピペして保存してサーバーにアップします。
本件の概略で言えば、これだけで確認が取れます。
あとは、この書かれている内容を何度も書いていただき、それぞれご自身でアレンジを加えていただいて挙動を確認していただくとよく分かる内容になっているかなと感じています。
申し訳ございませんが、清水はサーバー上での動作の確認までは取っていませんので、もし動かないなどございましたらコメントをいただきたく思います。
恐れ入りますが、よろしくお願いいたします。
コード内容の補足
コード内容を確認したんですが、アレンジを加えたり、出現頻度の高い問題的なそういう部分だけを掻い摘んで補足しておきたいと思います。
htmlの中で「button」タグが使われています。
「button」タグには意味があるんですが、似たように使われているタグもあります。
「input」タグとの違いは知っておいた方が便利かもしれません。
「html button input」と検索するとたくさんの結果が出てきます。
cssのアニメーション
昨今、cssでアニメーションの動きをすることが珍しくなくなってきました。
style.cssの中の3行目の記述です。
transition: font-size 0.3s ease, color 0.3s ease; /* アニメーション効果 */
手軽に要素を動かしたいと思った時には必ず出てきますので、是非、アレンジしてみてくださいませ。
「css transition」と検索すればたくさんの結果が出てきます。
テキストのカラーを変える記述
テキストのカラーを変えるための記述が以下のように記載されていました。
color: red;
ただ、この記述では、今後、いろいろと弊害が出るようにも思います。
世の中には、「カラーコード」というデータがありますので、そちらもあわせてご確認ください。
「html カラーコード」と検索するとたくさんの結果が出てきます。
toggle
jsの内容はまだ憶えなくてもいいと思います。
「こういうコードがあるんだなぁ」くらいでいいと思います。
今後も、このようなサンプルをアップしていきますので、今後、順を追って説明していこうと思います。
ここでは、ひとまず「toggle」（トゥグルと読みます）というコードがあることだけ憶えておいていただければと思います。
締め
しかし、実に丁寧な受け答えをしてくれますね。
解説も丁寧にしてくれてて応用例まで書いてくれています。
実のところ、弊社では学習用のコードをたくさん保存していたりするんですが、こんな感じで書いてくれるなら、全部Geminiに任せてもいいと思えるくらいに充実している気がします。
せっかくのAIですので、しっかり活用して慣れていきたいですよね。
プログラムを覚えたくてもなかなか取っつけなかった方は、是非参考にしてみてくださいね。
また、当サイトでは定期的にアップしていきますので、是非ご期待ください。
コメント