初心者・子どもでも簡単！markdown AIの新機能使ってみた！

導入

こんにちは、もんすんです！

「Webサイト制作のハードルを下げたい」
そんな思いを持つ方にぜひお勧めしたいmarkdown AIの紹介です！
markdown AIは、非エンジニアや初心者でも手軽にWebサイトを作成・公開できる革新的なツールです。
この記事では、前回の記事で紹介した基本機能に加えて、markdown AIの新たな可能性を引き出す「AIモデル生成機能」について詳しく解説します。

前回の記事はこちらからご覧ください。

markdownAIについて

概要

前回記事とほとんど同じですが、
markdown AIは、誰でも簡単にWebサイトを作成・公開できるツールです。
特に子どもや非エンジニアに優しい設計がされています。

markdown AIを利用しない場合、Webサイトを作成・公開するには、

1. Webサイトのデザインの作成
2. Webサイトのドメイン取得とサーバーの確保
3. HTML/CSS/JavaScriptによるWebサイトのページの作成
4. 公開

という手順を踏む必要があります。

これらの手順のうち、特に「HTML/CSS/JavaScriptによるWebサイトのページの作成」においてはプログラミングの技術が必要になるため、子どもや非エンジニアにとって障壁があるように感じます。
一方で、markdown AIを使うとこういった手順が不要になります。

また、公式のサイトには以下の記載があります。

You need to rent a server to create a website, but with markdown AI you can publish it as is.

Publishing is easy and you can get your site's URL with just a few clicks of a button.

日本語訳
Webサイト制作にはサーバーを借りる必要がありますが、markdown AIならそのままサイトを公開できます。

公開は簡単で、ボタンを数回クリックするだけでサイトのURLを取得することができます。

上記からも、サーバーに関する知識などやプログラミング経験がなくても、Webサイトを作成することが可能ということが伺えます。

こういった部分がmarkdown AIの強みなんでしょうね！

新機能について

前回記事から、5ヶ月ほど経ちましたが、markdown AIにログインした先には、新しいボタンが追加されていました。

ロボットのアイコンのボタンです。

この機能はAIモデル生成機能のようです。
こちらでは、markdown AIで作成したWebサイトなどを基にAI モデルを作成することができ、さらにそれを自分で作成したmarkdown AIのWebサイトに、生成したのAIモデルを利用するための機能を設置することができます。

AIモデル生成

上述のロボットのボタンをクリックしましょう！
すると以下の画面が現れます。

画面は2段構成になっています。
まず、1段目は、上記の画像と同じですが、作成するAIモデルの基本情報を設定すル部分です。

• Model List
  既に作成したAIモデルが記録されるエリアになります。
  AIモデル名をクリックすると、選択したAIモデルの設定情報が確認できます。
  私の場合、既に[test]と[new]という名前のAIモデルを作成していたため、上の画像ではModel Listに2つの項目が表示されています。

• Select Model
  これは、これから利用するAIモデルの基になるモデルを選択できるセレクトボックスです。
  Gemini/Claude/gpt-4o-mini/Perplexityといったモデルを選択できます。それぞれのモデルの特徴は以下の記事から確認が可能です。
  MarkdownAIの誰でもわかる使い方#【AIモデルの説明】

• Model Name
  自分で作成する(した)AIモデルの名前です。自分がどれがどのAIモデルだったかわからなくならないように忘れない名前をつけるのが良さそうです。

• Prompt
  極めて重要な項目です。作成するAIに何をしてほしいかを指示するためのエリアです。markdown AIでは「5つのR」というプロンプトの書き方を推奨しているとのことでした。
  MarkdownAIの誰でもわかる使い方#プロンプトとは
  私も先日プロンプトエンジニアリングの「7R」について記事を書きましたので、参考にしていただけたらと思います。

試しにPrompt欄に「アヒル口調にしてください」と入れて、AIに「こんにちは」と送ると、「こんにちは、アヒルだよ〜！クワック！今日はどんなことをお話しするのかな〜？🐥✨」とAIから返信が返ってきました。間違いなくアヒルですね。
この場合、7Rのうちの「Role(役割)」に分類されるかと思います。

次は2段目の内容です。

• Knowledge
  AIに事前に教えておきたい情報を共有することができます。
  これは、おそらくRAG(Retrieval Augmented Generation：検索拡張生成)という機構が利用されていると思われます。RAGは、事前にAIに教えておいた情報をデータベースに保持しておき、それに関連する質問が来た際にデータベースから情報を取りに行くというものです。つまり、この事前に共有したデータを基に回答を生成してくれるようになります。
  さて、このKnowledgeですが、以下の3種類の方法で、事前情報を提供しておくことができるようです。
  • markdown
    • 既にmarkdown AIで作成したページを共有できます。
    • [View]ボタンから、そのページをマークダウンではなく、HTMLで確認することが可能です。
  • file
    • HTML・PDF形式のファイルを共有できます。
    • 自分が作成しているHPの情報をファイルで共有したり、資料をPDFで共有したりすることができるようです。
  • link
    • WebサイトのURLを共有できます。
    • 自分のHPの情報や会社の情報などが記載されたWebサイトがある場合に利用できます。

Knowledgeは[Upload]ボタンを押すことで、アップロードが完了します。

• Comments
  作成するAIに対するメモのようなもののようです。特に作成するAIモデルには影響しません。

• Create/Updateボタン
  このボタンで、設定を保存します。
  これでこれまでAIを使ったことがない方でもすぐにAIモデル作成が完了です！！

markdown AIのページへのAIモデルの適用

AIモデルをmarkdown AIのページへ埋め込む方法は極めて簡単です！
まず、作成画面に進み、以下の「Insert」ボタンをクリックします。

次に「Script」を選択し、適用したいAIモデルを選択した上で、「Insert」をクリックします。

すると、以下のように作成中のページに以下のようにスクリプトが埋め込まれます。

これは、markdownではなく、少々プログラミングの知識が必要になる領域ではありますが、小難しいことは一旦割愛します。
ここで、さらに上にある「View」ボタンをクリックしてみましょう。
すると、以下のように「Run AI」というボタンが現れると思います。

さらにこのボタンをクリックすると、...

メッセージが表示されました！！
これは、AIからの返信を表示しており、ボタンをクリックする度、表示されるメッセージは変化していきます。

これで、AIの埋め込みは完了です！
ようこそ、AIの世界へ！！！

markdown AIとAIモデル機能の使い道を考えてみた！

さて、ここからはどのようにこの機能を活かしていくか考えてみたので紹介していきます。

社会人向け

2024年11月時点でKnowledgeを追加するとサーバーエラーとなるため、一旦ここでは活用方法の提案のみとなります。

私は、過去に製造業で仕事をしていたことがあります。

その工場には長い歴史があり、作業フローが極めて複雑になっておりました。
そのため、そのフローをWordで作成し、印刷し、作業者が閲覧できるようにファイリングして棚に収納していました。
安全管理のためのフローだったこともあり、全部で数百ありました。

このように手順書をWordなどで作成し、紙で保存している、、という会社はいまだに多いのではないかと思います。

Phase1: 作業フロー書をmarkdown AIで共有する

まずPhase1として、Wordで作成していた作業フロー書をmarkdown AIで書き起こしていきます。
以下のようにマークダウンの見出しに基準を決めておくと、良いでしょう。

見出しの基準(例)

# タイトル(例: コンテナへのAA粉の投入手順)

## 手順番号(例: Step1)

### 手順小番号(例: Step1-2)

以下のようにマークダウンを入力した後は、「Save」を選択し、入力した内容を保存し、さらに「View」を選択し、閲覧モードに切り替えます。

そうすると、以下のように編集モードから閲覧モードになるので、次は「URL」を選択します。

以下のようなモーダルが表されるので、指示の通り「Publish」を選択しましょう。

すると、最後にURLが表示されるので、これで、1ページ手順書の作成が完了します。

Phase2: AIモデルのKnowledgeに作業フロー書を読み込ませて、チャットBotにする

さて、Phase1で、作業フロー書は、紙面からデジタルに変換することができました。

子ども向け

子どもは某論破王の方(の真似をするの)が好きよく聞きます。
子どもに興味を持ってもらうために、その方を模した相手とディベートをできるチャットを作成してみました。

AIモデル作成

ここでは、markdown AIで推奨している「5つのR」というプロンプトの書き方を利用しました。

MarkdownAIの誰でもわかる使い方#プロンプトとは

Request: 私とディベートしてください。上から目線の敬語で回答してください。
Role: あなたは大人で、議題に関するの専門家です。
Rule: あなたの一人称は「おいら」です。
Recommend: 私が個人的な感想を述べた場合、「それってあなたの感想ですよね？」と高圧的に返答する。感想ではなかった場合は、それに対して反対意見を述べる。「だって、〇〇って△△じゃないですか？」や「〇〇ですよね？」という表現を多用してください。日本語で200文字以内で返答してください。

こちらを[ボタン]から開いた「Create Model」の画面の「Prompt」に入力します。

そのほかの設定は以下の通り、

• Select Model: 自由に好みなものを選択
• Memory: チェックをオンにします。✅
• Model Name: 自由に自分がわからなくならないように設定します。
• Knowledge: 何も設定しません。
  設定が完了したら、下にある「Create」ボタンを押します。

[参考]

AIモデルの埋め込み

次にmarkdown AIのサイト作成ページにAIモデルを埋め込んでいきます。
基本的な作業としては、上の「markdown AIのページへのAIモデルの適用」で紹介しているので、そちらを参考にしてください。

ここで、追加された処理の中に以下のソースコードがあります。
この中で、[**********]と書いた部分には、ランダムな文字列が書かれていると思います。
これは次の「画面の修正」のところで使うので、メモ帳とかにコピペしておきましょう。

const answer = await serverAi.getAnswerText('**********', '', message);

画面の修正

上記で、AIモデルを埋め込んだあと、注意書きにある[**********]をコピーしたら、一旦エディタをまっさらにします。

その後、以下のソースコードを埋め込みます。
少々難易度が高めですが、ほとんど、コピペで使えますし、子どもは柔軟なので、おかしなことがあってもすぐに対処できる...と信じています。

# 論破王とディベート対決！

## ディベート設定
<div style="display: inline-block;">
  テーマ: <input type="text" id="theme">についてディベートします。論破王は、
  <select id="opinion">
    <option>賛成</option>
    <option>反対</option>
  </select>
の立場をとります。
</div>
<br>
<br>
<button id="start-btn">ディベート開始</button>
<button id="reset-btn">リセット(テーマ変更)</button>


## 議論
<div id="chat-area">
  <div id="chat-container">
  </div>
  <div id="input-container">
    <input type="text" id="message-input" placeholder="論破王に返信">
    <button id="send-btn" disabled>送信</button>
  </div>
</div>

<script>
(() => {
  // 以下の[**********]をコピーした値に置き換える
  const serverAiId = '**********';
  // ↑↑↑ ここだけ修正 ↑↑↑
  let messageId = 0;
  const serverAi = new ServerAI();
  const startButton = document.getElementById('start-btn');
  const sendButton = document.getElementById('send-btn');
  const resetButton = document.getElementById('reset-btn');
  const theme = document.getElementById('theme');
  const opinion = document.getElementById('opinion');
  const input = document.getElementById('message-input');
  const chatContainer = document.getElementById('chat-container');
  startButton.addEventListener('click', async event => {
      startButton.disabled = true;
    if (theme.value.trim() !== "") {
      theme.disabled = true;
      opinion.disabled = true;
      const themeMsg = `##テーマ## ${theme.value} \n##botの立場## ${opinion.value}`;
      await getAiAnswer(themeMsg).catch((e) => {
        console.error(e);
        startButton.disabled = false;
        theme.disabled = false;
        opinion.disabled = false;
      });
      sendButton.disabled = false;
    } else {
      startButton.disabled = false;
    }
  });

  sendButton.addEventListener('click', async event => {
    sendButton.disabled = true;

    if (input.value.trim() !== "") {
      // Add new message
      const messageDiv = document.createElement('div');
      messageDiv.className = 'user';
      messageDiv.id = `message-${messageId}`;
      messageDiv.textContent = input.value;

      chatContainer.appendChild(messageDiv);
      chatContainer.scrollTop = chatContainer.scrollHeight;
      messageId++;
      const msg = `私の意見に対しての回答のみしてください。\n\n##テーマ## ${theme.value} \n##botの立場## ${opinion.value}\n##私の立場## ${opinion.value}ではない\n\n##私の意見## ${input.value}`;
      await getAiAnswer(msg);
      input.value = '';
    }
    sendButton.disabled = false;
  });

  resetButton.addEventListener('click', async event => {
    chatContainer.innerHTML = '';
    sendButton.disabled = true;
    startButton.disabled = false;
    theme.disabled = false;
    opinion.disabled = false;
  });

  const getAiAnswer = async (message) => {
      const answer = await serverAi.getAnswerText(serverAiId, '', message);
      const messageDiv = document.createElement('div');
      messageDiv.className = 'ai-response';
      messageDiv.id = `message-${messageId}`;
      messageDiv.textContent = answer;

      chatContainer.appendChild(messageDiv);
      chatContainer.scrollTop = chatContainer.scrollHeight;
      messageId++;
  }
})();
</script>

<style>
  button {
    margin-left: 10px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  button:disabled{
    filter:brightness(0.8);
    cursor:not-allowed;
  }
  #chat-area {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 50vh;
  }
  #chat-container {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: #f5f5f5;
  }
  .user, .ai-response {
    margin: 10px 0;
    padding: 10px;
    border-radius: 10px;
    max-width: 60%;
  }
  .user {
    background-color: #d1e7ff;
    align-self: flex-start;
  }
  .ai-response {
    background-color: #f1c40f;
    align-self: flex-end;
  }
  #input-container {
    display: flex;
    padding: 10px;
    background-color: #fff;
  }
  #input-container input {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  #input-container button:hover {
    background-color: #0056b3;
  }
</style>

上記の[**********]の部分を、上のステップでコピーした値に置き換えます。
念の為、修正箇所だけを抽出したものを以下に示します。

// 以下の[**********]をコピーした値に置き換える
const serverAiId = '**********';
// ↑↑↑ ここだけ修正 ↑↑↑

以上の設定を終えると、このような画面が表示されるかと思います。

テーマを入力して、賛成反対を選択し、「ディベート開始」を押すと、「議論」のエリアでチャットが可能になります。

公開URL

こちらから遊ぶことが可能です。

終わりに

今回は、markdown AIの概要とAIモデル生成機能を紹介しました。
markdown AIはプログラミングの知識がなくてもWebサイトを簡単に作成できるツールで、特に非エンジニアにとって手軽に利用できる点が魅力です。

また、AIモデル生成機能により、自作したサイトにAIを組み込むことができ、ユーザー体験を大幅に向上させる可能性を秘めています。

markdown AIは今後、さらに使いやすいツールとして進化していって欲しいと思いました。

もしWebサイト作成やAI導入に興味がある方は、この記事を参考にぜひmarkdown AIを試してみてください。