作成のきっかけ
コロナが世に出て、5類となった今も毎日の体温チェック・体調管理はマストです😧
ざっくりですが毎日こんなフロー。
どうせ毎朝入力する体調管理シートにも何かプラスαの付加価値を付けられないか考えていました。
思いついたきっかけはこれでした。
Microsoft Rewards
検索するごとにポイントが貯まるのですが
この今日の一言では偉人たちの名言をピックアップして教えてくれます。
ちなみにこの日はガリレオでした。
たまにハッとなるような言葉も出てくるので、モチベーションを高めたり、襟を正すのに活用しています。
これを体調管理情報登録するときに表示させることができたら、いちいち検索しなくてもいいのにな～。
そこで！
ChatGPTにそんなツールを作ってもらうことにしました。
何度も指示を出すことで、HTMLコードを取得し、CSSにて設定することで背景色などデザインします。
使用したツール
ChatGPT
Codepen
シンプルに２つのツールで作成しています。
いざ作成!
ChatGPTとのキャッチボール
記事を参考にChatGPTに指示を出します。
前提条件足りてない情報がたくさんありました😇
なら、どのような形なら作成できるのか概要を知りたい。
名言モーニング！笑 🤣
せっかく提案してくれたので採用します。
もらったHTMLをCodepenに落としてみるとこんな感じ。
これをベースに肉付けしていきます！
具体的に提示してくれました。
続いてカテゴリごとに表示されるように指示します。
HTMLの取得
続いてCodepenに掲載するためのHTMLを取得していきます。
カテゴリごとに表示されるようになりました。
しかし、今日の名言の項目がうまく表示されないままです。
☝このコードで無事に表示されるようになりました。
続いてお気に入り追加の設定
ボタンを押せば別枠で表示できるようにします。
☟お気に入りボタンを作成します。
☟用意された3つのカテゴリ内に名言を追加します。
☝お気に入り登録はできるけどどんどん追加されるばかりだったので削除ボタンを設置、次の名言を表示するボタンを追加しました。
自分のこうしたい！この機能が欲しい！という内容を１つずつ細かく指示出ししたことでエラーを大きく出すことなく進めることができました。
ここまででHTMLは完了です。
CSSの設定
参考にした記事です☝
設定次第でバリエーションの幅が大きく広がるのに感心しました！
色や形式を選んで、、、
最終的にこのCSSにたどり着きました。
ある程度フォーマットが揃っているので好みの形式を選ぶと自分らしさが出て楽しいですね☺
最初は真っ白でさみしい感じでしたが、
背景色の黄色に合わせて暖色系で統一したのでまとまりが出ました！
See the Pen 名言モーニング① by Masayuki Washio (@Masayuki-Washio) on CodePen.
QRコードも埋め込み可能です。
FormsのURLを記載することで、そのまま体調管理入力画面に移行することができるようにしました。
(ここに掲載したQRコードはサンプルです）
毎日出勤時に入力する必要がある体調管理のFormsに繋いで、
シームレスに業務に入ることができます。
☟最終版HTML 折り畳んでいます
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<meta charset="UTF-8">
<title>名言モーニング</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>名言モーニング</h1>
</header>
<main>
<section id="quote-of-the-day">
<h2>今日の名言</h2>
<p id="todays-quote">「名言の内容がここに表示されます。」</p>
<button onclick="addToFavorites(currentQuote)">お気に入りに追加</button>
<button onclick="nextQuote()">次の名言</button>
</section>
<div id="qr-code">
<!-- QRコードがここに表示されます -->
<p>☟ここから本日の体調を登録しましょう</p>
</div>
<section id="categories">
<h2>カテゴリー</h2>
<ul>
<li><a href="#" onclick="showCategory('success')">成功</a></li>
<li><a href="#" onclick="showCategory('happiness')">幸福</a></li>
<li><a href="#" onclick="showCategory('courage')">勇気</a></li>
<!-- 他のカテゴリーを追加 -->
</ul>
</section>
<section id="favorites">
<h2>お気に入り</h2>
<ul id="favorite-quotes-list">
<!-- お気に入りの名言がここに表示されます -->
</ul>
<button onclick="removeFromFavorites()">お気に入りから削除</button>
</section>
<!-- 成功カテゴリーの名言 -->
<section id="success-quotes" style="display: none;">
<h2>成功の名言</h2>
<ul>
<li><a href="#" onclick="displayQuote('成功への第一歩は、行動を起こすことです。 - マーティン・ルーサー・キング・ジュニア')">成功への第一歩は、行動を起こすことです。 - マーティン・ルーサー・キング・ジュニア</a></li>
<!-- 他の成功の名言をここに追加 -->
</ul>
</section>
<!-- 幸福カテゴリーの名言 -->
<section id="happiness-quotes" style="display: none;">
<h2>幸福の名言</h2>
<ul>
<li><a href="#" onclick="displayQuote('幸福は内から湧き出るものです。 - アリストテレス')">幸福は内から湧き出るものです。 - アリストテレス</a></li>
<!-- 他の幸福の名言をここに追加 -->
</ul>
</section>
<!-- 勇気カテゴリーの名言 -->
<section id="courage-quotes" style="display: none;">
<h2>勇気の名言</h2>
<ul>
<li><a href="#" onclick="displayQuote('勇気は恐怖を乗り越える力です。 - ネルソン・マンデラ')">勇気は恐怖を乗り越える力です。 - ネルソン・マンデラ</a></li>
<!-- 他の勇気の名言をここに追加 -->
</ul>
</section>
</main>
<footer>
<p>© 2023 名言モーニング</p>
</footer>
<script>
// QRコード生成ライブラリのオプション設定
const qrCodeOptions = {
text: 'https://forms.office.com/r/yeH74K7tq', // QRコードに埋め込むURLを指定
width: 128,
height: 128,
};
// QRコードを生成して表示
const qrCodeElement = document.getElementById('qr-code');
const qrCode = new QRCode(qrCodeElement, qrCodeOptions);
// 現在の名言を保持する変数
let currentQuote = "";
// お気に入りの名言を管理する配列
const favoriteQuotes = [];
// 名言リスト
const quotes = [
'成功への第一歩は、行動を起こすことです。 - マーティン・ルーサー・キング・ジュニア',
'成功は計画と努力の結果です。 - コリン・パウエル',
'成功は持続的な努力から生まれます。 - ニコラス・スパークス',
'成功は挫折の裏に隠れています。 - ディジー・ディーン',
'成功は自己を超えることから始まります。 - ラルフ・ワルド・エマーソン',
'成功は準備とチャンスの出会いです。 - クリストファー・マーロウ',
'成功は時間と努力の結晶です。 - ウィル・ロジャース',
'成功は選択肢を持つことから生まれます。 - ハリー・シントン・アダムズ',
'成功は過去の挫折を忘れないことから生まれます。 - ハーバート・ベイカー',
'成功は夢を追いかけることから生まれます。 - ウォルト・ディズニー',
'幸福は内から湧き出るものです。 - アリストテレス',
'幸福は小さなことに感謝することから生まれます。 - ロイ・T・ベネット',
'幸福は心の中にあります。 - ラファエル・サバティーニ',
'幸福は他人を幸せにすることから生まれます。 - サンドラ・K・セント・ヴィクター',
'幸福はシンプルな生活から生まれます。 - ラオ・ツー',
'幸福は愛と調和から生まれます。 - カール・ユング',
'幸福は自己受容から生まれます。 - ロバート・ハラビュリ',
'幸福は感謝の心から生まれます。 - デンマークのことわざ',
'幸福は人生を楽しむことから生まれます。 - ドロシー・スミス',
'幸福は愛することから生まれます。 - ローマのことわざ',
'勇気は恐怖を乗り越える力です。 - ネルソン・マンデラ',
'勇気は目の前の困難に立ち向かうことから生まれます。 - ウィンストン・チャーチル',
'勇気は心の中に秘められた力です。 - オードリー・ヘプバーン',
'勇気は自分自身を信じることから生まれます。 - オプラ・ウィンフリー',
'勇気はリスクを取ることから生まれます。 - ジョン・F・ケネディ',
'勇気は希望を持つことから生まれます。 - シェークスピア',
'勇気は信念を持つことから生まれます。 - ローザ・パークス',
'勇気は誠実さから生まれます。 - ゲイル・シーボルド',
'勇気は愛することから生まれます。 - マハトマ・ガンジー',
'勇気は未知への探求から生まれます。 - マリー・キュリー'
];
// ページ読み込み時にランダムな名言を表示
window.addEventListener('load', () => {
const randomIndex = Math.floor(Math.random() * quotes.length);
displayQuote(quotes[randomIndex]);
});
// 今日の名言を表示する関数
function displayQuote(quote) {
currentQuote = quote;
const todaysQuote = document.getElementById('todays-quote');
todaysQuote.textContent = quote;
}
// お気に入りに追加する関数
function addToFavorites(quote) {
if (quote && !favoriteQuotes.includes(quote)) {
favoriteQuotes.push(quote);
updateFavoritesList();
}
}
// お気に入りから削除する関数
function removeFromFavorites() {
if (currentQuote && favoriteQuotes.includes(currentQuote)) {
const index = favoriteQuotes.indexOf(currentQuote);
favoriteQuotes.splice(index, 1);
updateFavoritesList();
}
}
// 次の名言を表示する関数
function nextQuote() {
const randomIndex = Math.floor(Math.random() * quotes.length);
displayQuote(quotes[randomIndex]);
}
// お気に入りリストを更新する関数
function updateFavoritesList() {
const favoritesList = document.getElementById('favorite-quotes-list');
favoritesList.innerHTML = ""; // リストをクリア
favoriteQuotes.forEach((quote) => {
const listItem = document.createElement('li');
listItem.textContent = quote;
favoritesList.appendChild(listItem);
});
}
// カテゴリーを表示する関数はそのまま利用
function showCategory(category) {
// すべてのカテゴリーを非表示にする
document.getElementById('success-quotes').style.display = 'none';
document.getElementById('happiness-quotes').style.display = 'none';
document.getElementById('courage-quotes').style.display = 'none';
// 選択されたカテゴリーを表示する
document.getElementById(category + '-quotes').style.display = 'block';
}
</script>
</body>
</html>
<div class="bg_pattern Lines_v4"></div>
フィードバックをもらう
同僚に作ったツールを見てもらいました。
同じチームメンバーのＡさん
「ChatGPTでこんなの作れるの？面白いね！」
指示出しのやり取りの数々と出してもらったコードを見せながら説明して話が盛り上がりました。笑
上司のBさん
「HTMLは聞いたことあるけどCSSってこんな感じで設定してデザインされてるんだね～」
「名言みてモチベーション上がるかどうかはかなり個人差ありそう」
・・・んーおっしゃる通りです。
個人的にはこういうの好きなんで作るに至りましたが、興味ない人からすれば
なんか言葉と人の名前表示されてるなー程度なのかも。
でも形としてアウトプットできているのは良いねとお話しいただきました。
今後に向けて
今回はHTML内に名言を登録したので、登録すればするほどコードが長くなってしまう形になりました。
ChatGPTに対して名言をAPIに繋いで出力することも可能そうでした。
次回以降の改善案として、現在のコンパクトなUIを保ちつつAPIキーでつないでより多くの内容を表示できるようになると面白いと感じています。
最後までご覧いただきありがとうございました。