1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Markdown AIのサーバーAI機能を使ってWebサイトを作ってみよう by MarkdownAIAdvent Calendar 2024

Day 12

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

Last updated at Posted at 2024-12-11

Markdown AIとは何か?

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

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

Markdown AIをなぜ使うか?

  • 誰でも簡単にWebサイトを作成することができる
  • AIモデルを作成し、Webサイトを作成することができる

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

いつつかうか

・Webサイトを作りたい時
・AIを使ったWebサイトを作りたい時

どのようにつかうか

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

マークダウンでWebサイトを作成

・アカウント登録、ログインする
・左上の+ボタンから新規作成
image.png
・あとはマークダウン記法で内容を入力します
image.png
・入力後は、Saveを押すと保存されます。
image.png
・Saveを押して保存したあと、Viewを押すと、下記のような表示に変わります。
image.png
・上記の画面で、URLを押下するとダイアログが開きます
image.png
・ダイアログで、Publishを選択すると公開できます
image.png

AIを使用したWebサイトを作成

とりあえず動かしたい方向けに、手順や説明は簡素にしていますので、詳しく知りたい方は下記の記事がおすすめです。

・AIを使用する場合は、まず左上のロボットアイコンボタンを押下し、モデルを作成します。
image.png
・モデルの作成画面で、使用するモデルと名前、プロンプトを入力します。
image.png

・入力したら、下にスクロールし、Createを押して作成します
image.png
・作成できたら、上部に戻り、BackでWebサイトの作成ページへ戻ります
image.png
・Webサイトの作成ページで、+ボタンを押下して、ページを新規作成します
・作成後、Insertボタンを押下します
image.png
・ダイアログでScriptを選択します
image.png
・対象のモデルを選択して、Insertを押下します
image.png
・あとはSave -> View -> URLの手順で公開できます
・動かしてみました
image.png

使用例

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

構成内容

AIモデル

プロンプト

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

Webサイトの見た目

<!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
image.png

所感

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?