Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
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?

Markdown AIのサーバーAI機能を使ってWebサイトを作ってみよう by MarkdownAIAdvent Calendar 2024

Day 18
@yu_uk(Y K)

ギャル語で学ぶと理解度UP!? MarkdownAIで「ギャル語解説メーカー⭐️」を作った話

Last updated at Posted at 2024-12-17

はじめに

みなさんは「ギャル語」で解説された資料やソースコードに触れたことはありますか？
多くの方は「ない」か、「ネタでちょっと見たことある」程度かもしれません。
しかし、実は「ギャル語で解説」すると、なぜか理解度が爆上がりするんです！

本記事では、その魅力を存分に伝えつつ、MarkdownAIというツールを使ってギャル語で解説してくれるWebアプリ「ギャル語解説メーカー」を作った経緯や手順、実際に試せるコード例を紹介します。
この記事を読むことで、「ギャル語解説」の真のポテンシャルや、
MarkdownAIを使ったお手軽Webサイト構築方法を掴んでいただければ幸いです。

なぜギャル語なのか？

「ギャル語」と聞くと、多くの方が「チャラい」「ふざけている」といった印象を持つかもしれません。
しかし、実際にギャル語で解説を受けてみると以下のメリットが見えてきます。

  • 心理的ハードルの低下：明るくポジティブな表現が多いため、専門用語や難解なコンセプトも「わかる気がする！」となりやすい。
  • 気分が上がる：カジュアルな表現で読むこと自体が楽しく、モチベーションアップに繋がる。
  • 理解度向上：専門的な説明もギャル語化することで、なじみやすい表現に早変わり。抽象的な概念に対する抵抗感が減る。

私自身、普段AIで解説文を生成する際、ギャル語での再解説を試してみたところ、
笑えるほど理解しやすく感じました。
もちろん「ギャル語」に向き不向きはありますが、「一度試してみる価値は大いにある」
と確信しています。

MarkdownAIとは？

MarkdownAIは、Markdown記法とAI機能を活用し、誰でも簡単にWebサイトを構築・
公開できるツールです。
コーディング不要で、サーバー設定やデプロイ作業が自動化され、手軽に創造力を発揮できます。

従来なら、

  • HTML/CSS/JS、フレームワークのセットアップ
  • サーバー/ホスティング環境の準備
  • ビルド/デプロイの煩雑な手順

といった作業が必要でした。
MarkdownAIではこれらが大幅に簡略化されます。
「ちょっとアイデアが浮かんだから試してみたい」という場面で、素早くサイトを作り、
公開できるのがMarkdownAIの最大の魅力です。

参考: MarkdownAIの使い方

ギャル語解説メーカーとは？

今回紹介する「ギャル語解説メーカー」は、入力したテキストをAIがギャル語で解説してくれるWebアプリです。

  • ユーザーはブラウザ上の入力欄に任意のテキスト（解説してほしい用語や文章）を入力。
  • 「ギャル語解説💫」ボタンをクリックすると、サーバーAIに投げてギャル語解説を生成。
  • 明るいノリのギャル語解説が画面に表示されます。

これによって、普段は「難しいな…」と敬遠しがちな専門用語も、「何これ、面白い！」
とポジティブな気分で読めます。

コード例

以下は「ギャル語解説メーカー」のHTML/CSS/JS例です。
このコードをMarkdownAI環境に取り込み、URLボタんを押すことでWebサイトとして公開できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ギャル語解説</title>
    <style>
        * {
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            margin: 0;
            background: linear-gradient(to bottom right, #ff9a9e, #fad0c4);
            overflow-y: auto;
        }

        body {
            font-family: 'Comic Sans MS', cursive, sans-serif;
            color: #fff;
            margin: 0;
            text-align: center;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
        }

        h1 {
            color: #fff;
            text-shadow: 3px 3px #ff66b3;
            margin-bottom: 20px;
            font-size: 2em;
            animation: bounce 2s infinite;
        }

        p {
            font-size: 1.2em;
            text-align: left;
            margin-bottom: 30px;
            color: #ff66b3;
        }

        input[type="text"] {
            width: 100%;
            max-width: 400px;
            padding: 12px;
            font-size: 1.1em;
            border: 2px solid #ff66b3;
            border-radius: 20px;
            margin-bottom: 10px;
            background: #fff5f8;
            color: #ff66b3;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        }

        button {
            padding: 12px 24px;
            font-size: 1.1em;
            color: #fff;
            background: #ff66b3;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
            transition: all 0.3s;
        }

        button:hover {
            background: #ff33a6;
            transform: scale(1.1);
        }

        button:disabled {
            background: #999;
            cursor: not-allowed;
        }

        #answer-1734108461 {
            background: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 20px;
            margin-top: 30px;
            font-size: 1.2em;
            color: #ff66b3;
            font-weight: bold;
            box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.3s ease-in-out;
            text-align: left;
        }

        #answer-1734108461.show {
            opacity: 1;
            transform: scale(1);
        }

        @media screen and (max-width: 600px) {
            input[type="text"] {
                width: 100%;
            }

            button {
                width: 100%;
                padding: 12px;
                margin-top: 10px;
            }

            h1 {
                font-size: 1.5em;
            }
        }

        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes blink {
          0%, 100% {
            opacity: 1;
            transform: scale(1);
          }
          50% {
            opacity: 0.5;
            transform: scale(1.1);
          }
        }

        #answer-1734108461.blinking {
          animation: blink 1s infinite ease-in-out;
        }

    </style>
</head>
<body>

<h1>ギャル語解説メーカー⭐️</h1>
<p>入力ボックスに解説してほしい言葉や文章を入れて、「ギャル語解説💫」ボタンを押すだけ！<br>簡単にギャル語で説明しちゃうよ💖</p>

<div style="display: inline-block; width: 100%; max-width: 400px; position: relative;">
  <input type="text" id="text-1734108461" placeholder="ここに解説してほしい内容を入力しちゃおー！" style="box-shadow: none;">
  <button type="button" id="button-1734108461">ギャル語解説💫</button>
</div>
<div id="answer-1734108461">ここにギャル語の解説が表示ちゃうー！ヤバミー👓</div>

<script>
(() => {
  const button = document.getElementById('button-1734108461');
  const answerBox = document.getElementById('answer-1734108461');
  let isGenerating = false;  // 生成中フラグ

  button.addEventListener('click', async () => {
    const input = document.getElementById('text-1734108461');
    const message = input.value.trim();

    if (!message) {
      alert('何か入力してね！⭐️');
      return;
    }

    if (isGenerating) {
      alert('生考え中だよ〜！20秒くらい待ってねー🎶');
      return;
    }

    // 生成開始
    isGenerating = true;
    button.disabled = true;
    answerBox.innerText = '考え中だよ〜！20秒くらい待ってねー🎶';
    answerBox.classList.add('show', 'blinking');

    try {
      // サーバーAI呼び出し (仮のAPI呼び出し)
      const serverAi = new ServerAI(); 
      const answer = await serverAi.getAnswerText('cQ4iU7KqdwqkMuqgu7pYAA', '', message);

      // 解説結果を表示
      answerBox.classList.remove('blinking');
      answerBox.innerText = answer;
    } catch (error) {
      answerBox.classList.remove('blinking');
      answerBox.innerText = 'エラーが発生したよ！もう一回試してね💦';
    } finally {
      button.disabled = false;
      isGenerating = false;
    }
  });
})();
</script>
</body>
</html>

コード解説ポイント

スクリーンショット 2024-12-15 1.06.08.png

見た目:
ギャル語の明るい雰囲気を表現するために、パステル調のグラデーション背景を使用し、ボタンや入力欄にもピンクなデザイン要素を盛り込みました。

機能:
ボタンを押すとサーバー側AI(今回はGeminiを使用しています。)にテキストを送り、結果を取得して表示します。
待ち時間があるので「考え中だよ〜！」とユーザーフィードバックを行います。
スクリーンショット 2024-12-15 1.08.32.png
簡易性:
HTML/CSS/JSのみで構成されており、これをMarkdownAIへ取り込むだけで簡単にWeb公開が可能です。

ちなみにナレッジにデータを組み入れてそこから生成も可能なようです。
PDFをアップロードしたのですが、何故か反映されているのかいないのか分からない状況でした。

実際に試してみよう

ギャル語解説メーカー⭐️

公開後に得られたURLを共有し、友達や同僚に試してもらいましょう。
「何これ、ふざけてる？」「ギャル語？」と最初はびっくりされるかもしれませんが、
いざ使ってみると、

  • 「ポリモーフィズム」
  • 「Docker」
  • 「粟田口吉光」
  • 「量子ねじれ」

など、小難しい用語が不思議なほど分かりやすく、心理的なハードルが下がるかもしれません。

学習効果と応用可能性

ギャル語解説は決して単なるネタに留まりません。以下の効果が期待できます。

心理的ハードル低下:
難しい言葉も軽いノリで触れることで、「読む気になる」きっかけを与えます。

気分転換効果:
真面目な資料に飽きたら、ギャル語解説を差し込むことで気分がリフレッシュします。

記憶定着:
ユニークな表現は記憶に残りやすく、結果的に概念を覚えやすくなる可能性があります。

コミュニケーションの活性化:
仲間内で「このギャル語解説ヤバくない？」と話題になり、学習コミュニティが活性化するかもしれません。

生成固定:
AIを固定したプロンプトで出力出来るので、子供が使ってもいらない事をさせにくい。
単一機能での使用はAIでは結構メリットだと思います。

課題と今後の展望

もちろん、ギャル語解説には以下のような課題もあります。

  • ギャル語自体に馴染みがない人には逆効果の場合がある。
  • 正式な文書や厳密性が求められる場面には不向き。（←当たり前）

今後は、

  • 任意の話し方（関西弁、アイドル風、武士風など）を選択可能にする

  • ナレッジの活用（何故かアップロードしても反映されてる感じがなかった）

といった事も考えています。
また他にもいくつか別のアイデアが浮かんできたので、是非作成して記事にしたいです。

まとめ

今回は、MarkdownAIを使って「ギャル語解説メーカー」を作り、
ギャル語での解説がもたらす学習効果について紹介しました。

MarkdownAIはMarkdownで記述するだけで簡単にWebページを公開出来るのが最大のメリット！
これは本当に簡単すぎてビビりました。
合わせてCSSやJavaScriptも使えるので結構自由にレイアウト出来たりしそう。
ただ今回ももっとCSSで装飾していますが、何故か反映されていません。
何かしらMarkdownAIの仕様があるのだと思いますがちゃんと読み切れてないので、時間のある時に確認したいです。
そしてAIの実装！この実装もめちゃくちゃ簡単で面白いアイデアがあれば結構簡単、高速にプロトタイプを立ち上げる事が出来そうです。これ無料でいいの？？？って本当ビックリしました。

「ギャル語解説メーカー」については、見ふざけているように見えますが、
理解度向上やモチベーションアップの一助となる可能性があります。
学習方法に行き詰まったら、ぜひ一度ギャル語フィルターを試してみてください。
意外な発見があり、「ヤバミー👓」な学習体験が待っているかもしれませんよ！

1
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
1
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?