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

はじめに

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

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

Markdown AI を使ったことがない方を対象に、記事の最後で Markdown AI の基本操作 を解説しています。

Markdown AI とは？

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

以下のリンクから Google アカウント¹のみで無料で利用を開始することができます。

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

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

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

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

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

Markdown AI 用エディタ

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

基本的な使い方

「Webページを作る」ボタンを押し、テンプレートを選択し、

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

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

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

この内容を 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 ページ制作を進めることができます。まだ実装していませんが、行番号を指定して質問できる機能を追加することで、さらに便利なエディタになると考えています。
   

また、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 の基本操作を紹介していきます。以下のリンクでアカウントの登録ができます。

プロジェクトの作成と編集

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

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

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

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

Web ページの公開

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

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

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

その他の機能

画像のアップロード機能

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

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

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

画像の生成機能

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

AI Image ボタンを選択し、

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

対話型 AI の追加機能

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

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

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

今回は Select Model は無料で使用できる gemini にし、Model Name は AI Chat Bot とします。また、Prompt はたとえば以下のような記述をします。

あなたは、初心者向けのプログラミングスクール講師です。
親しみやすい口調で、プログラミング学習を始めたばかりの人を対象に、効率的な学習方法を教えてください。
具体的には、
- どのプログラミング言語から始めるべきか
- モチベーションを維持するためのコツ 
などを教えてほしいです。
説明はできるだけ簡潔にして、難しい専門用語は避け、初心者にも分かりやすい言葉で説明してください。

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

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

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

Script ボタンを押します。

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

1. 日本で Google アカウントを作成するには 13 歳以上である必要があります。 ↩

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