ChatGPTから学びながら、このウィジェットを作ってみました！遊んでみてね。
*画像は生成画像AIによるものです。画像生成プロンプトエンジニアリグ
ChatGPT４と生成画像AIで作った占いウイジェット
コード
<div class="custom-fortune-cute">
<h1>今日のAIメッセージ</h1>
<div>
<button onclick="getFortune()">運勢をみる</button>
</div>
<div id="fortuneContent">
<p id="fortuneMessage"></p>
<img id="fortuneImage" src="" alt="Fortune Image" style="display: none; width: 200px; margin-top: 20px;">
</div>
</div>
<style>
.custom-fortune-cute {
font-family: 'Comic Sans MS', cursive, sans-serif;
background-color: #ffe6e6;
text-align: center;
padding: 20px;
border-radius: 15px;
color: #755D69;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
margin: 20px 0;
max-width: 100%;
}
.custom-fortune-cute h1 {
color: #FF69B4;
font-size: 24px;
}
.custom-fortune-cute button {
padding: 8px 16px;
font-size: 14px;
border: none;
border-radius: 12px;
background-color: #FFB6C1;
color: #755D69;
cursor: pointer;
margin: 10px;
transition: background-color 0.3s;
}
.custom-fortune-cute button:hover {
background-color: #FF83A7;
}
#fortuneImage {
display: none;
width: 900px !important; /* 大きさを変更 */
margin: 20px auto;
}
/* For larger screens */
@media (min-width: 600px) {
.custom-fortune-cute {
padding: 50px;
}
.custom-fortune-cute h1 {
font-size: 32px;
}
.custom-fortune-cute button {
padding: 10px 20px;
font-size: 16px;
}
#fortuneImage {
width: 1100px !important; /* ここも大きさを変更 */
}
}
</style>
<script>
function getFortune() {
let fortunes = [
{ message: "AIはあなたにとってラッキーな存在です！", image: "path_to_imageX.jpg" },
{ message: "データを慎重に解析することで、未来が明るくなるでしょう。", image: "path_to_imageX.jpg" },
{ message: "新しい技術の学びがあなたをさらなる高みへ導くでしょう。", image: "path_to_imageX.jpg" },
{ message: "近くのAIコンファレンスに参加することで、新しい知識と人脈を得ることができます。", image: "path_to_imageX.jpg" },
{ message: "今日のコード実行はスムーズに行くでしょう！", image: "path_to_imageX.jpg" },
{ message: "AIとの協力で、今日の課題は一つずつクリアしていくことができるでしょう。", image: "path_to_imageX.jpg" }
];
let randomFortune = fortunes[Math.floor(Math.random() * fortunes.length)];
document.getElementById('fortuneMessage').innerText = randomFortune.message;
document.getElementById('fortuneImage').src = randomFortune.image;
document.getElementById('fortuneImage').style.display = "block";
}
</script>
注意 ’path_to_imageX.jpg’を、実際の画像のパスやURLに置き換えてください。
新時代の学び方
Chat GPT4登場後のAI新時代には、学び方がガラリと変わります。
これまでは、何か知りたいことがあれば、ネットサーフィンをして「ググる」ことが一般的でした。
もう時代は変わりました。
「ググる」から「対話」の時代
私のようなプログラミング学習初心者は、ある一定のレベルでつまづきます。
プログラミング言語の基本、コードの書き方、カラーの構造、構成の方法…
どんなことも、何かを作る時には、あらゆる知識が必要です。
では、「生成AIメッセージ占い」のコードを作るまでの「これまでの学習プロセス」と、「AI時代の作成プロセス」を比較してみましょう！
新旧比較
旧時代のコードの作り方
必要知識
例えば上記のような「占いウィジェット」を作りたいと思ったら、次の知識が必要です。
ウェブ開発の基盤
ウェブページやアプリケーションを理解・作成するための知識や技術：
- HTML: ウェブページの構造を記述するための言語。例: <div>, <h1>, <img> などのタグ。
- CSS: ウェブページのスタイルやデザインを制御するための言語。
- JavaScript: ウェブページの動的な振る舞いやインタラクティブ性を制御するためのプログラミング言語。
これらの言語は、ウェブ開発の基盤として欠かせないものとなります。
これらの言語は、ウェブ開発の基盤となるもので、ウェブページやウェブアプリケーションを開発するためには必須の知識となります。
一般的な製作プロセス
*ピンクのタイトルをクリックすると、詳細が出てきます。
・CSS: 基本的なスタイリング（色、フォント、配置など）の仕方を理解する。
・JavaScript: 基本的なプログラミングの概念（変数、関数、ループなど）を理解する。 実践を通じた学習
・例えば、静的なウェブページを作成した後、動的な要素やインタラクションを追加する。
・オンライン教材や書籍を利用して、深く学ぶ。
・質問をする、または他人の質問に答えることで、知識を深めることができる。
・ウェブ開発のスキルは、継続的な実践と反省を繰り返すことで向上する。
・作成したプロジェクトやコードを定期的に見直して、改善点や新しい技術の適用を考える。
挫折と継続の努力
一般的に、プログラミングの学習には挑戦が伴うため、初心者の中には挫折する人も少なくありません。
継続的に学び、実践することで、コードの理解とスキルの向上を目指す必要があります。
新時代のユニークな学習方法
ChatGPT4にコードをお願いするときには基本的に、日本語でコマンドできます。つまり、これまでの制作・学習方法以外に無数の方法が考えられます。例えば、次のような不思議な学習方法が成立します。
本やネットからコードを見つけてきて、質問をする
例えば、言語コードが違う簡単なコードを見つけます。そのコードを質問に貼り付けて、「ワードプレス用にHTML, JavaScriptにコード変更をして」と日本語でコマンドすると、コードを修正して出してくれます。
Pythonのコードからワードプレス用に書き換えたウィジェット「じゃんけんゲーム」
自分でもらったコードを見ながら、できそうなウィジェットをコマンドする
たとえば、「じゃんけんゲーム」を見ていると他にも出来そうなコードが考えられます。同じ構造のコードでできるウィジェットがないかこれも直接聞いて見ましょう。いくつか提案をしてくれます。
もちろん、自分から提案することもできます。
コードの修正も日本語で対話できます
例えば、「可愛い装丁で」「淡いパステルカラーのCSSを入れて」「他のコードに影響が与えあわないように」など細かいコマンドも日本語でできます。
つまり、すでに出来上がったコードと日本語で無限にあらゆるコードができます。
たくさん作りながら学ぶ
ChatGPT4（AIは）、必ず「どうしてその修正が必要なのか」「このコマンドを成功させるために、どのような構築をしないとならないか」などを丁寧に説明してくれます。説明を受けながら、学習していきます。
事例：ミニマルなタイマーアプリを作って！
レベルが高ければ、自分に合わせて再び質問をする。
レベルが高いと思った場合、「初心者にわかりやすく」という設定も可能ですし、また単語について聞いてもいいですね。（例）「jQueryについて教えて」
とにかく、個別的なので、自分がわかるまで徹底して対話を繰り返すことができます。
さらなる機能追加やデザインのカスタマイズを楽しむ
タイマーの基本的な機能が動くようになったら、「リセットボタン」「かわいい装丁」「アラーム音」…などたくさんの機能をつけていきましょう。