初めてのMarkdownAI

QiitaでMarkdownAIチャレンジというキャンペーンが行われていて気になったので、実際に使ってみました。

このリンク先が実際に作成したおみくじサイトです。
https://mdown.ai/content/658556bd-9583-4e18-9ff0-4df70d1bcac7

サインイン

https://mdown.ai/ にて、以下のようにContinue with Googleボタンをクリックすれば、googleアカウントでサインインできます。

website作成

+ボタンクリックで、新しいwebsiteを作成開始します。

内容作成

以降は、Qiita同様にMarkdown形式で記入していくだけでした。画面もシンプルで、分かりやすかったです。

AI画像生成

「Insert」→「AI Image」と選択していくと、次のようなAI画像生成画面になります。画像の形などを選択して、下の自由記述欄に生成したい画像の特徴を記述すると、入力した内容に沿った画像が生成されます。鉛筆マークのボタンを押すと生成できるのですが、気に入った画像が生成されるまで繰り返せるのでよかったです。

今回の画像生成時には、以下の指定で生成しました。次の項目の完成画像の背景が、ここで作成した神社でおみくじを引くイメージのAI画像です。

Location=shrine
Draw a fortune 
Japanese style
Cheery atmosphere

おみくじサイトを作成してみよう

この画像のようなサイトを作成しました。
（リンクは記事先頭の「初めてのMarkdownAI」部分に記載）

作成したコードは次のコードです。MarkdownAIのAI画像作成機能を使用して作った画像を背景にして、おみくじを引くボタンを押すと、結果が毎回ランダムで表示されるという内容です。

<div style="background-image: url('https://storage.googleapis.com/topdowncom/content/EG1OO4at3LRo6F6h53i4SBw5LRH2/658556bd-9583-4e18-9ff0-4df70d1bcac7/295ac3e2-6b7c-4410-9a0f-4d9b467f6e30'); /* ここに画像のURLを指定 */ 
            background-size: cover;
            background-position: center; 
            height: 100vh;
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            color: white; 
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); 
            ">
    <button id="logButton" type="button" style="
            padding: 10px 20px; 
            font-size: 18px; 
            cursor: pointer; 
            background-color: rgba(76, 175, 80, 0.8); 
            color: white; 
            border: none; 
            border-radius: 5px; 
            margin-top: 50px; 
            margin-bottom: 20px;
            ">おみくじを引く</button>
    <div id="result" class="result" style="
            font-size: 24px; 
            color: #333; 
            border: 1px solid #ccc; 
            padding: 10px; 
            border-radius: 5px; 
            background-color: rgba(255, 255, 255, 0.8); 
            width: 150px;
            ">結果: </div>
</div>

<script>
    document.getElementById('logButton').addEventListener('click', () => {
        console.log('クリック');
        const results = ["大吉", "中吉", "小吉", "吉", "凶"];
        const randomIndex = Math.floor(Math.random() * results.length);
        const result = results[randomIndex];
        const resultDiv = document.getElementById('result');
        resultDiv.innerText = `結果: ${result}`;
    });
</script>

躓いた部分

htmlタグで<head><body>タグを使用していたのですが、ボタンを押しても反応せず、タグを使わないようにしたら上手くいきました。

あとがき

webページを個人的に作成したことはなかったのですが、MarkdownAIでは簡単に作成したページを公開できたりAI画像生成も気軽に触れれたので、ちょっとwebページ作ってみたいなって時に便利そうだなと感じました。
そういえばMarkdown要素をおみくじサイトに入れるのを忘れていた...次こそは..