ChatGPTによるプログラミングで動くアニメーション実装
akarukaプログラミングで稼ぐ（ChatGPTでコードを教えてもらう）
今回は↑↑↑のアニメーションを作ってみます
プログラミングやWEBページ制作、動画編集などでフリーランスの方がクラウドワークスやランサーズといったサイトで仕事を請け負う働き方も今ではあたりまえになています。
プログラミングの制作のサポートにChatGPTはかなり有用です。
この記事にアニメーションを実装してみましたので、どのようにしてみたのか簡単に説明していきます。
今回は”サイトアイコンの「ぬ」を左右に動かしてみます^^
まず、チャットGPTに
WEBサイトのトップページで画像が左右に動くプログラミングコードを教えてください。動き幅は100ピクセルで波のように動いてください
とプロンプトを記載しました。
結果は
”指定された要件に基づいて、画像がトップページ上で左右に100ピクセル幅で波のように動くアニメーションを実装するコードを以下に示します。このコードはHTML、CSS、およびJavaScriptを組み合わせています。
まず、HTMLファイルを作成します（例：index.html）”
”次に、CSSファイルを作成します（例：styles.css）。”
上記の二つのコードが生成されました。（今回JavaScriptは生成されませんでした）
簡単に説明しますと、最初のindex.htmlファイルはホームページの内容を示しているものです。
次のstyles.cssファイルはサイトのスタイルなど見た目等を記述したものになります。
２つの生成されたコードをそのままコピーし
Windowsメモ帳に貼り付け
それぞでindex.html とstyles.cssのファイルとして保存してみます。
（※同じフォルダに入れてください）
index.htmlファイルを実行してみますと以下のように
ブラウザが起動され真ん中で「Moving Image」が左右に動いています。
どうですか？プログラミングの知識はなくても、ChatGPTに聞いてみればコードが生成され、動くアニメーションができました。
この記事にもそのまま実装しました。
生成されたコードからの修正点は、「ぬ」の画像の指定と高さをheight:100vhを70pxに変更し、スクロールの不具合を修正しました。
あとはワードプレス（このサイトはワードプレスで制作しています）へ指定した場所に組み込む作業を行いました。（この工程はまた別記事で紹介したいと思います）
※※※コードの組み込みによって生じた不具合については責任負いかねます。試してみる場合は、十分なテスト環境でお願いします※※※
これからはプログラミングをアレンジして使えるようになると、もっと活用の幅が広がりそうです！
“ChatGPTによるプログラミングで動くアニメーション実装” に対して1件のコメントがあります。