ChatGptとjavascriptを使用しておみくじを作成

こんにちは、みなさん！

今回はAIモデルのChatGPTを活用して、アプリを作成したいと思います。

その名も「おみくじアプリ」！

ChatGptを駆使して「おみくじアプリ」が作成できるのかを検証してみました。

作成方法としては、HTML,CSS,JavascriptのプログラムをChatGptに書いてもらおうと思います。

ChatGPTとは？
ChatGPTに聞いてみた
ChatGpt返答結果
更に改良できるか検証
感想

ChatGPTとは？

ChatGPTは、OpenAIが開発したAI言語モデルです。

その強力な能力を活用して、コーディングからクリエイティブなプロジェクトまで、さまざまなことに取り組むことができます。

今回はその中でも、HTML、CSS、JavaScriptを組み合わせて、シンプルなおみくじアプリをChatGptに作成してもらいましょう。

ChatGPTに聞いてみた

では、ChatGptに「おみくじ」アプリを作成してもらえるように、お願いしてみます。

ChatGptの画面でメッセージを入力します。

メッセージは「htmlとcssとjavascriptでおみくじを作成してください。」と入力してみました。

すると結果は・・・

ChatGpt返答結果

もちろんです！

以下は、HTML、CSS、JavaScriptを使用して作成したシンプルなおみくじの例です。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>おみくじ</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>おみくじ</h1>
    <p>今日の運勢を占おう！</p>
    <button id="drawButton">おみくじを引く</button>
    <div id="result" class="hidden">
      <p>今日の運勢は...</p>
      <p id="fortune"></p>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

styles.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
}
.container {
  text-align: center;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.hidden {
  display: none;
}

script.js

const fortunes = [
  "大吉",
  "中吉",
  "小吉",
  "末吉",
  "吉",
  "凶",
  "大凶"
];
const drawButton = document.getElementById("drawButton");
const resultContainer = document.getElementById("result");
const fortuneDisplay = document.getElementById("fortune");

drawButton.addEventListener("click", () => {
  const randomIndex = Math.floor(Math.random() * fortunes.length);
  const selectedFortune = fortunes[randomIndex];
  fortuneDisplay.textContent = selectedFortune;
  resultContainer.classList.remove("hidden");
});

これは非常に基本的な例であり、見た目や機能をカスタマイズする余地がたくさんあります。必要に応じてデザインや機能を追加・変更して、より魅力的なおみくじアプリを作成できます。

完成画面

完成した画面がこちらです。

「おみくじを引く」ボタンを押すと、運勢がランダムで表示される動作をしてくれます。

更に改良できるか検証

要望通りChatGptは「おみくじ」を作成してくれました。

しかし、少しシンプルな作りなので更に改良してほしい内容をメッセージしてみます。

例えば、おみくじを引く動作をアニメーションで表現したいとします。

ChatGPTに、このようにメッセージしてお願いしてみました。

htmlとcssとjavascriptでおみくじを作成してください。

jqueryアニメーションを使用して、おみくじを引く動作を再現してください。

おみくじがくるくる回って結果が出るように動作させてください。

回答が返ってきます。

回答内容①

もちろんです！以下は、HTML、CSS、JavaScript、およびjQueryを使用しておみくじを引く動作をくるくる回るアニメーションと組み合わせたおみくじアプリの例です。

まず、HTMLファイルを作成します。

index.html:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>おみくじ</title>
</head>
<body>
  <div class="container">
    <h1>おみくじアプリ</h1>
    <div class="omikuji-container">
      <img id="omikujiImage" src="omikuji.png" alt="おみくじ">
    </div>
    <button id="drawButton">おみくじを引く</button>
    <div id="result" class="result"></div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

次に、CSSファイルを作成します。

styles.css:

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}
.container {
  text-align: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.omikuji-container {
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
  transition: transform 2s ease-in-out;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.result {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
  display: none;
}

最後に、JavaScriptファイルを作成します。

script.js:

$(document).ready(() => {
  const fortunes = [
    "大吉",
    "中吉",
    "小吉",
    "吉",
    "凶",
    "大凶"
  ];
  const drawButton = $("#drawButton");
  const resultDiv = $("#result");
  const omikujiImage = $("#omikujiImage");
  drawButton.click(() => {
    drawButton.prop("disabled", true);
    // おみくじ画像を回転させるアニメーション
    omikujiImage.css({ transform: "rotate(0deg)" });
    omikujiImage.animate(
      { transform: "rotate(720deg)" },
      {
        duration: 2000,
        easing: "easeInOutCubic",
        complete: () => {
          const randomIndex = Math.floor(Math.random() * fortunes.length);
          const fortune = fortunes[randomIndex];
          resultDiv.text("くるくる...").fadeIn(1000, () => {
            resultDiv.text(`今日の運勢は「${fortune}」です！`);
            resultDiv.fadeIn(1000);
            drawButton.prop("disabled", false);
          });
        }
      }
    );
  });
});

しかし、これを画面で動作確認するとエラーとなります。

エラー内容

Uncaught TypeError: S.easing[this.easing] is not a function

ChatGptにもう一度聞いてみます。

ChatGptに聞くメッセージ内容

上のコードで下記エラーがでます。
どうすれば直りますか？
Uncaught TypeError: S.easing[this.easing] is not a function

回答が返ってきます。

回答内容②

申し訳ありません、このエラーは jQuery のアニメーションで easing パラメータを設定しようとした際に起こる問題です。このエラーを修正するためには、以下の方法を試してみてください。

1. jQuery Easing プラグインを使用する（推奨）:

jQuery はデフォルトで標準のイージング関数を提供していますが、一部のバージョンでは問題があることがあります。代わりに、jQuery Easing プラグインを使用することをおすすめします。

jQuery Easing プラグインのウェブサイトにアクセスして、プラグインをダウンロードします。
ダウンロードしたファイルをプロジェクトのフォルダに配置します。
HTML ファイル内で、jQuery の読み込みの後に jQuery Easing プラグインを読み込むためのスクリプトを追加します。

以下省略

プラグインをダウンロードしないと駄目なやり方のようですね。

jQueryのバージョンがChatGptと相違があり、このような事象になってしまったようです。

自分の使用している環境なども事前に伝えておくと正確に回答してくれるかもしれませんね。

とはいえ、プラグインをダウンロードするのも面倒なので、もう一度メッセージしてみます。

ChatGptに聞くメッセージ内容

そのプラグインを使用しないで実現できますか？

回答が返ってきました。

回答内容③

$(document).ready(() => {
  const fortunes = [
    "大吉",
    "中吉",
    "小吉",
    "吉",
    "凶",
    "大凶"
  ];
  const drawButton = $("#drawButton");
  const resultDiv = $("#result");
  const omikujiImage = $("#omikujiImage");
  drawButton.click(() => {
    drawButton.prop("disabled", true);
    // おみくじ画像を回転させるアニメーション
    omikujiImage.css({ transform: "rotate(0deg)" });
    omikujiImage.animate(
      { rotation: 720 },
      {
        duration: 2000,
        easing: "linear",
        step: (now, fx) => {
          if (fx.prop === "rotation") {
            omikujiImage.css("transform", `rotate(${now}deg)`);
          }
        },
        complete: () => {
          const randomIndex = Math.floor(Math.random() * fortunes.length);
          const fortune = fortunes[randomIndex];
          resultDiv.text("くるくる...").fadeIn(1000, () => {
            resultDiv.text(`今日の運勢は「${fortune}」です！`);
            resultDiv.fadeIn(1000);
            drawButton.prop("disabled", false);
          });
         }
        }
      );
    });
  });

これで動作がどうなるか実際に確認してみます。

完成画面

自分のイメージ通り、画面を作成してくれました。

感想

一度目に作成したシンプルな画面であれば、初心者の方でも簡単に作成できそうです。

しかし、高度なことを要求するには多少の知見は必要そうですね。

今回で言えば、おみくじの画像は自分で用意して適切な箇所に配置する必要があります。

とはいえ、それも分からなければChatGptに聞けば答えに辿りつけそうです。

ChatGPTとJavaScriptでおみくじアプリを作成しよう！

ChatGPTとは？

ChatGPTに聞いてみた

ChatGpt返答結果

完成画面

更に改良できるか検証

回答内容①

回答内容②

回答内容③

完成画面

感想

コメント