Markdown AI 用エディタを Markdown AI で公開してみた

# はじめに

この記事では、Markdown AI 用のエディタを自作した背景と、このエディタを使って、Web ページを作成し、Markdown AIで公開するまでの流れを紹介します。

以下のリンクで利用できます。（パソコンでの使用を想定しています。）

https://mdown.ai/content/c6a33587-4c66-4e8a-957b-af6edd524a5b

![スクリーンショット 2024-12-07 6.56.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/4e4aa724-27b8-24d0-ee24-ed1394552cd1.png)

 **Markdown AI を使ったことがない方**を対象に、記事の最後で [Markdown AI の基本操作](#付録-markdown-ai-の基本操作) を解説しています。


# Markdown AI とは？
Markdown AI は、**簡単に** Web ページの**作成から公開まで**を行うことができる Web サービスです。

以下のリンクから **Google アカウント**[^1]のみで**無料**で利用を開始することができます。
[^1]: 日本で Google アカウントを作成するには 13 歳以上である必要があります。

https://mdown.ai/ 

MarkdownAI は「**シンプルさ**」と「**自由度の高さ**」が大きな強みで、初心者から Web 開発経験者まで幅広い層のニーズに応えることができるサービスです。

- **シンプルさ**
  - `Markdown` [^2]で手軽に Web ページを作成
  - Web ページの公開は何回かボタンを押すだけ
- **自由度の高さ**
  - `Markdown` だけではなく `HTML`・`CSS`・`JavaScript` も使用が可能
  - さらに `AI` の組み込みも可能

<!-- 現在、インターネット利用の中心は SNS[^3] ですが、**文字数制限**や**フォーマットの固定化**といった制約があります。Markdown AI はこれらの強みを活かし、SNS では実現できない、**個性的で魅力的な情報発信を手軽に行う**ことができます。 -->

一方で、`β 版`である現在の Markdown AI では、強みである**自由度の高さ**（複雑なレイアウトや機能の追加など）を最大限に活かすのは、初心者にとってはややハードルが高いと感じる部分もあるかもしれません。

（今後の改善で、より直感的に使いやすくなると思います。）

そこで、**Markdown AI の機能を最大限活かせる、初心者向けのエディタ**を自作し、Markdown AI 上で公開しました。


[^2]: Markdown は**文章の構造を記述するためのルール**です。Web ページの構造は HTML で記述することが一般的ですが、Markdown を使用することで簡単に記述することができます。

[^3]: インターネット上で人々がつながり、情報を共有するコミュニケーションの場を提供するサービスです。


# Markdown AI 用エディタ
それでは、公開したエディタについて紹介します。

https://mdown.ai/content/c6a33587-4c66-4e8a-957b-af6edd524a5b


## 基本的な使い方
「Webページを作る」ボタンを押し、**テンプレート**を選択し、

![スクリーンショット 2024-12-07 6.32.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/947878b3-c048-382c-bbb0-a297ff87a35a.png)

「配色」ボタンを押し、**ページの配色**を選択すると、

![スクリーンショット 2024-12-07 6.33.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/70f229ec-b9a5-af0c-a944-269485563a5c.png)

あとは少し文章の内容を編集するだけで完成です。

![スクリーンショット 2024-12-07 6.56.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/4e4aa724-27b8-24d0-ee24-ed1394552cd1.png)

「変換」ボタンで、Markdown AI で表示できる形式に変換できます。

![スクリーンショット 2024-12-07 6.35.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/e165eaf2-13eb-7362-5001-35447817d9e5.png)

この内容を Markdown AI の編集画面に入力し、公開します。

## 工夫したこと
今回、作成したエディタは、Web 開発の経験がない方を利用者として想定しています。

初心者でも簡単に魅力的なWebページを作成できるよう以下の機能を実装しています。

1. **リアルタイムプレビュー**
Markdownのコードを書きながらリアルタイムでプレビューを表示。結果をすぐに確認できるため、初心者でも安心して操作できます。
2. **テンプレート**
  初心者がよく使う以下のような**ページテンプレート**を用意。
    - イベント告知ページ
    - 旅の記録ページ
    - ポートフォリオ
    - リンク集
3. **ページの配色**
    初心者が迷わずにデザインを選べるよう、**配色のパターン**を用意しました。
4. **独自機能で簡単カスタマイズ**
MarkdownAIの自由度を保ちながら、初心者にはハードルが高いデザインや AI 機能を簡単に実装できるよう、独自記法を導入しました。
    - AI チャットボット: `::AIChat[モデルのID]`
    - YouTube動画埋め込み: `::youtube[動画のURL]`
    - アバタ: `::avatar[画像のURL]`
    - 進捗バー: `::progress50`
5. **行番号表示とシンタックスハイライト**
  編集エリアに**行番号**を表示することで、特定の記述箇所を見つけやすくしました。また、見出しや独自記法（例: ::progress50）を記述すると**自動で色付け**するようにし、コードの可読性を向上させました。
6. **AI サポート** 
  AI に質問でき、初心者でも安心して Web ページ制作を進めることができます。まだ実装していませんが、**行番号を指定して質問できる機能**を追加することで、さらに便利なエディタになると考えています。
  ![スクリーンショット 2024-12-07 6.40.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/0eaa693f-1c8b-347a-a86b-91d476f304a7.png)



また、Markdown AI で AI のモデルを作成する際に、以下のようなプロンプトを使用しました。（実際には MarkdownAI や今回実装したエディタに関する情報も追記しています。）

このプロンプトで**関係のない質問への対応**が特にうまく機能しました。
```
あなたは、「MarkdownUI」でのWebページ作成をサポートするチャットボットです。Markdownの初心者でも簡単に利用できるよう、親しみやすい口調でアドバイスを提供してください。

- 目的: ユーザーがMarkdownUIを活用して、理想のWebページを簡単に作成できるようサポートする。
- ターゲット: MarkdownやWebデザインの初心者、またはMarkdownUIを初めて使うユーザー。
- 対応内容:
  1. 機能説明: MarkdownUIの基本機能や独自記法について分かりやすく説明。
  2. 記法の指導: ユーザーが使いたい独自記法（例: ::progress50や::youtube[URL]）の使い方を丁寧に指導。
  3. エラー対応: 入力内容に誤りがある場合、優しく修正方法を提示。
  4. 質問受付: ユーザーからの質問に答え、必要なら追加資料やリンクを提供。
  5. 関係のない質問への対応: MarkdownAIやMarkdownUI、Webページ作成に関係のない質問があった場合は、次のように対応してください。
      - 丁寧にお断り: 「このチャットではMarkdownUIやWebページ作成に関する質問にお答えしています。もしそれに関連することであれば、ぜひ教えてください！」
- トーン: 親しみやすく、安心感のある口調で進行。前向きなサポートを提供。

サポート例
1. 機能説明
   「MarkdownUIでは、::progress50 のような独自記法を使うと、進捗バーが簡単に追加できます！試してみましょう。」
2. 記法の指導
   「YouTube動画を埋め込むには、::youtube[https://example.com] と書いてみてください。埋め込みプレイヤーが表示されます。」
3. エラー対応
   「あれ？入力に少し誤りがあるみたいです。progressの後に数字を入れると正しく動きますよ！例: ::progress30」
4. 質問受付
   「もちろんです！たとえば、独自記法で何をしたいのか教えていただければ具体的に案内しますよ！」
5. 関係のない質問への対応
   - ユーザー: 「Markdownとは関係ないけど、天気予報教えて！」  
     - チャットボット: 「このチャットではMarkdownUIやWebページ作成に関する質問にお答えしています。でも、天気予報が気になる場合は、天気アプリや検索エンジンを利用すると便利ですよ！」
```


# 【付録】 Markdown AI の基本操作
Markdown AI の基本操作を紹介していきます。以下のリンクでアカウントの登録ができます。

https://mdown.ai/

## プロジェクトの作成と編集
Markdown AI へログイン後、https://mdown.ai/file にアクセスすると、**左上**（スマホの場合は**右上**）に以下のようなボタンが並んでいると思います。**`+ ボタン`** を押すと、Web ページの作成を始めることができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/b98964c4-03b2-37a6-bb94-f9194419c6db.png" width="250">

**`SAVE ボタン`** の下の**大きな四角**をクリックすると、Web ページの内容を編集できます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/e6e4a6aa-cba1-8ea8-9bb0-78f597c2f990.png" width="250">


**`View ボタン`** を押すと、Web ページを公開した際にどのように表示されるか確認できます。（**`Markdown ボタン`** を押すと、編集画面に戻ります。）

また、**`Save ボタン`** を押すと、編集した内容を保存することができます。

##  Web ページの公開
作成したページは非常に簡単に公開できます。

`View` ボタンを押し、そして、`URL` ボタンを押します。あとは `Publish` ボタンを押すだけで公開できます。


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/54058d0b-a0e6-f7ee-6716-29e07772e1d2.png" width="400px" />


表示された URL にアクセスすると、公開された Web ページを見ることができます。

## その他の機能
### 画像のアップロード機能

画像のアップロードは、`Insert` ボタンを押し、

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/e6e4a6aa-cba1-8ea8-9bb0-78f597c2f990.png" width="250">

`Image` ボタンを選択し、その後、`+` を押すことで可能になります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/1d2874e5-cbfb-e66b-df59-9d7fcf7b9ec4.png" width="400">

すでにアップロードした画像を押すと、その画像を追加することができます。
### 画像の生成機能

画像を AI で生成するには、`Insert` ボタンを押し、

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/e6e4a6aa-cba1-8ea8-9bb0-78f597c2f990.png" width="250">

`AI Image` ボタンを選択し、

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/1d2874e5-cbfb-e66b-df59-9d7fcf7b9ec4.png" width="400">

その後、作成したい画像の説明を入力し、ペンが書かれた画像を押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/9528e0a3-2d93-c371-ab17-d391b43c651a.png" width="400">


### 対話型 AI の追加機能
Markdown AI では Web ページに対話型 AI の追加することができます。

`AI` を作成する場合は、`ロボット`のボタンを押し、Create Model のページに移動します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/b98964c4-03b2-37a6-bb94-f9194419c6db.png" width="250">

そして、`AI` のモデルを作成します。


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/0735fe7a-ea71-0325-88fa-27bc68deaf6d.png" width="400">


今回は **Select Model** は無料で使用できる `gemini` にし、**Model Name** は `AI Chat Bot` とします。また、**Prompt** はたとえば以下のような記述をします。
```
あなたは、初心者向けのプログラミングスクール講師です。
親しみやすい口調で、プログラミング学習を始めたばかりの人を対象に、効率的な学習方法を教えてください。
具体的には、
- どのプログラミング言語から始めるべきか
- モチベーションを維持するためのコツ 
などを教えてほしいです。
説明はできるだけ簡潔にして、難しい専門用語は避け、初心者にも分かりやすい言葉で説明してください。
```

設定が終わったら、`Create` ボタン（もしくは、`Update` ボタン）をクリックします。

そして、編集画面（`https://mdown.ai/file`）に戻ります。

編集画面に戻ったら `Insert` ボタンを押し、

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/b98964c4-03b2-37a6-bb94-f9194419c6db.png" width="250">

`Script` ボタンを押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/f249de66-aa70-40b7-322c-bb4fd3d37da6.png" width="500">


`AI Chat Bot` を選択した状態で `Insert` ボタンを押すと、対話型 AI を Web ページに組み込むための最小限のコードが挿入されます。