はじめに

日常のやり取りに、ちょっとした驚きと感動をプラスしてみませんか？
たとえば、普段は照れくさくて言えない「ありがとう」の気持ちを、さりげなく大切な人に伝えられたらどうでしょう。
そんな小さなサプライズが、日常のコミュニケーションを特別で心温まるものに変えてくれます。

今回ご紹介するのは、質問に答えるAIアシスタントに特定のメッセージを仕込むユニークなツールです。このツールの作成から公開までをスムーズに実現できるのが、Markdown AIというプラットフォームです。Markdown AIは、AIのWebページへの組み込みや手軽な公開手順を特徴とし、遊び心あふれる仕組みの構築を誰でも簡単に行えます。

ぜひこの記事を参考に、Markdown AIを活用して、感謝や驚きを自然に伝える新しいコミュニケーションの楽しさを体験してみてください！

実際に作成したツールはこちら

https://mdown.ai/content/9ad619f0-5928-4619-a601-9663c3ff1f4a

隠しメッセージでサプライズとは？

以下は、隠しメッセージを活用したサプライズ例です。
このツールでは、事前に設定した隠し文字列 を元に、ユーザーの質問に応じた回答を生成します。この仕掛けは、開発者だけが設定・制御できるため、ユーザーにさりげなくドッキリを仕掛けることができます。

例1

質問: 毎日の生活をより楽しくするコツを教えてください
隠し文字列: ありがとう

生成される回答:

あたらしい挑戦をすることで、毎日に刺激が生まれます。
りょうりに工夫を凝らすと、食事がもっと楽しめます。
がんばった自分に小さなご褒美をあげてみましょう。
とても小さなことにも感謝を持つと、心が豊かになりますよ。
うまくいかなくても、自分を認めてあげることが大切です。

回答の文頭に注目すると、隠されたメッセージ「ありがとう」が浮かび上がります。
この仕掛けにより、日常のやり取りが特別な体験へと変わります。

例2

質問: 疲れたときに試してみたいリラックス方法を教えてください
隠し文字列: いつもありがとう

生成される回答:

いっしょに深呼吸をすると気分が落ち着きますよ。
つかれた体には、ストレッチや軽い運動がおすすめです。
もっとリラックスするには、ぬるめのお風呂に浸かってみてください。
あたたかい飲み物を用意して、心を休めましょう。
りらくぜーしょん音楽を聴くのも良いですね。
がんばりすぎず、休むことを優先するのも大切です。
ともだちや家族と話すことで、気分転換になりますよ。
うまく自分を甘やかして、元気を取り戻しましょう。

このように、質問に即した回答を返すため、仕掛けがバレにくくなっています。

ツールの使い方

このツールの魅力は、簡単操作と驚きの仕掛けにあります。以下のGIFをご覧ください。

👉ツールを使ってみる

→ このGIFでは、AIアシスタントが質問に回答しながら、ありがとう（隠しメッセージ）を巧みに組み込むプロセスと、その仕掛けのネタバラシを確認できます。

簡単な操作フロー

質問を入力
- 例: 「運動を続けるコツは？」
- シンプルなUIで、直感的に操作可能。
AIの回答を生成
- AIが入力に基づいて回答を作成し、隠しメッセージを文頭に組み込みます。
サプライズ発見
- 回答を読み終えたとき、 隠しメッセージ が自然と浮かび上がり、感謝や祝福を伝える新しい体験が可能に。

以下の画像で、各ステップを確認できます。

1. 質問を入力	2. AIの回答	3. サプライズ発見

サプライズAIの魅力

このツールには、次の3つの魅力があります：

🎉 自然な驚きを演出
質問内容に合わせた回答の中にメッセージを巧みに組み込み、思わず笑顔になるような体験を届けます。
🔒 秘密のメッセージを簡単管理
メッセージは開発者だけが設定できる仕組みで、ユーザーには気づかれにくい特別な仕掛けを実現します。
✨ Markdown AIによる直感的な操作
Markdown AIを使うことで、隠しメッセージの設定や更新が簡単に行え、柔軟なカスタマイズが可能です。

Markdown AIでツールを実装

このツールは、Markdown AIの機能を活用して開発されています。Markdown AIは、隠しメッセージを巧妙に仕込むための理想的なプラットフォームです。

最もバレにくくメッセージを仕込むには、UI上に一切そのメッセージを組み込む仕様を表示させない設計にすること。これにより、仕掛け人だけがその仕組みを知る、完全なサプライズを実現できます。

Markdown AIの魅力

🖋️ 直感的な設計
Markdown形式を活用し、AIを組み込んだUIを簡単に作成可能。
🔄 動的な管理機能
AIとの連携をスムーズに行い、柔軟な設定でカスタマイズが自在。
👀 即時プレビュー
作成した仕組みをその場で確認でき、効率的に調整が可能。
🎁 巧妙なサプライズ設計
隠しメッセージをバレにくく管理でき、仕掛け人だけがメッセージ内容を完全にコントロール。
🌐 ワンクリックでWeb公開
作成したページをボタンひとつで簡単に公開可能。煩雑な手順は不要です。

Markdown AIで、メッセージに驚きと感動を仕込む自由を手に入れましょう！

どんな場面で使える？

🎉 感謝を伝える：特別な日やイベントで、気持ちをさりげなく届ける。
📚 教育ツールとして：単語やフレーズを楽しく学べる仕掛けに。
💡 プロモーションに活用：商品名やブランドメッセージを隠し、話題性を演出。

実際の使い方をシミュレーション

友人に感謝を伝えた例を見てみましょう。

シチュエーション例：

仕掛け人：「面白いツールがあるんだけど試してみない？」
ターゲット：「なにそれ？」
仕掛け人：「Markdown AIっていうんだ。たとえば『早寝早起きのコツは？』って入力すると答えてくれるよ。」
（ターゲットが入力）
ターゲット：「普通の回答かと思ったら…『ありがとう』って入ってる！？すごい！」

さりげなく伝えられるのが Markdown AI の魅力です！

オリジナルな言葉を贈ってみよう

オリジナルなメッセージを組み込むには、Markdown AI（2025年1月2日現在、無料で利用可能）を使用します。以下の手順に従って、簡単に設定できます。

公式ガイド：
Markdown AIの使い方

このツールを実装するには、AIプロンプトの設定と、それを動作させるためのJavaScriptコードをWebページに記述する必要があります。

詳細はこちら

AIプロンプトの設定

公式ガイドに記載された手順に従って、Markdown AI上でプロンプトを設定します。

以下のようにプロンプトを作成します：

あなたは、ユーザーの質問に対して、**指定された文字列の各文字を順番どおりに回答文の文頭で使用するAIアシスタント**です。以下のルールを厳守して回答してください。

1. **指定文字列の各文字**を、順番どおりに回答の**各文の文頭**で使用してください。  
2. **各文**はユーザーの質問に関連する**具体的で簡潔な内容**にしてください。  
3. 指定文字列を**すべて使い切った時点で回答を終了**し、それ以降は**一切の文を追加しない**でください。  
4. **ハイフンや番号、その他の記号**は使用しないでください。  
5. 回答は**1回の出力で完結**させ、**複数回に分けての回答は禁止**です。  
6. もし文字列を使い切っていない場合は、関連情報を補足して**すべての文字を使い切る**まで続けてください。

**入力形式：**
JSON形式で以下のように渡されます：
- `question`: 質問の内容。
- `hiddenString`: 指定された文字列。

**出力形式：**
質問に関連する回答を、以下のように指定文字列を使用して出力してください。

**例：**
質問: 簡単に気分転換する方法はありますか？  
指定された文字列: ありがとう  

**出力:**
あたたかい飲み物を飲むと気持ちが落ち着きます。  
りらくぜーしょん音楽を聴くのもおすすめです。  
がいこう的に外へ散歩すると気分がリフレッシュします。  
とうぜん、十分な休息をとることも重要です。  
うれしい気持ちで自分を労わることも大切です。

AIモデルの選択
- 「Memory」のチェックボックスを外します。
- 「Select Model」から、OpenAI社のgpt-4o-miniなどを選択してください（他のモデルも選択可能です）。

Webページの全体コード

以下は、サプライズAIを動作させるためのWebページの全体コード例です。

Webページの全体コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AIアシスタント</title>
  <style>
    /* グローバルなボックスサイジングの設定 */
    *, *::before, *::after {
      box-sizing: border-box;
    }

    body {
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      background-color: #eef2f3;
      display: flex;
      flex-direction: column;
      align-items: stretch; /* 子要素が横幅を広げる */
      min-height: 100vh; /* 最小高さを設定 */
      margin: 0;
      padding: 10px; /* 余白を10pxに設定 */
      overflow-x: hidden; /* ページ全体の横スクロールを防止 */
    }

    .container {
      background-color: #ffffff;
      padding: 20px; /* パディングを20pxに設定 */
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      width: 100%; /* 幅を100%に設定 */
      max-width: 800px; /* 最大幅を800pxに設定 */
      box-sizing: border-box;
      position: relative;
      margin: 20px auto; /* 上部にマージンを追加し中央揃え */
    }

    /* タイトルのスタイリングを改善 */
    h1 {
      text-align: center;
      color: #4CAF50; /* 鮮やかな緑色に変更 */
      margin-bottom: 15px;
      transition: color 1s ease;
      font-size: 32px; /* フォントサイズを大きく */
      font-family: 'Arial Black', Gadget, sans-serif; /* より目立つフォントに変更 */
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* 影を追加して立体感を演出 */
    }

    label {
      display: block;
      margin-bottom: 6px;
      font-weight: bold;
      color: #555555;
      transition: color 1s ease;
      font-size: 14px;
    }

    input[type="text"] {
      width: 100%;
      padding: 10px 15px; /* パディングを10px 15pxに設定 */
      margin-bottom: 15px;
      border: 1px solid #cccccc;
      border-radius: 5px;
      font-size: 14px;
    }

    button {
      width: 100%;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      position: relative;
    }

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

    button:hover:not(:disabled) {
      background-color: #45a049;
    }

    .response {
      margin-top: 20px;
      padding: 15px;
      background-color: #f1f1f1;
      border-radius: 5px;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
      display: none;
      position: relative;
      overflow-x: auto; /* 横スクロールを許可 */
      overflow-y: auto; /* 縦スクロールを許可 */
      max-height: 300px; /* 最大高さを設定 */
      max-width: 100%; /* 最大幅を100%に設定 */
    }

    .response p {
      margin: 0 0 8px 0;
      font-weight: bold;
      color: #333333;
      transition: color 1s ease;
      font-size: 16px;
    }

    .response ul {
      list-style-type: none;
      padding: 0;
      white-space: nowrap; /* リスト全体の改行を防止 */
      max-width: 100%; /* 最大幅を100%に設定 */
    }

    .response li {
      margin-bottom: 8px;
      padding-left: 0;
      color: #555555;
      font-size: 14px;
      line-height: 1.4;
      position: relative;
      transition: color 1s ease;
      white-space: nowrap; /* 各リスト項目の改行を防止 */
    }

    /* 10秒後に適用する緑色のスタイル */
    .green-color h1,
    .green-color label {
      color: #4CAF50;
    }

    .green-color .response li::first-letter {
      color: #4CAF50;
      font-weight: bold;
    }

    /* スピナーのスタイル */
    .spinner {
      border: 4px solid #f3f3f3;
      border-top: 4px solid #4CAF50;
      border-radius: 50%;
      width: 20px; /* サイズを20pxに設定 */
      height: 20px; /* サイズを20pxに設定 */
      animation: spin 2s linear infinite;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8px; /* マージンを8pxに設定 */
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* 通知ボックスのスタイル */
    .notification {
      margin-top: 20px; /* 上部にマージンを追加 */
      padding: 15px;
      background-color: #dff0d8;
      border: 1px solid #a3dca3;
      border-radius: 5px;
      width: 100%; /* 幅を100%に設定 */
      max-width: 800px; /* 最大幅を800pxに設定 */
      box-sizing: border-box;
      text-align: center;
      font-size: 18px;
      color: #3c763d;
      opacity: 0;
      visibility: hidden; /* 非表示時に不可視 */
      transition: opacity 1s ease, visibility 1s ease;
      margin-left: auto;
      margin-right: auto;
    }

    .notification.show {
      opacity: 1;
      visibility: visible; /* 表示時に可視 */
    }

    @media (max-width: 600px) {
      .container {
        padding: 15px;
        max-width: 100%; /* 最大幅を100%に設定 */
      }

      h1 {
        font-size: 20px;
        margin-bottom: 12px;
      }

      label {
        font-size: 13px;
        margin-bottom: 5px;
      }

      input[type="text"], button {
        font-size: 13px;
        padding: 8px 12px;
      }

      .response p {
        font-size: 14px;
        margin-bottom: 6px;
      }

      .response li {
        font-size: 13px;
        margin-bottom: 6px;
        line-height: 1.3;
      }

      .notification {
        font-size: 16px;
        margin-top: 12px;
        padding: 12px;
        height: auto; /* 高さを自動に設定 */
      }

      .notification.show {
        font-size: 18px;
      }

      .spinner {
        width: 18px;
        height: 18px;
        margin-left: 6px;
      }
    }
  </style>
</head>
<body>
  <div class="container" id="container">
    <h1>AIアシスタント</h1>
    <label for="text-1735653501">質問を入力してください:</label>
    <input type="text" id="text-1735653501" placeholder="例: 運動を継続するコツは？">
    <button id="ask-button">質問する</button>

    <div id="response-area" class="response">
      <p>AIの回答:</p>
      <ul id="answer-1735653501"></ul>
    </div>
  </div>

  <!-- 通知ボックス -->
  <div id="notification-box" class="notification">
    メッセージ
  </div>

  <script>
    // 設定セクション
    const HIDDEN_WORD = "ありがとう"; // 隠しワード

    // フラグとメッセージの保存変数を追加
    let isProcessing = false;
    let currentMessage = null;
    let requestCounter = 0; // リクエストのカウンター
    let currentRequestId = 0; // 現在処理中のリクエストID
    const processedRequestIds = new Set(); // 処理済みのリクエストIDを保持するセット
    const serverAi = new ServerAI(); // ServerAI のインスタンスを作成

    // ボタンのクリックイベント
    document.getElementById('ask-button').addEventListener('click', async () => {
      // 1. フラグをセットして、他のクリックを防ぐ
      if (isProcessing) {
        return; // 既に処理中の場合は何もしない
      }
      isProcessing = true;

      const button = document.getElementById('ask-button');
      const questionInput = document.getElementById('text-1735653501');
      const responseArea = document.getElementById('response-area');
      const answerList = document.getElementById('answer-1735653501');
      const notificationBox = document.getElementById('notification-box');
      const container = document.getElementById('container');

      // ユーザーの質問を取得
      const question = questionInput.value.trim();

      if (!question) {
        alert("質問を入力してください！");
        isProcessing = false; // フラグをリセット
        return;
      }

      // リクエストIDを生成
      requestCounter++;
      const requestId = requestCounter;
      currentRequestId = requestId;

      // ボタンと入力フィールドを無効化し、「質問中...」と表示
      button.disabled = true;
      questionInput.disabled = true;
      button.innerHTML = '質問中...<span class="spinner"></span>';

      // 回答エリアと通知ボックスを非表示に
      responseArea.style.display = 'none';
      notificationBox.classList.remove('show'); // 通知ボックスを非表示に
      container.classList.remove('green-color'); // 色変更クラスを削除

      try {
        // ServerAIのメッセージに指定文字列を含める
        const message = JSON.stringify({
          question: question,
          hiddenWord: HIDDEN_WORD, // 変更された変数名を使用
        });
        const answer = await serverAi.getAnswerText('YOUR_API_KEY', '', message);

        // デバッグ用にコンソールに回答を表示
        console.log("サーバーAIからの回答:", answer, "Request ID:", requestId);

        // レスポンスが最新のリクエストに対応しているかを確認
        if (requestId !== currentRequestId) {
          console.warn("古いリクエストのレスポンスを無視しました。");
          isProcessing = false; // フラグをリセット
          return;
        }

        // レスポンスが既に処理済みかを確認
        if (processedRequestIds.has(requestId)) {
          console.warn("このリクエストIDのレスポンスは既に処理済みです。");
          isProcessing = false; // フラグをリセット
          return;
        }

        // レスポンスを処理済みとしてマーク
        processedRequestIds.add(requestId);

        // 現在のメッセージを保存
        currentMessage = answer;

        // 回答リストをクリア
        answerList.innerHTML = '';

        // 回答を行ごとに分割し、各行を<li>要素として追加
        const lines = currentMessage.split('\n');
        lines.forEach(line => {
          const li = document.createElement('li');
          li.textContent = line;
          answerList.appendChild(li);
        });

        // 0.8秒の遅延を追加してから回答エリアを表示（複数回連続で回答される事象の回避）
        setTimeout(() => {
          responseArea.style.display = 'block';
        }, 800); // 800ミリ秒 = 0.8秒

        // 10秒後に通知ボックスを表示し、ボタンと入力フィールドを再有効化
        setTimeout(() => {
          notificationBox.textContent = HIDDEN_WORD;
          notificationBox.classList.add('show');
          container.classList.add('green-color'); // 緑色のクラスを追加

          // ボタンと入力フィールドを再有効化
          button.disabled = false;
          button.innerHTML = '質問する';
          questionInput.disabled = false;

          // フラグをリセット
          isProcessing = false;
        }, 10000);
      } catch (error) {
        responseArea.style.display = 'block';
        answerList.innerHTML = `<li style="color: red;">エラーが発生しました。接続を確認し、もう一度お試しください。</li>`;
        console.error("サーバーAIとの通信エラー:", error);

        // エラー時もボタンと入力フィールドを再有効化
        button.disabled = false;
        button.innerHTML = '質問する';
        questionInput.disabled = false;

        // フラグをリセット
        isProcessing = false;
      }
    });

  </script>
</body>
</html>

コードのポイント

HIDDEN_WORD
- 隠しメッセージの設定。
- "ありがとう" をお好きな言葉に変更可能。
YOUR_API_KEY
- ご自身のAPIキーを設定してください。
- 公式ガイドを参考に、Webページ開発画面で「Insert」->「Script」を挿入してAPIキーを取得してください。

これだけで簡単にカスタマイズできます！

Mermaidを使ってコードを整理

Mermaidは、図やフローチャートを作成するための強力なツールです。複雑なコードやプロセスも、Mermaidを使えば簡単に整理して視覚化できます。Markdown形式で利用可能なため、視覚的な情報を手軽に整理し、他者と共有することができます。

この記事を書いた後に、Markdown AIでこの実装がアップデートされていることに気づきました💦。私自身、Mermaidを使ったことがありませんでしたが、このコードのフローチャートを実際に試してみると非常に便利なツールだと感じました。

Markdown AIでは、Markdown形式に対応しており、Mermaid記法を簡単に作成・共有することが可能です。

👉Markdown AIで実装コードのフローチャートの共有

フローチャートとは？

フローチャートは、プロセスや作業の流れを視覚的に表現するための図です。複雑な処理をわかりやすく示すことができ、主に以下の要素で構成されます：

開始・終了 (楕円): プロセスの始まりや終わりを表します。
処理 (四角形): 実行する具体的な作業やステップを表します。
判断 (ひし形): 条件分岐を表し、選択肢によって異なるフローに進みます。
矢印: 流れを示し、各ステップがどのように繋がっているかを表します。

実装コードのフローチャート

以下に実装コードのフローチャートを示します。

まとめ

本記事でご紹介した サプライズAI は、「遊び心」と「実用性」を兼ね備えた魅力的なツールです。Markdown AIを活用すれば、あなたのアイデアを簡単に形にすることができます。

ぜひ、この記事を参考に、驚きと感動を届けるユニークなツールを作ってみてください。
特別な日や何気ない日常に小さなサプライズを仕込むことで、大切な人とのコミュニケーションがより楽しく、心に残るものになるはずです！

最後に、新年の挨拶にちなんで、

あたらしい一年に希望を乗せて、
けっして恐れず挑戦し、
おどろきと感動を分かち合い、
めぐり合うすべての瞬間を大切に！

Markdown AI を使って、あなただけの特別なメッセージを創りましょう！

作成した隠しメッセージ集

「ありがとう」
https://mdown.ai/content/9ad619f0-5928-4619-a601-9663c3ff1f4a
「おめでとう」
https://mdown.ai/content/fa2a383e-a61e-486e-a07e-d7db4a54d157
「あけおめ」
https://mdown.ai/content/bdf60334-84f9-4b7f-8263-4c44c92e364f

参加イベント

参考