markdownAI使ったけどAIは”まだ”ないのね

## はじめに
markdownAIを軽く触ってみましたが、ベータ版というのもあってAIを搭載してませんでした。
とはいえmarkdown記法の生成やWebページを作れたりで面白いのでいろいろと試してみました。


## markdown AIとは
下記URLからアクセスできます

https://mdown.ai/content?id=335b81b2-bcb0-4dbb-83d0-531aa132181f

n番煎じかと思いますのでよくまとまっているように見受けられる記事を共有いたします

https://qiita.com/y3kn/items/13db95cac020a2b05c02#markdown-ai-mdown-%E3%81%A8%E3%81%AF

「子供たち」向けのWebサイト制作ツールとしても機能するみたいですね
HTMLやCSSを覚えなくてもMarkdown記法だけで作れるとのことなのでとても簡単そうです

AIに関しては含まれておりませんが名前にAIがある以上いつかは搭載されそうなので乞うご期待ですね
その時はまた記事にしたいです

## markdown記法の生成
アクセスして`try M Down`をクリックしてGoogleログインか`edit File`をクリックすると画像のようなページが出てきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282722/ca93ef55-f9a8-beae-126d-317cae4f52dc.png)
画像にある`Top-down, you can easily create...`をクリックすると画像のようにmarkdown記法のチートシートのようなものが出てきます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282722/306ca1a5-2e78-8943-fbe7-b8459f6519fc.png)

:::note 
<details><summary>表示されるmarkdown（コードブロック）</summary>

```markdown
Top-down, you can easily create websites using Markdown. Markdown description is explained below.

# Title1
## Title2
### Title3
#### Title4
##### Title5
###### Title6
text
text2
**Bold**  
*Italic*  


- [ ] a task list item
- [ ] list syntax required
- [ ] normal **formatting**, @mentions, #1234 refs
- [ ] incomplete
- [x] completed
- hogehoge
  - fuga
    - bar
    - [ ] motimot
1. fuba
1. fuba
1. fuba

|table1|table2|table3|
|:--|--:|:--:|
|align left|align right|align center|
|a|b|c|

### Quote
>This is Quote
>This is Quote
>>This is Quote
>>>This is Quote


### Code Block
```JavaScript
// For Debug
printf = function(str){
    window.alert(str);
};
// Add the processing of applications

```
### Horizon
---
### Link
https://ob-g.com/corpo/
[Objective Group](https://ob-g.com/corpo/)
![Logo](https://ob-g.com/obg_staging/wp-content/themes/obg/res/img/03_slider/top.jpg)

```
</details>
:::

画像コードは404になってますね
markdown記法を忘れたらこれを見るのもアリかと思います
よく見るとHTMLコードやjsも書けたりするのでこれでWebサイトを作れるっぽいですね

### Webサイトを作ってみる
下記のアイディアに則ってWebサイトを作ってみます

https://qiita.com/y3kn/items/13db95cac020a2b05c02#%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B

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

こちらですね
本記事でもAI機能への期待を込めて今回はChatGPTで作ってみます
こちらのやり取りで題材から考えてもらいました（そこそこに苦戦した形跡があって恥ずかしいですｗ）

https://chatgpt.com/share/4ba72c02-1dbc-4768-8162-683f11a7b416

:::note 
<details><summary>ChatGPTで生成したコード（コードブロック）</summary>

```markdown
<style>
body {
    font-family: 'Arial', sans-serif;
    background-color: #f9f9f9;
    color: #333;
    margin: 0;
    padding: 20px;
}
h1 {
    color: #ff6f61;
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 20px;
}
h2 {
    color: #ff6f61;
    font-size: 1.5em;
    margin-top: 30px;
}
p, li {
    font-size: 1.2em;
}
ul {
    list-style-type: none;
    padding: 0;
}
li::before {
    content: '★';
    color: #ff6f61;
    margin-right: 10px;
}
a {
    color: #ff6f61;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.contact-info {
    margin-top: 20px;
}
.contact-info strong {
    display: inline-block;
    width: 80px;
}
</style>

# プロフィール

## 名前
t1k2a

## 職業
ソフトウェアエンジニア

## 趣味
- プログラミング
- ゲーム
- 読書
- 旅行

## スキル
- PHP
- JavaScript
- HTML/CSS

## 連絡先
- **X:** [https://x.com/t1k2a](https://x.com/t1k2a)
- **GitHub:** [t1k2a](https://github.com/t1k2a/)
```

## まとめ
AIと書いてあるにもかかわらずAIは使えないのですが、現地点ではmarkdown記法の生成と簡単なWebサイトが書けることがわかりました。子供たち向けというのもあって本当に誰にでもWebサイトが作れる時代になりそうですね。