Webマーケティング部の浦野です！
皆さんはChatGPTを利用していますか？
普段のおしゃべりから分からないことの質問まで何でもOK！
気分が落ち込んでいる時は陽気に語りかけると楽しいですよ
自分：「やぁ！君のことニックネームで呼びたいんだけど何か良い呼び方教えてよ！」
GPT：「では、「チャットくん」とでも呼んでいただけると嬉しいです！気軽に質問やおしゃべりをしてくださいね。」
自分：「おっけー！チャットくんはどんな会話がうれしい？」
GPT：「チャットくんはどんな質問も歓迎です！お好きなテーマや質問内容でお気軽にどうぞ。技術的なこと、趣味、日常の質問、何でもお答えします。どうぞお好きな質問をどんどんしてくださいね！」
・
・
・
もちろんいつもやっているわけではないですからね・・・？
とまあ、おしゃべりするだけでもいいんですが、
最近ChatGPTでいろんなことを調べることが増えてきています。
最新の話題等は反映されていないため有益な情報は得られませんが、
使い方によっては仕事の効率を上げることにも繋がります。
自分の場合はWebサイトのコーディングでよく使います。
例えば、
「テキストをタイプライター風のアニメーションを付けたい」場合に、
もちろん調べれば、いろんな人がいろんなやり方で紹介していますので
自分が意図した動きのものがあればそれを使うのが早いです。
しかし、自分がやりたい動きを100%再現してくれている方はなかなかいません。
その場合それらを参考に自分で考えて作らないといけません。
慣れない人だとここでかなりの時間を使ってしまいます。
そんな時！
ChatGPTを使うと！
大幅に時間短縮できるのです！！
もちろん一からChatGPTにお願いするのも手です。
※最新のアップデートされたプログラムなどは提案してくれないので注意です。
自分：「テキストをタイピングアニメーションにするcssかjsを教えて」
GPT：「もちろんです。以下に、簡単なCSSアニメーションとJavaScriptのアニメーションの例を紹介します。」
<div id=”typed-text”></div><!– JavaScript –>
<script>
const text = “このテキストがタイピングされます。”;
let index = 0;function typeWriter() {
if (index < text.length) {
document.getElementById(“typed-text”).innerHTML += text.charAt(index);
index++;
setTimeout(typeWriter, 100); // 100ミリ秒ごとに1文字ずつ追加
}
}
typeWriter();
</script>
何が書いてあるか分からない方が多いかもしれませんが、
上記提示されたコードを貼り付けて「このテキストがタイピングされます」の部分に何かテキストを入れれば
入力したテキストがタイピングされる仕組みとなっています。
ただし上記の書き方だと1回しか使えません。
もし同じページ内で何回か使う場合、JavaScriptの部分を使う数だけ用意しないといけなくなり
膨大な記述量になってしまいます。
なのでChatGPTが最初に提案してきた上記コードを修正させます。
自分：「汎用性をもたせるために、type-textというclassをもつ要素内のテキストをタイピングさせるようにしてください」
GPT：「以下に、type-textというクラスを持つ要素内のテキストをタイピングする汎用的なコードの例を示します。」
<div class=”type-text” data-text=”タイピングしたいテキスト”></div><!– CSS –>
<style>
.type-text {
opacity: 0;
animation: fadeIn 1s ease-in-out forwards;
}@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
<!– JavaScript –>
<script>
document.addEventListener(“DOMContentLoaded”, function () {
const typeTextElements = document.querySelectorAll(‘.type-text’);
typeTextElements.forEach((element) => {
const text = element.dataset.text;
let index = 0;
function typeWriter() {
if (index < text.length) {
element.innerHTML += text.charAt(index);
index++;
setTimeout(typeWriter, 100); // 100ミリ秒ごとに1文字ずつ追加
}
}
typeWriter();
});
});
</script>
初期より少し量が増えましたが、
これでこれ以上の記述は増えません。
↓こちらが完成形となります。（プラスでループ再生されるようにしてあります）
後半ほぼ専門的になってしまいましたが、
上記のような効果をただ貼り付けるだけで実現できてしまいます！
ChatGPTはこういったプログラムなどは得意分野なので
何度か修正を入れてブラッシュアップをしてもらうことでよりよいものに仕上げることができます。
他にもいろんな活用方法があるので
ぜひ仕事の効率化に使用してみましょう！
