Markdown AIというツールを使って、(飲み会を盛り上げてくれるAIを搭載した)WEBアプリを作りました!

　誰でも簡単にAIを取り入れたWEBアプリを作れる!! それが、Markdown AIと言うWEBツールになります。この記事では、Markdown AIというWEBツールを用いて、生成AIを組み込んだWEBアプリを制作する過程 について解説します。アプリの具体的な内容や機能の紹介ではなく、生成AIの選定・導入からプロンプト作成の手順までに焦点を当てています。

こんな方向けの記事

(サーバーとかgithub、ソースコード(IDE)とかわからないけど、) WEBアプリをとりあえず作ってみたい! と興味を持っている方
生成AIを無料で試しに使ってみたいけど、どう始めればいいか、どんなツールを使うべきかわからない方
生成AIに対して、どんなプロンプトを書くべきかを知りたい方、そして複数の最新AIモデルの比較を完全無料で試してみたいと言うマニアの方(別記事)

目次

1.はじめに
 2.飲み会アプリ「リビールちゃん」の概要
 3.飲み会アプリ「リビールちゃん」の制作背景
 4.生成AIの作成から導入まで
 5.おわりに

1. はじめに

Markdown AIって何?

　Markdown AIとはQiitaでも採用されているMarkdownの記述をするだけで、簡単にWebサイトを作成することができるwebアプリケーションです。Markdown記法をすでに知っている方は、2章へ進んでください! 前回の投稿記事を読んでいて、すでにアプリの概要がわかっている方は、4章へ進んでください!

Markdown(記法)って何?

　 Markdown記法というのは文章のスタイルを簡単に指定するための軽量な書き方（マークアップ言語）です。下の例を見てみましょう!
今あなたはWEB上でこんな感じにしたいという理想がありますが、見出しの部分がなかなかうまくいきません。しかしMarkdown記法というルールに沿って、web側(システム側)にお願いをすること表示が理想的になります。

　このWEB上での見た目の文字は、裏側であるルールに従って表現しています。具体的には、web側(システム側)が この文字をこのサイズくらいにしろってことだな!!かしこまりー! などと認識してくれれば良いですね!

青枠が実際の裏側のMarkdown記法になります。裏側のMarkdown記法によって、見ためが変わります。ここからわかることは、

「本音」と「建前」　という記述の仕方から、裏側で" ** 何かしらのテキスト ** "と記述すると " 何らかのテキスト "と太字になる!
"##### このアプリは,..." と、シャープ(#)に続いてテキストを書くと、文字が大きくなる(厳密にいうとシャープの数で文字の大きさを調整できる)

上記の二つの書き方はMarkdown記法です。よって①裏側の修正を以下の通りにすると、②うまく理想のWEB上での見た目への変更が実現できました!

Markdown記法とはまとめ

見た目(表側、View)の文章のスタイルを簡単に指定するための軽量な書き方（マークアップ言語)ですね!
Markdown記法というルールに従うことで、理想の文章のスタイル通りになるんですね!
Markdown AIというツールを用いることで、Markdown記法でWEBアプリが簡単につくれるんですね!

2. 飲み会アプリ「リビールちゃん」の概要

　実際に生成AIの内部構成や仕組みを知らない私が作成したのは、下のようなWEBアプリになります。その名も "ぶっちゃけトークメーカー「リビールちゃん」" と名付けました(reveal: 暴露する)。

　このアプリは、飲み会で盛り上がるギリギリの質問をAIが生成してくれる、友達や仕事仲間と仲良くなるためのトークアプリです。普段は話すにはちょっとプライベートすぎたり、重たく感じる話題も、酔った勢いでなら話せそうな質問をランダムにピックアップ！答える側が「本音」で答えているのか「建前」なのかを当て合うゲーム形式で、楽しく深いトークを引き出します。
→ ぶっちゃけトークメーカー「リビールちゃん」

ちなみにこのアプリはスマホにも一応対応しております

結構嫌な感じの質問を生成しますが、リビールちゃんを許してあげてください。

ゲームルール

(質問する側) 生成された質問の中から一つ選ぶ(質問に即した事を追加で聞くもよし)
(答える側) 本音でも建前どちらでもいいから回答する
(質問する側) 一段落ついたら、本音か建前かを予想して答え合わせ
(当てたら→答える側、外したら→質問する側) 飲むニダ!
3の答え合わせで回答で建前であることがバレてしまったら、ぜひ本音を話しましょう!

3. 飲み会アプリ「リビールちゃん」の制作背景

1. Markdown AIの良さを存分に使いたかったから

　Markdownでwebアプリを作成できるツールと言う部分よりも簡単にAIをwebアプリに導入できるという部分がMarkdown AIの魅力だと感じました。その魅力を活かすためにこのアプリを制作しました。

2. 人がなかなか踏み込めない領域にAIを活かしたかったから

　飲み会はリラックスできる場でもありますが、誰かにちょっと聞いてみたいことや本音のトークは、なかなか自分からは切り出せないことが多いですよね。 たとえば、プライベートな話題や普段は話せないような質問などがあると、場がさらに盛り上がるのに、それができないことで会話がマンネリになりがちです。

　そこで「リビールちゃん」は、AIを活用して、飲み会で話題のきっかけを提供するアプリとして開発されました。このアプリがあれば、「こんな話してみたかった！」と思えるような質問がAIによって自然に生成され、みんなが気軽に楽しめる場をつくれます。また、プライベートすぎて自分からは話しづらいけど「誰かが聞いてくれたら答えたい」といった絶妙なトピックが会話のきっかけになるため、ただの雑談ではなく、少し「本音」に近いトークができるのも魅力です。

4. 生成AIの作成から導入まで

　この章では、生成AIの作成からプロンプト作成、導入までを解説していきます。Markdown AIというツールは https://mdown.ai/からサインインすることで使用できます。

サインインをすると、こんなページに来るかと思います。AIを作成する部分はロボットマークの左上部分クリックで遷移します。遷移後は以下のようになるかと思います。Create Modelページへ移動となります!

AIモデルの作り方(①〜⑤まで)

①モデルリスト

　自分の作った複数のAIモデルを管理する場所です。Delを教えてしまうと削除されてしまうので気をつけましょう。(ここでは何もすることはありません、実際は②からスタートです)

②セレクトモデル

　自分が作ってみたいAIモデルを選択できます。ここではgpt-4oのminiを選択していますね。そして、名前をつけましょう!

③プロンプトの記述欄

　一言で言うと、どんな文章を生成AIから受け取りたいかを指定する欄になります! 生成AIに渡す「プロンプト」は、AIに対してどのような内容を生成してほしいかを指示するための入力テキストのことを指します。プロンプトは、AIが出力内容を決定する際のガイドラインとして機能し、プロンプトの内容や具体性によって、AIの回答の品質や方向性が変わります。
最近は7Rを意識してプロンプトを書きましょうとなっています!以下の内容になります!

英単語	和訳
Request	依頼
Role	役割
Regulation	形式
Rule	ルール
Review & Refine	評価・改善
Reference	参照知識・例
Run Scenario	実行シナリオ

とはいっても、7Rも書くのは大変ですので、基本的には以下の3つのRで構成すれば良いかと思います。

英単語	和訳
Request	依頼
Role	役割
Regulation	形式

私が作成したプロンプトは以下のようになっております。(3R+Reference(例)で構成しました。)

普段聞くにはプライベートすぎるけど、飲み会でできるくらいの質問を3つだけ生成してほしい。はいかいいえで答えられる質問を中心に、2つは恋愛系、1つは職場内の人間関係の不満や気になる異性に関する質問。学生時代や、元彼元カノに関しても良いが性的なのはだめ。
末尾は?!として統一
文の始まりは、「3つの中から1つ選んで、答えてもらおう! 本音か建前か見極めよう!!」にして。
質問ごとに改行して、下のようにしてほしい。余計な質問以外の文はいらない。

3つの中から1つ選んで、答えてもらおう。本音か建前か見極めよう!!
1. ぶっちゃけ、この飲みの場の中に気になる人いる?!
2.正直、一番職場(大学)で馬が合わない人は誰なの?!
3.正直、職場(大学)に異性として意識している人がいる?!
質問の例:ぶっちゃけ、今の職場(大学)で生理的に嫌な人がいる?!
質問の例:ぶっちゃけ、友達の別れを喜んだことがある?!
質問の例:正直、この飲みの場に物申したい人がいる?!
質問の例:ぶっちゃけ、元彼(元カノ)と今でも連絡をとり続けている?!
質問の例:正直、私(俺)と仕事どっちが大切と聞かれたらだるい?!

普段聞くにはプライベートすぎるけど、飲み会でできるくらいの質問を3つだけ生成してほしいという依頼自体がかなり高度ですので、Reference(質問の例)については丁寧に書いています!　実際の生成文は、生成AIが考えた質問が表示されるだけではなく、形式の中で表示されます。

3つの中から1つ選んで、答えてもらおう。本音か建前か見極めよう!!
1.(質問1の内容...)?!
2.(質問2の内容...)?!
3.(質問3の内容...)?!

スクロールしていくと下のような表示が出てきます

④knowledge欄

　生成AIに渡す知識をここで指定します。私は使わなかったので、ここは飛ばします、無くてもモデルは動きました

⑤Createボタン

　最後に確認をしたら、Createボタンを押しましょう。作成した後でも修正を重ねることができるので、一旦Createしても問題ないです!

⑥Playgroundで挙動確認

　生成AIを使ってみることができます。ここで実際にプロンプトを渡してみたときにどんな文章が返ってくるか確認ができます。また、こちらから「もう少し...してほしい」などとして要求することができます。修正できたらプロンプトを変更してみて、もう一度挙動を確認してみるを繰り返して、望み通りのAIを作りましょう!

WEbページに作成したAIの導入

　先ほどのCreate Modelページの Backボタンで戻ると、トップページへ戻ります。そしたらInsertボタンからScriptを選択し、先ほど作ったモデルを選択することで、AIを導入することができました!!

5. おわりに

　最初は軽く開発してみようと思ったものの、AIの解答が良くなるにつれてもっと良くしていきたいという気持ちが高まりました。結果として朝4時までこだわってしまっていました。Markdown記法やMarkdown AIの使い方について質問がある方はコメントしていただけると幸いです。
　また、プロンプトの作成について詳しく知りたい方は、以下のわかりやすい記事をご覧ください!
→【ChatGPT】野口竜司氏提示、7Rプロンプト