MarkdownAIを使って、AIで生活習慣を分析するWebサイトを作成してみた


# Markdown AIとは何か？

Markdownを使って簡単にWebサイトを作成できるサービスです。
エンジニアの使用だけでなく、`子どもたちが簡単にWebサイトを作成し、世界中の人々と交流できる`というのがコンセプトらしく、誰でも簡単にWebサイトを作成できるサービスとなります。

:::note info
スマートフォン対応や、Markdownを初めて使う方でも使いやすいサイトとなっており、非エンジニアの方の最初の障壁を取り除くことに力を入れているという印象です。
:::

# Markdown AIをなぜ使うか？
- 誰でも簡単にWebサイトを作成することができる
- AIモデルを作成し、Webサイトを作成することができる

:::note info
誰でも簡単に、独自のWebサイトを作成できるというのが魅力だと思います!!
:::

# いつつかうか
・Webサイトを作りたい時
・AIを使ったWebサイトを作りたい時

# どのようにつかうか
マークダウンでWebサイトを作成する機能と、AIを組み込んだWebサイトを作成する手順を説明します。

## マークダウンでWebサイトを作成
・アカウント登録、ログインする
・左上の+ボタンから新規作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/39574c83-a35e-a9df-11e8-d6183cae025a.png)
・あとはマークダウン記法で内容を入力します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/40ebac93-2189-1ae8-8fff-b50146f6d892.png)
・入力後は、Saveを押すと保存されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/6db272d1-d099-5875-be62-735652104620.png)
・Saveを押して保存したあと、Viewを押すと、下記のような表示に変わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/7594a568-b3db-88b7-9098-bb289738a2fa.png)
・上記の画面で、URLを押下するとダイアログが開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/41b48711-a41c-6dd7-7dd0-532d5528dbf0.png)
・ダイアログで、Publishを選択すると公開できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/c635219f-9008-df81-e479-a7e8ffea61fd.png)

## AIを使用したWebサイトを作成
とりあえず動かしたい方向けに、手順や説明は簡素にしていますので、詳しく知りたい方は下記の記事がおすすめです。

https://qiita.com/mdown_ai_jpn/items/d3e281565c876a0bd64f#%E5%AE%9F%E9%9A%9B%E3%81%AB%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86ai%E5%88%B6%E4%BD%9C%E6%89%8B%E9%A0%86

・AIを使用する場合は、まず左上のロボットアイコンボタンを押下し、モデルを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/ccdebd90-7c72-1624-3d78-d1d599fc2f8e.png)
・モデルの作成画面で、使用するモデルと名前、プロンプトを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/ddbe3333-7e5e-26d1-3932-327b9fe80da8.png)

・入力したら、下にスクロールし、Createを押して作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/433e61ae-ea88-4af1-589a-563413e0dbc0.png)
・作成できたら、上部に戻り、BackでWebサイトの作成ページへ戻ります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/03383e78-7df8-587e-4365-08760d650f86.png)
・Webサイトの作成ページで、+ボタンを押下して、ページを新規作成します
・作成後、Insertボタンを押下します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/d672c6fe-1d61-d415-c97e-dc65ac2d6028.png)
・ダイアログでScriptを選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/00ca1001-2a7a-cddf-2305-dc38142b5f76.png)
・対象のモデルを選択して、Insertを押下します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/3cf51381-b92a-2b22-580d-962a09942f36.png)
・あとはSave -> View -> URLの手順で公開できます
・動かしてみました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/9a2c0354-c563-c376-d8c1-a1fa023cb206.png)

# 使用例
タイトルに書いた通り、生活習慣を分析してくれるWebサイトを作成してみました。

https://mdown.ai/content/d3290bac-3cec-44b3-abaa-bd5713a35593

## 構成内容
### AIモデル
プロンプト
```
1日の出来事を分析し、傾向と改善点を返答してください。
場合によっては、出来事を深掘りして、感情やストレス、考え方を分析してください。
あなたは、ストレスや体調管理、食事管理、運動管理の知識を持つ専門家です。
守ってもらいたい規則は、温かさのある言葉選びです。
```

### Webサイトの見た目
```html
<!DOCTYPE html>
<html>
    <body>
        <main>
            <h1>Life Log Adviser</h1>
            <h2>Overview</h2>
            <p>1日の出来事を分析して、傾向と改善点をアドバイスします</p>
            <h2>How to use</h2>
            <p>1日の出来事を箇条書きで書いてください</p>
            <h3>例</h3>
            <p>
                ・朝はパンを食べた<br />
                ・残業を2時間くらいした<br />
                ・夜はダラダラYoutubeを見てしまった<br />
            </p>
            <h2>Input</h2>
            <div style="display: inline-block;">
            ...割愛（AIモデルをInsertして生成されるコード部分です）
            </script>
          </main>
    </body>
</html>
```

## 使用結果
有用なアドバイス、分析をしてくれてびっくりしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/09a9fb82-a682-6900-596a-78ca3ac0e838.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/77b32594-8f84-25d8-b15f-3c1c26efe31e.png)

# 所感
今回は生活を分析するAIでしたが、プロンプトを変えるだけで、仕事を分析してアドバイスをするサービスや、食事を分析してアドバイスするサービスが作成できそうだなと思いました。
分析だけに限らず、いろいろな使い方ができそうですが、気軽に試せるというのが一番良いポイントかなと思います。