【実例あり】だれでも簡単！AIを組み込んだWebサービスの作る方法【Markdown AI】

目次

AIを使えるサイト「Markdown AI」

Markdown AIの特徴は主に3つあります。

特徴1　htmlの知識が必要ない

Markdown AIではMarkdown方式というhtmlと比較して簡単な記述方法を仕様してサイトを作ります。
Markdown方式はhtmlと比較して直感的に記述できるため、初心者におすすめです。
記述方法の例をご紹介します。

見出し(#の数が増えると文字サイズが小さくなる)	# 見出し ## 見出し
リスト(タブで1段下がる)	– リスト – リスト
通常テキスト	‘テキスト’
画像の挿入	

ほかにも色々ありますが主要なところはこれくらいかと思います。
こちらのサイトではさらに多くの要素が紹介されているのでぜひ参考にしてください！
ちなみに通常のwebサイトのようにhtmlやcss、javascriptも使用できます。

特徴2　サイトが無料で簡単に公開できる

Markdown AIはボタンを2～3個押すだけで自分のサイトを簡単に公開できます。
通常はお金を払ってサーバーを借りたり、面倒な設定をしたりする必要があります。
しかし、Markdown AIはGoogleアカウントがあれば無料で利用できます。
サインアップからサイト公開までの手順はこちらで詳しく書いてあります。
ぜひ参考にしてください！

特徴3　自分だけのAIを組み込める

Markdown AIは、自分が作ったAIをサイトに組み込む事ができます。
モデルの作り方の詳細は後述しますが、テキストの生成、画像の生成どちらも可能です。
通常のブログを書くような使い方もできますし、AIをつかって遊べるwebサイトを作ることもできます！

AIの作り方

サインインするとロボットボタンがあるのでクリックします。

すると画像のような画面に遷移します。
赤枠部分でAIのモデルを選び、モデルの名前をつけられます。

モデルと名前を決めたら、画像のPromptの部分にプロンプト（AIへの命令）、Knowledgeに学習用のデータを入力します。
学習用のデータはmarkdown、URL、PDFが選べます。
例えば、AIに星座占いをさせるなら、星座ごとの性格の傾向などを入力すると良いでしょう。

学習用データを入力したらUploadボタンを押してください。

プロンプトの入力は以下のように5つのRを使用すると良いと言われています。
なお、すべてを書く必要はありません。
例えばRequestのみでも構いません。
AIを作るコツとしては、最初はRequestだけで出力の傾向を確かめて、少しずつRuleを追加するなどして自分が欲しい回答が得られるように調整するのが良いかと思います。

Request（依頼）
AIにやってほしいことをお願いする。
例：「料理の献立を提案して」「小説を書いて」など
Roll（役割）
AIがどんな役割で働くかを決める。
例：「あなたはプロの料理研究家です」「あなたは太宰治です」
Rule（ルール）
AIが守るべきルールややってはいけないことを伝える。
例：「答えは短くしてね」や「〇〇については話さないでね」とルールを決める。
Reason（推論）
AIにやってほしいことについて詳しい内容説明。
例：「まず最初に、朝ごはんなのか昼ごはんなのか夜ごはんなのか、ユーザに質問して下さい」
「その後、以下の内容をユーザとの自然な会話から取得して下さい」
使える材料は何？
献立を出力する
献立を出力後ユーザーに、この献立で良いか質問する
ユーザーが満足したら、会話を終了する
ユーザーが満足しない場合、以下を繰り返す
ユーザーに他の献立を提案する
満足したか質問する
Recommend（推奨）
AIに例を教える。
例：Roll（役割）が武士で語尾に「ござる」をつけてほしい場合だと「良い質問でござるな」など記述。

https://qiita.com/mdown_ai_jpn/items/d3e281565c876a0bd64f#request%E4%BE%9D%E9%A0%BCより引用

コメントはAIの仕様に関係しません。
自分用のメモなどを書いていただければよいかと思います。
あとはCreateボタンを押せば完成です！

作ったAIを埋め込む

記事を書く画面でInsertボタンを押すと、何を埋め込むか選ぶ画面が表示されます。

テキスト生成AIを埋め込む場合はScriptを、画像生成AIを埋め込む場合はImage Scriptを選択します。

あとは自分が作ったモデルの一覧が表示されるので、埋め込みたいモデルを選択してInsertボタンを押すだけです！

デフォルトでは画像のような入力欄と実行ボタンが表示されるだけです。
カスタマイズも可能ですが、htmlやcss、javascriptの知識が必要になります。
もしくはAIにコードを生成してもらうのが良いでしょう。

Markdown AIでタロット占いを作った例

実際にMarkdown AIを使ってタロット占いを作ってみました。
プロンプトはこんな感じで入力しました。

また、Knowledgeでそれぞれのアルカナの意味を入力しました。
自分がどのような形式で情報を入力したいかによって、プロンプトを調整するのもいいかと思います。
この例では、正位置と逆位置を0と1で伝えるように記述しています。
ほかにも、『身長と体重を「:」で区切って175:60のように入力します。』みたいなプロンプトもありですね！

おわりに

いかがだったでしょうか。
より詳しく知りたい部分や分かりづらい部分などありましたら、ぜひコメントをください！
最期まで読んでいただきありがとうございました。