MarkdownAIを使っておみくじサイトを作ってみた

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

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

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


![スクリーンショット 2025-02-02 132234 - コピー.png](https://storage.googleapis.com/topdowncom/content/EG1OO4at3LRo6F6h53i4SBw5LRH2/805516c8-3d9f-4c8f-8fa1-b4b0e801d48f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-02-02%20132234%20-%20%E3%82%B3%E3%83%94%E3%83%BC.png)

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


![スクリーンショット 2025-02-02 132502 - コピー.png](https://storage.googleapis.com/topdowncom/content/EG1OO4at3LRo6F6h53i4SBw5LRH2/805516c8-3d9f-4c8f-8fa1-b4b0e801d48f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-02-02%20132502%20-%20%E3%82%B3%E3%83%94%E3%83%BC.png)

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

![スクリーンショット 2025-02-02 164838.png](https://storage.googleapis.com/topdowncom/content/EG1OO4at3LRo6F6h53i4SBw5LRH2/805516c8-3d9f-4c8f-8fa1-b4b0e801d48f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-02-02%20164838.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3690695/396841ce-688f-12f7-1f28-ce850ca4fd38.png)



今回の画像生成時には、以下の指定で生成しました。次の項目の完成画像の背景が、ここで作成した神社でおみくじを引くイメージのAI画像です。
```
Location=shrine
Draw a fortune 
Japanese style
Cheery atmosphere
```

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

この画像のようなサイトを作成しました。
（リンクは記事先頭の「初めてのMarkdownAI」部分に記載）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3690695/30eaa58a-d9fa-b33c-655a-d302eecb9eb7.png)

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

```html
<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要素をおみくじサイトに入れるのを忘れていた...次こそは..