LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@mdown_ai_jpn

Markdwon AIでMinecraftのレシピ検索サイトを作ってみた！

Last updated at Posted at 2024-11-18

今回は子供に大人気のゲーム「Minecraft」のクラフト検索サイトを作ってみました。
作りたいアイテムを入力するとAIが必要な素材などを教えてくれます。
早速作ったサイトのURLはこちらになります！

作成する上で参考になるサイトも表記しておくので、是非Markdwon AIを触ってみて下さい！

参考サイト：

ステップ1:サイトの見た目を作る

最初はサイトの見た目から作成しました！
ただ一から自分でコーディングするのは大変なので、今回も作業をAIにぶん投げたいと思います。

ただこの記事を読んで下さっている方の中には、「作業を投げるAIを知らない」「AIの使用制限に課金してない」って人もいると思います。
そんな方々に朗報です！！

普通は無課金だと使用制限がかかるChat GPTなどのAI機能も、この期間だけMarkdown AI社が使用料を負担します！なので、Markdwon AI内でAI機能が無料で使用できます。期間限定なので、この機会に是非使ってみて下さい！

次回は、Markdwon AIの見た目をコーディングしてくれるサイトをMarkdown AIで作ろうかなと思います！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=VT323&display=swap" rel="stylesheet">
  <title>AI dedicated to Minecraft</title>
  <style>
    body {
      font-family: "VT323", monospace;
      background-color: #87CEEB; /* Minecraftの空色 */
      color: #333;
      text-align: center;
      padding: 50px;
    }
    h1 {
      color: #3C3C3C;
      font-size: 2em;
      margin-bottom: 30px;
font-size:30px;
    }
    .container {
      background-color: #F5F5DC; /* 草ブロックっぽい色 */
      border: 2px solid #3D3D3D;
      padding: 20px;
      border-radius: 10px;
      display: inline-block;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width:100%;
    }
    input[type="text"] {
      width: 100%;
      padding: 10px;
      font-size: 1em;
      border: 2px solid #3D3D3D;
      border-radius: 5px;
      background-color: #D3D3D3;
      font-family: "VT323", monospace;
    }
    button {
      font-size: 1em;
      padding: 10px 20px;
      margin-top: 10px;
      color: white;
      background-color: #4CAF50; /* 草ブロックの緑色 */
      border: 2px solid #3D3D3D;
      border-radius: 5px;
      cursor: pointer;
      font-family: "VT323", monospace;
    }
    button:disabled {
      background-color: #999;
      cursor: not-allowed;
      font-family: "VT323", monospace;
    }
    button:hover {
      background-color: #45A049;
    }
    #answer-1731557184 {
      font-family: "VT323", monospace;
      margin-top: 20px;
      padding: 15px;
      background-color: #FFFACD; /* 砂の色 */
      border: 1px solid #3D3D3D;
      border-radius: 5px;
      font-size: 1.2em;
      color: #333;
      margin: 20px auto;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
.container-item{
width:80%;
margin:0 auto;
}
.container-item-inner{
width:100%;
}
  </style>
</head>
<body>
<h1>AI dedicated to Minecraft</h1>
<div  class="container-item">
<div class="container">
<img src="https://storage.googleapis.com/topdowncom/content/9RZSoTmNDUcQVHkXTJTLrRq2kZh2/35fea981-aa95-4e45-8f19-5dcc67f99f27/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%A9.png" width="70%">
  <div style="display: inline-block;" class="container-item-inner">
    <input type="text" id="text-1731557184" placeholder="Enter item name (Example: Diamond nickel)">
    <button type="button" id="button-1731557184">Run AI</button>
  </div>
</div>
</div>
</body>
</html>

ステップ2:AIをカスタマイズする

コーディングの次は、サイトに実装するAIをカスタマイズしたいと思います。

左上のロボットアイコンを押下→Create Model画面に遷移→AIモデルを設定

今回は、応答速度も考えてGPT-4o-miniを実装しました！
その他の詳しいAIモデルの説明は、下記の記事を参考にして下さい。

AIのカスタマイズで鍵になるのが、ページ中部にある 「Prompt」 です。
Prompt(プロンプト)とは、AIに何をしてほしいか伝えるための指示みたいなものです。

今回は以下の様に注文しました！

マイクラアイテムの素材を教えて
英語で入力されたら英語で答えて
日本語で入力されたら日本語で答えて

Prompt(プロンプト)の入力できたらページ下部のUpdateボタンを押下するのを忘れずに!

ステップ3:AIをサイトに実装する

AIのカスタマイズができたらエディター画面に戻って、AIをサイトに実装していきます！

エディター画面Topのinsertボタンを押下→scriptボタンを押下→カスタマイズしたAIを選択→insertボタンを押下

すると、以下のコードが挿入されます！

<div style="display: inline-block;">
  <input type="text" id="text-1731900373" style="width: 200px;" value="Teach me about Markdown.">
  <button type="button" id="button-1731900373">Run AI</button>
</div>
<div id="answer-1731900373"></div>
  
<script>
(() => {
  const button = document.getElementById('button-1731900373');
  button.addEventListener('click', async event => {
    button.disabled = true;
  
    const serverAi = new ServerAI();
    const message = document.getElementById('text-1731900373').value;
    const answer = await serverAi.getAnswerText('9Af4rrfBUkE5BnmFghvStE', '', message);
  
    document.getElementById('answer-1731900373').innerText = answer;
    button.disabled = false;
  });
})();
</script>

挿入されたテンプレートコードは、簡単なテキスト欄とボタンを表示する内容で、ボタンを押下すると質問内容をAIに投げるコードですが、これも自分でサイト用に書き直すのはめんどくさいのでAIに全部ぶん投げます！

するとこんな内容を作ってくれました！

<div style="display: inline-block;">
  <input type="text" id="text-1731550045" style="width: 200px;" placeholder="アイテム名を入力">
  <button type="button" id="button-1731550045">AIに聞く</button>
</div>
<div id="answer-1731550045"></div>

<script>
(() => {
  const button = document.getElementById('button-1731550045');
  button.addEventListener('click', async event => {
    button.disabled = true; // ボタンを一時的に無効化して二重クリックを防止

    const serverAi = new ServerAI();
    const itemName = document.getElementById('text-1731550045').value;

    // クエリを作成
    const query = `マインクラフトの${itemName}のクラフト素材を教えて`;

    try {
      // AIに質問を送信し、回答を取得
      const answer = await serverAi.getAnswerText('8FkhABK2e27RKRcXErJJGt', '', query);
      
      // 回答を表示
      document.getElementById('answer-1731550045').innerText = answer;
    } catch (error) {
      // エラーが発生した場合のメッセージ
      console.error('エラーが発生しました:', error);
      document.getElementById('answer-1731550045').innerText = 'エラーが発生しました。再度お試しください。';
    }

    button.disabled = false; // ボタンを再度有効化
  });
})();
</script>

ステップ4:仕上げ

あとは、AIが書き出してくれた2つコードを良い風に繋げて完成です！

それでこんな感じの見た目になりした！

スクリーンショット 2024-11-18 12.34.27.png

この様に自分が全て作成しなくても、AIが作成のほとんどを担ってくれる時代がもう来ていると改めて実感します！
Markdwon AI社もそのAI時代を作っていける様に、世界中のユーザーが簡単に、そして楽しく、高品質なウェブサイトを作成できる未来を実現するために、私たちは日々努力を続けています。

MarkdownAI_note.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?