Markdown AIで試験問題出題サイトを作ってみた！初心者でもわかる使い方も説明しています

はじめに

イベントをきっかけにMarkdown AIを試してみました。
いざ操作してみると「ん？どうやって操作するの？」と思ってしまいました…
（同じように感じた方、多いと思います。）

そこで、Markdown AIの使い方をまとめました。記事が長くなってしまいましたが、下記のMarkdown AIの使い方 を読んでいただくと「こうやって使うのか！」と納得していただけると思います。
簡単に作成できるレシピサイトを例にして操作方法を説明しています。

タイトルに記載している「試験問題出題サイト」の作成方法だけ知りたい方は、使い方の説明文を飛ばして、試験問題出題サイトの作成方法 から読み進めていただくと良いかと思います。
　使い方の記事の内容が長いので…

「 役に立った! 」 と思っていただけたら、いいね評価 をよろしくお願いします。

Markdown AIとは

Markdown AIは、AIモデルを活用して、簡単にWEBサイトを構築・公開できるツールです。URLを知っている人だけにアクセスを制限できるため、特定の人にだけ共有したいときに便利です。

さらに、Markdown形式で記述できるため、シンプルで見やすいデザインを簡単に作成できます。必要に応じてHTMLやJavaScriptを組み込める柔軟性もあります。

個人プロジェクトやチームでの情報共有に便利で、無料で利用できるシステムなので、気軽にお試しできます。

Markdown AIの使い方

①ログインする

下記のURLにてMarkdown AIにログインします。
https://mdown.ai/

※ Googleアカウントでログインします。

②ファイルの作成

[＋]ボタンでファイル(ページ)を追加します。
Markdown形式やHTML、JavaScriptを使って画面に表示する文章を入力します。
入力が完了すると［Save］ボタンにて入力した内容を保存します。
［View］ボタンをクリックして、WEBに公開された時のイメージ画面を確認します。

アイコンボタン	意味	説明
	AIモデルの作成	AIモデルを作成する画面へ移動します。詳細については、下記の「④AIモデル作成」で説明しています。
	ファイル新規追加	[＋]ボタンでファイル(ページ)を新規追加します。
	ファイル削除	作成したファイルを削除します。削除すると、公開したURLも同時に削除されるためご注意ください。
	元に戻す	ページに入力した内容を前の状態に戻します。
	プレビュー	作成したページがWEB上で公開された場合のイメージを表示します。
	画像ファイル、AIモデルの追加	ページに画像ファイルや、下記の「③AIモデル作成」で作成したAIモデルを追加できます。
	保存	入力した内容を保存します。

CSSの書き方

<style>
  // ここにCSSコードを記述する
</style>

htmlの書き方（サンプル）

<div class="main">
  <h1>文章</h1>
</div>

JavaScriptの書き方

<script>
  // ここにJavaScriptコードを記述する
</script>

③ファイルの公開方法

［View］ボタンをクリックすると、WEBに公開された時のイメージ画面が表示されます。

補足：JavaScriptの動作確認は、公開されたWEB画面で確認することをおすすめします。View画面では、正常に動作しないことがあります。

アイコンボタン	意味	説明
	戻る	ページの入力画面へ戻ります。
	WEBに公開する	ページをWEB上に公開します。この操作で公開されるURL情報を取得できます。
	保存	入力した内容を保存します。[Save]ボタンにて入力内容を保存していないと[URL]ボタンが押せないので、その時に使用します。

［URL］ボタンをクリックすると「Create Public Link 」のダイアログが表示されます。
［Publish］ボタンをクリックすることで、WEB上にページが公開されます。
公開先のURLは、［Link］ボタンの アイコンをクリックすることで、公開先のURLをコピーすることができます。

アイコンボタン	意味	説明
	公開URLの表示	公開されたページのURLを表示します。
	HTML形式の公開URLの表示	HTML形式（.com）で公開されたページのURLを表示します。 【【2024年11月17日記述】バグなのか仕様なのか分かりませんが、HTML形式のURLでは初回の公開内容は正常に表示されますが、編集後に保存した内容が反映されません。そのため、上記のLinkのURLを使用することをおすすめします。
	コードを表示	作成したページのHTMLコードを表示します。
	URLコピー	公開URLのパスをコピーします。
	閉じる	ポップアップを閉じます。
	「公開しない」に変更	公開したページを非公開に変更します。再度［Publish］ボタンにて公開するに変更してもURLのパス情報は変更されませんでした。

④AIモデルを作成する

ボタンをクリックして、Create Model 画面を表示します。

Select Modelにて使用するAIモデルを選択します。
こちらの選択によってAIが回答してくれる内容が変わるので、自身が作成するAIに合ったモデルを選択してください。
Memoryにチェックが入っている状態で、Model NameにてAIモデル名を入力します。

Select Model : 使用するAIモデル

各AIモデルの説明になります。

AIモデル名	特徴と用途
gpt-4o-mini	軽量で効率的なモデル。簡単な質問や高速な処理が求められる場面に適しています。
gpt-3.5-turbo	高速かつコスト効率の良いモデル。一般的な会話や基本的な質問への回答に優れており、チャットボットやカジュアルなやり取りに適しています。
gpt-4	高度な質問や複雑な問題への対応に優れたモデル。高度な処理を行うため、回答に時間がかかる場合があります。
Claude	カスタマーサポートやFAQ対応に適したモデル。ユーザーとの自然でスムーズな会話が得意で、安全性や信頼性の高い対話型AIを必要とする場面に最適です。
gemini	Googleの検索技術を活かした高度な情報処理が得意なモデル。検索機能を強化したいサイトや、ユーザーの多様な質問に迅速に回答します。
Perplexity	リアルタイムで情報検索に特化したモデル。最新の情報を収集したり、特定のトピックに関する正確なデータや背景情報を素早く確認したい場合に適しています。

Memory : メモリ機能（有効/無効）

AIとの会話を一時的に記憶しておくかどうかの設定ができます。
チェックを付けると、AIが連続した質問や関連する情報を覚えた状態で回答できるようになります。

チェックボックス	説明
チェック有り	会話中のみAIが一時的に記憶を保持し、会話が終了すると記憶が削除されます。
チェック無し	AIは記憶を保持せず、毎回新しい会話として応答します。

Model Name : AIモデルの名前

ここで作成したAIモデルの名前を入力します。

次に、PromptでAIモデルに対して何をしてほしいかの指示を記載します。
AIに依頼する際は、5つのR（Role, Request, Rule, Reason, Recommend）に基づいて指示を依頼するのが良いと言われています。
指示を入力後、[Create]ボタンをクリックしてAIモデルを登録します。

Prompt記入例

Role:あなたは料理の献立を考える人です。
Request:本日の料理のレシピを提供してください。
Rule:4人分の材料で考えてください。材料と作り方の内容をMarkdown形式で記載してください。
Reason:使える材料をカンマ区切りで入力します。その材料を元に今日の献立を考えてください。調理時間も計算してください。
Recommend: 簡単に作れるレシピを教えてください。

Prompt：プロンプト

5つのRの説明になります。

1.Role（役割）
AIにどのような役割して欲しいかを伝えます。
例：あなたは料理の献立を考える人です。

2.Request（依頼）
AIにやってほしいことを伝えます。
例：本日の料理のレシピを提供してください。

3. Rule（ルール）
AIのが守るべきルール、やってはいけないことを伝えます。
例：4人分の材料で考えてください。材料と作り方の内容をMarkdown形式で記載してください。

4. Reason（推論）
AIにやってほしいことについて詳しい内容説明します。
例：使える材料をカンマ区切りで入力します。その材料を元に今日の献立を考えてください。調理時間も計算してください。

5. Recommend（推奨）
AIに特定の選択肢や行動を推奨するよう指示します。（意思決定や選択肢の提示を求める場合に有効です。）
例：簡単に作れるレシピを教えてください。

Knowledge：情報提供

現在（2024年11月17日）、Knowledge機能を使用してAIモデルを作成しようとすると、「An error has occurred.」というエラーが発生し、AIモデルでの回答が実行できません。
B版だからまた対応されていないのか？
使えなかったので、使用していませんが、「Knowledge」機能について調べたので、その内容を以下に記載します。

Knowledgeとは

Knowledgeは、AIモデルに特定の情報や知識を事前に提供する機能です。この機能を利用することで、AIは登録された情報を基に、より的確で迅速な回答を提供できるようになります。
例えば、特定の製品情報やマニュアルを「Knowledge」に登録し、それをAIモデルに共有することで、ユーザーからの質問に対してその情報を活用した回答が可能になります。

Knowledgeは、下記の形式で情報を登録することができます。
登録後、[Upload]ボタンをクリックすることで、AIモデルに情報が反映されます。

Knowledge	説明
markdown	Markdown形式でテキストボックスに直接入力し、情報を提供します。
file	HTMLやPDF形式のファイルをアップロードして、情報を提供します。
link	情報が記載されたウェブサイトのURLを入力し、そのサイトの情報を提供します。

Comments：メモ

Commentは、AIモデルにメモを残しておくための機能です。このメモは、AIの動作や応答には一切影響を与えません。

⑤AIモデルの動作確認（Playground）

作成したAIモデルが、求めている回答をしてくれるかを確認します。
※求めている回答がされない場合は、「Prompt」の入力内容を見直してください。

「Model List」から作成したAIモデルを選択し、[Playground]ボタンをクリックすると、AIモデルの動作を確認する画面に遷移します。

引数を渡す場合の動作確認：
テキストボックスに、AIモデルに渡す内容を入力して、［Send］ボタンをクリックします。
この操作により、「Prompt」で入力した指示内容と「テキストボックス」で入力した文を組み合わせた回答が生成されます。

引数を渡さない場合の動作確認：
［Prompt］ボタンをクリックします。
この操作により、テキストボックスの内容を渡さずに、「Prompt」で入力した指示内容のみで、回答が生成されます。

上記の通り、調理時間が出力されていなかったため、Promptに下記の指示文を追加しました。

Prompt記入例

Rule:出力したレシピの調理時間を計算して、計算した時間を記載してください。

これにより、期待通りの回答を得ることができました。
Playgroundの動作確認画面で事前にAIモデルの動作を確認しておくと、スムーズに進めることができます。

⑥AIモデルの登録

上記で作成したAIモデルを登録します。

②の処理で追加したページを表示します。
［Insert］ボタンをクリックします。
「Insert」ダイアログが表示されるので［Script］ボタンをクリックします。
作成したAIモデルの一覧が表示されます。登録するAIモデルを選択して［Insert］ボタンをクリックします。

下記のように登録されるので［Save］ボタンをクリックします。

デフォルトだと…下記のような画面になってしまうので、コードを少し修正します。

修正した内容は、下記になります。

htmlの書き方（サンプル）

// 入力ボックスの「value="Teach me about Markdown."」→「value=""」に変更
<input type="text" id="text-1731998837" style="width: 200px;" value="">
  
// ボタン名を「Run AI」→「レシピ検索」に変更
<button type="button" id="button-1731998837">レシピ検索</button>

以下は、公開されたWEB上で実行した画面になります。

全体の流れ

上記の「Markdown AI」の使い方の一連の流れになります。

試験問題出題サイトの作成方法

私は、Ruby on Rails Gold試験問題出題サイトを作ってみました。
試験名を変更すると、それ用の試験に変更することができるので、作りたい試験問題の名称に変更して作成してみてください！

※補足：出力内容の質を重視しているため、出力速度が遅いです。（使用するAIモデルの選択によって出力速度が異なります）

①下記のAIモデル（試験問題作成用と試験問題回答用）を２つ作成します。

1.試験問題作成用のAIモデルを作成

Select Model：gpt-4o-mini
Memory：チェックあり
Model Name：Ruby Gold 試験問題の作成
Prompt：下記を登録する

Prompt

Role:あなたはRuby Association Certified Ruby Programmer Goldの試験問題を出題する人です。
Request:模擬問題のように試験に出題される問題を出力してください。
Rule:1問だけ出力してください。
Rule:A,B,C,Dの4択の問題を出力して、答えは出力しないでください。
Rule:markdown形式で出力してください。
Reason:入力した内容の試験範囲の問題を出力してください。
Recommend:既に出題した問題は再び出さないでください。

2.試験問題回答用のAIモデルを作成

Select Model：gpt-4
Memory：チェックあり
Model Name：Ruby Gold 試験問題の回答
Prompt：下記を登録する

Prompt

Role:あなたはRuby Association Certified Ruby Programmer Goldの試験問題を採点する人です。
Request:簡潔で明確な回答を提供してください。
Rule:解りやすい文章で、問題を解説してください。
Rule:markdown形式で出力してください。
Reason:入力した内容の問題の答えが合っているか答えてください。
Recommend:答えが合っている場合でも、問題の解説をしてください。

②ファイル（ページ）を作成します。

[Insert]ボタンにて作成したAIモデルを追加するとモデルの番号を取得することができます。

// 例）下記の「aUDR8re9Z4sS3dLU1cmVPe」がAIモデル番号になります
const answer = await serverAi.getAnswerText('aUDR8re9Z4sS3dLU1cmVPe', '', message);

私の作成したAIモデルの番号は、下記となっておりました。

• 試験問題作成用のAIモデルを作成： aUDR8re9Z4sS3dLU1cmVPe
• 試験問題回答用のAIモデルを作成： szYppvede15m99QEk35vMr

下記のコードをコピーして貼り付けて、AIモデル番号をご自身が作成したAIモデルの番号に変更することで、使用できるようになります。
また、リストボックスの内容も作りたい試験問題の出題範囲に合わせて変更する必要があります。

試験問題サイトの全文

### Ruby on Rails Gold試験問題出題サイト

<style>
/* AIモデル回答タグデザイン */
.mdownText {
	font-family: monospace;
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 10px;
	white-space: pre-wrap;
}
/*セレクトボックスデザイン  */
select {
  width: 100%;
  max-width: 300px;
  padding: 6px 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
select:focus {
  border-color: #27acd9;
  outline: none;
}
select option {
  padding: 4px;
}
/* ボタンデザイン */
.btn {
	display: block;
	text-align: center;
	margin: 0;
	padding: 4px 14px;
	font-weight: bold;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	border-radius: 20px;
	cursor: pointer;
}
.btn:hover {
	color: #27acd9;
	background: #fff;
}
.btn:disabled {
	color: #aaa;
	background: #ddd;
	border: 2px solid #ddd;
	cursor: not-allowed;
	pointer-events: none;
}
</style>

問題出題範囲を選択する
<select name="examScope">
<option value="全範囲" selected>全範囲</option>
<optgroup label="文法">
<option value="コメント">コメント</option>
<option value="リテラル（数値、真偽値、文字列、文字、配列、ハッシュ等）">リテラル（数値、真偽値、文字列、文字、配列、ハッシュ等）</option>
<option value="変数/定数とスコープ">変数/定数とスコープ</option>
<option value="演算子">演算子</option>
<option value="条件分岐">条件分岐</option>
<option value="ループ">ループ</option>
<option value="例外処理">例外処理</option>
<option value="メソッド呼び出し">メソッド呼び出し</option>
<option value="ブロック">ブロック</option>
<option value="メソッド定義">メソッド定義</option>
<option value="クラス定義">クラス定義</option>
<option value="モジュール定義">モジュール定義</option>
<option value="キーワード引数">キーワード引数</option>
</optgroup>
<optgroup label="組み込みライブラリ">
<option value="組み込みライブラリのObject">Object</option>
<option value="組み込みライブラリの数値クラス">数値クラス</option>
<option value="組み込みライブラリのString">String</option>
<option value="組み込みライブラリのArray">Array</option>
<option value="組み込みライブラリのHash">Hash</option>
<option value="組み込みライブラリのKernel">Kernel</option>
<option value="組み込みライブラリのEnumerable">Enumerable</option>
<option value="組み込みライブラリのComparable">Comparable</option>
</optgroup>
<optgroup label="オブジェクト指向">
<option value="ポリモルフィズム">ポリモルフィズム</option>
<option value="継承">継承</option>
<option value="mix-in">mix-in</option>
</optgroup>
</select>
<br>
<br>
<div style="display: inline-block;">
  <button type="button" id="problemButton" class="btn">問題を出題する</button>
</div>
<br /><br />
<div id="problemText" class = "mdownText" style="display: none;"></div>

<div id="checkbox-answer" style="display: none;">
  <br />
  <span>回答を選択：</span>
  <label><input type="checkbox" name="answer" value="1"> A</label>
  <label><input type="checkbox" name="answer" value="2"> B</label>
  <label><input type="checkbox" name="answer" value="3"> C</label>
  <label><input type="checkbox" name="answer" value="4"> D</label>
  <br /><br />
  <button type="button" id="answerButton" class="btn" disabled>回答する</button>
  <br /><br />
  <div id="answerText" class = "mdownText"  style="display: none;"></div>
</div>

<script>

 // 問題文作成の処理
(() => {

// 問題文のボタンと出力タブ
const problem_button = document.getElementById('problemButton');
const problem_text = document.getElementById('problemText');

// 回答文のボタンと出力タブ
const answer_button = document.getElementById('answerButton');
const answer_text = document.getElementById('answerText')

// イベント１：問題を出題するボタンクリックイベント
problem_button.addEventListener('click', async () => {
     // 問題文が再度作成されるようにデータをクリアしておく
     problem_text.innerText = "";
     problem_text.style.display = 'none';
     document.getElementById('checkbox-answer').style.display = 'none';
     // 回答のチェックボックスを選択なしに設定し、回答タグを非表示にする
     document.querySelectorAll('input[name="answer"]').forEach((checkbox) => {
         checkbox.checked = false;
     });
     answer_text.style.display = 'none';
});

// イベント2：問題を出題するボタンクリックイベント
problem_button.addEventListener('click', async event => {
     problem_button.disabled = true;
     // 問題の出題範囲の指示文を作成
     const examScope = document.querySelector('select[name="examScope"]')?.value;
     const message = '問題出題範囲：' + examScope
     // 問題の出題AIモデルを実行する
     const serverAi = new ServerAI();
     const answer= await serverAi.getAnswerText('aUDR8re9Z4sS3dLU1cmVPe', '', message);
     // 途中で問題文が変更されないようif文で判断する
     if(!problem_text.innerText){
           problem_text.style.display = 'block';
           problem_text.innerText = answer;
           problem_button.disabled = false;
           document.getElementById('checkbox-answer').style.display = 'block'
           // 再度回答されるようにデータをクリアしておく
           answer_text.innerText = "";
           return;
     }
});

// イベント3：チェックボックス選択時イベント
const toggleButtonState = () => {
     // チェックボックスが1つでもあればボタンを有効化
     const checkboxes = document.querySelectorAll('input[name="answer"]');
     const isAnyChecked = Array.from(checkboxes).some(checkbox => checkbox.checked);
     answer_button.disabled = !isAnyChecked;
};
document.querySelectorAll('input[name="answer"]').forEach(checkbox => {
     checkbox.addEventListener('change', toggleButtonState);
});

// イベント4：問題を出題するボタンクリックイベント
answer_button.addEventListener('click', async event => {
     answer_button.disabled = true;
     // 問題と選択した答えをの指示文を作成
     const selectedAnswers = Array.from(document.querySelectorAll('input[name="answer"]:checked')).map(checkbox => checkbox.value).join(', ');
     const message = problem_text.innerText+'の問題に対する答えは、'+selectedAnswers+'であっていますか。'
     // 回答のAIモデルを実行する
     const serverAi = new ServerAI();
     const answer = await serverAi.getAnswerText('szYppvede15m99QEk35vMr', '', message);
     // 途中で回答文が変更されないようif文で判断する
     if(!answer_text.innerText){
          answer_text.style.display = 'block';
          answer_text.innerText = answer;
          answer_button.disabled = false;
          return;
     }
});

})();
</script>

作成時のメモ

上記のサイトを作成する際に苦労した点を記載しておきます。

AIモデルのボタンを押したとき、文章が自動的に変わってしまう問題が発生しました。試験問題を読んでいる最中に文章が勝手に変更されるのは困る！と思い、Promptに「途中で出力文を変更するのはやめてください」と指示してみましたが、効果はありませんでした。

なので…　力技で乗り切りました！

やったことは単純で、

AIモデルの実行結果は、下記の<div>内に格納されます。

<div id="{AIモデルの出力ID名}"></div>

下記のように<div>に既に値がある場合には出力しないようにif文の条件を追加しました。

const problem_text = document.getElementById('{AIモデルの出力ID名}');

if(!problem_text.innerText){
}

これだと、1回クリックしたときだけしか、文章が出力されないので、
クリックするたび、新しい文章を出力されるように下記のクリックイベントにて<div>の内容をクリアする処理を追加しました。

const problem_button = document.getElementById('{AIモデルのボタンID名}');
const problem_text = document.getElementById('{AIモデルの出力ID名}');

problem_button.addEventListener('click', async () => {
   problem_text.innerText = "";
});

最後に

今回初めてMarkdownAIを操作してみましたが、使えない機能があったり、画面上に正しく表示されなかったりと、まだ問題点があるツールだと感じました。ただ、「MarkdownAI β」とロゴにある通り、まだβ版なので、今後改善されていくのだと思っています。

無料で、読み込みサイズ制限なしのKnowledge機能が使えるようになれば、とても便利なツールになると期待しています。例えば、マニュアルや資料を読み込ませ、それを元にAIが回答してくれるようになれば、業務効率が大幅に上がるのではないでしょうか。

現時点では、Knowledge機能がエラーで使えない状況ですが、早く改善され使えるようになることを期待しています。

以上、長い記事を最後まで読んでいただき、ありがとうございました。