はじめに
この記事はMarkdown AIのサーバーAI機能を使ってWebサイトを作ってみよう by MarkdownAI Advent Calendar 2024シリーズ1の15日目です。
この記事では、Markdown AIについての解説と、実際にAIに質問できる技術ブログサイトをサンプルで構築します。
想定読者
- 簡単かつ短時間でWebサイトを公開したい方
- Webサイトをノーコードで構築、MarkdownとAIを活用してコンテンツ管理したい方
- Markdown AIを使用したことがなく、どんなことができるか知りたい方
Markdown AIとは
Markdown AIは、Markdown記法とAIを活用して、誰でも簡単にWebサイトを作成できるツールです。コーディング不要で、サーバー設定やデプロイ作業を自動的に行ってくれるため、クリエイティブな作業に集中することができます。
特徴
-
Markdown記法で簡単にサイト作成
コーディング不要で、手軽にWebサイトを構築可能 -
サーバーAIによる自動化
サーバー設定やデプロイ作業を自動化し、短時間でサイト公開が可能 -
AIによるコンテンツ生成
商品説明ページやブログ記事などのコンテンツをAIが自動生成 -
カスタマイズ可能
テンプレートや、CSS、JSを自由に調整し、ブランドに合わせたデザインを実現 -
AIカスタマイズ機能
プロンプト入力で簡単にAIモデルを作成・調整可能
今後の展望
有料版は今後提供予定で有料版は以下の機能が提供される予定のようです。(2024年12月16日現在)
- 独自ドメイン名の取得
- Google Analyticsとの連携
- Gitによるチーム共同編集
これからのアップデートに期待が高まります！
下記リンクのよくある質問から抜粋
https://mdown.ai/content/79558953-dc9f-4826-acb5-6e53788a12d9
構築したサイト
今回は以下の特徴を持つAIに質問できる技術ブログサイトをテーマに、Markdown AIを使って構築してみました。
サイトの特徴
- Markdown記法で記事を投稿可能
- 質問フォームを設置し、サーバーAIで質問応答を自動化
- ページネーション機能を搭載
作業時間とステップ
構築完了までに、学習を含めて約2時間で作成しました！
以下に各ステップの作業時間をまとめています。
1. サインアップと管理画面の学習
- Markdown AIにサインアップ（3分）
- 管理画面の使い方を学習（45分）
2. 基本的なサイト構築
- 記事のデプロイ（3分）
- サイトのアイコンやタイトルを設定（3分）
- サーバーAI機能を使って質問に解答するAIモデルの作成、質問フォームを設置（10分）
3. 機能の追加・カスタマイズ
- ページネーション機能の実装（10分）
- 質問フォームやAI応答を綺麗に表示するためにHTML/CSS/JavaScriptを調整（40分）
補足: 技術記事そのものは、自分が過去にQiitaで投稿した記事を流用しているため、記事執筆にかかる時間は含んでいません。
構築したサイトはこちら
実際に質問して解答が表示されている画面
以下は作成したモデルのPromptです。Knowledgeの欄は今回設定していません。
あなたはプロのPythonエンジニアです。
初心者にも分かりやすく質問に答えて。
回答はMarkdownではなく、HTML, CSSの記述方法で綺麗に返して。
解答の最初はdivタグがいいです。
HTML・CSS・JavaScriptでカスタマイズしたページネーション・質問フォーム・AIの解答欄のコードはこちら
<div style="text-align: center; margin-top: 20px">
<a
href="/content/113e8567-b21a-435d-b28d-6f2aaf73ea95"
style="
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007bff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
"
onmouseover="this.style.backgroundColor='#0056b3'"
onmouseout="this.style.backgroundColor='#007BFF'"
>
次の記事へ→
</a>
</div>
<hr />
<div style="width: 100%; max-width: 600px; margin: 20px">
<div style="display: flex; align-items: center; margin-bottom: 20px">
<input
type="text"
id="text-1734286082"
style="
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
"
value="質問を入力"
/>
<button
type="button"
id="button-1734286082"
style="
padding: 10px 15px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
font-size: 14px;
cursor: pointer;
margin-left: 10px;
"
>
送信
</button>
</div>
<div
id="answer-1734286082"
style="
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
min-height: 50px;
font-size: 14px;
"
></div>
</div>
<script>
(() => {
const button = document.getElementById("button-1734286082");
button.addEventListener("click", async (event) => {
button.disabled = true;
button.style.backgroundColor = "#A0A0A0"; // 無効時の色に変換
button.style.cursor = "not-allowed"; // カーソルを変更
const serverAi = new ServerAI();
const message = document.getElementById("text-1734286082").value;
const answer = await serverAi.getAnswerText(
"abvK5UnSqtYcvUvo3bU6uG",
"",
message
);
document.getElementById("answer-1734286082").innerHTML = answer;
button.disabled = false;
// ボタンのスタイルを元に戻す
button.style.backgroundColor = "#007BFF"; // 通常時の色
button.style.cursor = "pointer"; // 通常のカーソル
});
})();
</script>
構築で参考になった記事
Markdown AIの詳しい使用方法はこちらの記事が参考になりました。
補足: サイトのアイコン・タイトル設定方法
上記の参考になった記事の補足です。
サイトのアイコン・タイトル設定方法は以下の手順で簡単に変更可能です
-
Profile->Site Settingsを選択。 - 必要な項目を編集し保存。
まとめ
Markdown AIは、手軽にWebサイトを構築したい方や、AI機能を活用して独自性のあるサイトを作りたい方にとって非常に有用なツールです。この機会にぜひお試しください！