markdownAI β版を使ってみる！

はじめに

↑のテーマに便乗して、記事を投稿します！

markdown AI (MDown) とは

markdown AI ということで、マークダウン形式のドキュメントとAI技術を使用したサービスかなとイメージして、プロダクトページを確認してみます。

以下、Webページからの引用です。
（Google翻訳を使用して、日本語で表示しています）

Mダウンとは何ですか？
Mark Downを使って簡単にウェブサイトを作成しましょう！
作成から公開までを1画面で完結でき、公開前に簡単にプレビューを表示できます。
エンジニアが簡単に情報を交換できるだけでなく、子どもたちが簡単にウェブサイトを作成し、世界中の人々と交流できるようにする のがコンセプトです。

どうやら、マークダウンで書いた内容をHTMLに変換してWebサイトとして公開できるみたいです！
そしてこのサービスのターゲット層は、「子どもたち」も含まれているみたいです！

Webの知識がなくても、マークダウン記法さえおさえておけば、誰でも簡単にウェブページを作ることができるということでしょうか。

追加機能2：AI連携
M Down を使用して AI にプロンプ​​トを出し、結果を Markdown で出力します。
ChatGPTでやっていることをM Downに入力すると、回答もMarkdown形式でM Downに出力されます！

結果をそのまま公開することもできるので、これまで以上に情報伝達が簡単になります！

AI連携機能は、2024/6/13 現在公開されている markdown AI　には含まれていないようです。
ChatGPTと会話しながら、Webページのもとになるマークダウンを手軽に作成することができるようになるということですね！

マークダウンをHTMLに変換して静的なウェブサイトとしてホスティングするサービスといえば、Github の Github Pages　があると思いますが、Githubを利用する層はエンジニアになりそうなので、子どもや非エンジニアの方が使うイメージはあまりないですね！

そういった意味だと、サイト上で管理して簡単にウェブページを公開できるのは便利かもしれないですね！

使ってみる

せっかく名前に「AI」が入っていて、将来的にChatGPTを使用するといった記載があるので、ChatGPT(gpt-4o)を使用してダミーサイトを作ってみようと思います！

markdownAIの始め方に関しては以下の記事で紹介されていたため、割愛します！

試しに「Kotlinの学習ロードマップ」のウェブページを作っていこうと思います。
本当は、内容は自分自身である程度構成してからAIに聞くのがいいと思いますが、今回はmarkdownAIを使用してウェブページを作成することを主軸にしているため、サイトの内容はあまり吟味していません。

ChatGPTを使って、ウェブページの内容を作成する

↑ mermaidが機能していなさそうなので、方向転換しています。

mermaidには対応していないみたいですね！（下記記事より）

↑ ダミーサイトだとわかるようにと、追加の内容を依頼しています

一旦、完成！

完成したマークダウン

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f9;
        color: #333;
        line-height: 1.6;
    }
    h1, h2 {
        color: #2c3e50;
        text-align: center;
    }
    h3 {
        color: #34495e;
    }
    p {
        margin: 0 0 1em;
    }
    ul {
        list-style: none;
        padding: 0;
    }
    ul li {
        background: #ecf0f1;
        margin: 0.5em 0;
        padding: 0.5em;
        border-left: 4px solid #3498db;
    }
    ul li a {
        color: #3498db;
        text-decoration: none;
    }
    code {
        background: #e1e1e1;
        padding: 0.2em 0.4em;
        border-radius: 3px;
    }
    .roadmap {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1em;
        margin: 2em 0;
    }
    .roadmap div {
        background: #ecf0f1;
        padding: 1em;
        border-radius: 5px;
        position: relative;
    }
    .roadmap div::after {
        content: '';
        position: absolute;
        border: 1px solid #3498db;
        width: 50%;
        height: 1px;
        background: #3498db;
        top: 50%;
        right: -50%;
    }
    .roadmap div:last-child::after {
        display: none;
    }
    .footer {
        text-align: center;
        font-size: 0.9em;
        color: #777;
        margin-top: 2em;
    }
</style>

# Kotlin 学習ロードマップ

## 概要
KotlinはJetBrainsによって開発された静的型付けプログラミング言語で、特にAndroid開発で広く使われています。以下は、初心者から中級者・上級者までのKotlin学習のためのロードマップです。

## ロードマップ

<div class="roadmap">
    <div>
        <h3>基礎</h3>
        <ul>
            <li><a href="#kotlinの基礎">Kotlinの基礎</a></li>
            <li><a href="#変数とデータ型">変数とデータ型</a></li>
            <li><a href="#制御構造">制御構造</a></li>
            <li><a href="#関数">関数</a></li>
        </ul>
    </div>
    <div>
        <h3>中級</h3>
        <ul>
            <li><a href="#クラスとオブジェクト">クラスとオブジェクト</a></li>
            <li><a href="#継承">継承</a></li>
            <li><a href="#インターフェース">インターフェース</a></li>
            <li><a href="#ジェネリクス">ジェネリクス</a></li>
        </ul>
    </div>
    <div>
        <h3>上級</h3>
        <ul>
            <li><a href="#高度な関数">高度な関数</a></li>
            <li><a href="#コルーチン">コルーチン</a></li>
            <li><a href="#dsl">DSL</a></li>
            <li><a href="#kotlin-native">Kotlin/Native</a></li>
        </ul>
    </div>
</div>

## 基礎

### <a name="kotlinの基礎"></a>Kotlinの基礎
- 環境構築
- Hello Worldプログラムの作成

### <a name="変数とデータ型"></a>変数とデータ型
- `val`と`var`
- 基本データ型（`Int`, `Double`, `String`, `Boolean`など）

### <a name="制御構造"></a>制御構造
- 条件分岐（`if`, `when`）
- ループ（`for`, `while`）

### <a name="関数"></a>関数
- 関数の定義
- 関数の引数と戻り値
- ラムダ式

## 中級

### <a name="クラスとオブジェクト"></a>クラスとオブジェクト
- クラスの定義
- プロパティとメソッド
- コンストラクタ

### <a name="継承"></a>継承
- 継承とオーバーライド
- 抽象クラス

### <a name="インターフェース"></a>インターフェース
- インターフェースの定義と実装

### <a name="ジェネリクス"></a>ジェネリクス
- 型パラメータ
- 型制約

## 上級

### <a name="高度な関数"></a>高度な関数
- 高階関数
- 拡張関数

### <a name="コルーチン"></a>コルーチン
- コルーチンの基礎
- 非同期プログラミング

### <a name="dsl"></a>DSL (Domain Specific Language)
- DSLの作成方法
- Kotlin DSLの事例

### <a name="kotlin-native"></a>Kotlin/Native
- Kotlin/Nativeの基礎
- マルチプラットフォーム開発

---

<div class="footer">
    このサイトは、markdown AIとgpt-4を使用して作成したダミーサイトです。
</div>

---

このロードマップを参考に、Kotlinのスキルを段階的に習得していきましょう。Happy Coding!

ここまでのChatGPTとのやりとりの詳細 ↓
https://chatgpt.com/share/6c57aba6-5db6-4fae-b343-563dcc37d602

ウェブページを公開してみる

公開したページは、以下↓
https://storage.googleapis.com/topdowncom/content/0HQLAIxU7FatBQP0Qjz5GNxuRpF3/c195d86f-e703-4e0c-bc3f-729753626b85/index.html

スクロールしてみると、背景色が途中で途切れているみたいです。
WebページのCSSを確認してみると、body要素のheight指定が原因のようです。
マークダウン内のstyle要素で以下の指定を追加してみます。

body {
  height: unset;
}

現在公開されているmarkdownAIのバージョンだと、同じURLでウェブコンテンツをアップロードし直せないみたいですので、新しくWebページを公開することにします↓
https://storage.googleapis.com/topdowncom/content/0HQLAIxU7FatBQP0Qjz5GNxuRpF3/fb050e23-048f-471f-908c-8cb9c6493503/index.html

今度こそ完成です！

使ってみての感想

• UIがシンプルで使いやすかったです
• style要素を使わないと、Webページが簡素になるので、テーマが選べるようになると使い勝手よくなりそうだなと思いました！
• 公開するウェブページに関しては、後から内容を調整できるようになっているといいなと思いました！（実用を考えるとWebページのエンドポイントが変わってしまうのはデメリットになりそう）
• ChatGPTを使ってウェブページの作成をしてみて、AI連携機能がリリースされたらこんな感じかなとイメージしつつ、アプリの使用感を確かめられました

気になった部分

仕様なのか、不具合なのかが判別できなかったのですが、styleタグをマークダウンの入力欄に入れた際、エディターページ全体にスタイルが適用されているようでした。

あとは、サイト設定ができることに公開した後気づきました。
ウェブページのサイト名とファビコンが設定できるようですね！

まとめ

markdownAI β版を体験してみました。
ホスティングまでついているので、簡単な静的ウェブページの公開する場合の選択肢の一つになりうるような気がしました

では〜