「Markdown AI」でAIに質問できる技術ブログサイトを即日構築！

# はじめに
この記事は**Markdown AIのサーバーAI機能を使ってWebサイトを作ってみよう by MarkdownAI Advent Calendar 2024**シリーズ1の15日目です。

https://qiita.com/advent-calendar/2024/markdownai

この記事では、**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モデルを作成・調整可能

:::note
### 今後の展望  
**有料版は今後提供予定**で有料版は以下の機能が提供される予定のようです。(2024年12月16日現在)
- **独自ドメイン名の取得**  
- **Google Analyticsとの連携**  
- **Gitによるチーム共同編集**  

これからのアップデートに期待が高まります！ 

![スクリーンショット 2024-12-16 0.03.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3314085/ae1d9923-015f-0290-60ec-959d49aed707.png)
下記リンクのよくある質問から抜粋
https://mdown.ai/content/79558953-dc9f-4826-acb5-6e53788a12d9
:::

## 構築したサイト

今回は以下の特徴を持つ**AIに質問できる技術ブログサイト**をテーマに、**Markdown AI**を使って構築してみました。

### サイトの特徴
1. Markdown記法で記事を投稿可能
2. 質問フォームを設置し、サーバーAIで質問応答を自動化
3. ページネーション機能を搭載

### 作業時間とステップ
構築完了までに、**学習を含めて約2時間**で作成しました！
以下に各ステップの作業時間をまとめています。

#### 1. サインアップと管理画面の学習
- Markdown AIにサインアップ（3分）  
- 管理画面の使い方を学習（45分）  

#### 2. 基本的なサイト構築
- 記事のデプロイ（3分）
- サイトのアイコンやタイトルを設定（3分）  
- サーバーAI機能を使って質問に解答するAIモデルの作成、質問フォームを設置（10分）  

#### 3. 機能の追加・カスタマイズ
- ページネーション機能の実装（10分）  
- 質問フォームやAI応答を綺麗に表示するためにHTML/CSS/JavaScriptを調整（40分）  


> 補足: 技術記事そのものは、自分が過去にQiitaで投稿した記事を流用しているため、記事執筆にかかる時間は含んでいません。

### 構築したサイトはこちら

https://mdown.ai/content/eb18a1ab-a6f3-4dd8-9f14-ac130e092cd7

### 実際に質問して解答が表示されている画面

![スクリーンショット 2024-12-16 10.27.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3314085/927d82cc-a90f-47c1-a831-3fd2e3540284.png)


以下は作成したモデルのPromptです。Knowledgeの欄は今回設定していません。
```txt
あなたはプロのPythonエンジニアです。
初心者にも分かりやすく質問に答えて。
回答はMarkdownではなく、HTML, CSSの記述方法で綺麗に返して。
解答の最初はdivタグがいいです。
```

<details><summary>HTML・CSS・JavaScriptでカスタマイズしたページネーション・質問フォーム・AIの解答欄のコードはこちら</summary>

```html
<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>
```

</details>

### 構築で参考になった記事
Markdown AIの詳しい使用方法はこちらの記事が参考になりました。

https://qiita.com/mdown_ai_jpn/items/d3e281565c876a0bd64f


## 補足: サイトのアイコン・タイトル設定方法
上記の参考になった記事の補足です。
サイトのアイコン・タイトル設定方法は以下の手順で簡単に変更可能です
1. **`Profile`** -> **`Site Settings`** を選択。  
2. 必要な項目を編集し保存。  

![スクリーンショット 2024-12-16 0.16.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3314085/9d8ee744-d14c-4bac-e11a-308477446955.png)


## まとめ
**Markdown AI**は、手軽にWebサイトを構築したい方や、AI機能を活用して独自性のあるサイトを作りたい方にとって非常に有用なツールです。この機会にぜひお試しください！