はじめに
駆け出しエンジニアのotoyaです！
2025年になってXやらinstagramやら散策してると面白そうな情報を見つけて
ちょっと使ってみました。
フロントエンドからきし初心者ですがご容赦ください、笑
やったこと
下記の内容がmarkdownAIで出来るのかを確認しました。
・マークダウンとHTMLの合わせ技
・グラフの挿入
・フレキシブルデザイン
・GAでのアクセス管理(すみませんこれをやろうとしていたのですがGoogle側の規約に引っかかりそうだったので、自分でビジネス用サイトを作成するときに検証してみます、、泣)
フロントエンドのエンジニアではありませんが、
会社でこの辺りはよく出ている or 使うだろうと思ったので確認してみようと思って確認してます。
さぁ、やってみましょう！
マークダウンとHTMLの合わせ技
ソースコードはこちらです。
// HTMLとマークダウンの混合技
# MarkdownとHTMLの混合サンプル
これは**Markdown**の見出しです。
## 画像の挿入
ここでは画像を挿入します。
## HTMLの使用
<p style="color: blue;">これはHTMLで作成された段落です。</p>
<ul>
<li>HTMLリストの項目1</li>
<li>HTMLリストの項目2</li>
<li>HTMLリストの項目3</li>
</ul>
こちらは問題なく出来そう！
グラフの挿入
ソースコードはこちらです。
Chart.jsというものを使って試してみています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>My Chart</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
// グラフを描画するためのデータと設定
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // グラフの種類 (bar, line, pieなど)
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
結論出るか出ないかでいくと、"出ます"。
ただ、Previewでは出てこないので、Publishしてチェックという流れになると思います！
D3.jsなどでも試してみたのですが、同じような感じです。
Preview時点では外部リソースを読み込むということをしないみたいなのでこちらはご注意ください！
(画像参照)
URLを直接踏んだ時
Preview
URL: https://mdown.ai/content/eba38cfc-e64c-4d30-80f9-6f57de323443
フレキシブルデザイン
ソースコードはこんな感じです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フレキシブルデザイン</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
header {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 1rem;
text-align: center;
}
nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
background-color: #f4f4f4;
padding: 1rem;
gap: 1rem;
}
nav a {
text-decoration: none;
color: #333;
padding: 0.5rem 1rem;
border: 1px solid #ddd;
border-radius: 4px;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
padding: 2rem;
}
.card {
width: 300px;
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card img {
width: 100%;
height: auto;
}
.card-content {
padding: 1rem;
}
footer {
width: 100%;
text-align: center;
background-color: #333;
color: white;
padding: 1rem;
margin-top: auto;
}
@media (max-width: 768px) {
nav a {
padding: 0.5rem;
font-size: 0.9rem;
}
.card {
width: 90%;
}
}
@media (max-width: 480px) {
header, footer {
font-size: 0.9rem;
padding: 0.5rem;
}
}
</style>
</head>
<body>
<header>
<h1>フレキシブルデザインの例</h1>
</header>
<nav>
<a href="#home">ホーム</a>
<a href="#about">概要</a>
<a href="#services">サービス</a>
<a href="#contact">お問い合わせ</a>
</nav>
<main>
<div class="card">
<img src="https://via.placeholder.com/300" alt="サンプル画像">
<div class="card-content">
<h2>カードタイトル</h2>
<p>これはフレキシブルなデザインの例です。</p>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/300" alt="サンプル画像">
<div class="card-content">
<h2>カードタイトル</h2>
<p>画面サイズに応じてレイアウトが変わります。</p>
</div>
</div>
</main>
<footer>
© 2025 フレキシブルデザイン
</footer>
</body>
</html>
結論、うまくいきました！
Previewでも動くは動くんですが、こちらおそらく他のコンポーネントも入っていることが影響してここでレイアウトの調整はしづらいかもしれません。
画像:
幅を小さくした時
URL: https://mdown.ai/content/82893eaa-9929-4555-9290-49f911e75d17
その他気づいたこと
・Publishしました → markdown aiのコードを削除するとURLも無効になる
画像のような404ページに移動されます！
削除しないように注意！
・上記事象に似ていますが、Publishした記事については変更が即座に反映される仕組みになっていることをご注意ください！
・コードの管理について
複数コードの管理が必要になった場合、HTMLで書いた時が悲惨な結果になってしまいます、笑
今はコードの最初にわかりやすいコメントを入れています！(ただコメントアウトはされていないので注意です！)
終わりに
現時点では本番反映をしながら進める形にはなると思いますが、
思ったよりも出来る幅が広かったです！
AI機能もどんどん試してみてまたわかり次第色々共有していきますー。