「ドイツの暮らし」では、新時代においてAIの積極的利用を推進しています。こちらのブログ では、テーマ・一部デザインをのぞいて独自でホームページを構築しています。またYoutubeチャンネルでも、さまざまなツールを利用して一人で運営しています。
このように、素人でもたった一人で「製作・運営」できる時代に、AIの機能によってさらに快適に、多くの表現が可能となりました。
私のように専門がドイツなどの、ITやデザインに関係のない分野であっても、AIなどの新技術を使ってできるヒントを紹介していきます。
ChatGPT４を利用したカレンダーの作成
こちらの日付表示できるカレンダーを作るためのHTMLコードを学べます
ホームページトップに、本日の日付を記したカレンダーを掲載しました。こちらのカレンダーのコードは、ChatGPTと共に制作いたしました。このような高度なプログラミングが必要な独自の要望には、いくら人気が高いデザインに優れた[THE THOR]のようなテーマであっても用意されていません。
プログラミングの知識は、HTML、CSS、JavaScriptなどがどのように機能しているか、多少の知識があれば、あとは自動的にChatGPTが書いてくれる時代になりました。実際に私はそれを利用しています。
GPT４に「日本語」で指示
シンプルな日付表
今回はすでに作ったことがある「シンプルな日付表」をもとに作成してもらいます。この日付コードは、色と形、また本日の日付表を作ってほしいというシンプルなコマンドによって作られたもので、ChatGPT初心者にもやりやすいです。
こちらの日付表のコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>現在の日付表示</title>
<style>
#date {
font-size: 20px; /* フォントサイズを小さくしました */
color: #fff;
font-weight: bold;
text-align: center;
padding: 5px 10px; /* 上下のパディングを少し小さくしました */
background-color: #ffc0cb; /* 淡いピンク色に変更しました */
border-radius: 5px;
}
</style>
</head>
<body>
<div id="date"></div>
<script>
var today = new Date();
var date = today.getFullYear() + '年' + (today.getMonth() + 1) + '月' + today.getDate() + '日';
document.getElementById("date").innerText = date;
</script>
</body>
</html>
カレンダー表記の日付表
ChatGPT４への指示
Step1
先に作ってある、シンプルな日付表のコードをコピペしてChat GPTに打ち込み
Step2
「こういう日付表を作ったのですが、カレンダーの見た目にしたい。そういうHTMLコードください。」（今回作ったコード表の指示まま）
以上の指示で、ChatGPT４が１分もかからずに、コードを与えてくれます。
出来上がりのコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カレンダー</title>
<style>
body {
font-family: Arial, sans-serif;
}
#calendar {
max-width: 400px;
margin: 20px auto;
border-collapse: collapse;
}
#calendar th, #calendar td {
border: 1px solid #ccc;
text-align: center;
padding: 5px;
}
#calendar th {
background-color: #ffc0cb; /* 淡いピンク色 */
color: #fff;
}
#calendar .today {
background-color: #ffebcd; /* 今日の日付の色 */
}
</style>
</head>
<body>
<div id="monthYear"></div>
<table id="calendar">
<tr>
<th>日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
<!-- 以下の行を動的に生成するためのプレースホルダー -->
<!-- JavaScriptで現在の月の日付を基に行を追加 -->
</table>
<script>
function createCalendar(year, month) {
const monthYear = document.getElementById('monthYear');
monthYear.innerText = `${year}年 ${month + 1}月`;
const calendar = document.getElementById('calendar');
while(calendar.rows.length > 1) {
calendar.deleteRow(1);
}
const firstDay = new Date(year, month, 1).getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();
let date = 1;
for (let i = 0; i < 6; i++) {
let row = calendar.insertRow(-1);
for (let j = 0; j < 7; j++) {
let cell = row.insertCell(-1);
if (i === 0 && j < firstDay) {
cell.innerHTML = "";
} else if (date > daysInMonth) {
break;
} else {
cell.innerHTML = date;
if (date === new Date().getDate() && year === new Date().getFullYear() && month === new Date().getMonth()) {
cell.classList.add('today');
}
date++;
}
}
if (date > daysInMonth) {
break;
}
}
}
const today = new Date();
createCalendar(today.getFullYear(), today.getMonth());
</script>
</body>
</html>
ChatGPT4のコメント
ChatGPTはコメントも添えます(コメントまま）
カレンダーの見た目を作成するには、HTMLとCSSを使用して、日付を格子状に表示するレイアウトを作成します。JavaScriptを用いて現在の月を表示し、各日付を適切に配置することができます。
以下は、簡単なカレンダーレイアウトを作成するための基本的なコード例です。この例では、カレンダーのレイアウトを作成し、現在の月と年を表示します。日付の部分は静的ですが、JavaScriptを使用して動的に現在の月の日付を生成し配置することが可能です。
このコードは、現在の月のカレンダーを表示します。
createCalendar関数は指定された年と月に対してカレンダーを生成し、現在の日付には特別な背景色を設定します。この基本的な例をカスタマイズして、特定のニーズに合わせたカレンダーを作成することができます。
装丁のこだわり
細かい指示
<ChatGPT4の回答＞
指定された「2024年2月」を青色で、少しオシャレに表示するためには、CSSを使ってスタイルを調整します。以下の変更を加えることで、月と年の表示をカスタマイズできます。具体的には、
#monthYearに対するスタイルを追加し、フォントの色を青にし、フォントの大きさやファミリーを変更してみましょう。
Code表
<style>
body {
font-family: Arial, sans-serif;
}
#monthYear {
text-align: center;
font-size: 24px; /* フォントサイズを大きく */
font-weight: bold; /* フォントを太く */
color: #0000ff; /* テキスト色を青に */
margin: 20px 0; /* 上下のマージン */
}
#calendar {
max-width: 400px;
margin: 20px auto;
border-collapse: collapse;
}
#calendar th, #calendar td {
border: 1px solid #ccc;
text-align: center;
padding: 5px;
}
#calendar th {
background-color: #ffc0cb; /* 淡いピンク色 */
color: #fff;
}
#calendar .today {
background-color: #ffebcd; /* 今日の日付の色 */
}
</style>
このCSSをHTMLドキュメントの
<head>セクションに追加または変更してください。#monthYearに設定されたスタイルにより、「2024年2月」というテキストが青色で、少し大きく太字で中央揃えで表示されるようになります。これにより、見出しの部分が目を引くオシャレなデザインになります。もしこれ以上の「オシャレ」なデザインを求める場合は、フォントファミリーを変更するか、Google Fontsなどのウェブフォントを利用することで、さらにデザインの幅を広げることができます。ただし、ウェブフォントを使用する場合は、外部リソースを読み込む必要があるため、HTMLドキュメントに追加のリンクタグを含める必要があります。
自分で学んだ方が早い部分（簡単にカスタムできる）
「色の魔法: ヘックスカラーコードの解説と便利なツールガイド」
超素人さんへのアドバイス
ChatGPT４は、おそらくちょっとしたプログラミングの知識を持った前提で、コードを出してきます。また指示が、コードの一部の変更のみの場合があり、もし記事のように一部だけを変更されてもわからない場合は、
コードを全部まとめて、HTMLカスタムにそのまま打ち込めるように、コードを全部出して！
と指示すると、ほとんどの場合はそのまま出してくれます。