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