かつてはネット上に豊富にあったブログパーツも、最近では検索しても古いサービス終了モノばかり。SNSや動画に押されてブログ自体のニーズが減ってきているせいかもしれませんね😥。
と言ってブログに付けたいパーツ（機能・ウィジェット）はあるのですが、（普段プログラミングを行わない私にとっては）自作（APIの使い方とかを真面目に習得）は面倒だし、何とかならないかなぁ〜、と日々思っていたのですが、ついに閃きました💡！
生成AIに作らせて（プログラミングさせて）みよう！（所謂『バイブコーディング』ですね😋。）
 |
結果は上手くいってしまったので✌️、今回はその顛末の紹介になります。
■ChatGPTでプログパーツ（HTMLコード）を自動生成してみた（バイブコーディング）
●使用するサービス（ChatGPT）
今回使った生成AIはコレです。
-w640.jpg)
|
| ChatGPT |
謂わずと知れた生成AIの王者（今のところ？）ですね。
今まで個人的にはあまり使ってこなかったのですが、今回は『いちばん人気あるみたいだしー、』的な安易な感覚で選んでみました😋。
●HTMLコードの作成（自動生成）方法
今回は『本日の日付を旧暦で表示する』というブログパーツを作成（自動生成）させてみました。
・プロンプト指示によるコードの作成（自動生成）
ChatGPT（ログアウトしたまま）に以下のようなプロンプトで指示を出しました。- プロンプト：『本日の日付を日本式の旧暦で表示するHTMLコードを作成してください』（※）
|
| ChatGPTへのプロンプト指示（入力） |
（※ 同じ旧暦（太陰太陽暦）でも国によって日付が異なるので『日本式の旧暦』と指定しています。）
するとChatGPTはプログラムの解説（ポイント等）も含めてHTMLコードを生成してくれました。
|
| ChatGPTの回答画面 |
生成された旧暦を表示するHTMLコードは以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>本日の和暦・旧暦・六曜</title>
<style>
body { font-family: sans-serif; line-height: 1.6; }
.koyomi-container { border: 1px solid #ccc; padding: 1em; display: inline-block; }
.koyomi-item { margin-bottom: 0.5em; }
.label { font-weight: bold; }
</style>
</head>
<body>
<h1>本日の暦情報</h1>
<div class="koyomi-container" id="koyomi"></div>
<script>
(function() {
// 今日の日付
const today = new Date();
const yyyy = today.getFullYear();
const mm = String(today.getMonth() + 1).padStart(2, '0');
const dd = String(today.getDate()).padStart(2, '0');
const params = new URLSearchParams({
mode: "d",
cnt: "1",
targetyyyy: yyyy,
targetmm: mm,
targetdd: dd
});
fetch('https://koyomi.zingsystem.com/api/?' + params.toString(), {
method: 'GET'
})
.then(response => response.json())
.then(data => {
const key = `${yyyy}-${mm}-${dd}`;
const info = data.datelist && data.datelist[key];
const container = document.getElementById('koyomi');
if (!info) {
container.innerText = '暦情報の取得に失敗しました';
return;
}
const lines = [];
lines.push(`<div class="koyomi-item"><span class="label">西暦：</span>${yyyy}年${mm}月${dd}日（${info.week}）</div>`);
lines.push(`<div class="koyomi-item"><span class="label">和暦：</span>${info.gengo}${info.wareki}年${mm}月${dd}日</div>`);
lines.push(`<div class="koyomi-item"><span class="label">旧暦：</span>${info.kyurekiy}年 ${info.kyurekim}月 ${info.kyurekid}日</div>`);
lines.push(`<div class="koyomi-item"><span class="label">陰暦名：</span>${info.inreki}</div>`);
lines.push(`<div class="koyomi-item"><span class="label">六曜：</span>${info.rokuyou}</div>`);
if (info.holiday) {
lines.push(`<div class="koyomi-item"><span class="label">祝日：</span>${info.holiday}</div>`);
}
container.innerHTML = lines.join('');
})
.catch(err => {
console.error(err);
document.getElementById('koyomi').innerText = 'APIエラーが発生しました';
});
})();
</script>
</body>
</html>
ここでは暦APIを使ってコードを生成してくれてますね。
・コードの動作確認
確認方法は簡単です：
- 生成されたコードをそのまま（無加工で）メモ帳に貼り付けてファイル名を『***.html』（例：『旧暦.html』）にして保存します。
- で、そのHTMLファイルをブラウザで表示させれば動作確認を行うことができます。
|
確認した結果はこんな感じです。
|
| ChatGPTで生成したHTMLコード（旧暦.html）の動作確認結果（Chromeブラウザ画面） |
私が狙っていた通りの内容の表示です😎。完璧ですね😋。
・ブログパーツとして使う場合
今回ChatGPTが自動生成したコードは単独で動作するように（ヘッダー等も含んだ）HTMLページとしての全情報が記載されていますが、ブログパーツとして使う場合は上記コードの<body></body>タグで囲まれた部分（以下）をコピペすればOKです。
<h1>本日の暦情報</h1>
<div class="koyomi-container" id="koyomi"></div>
<script>
(function() {
// 今日の日付
const today = new Date();
const yyyy = today.getFullYear();
const mm = String(today.getMonth() + 1).padStart(2, '0');
const dd = String(today.getDate()).padStart(2, '0');
const params = new URLSearchParams({
mode: "d",
cnt: "1",
targetyyyy: yyyy,
targetmm: mm,
targetdd: dd
});
fetch('https://koyomi.zingsystem.com/api/?' + params.toString(), {
method: 'GET'
})
.then(response => response.json())
.then(data => {
const key = `${yyyy}-${mm}-${dd}`;
const info = data.datelist && data.datelist[key];
const container = document.getElementById('koyomi');
if (!info) {
container.innerText = '暦情報の取得に失敗しました';
return;
}
const lines = [];
lines.push(`<div class="koyomi-item"><span class="label">西暦：</span>${yyyy}年${mm}月${dd}日（${info.week}）</div>`);
lines.push(`<div class="koyomi-item"><span class="label">和暦：</span>${info.gengo}${info.wareki}年${mm}月${dd}日</div>`);
lines.push(`<div class="koyomi-item"><span class="label">旧暦：</span>${info.kyurekiy}年 ${info.kyurekim}月 ${info.kyurekid}日</div>`);
lines.push(`<div class="koyomi-item"><span class="label">陰暦名：</span>${info.inreki}</div>`);
lines.push(`<div class="koyomi-item"><span class="label">六曜：</span>${info.rokuyou}</div>`);
if (info.holiday) {
lines.push(`<div class="koyomi-item"><span class="label">祝日：</span>${info.holiday}</div>`);
}
container.innerHTML = lines.join('');
})
.catch(err => {
console.error(err);
document.getElementById('koyomi').innerText = 'APIエラーが発生しました';
});
})();
</script>
動作確認ができているソースコードなので、私のような（普段はプログラミングを行わない）アナログハード屋でもカスタマイズは簡単（というか気が楽😅♪）ですよね。
ブログに載せたい項目（内容）を取捨選択してコードを書き換えれば、望みのブログパーツの完成です。
レイアウトや文字の装飾等はCSSでお気に召すままですね😋♪
●使用感（注意点）
同じプロンプトでChatGPTに指示出しをしても作成（自動生成）されるコードは毎回違います。またコードで使用されるライブラリ・API等も毎回異なります。
その結果として、動作するコードと動作しないコードがあります。
（感覚的な話ですが、生成されるコードは古いライブラリやAPIを使っているケースが多いようで、動作確認では（ライブラリ・API情報が取得できずに）動かないことが多々ありました。）
バイブコーディングを行うときは、ChatGPTに複数回コードを作らせてみることをオススメします。
●改善したい点
- 今のところありません😋
●まとめ
今回のような簡単なプログラミングならChatGPTによるコーディング（バイブコーディング）の威力は絶大ということを実感しました。
特に私のように普段はプログラミングを行わない人間にとっては「何から手を付けてよいか分からない。」状態を脱することができて非常に有益です。
（ライブラリやAPIが古くて動かない場合でも、プログラミングの見通しが立つ（流れが分かる）ので。）
これで欲しいブログパーツを必死で探すことをしなくて済みそうです。いやぁ、良かった良かった😋。