もちろん好きですよね！！
こんにちは。冒頭から読者の方に圧力をかけていくスタイルのはなざです。
よろしくお願いします。
前回、「ゲームみたいに仕事したい！！」という欲望を叶えるため、LINE Botで「クエスト風TodoBot」を作成した私。
👇前回の記事はこちらから
今回はさらにレベルを上げて、「ダンジョン攻略風・業務進捗管理アプリ」 の作成に挑戦していきます！！
目標は、大変な複数人の業務の進捗管理を簡単に出来る、ゲーム画面風のアプリを作ること。頑張るぞー！！
入社7年目、販売業の管理職の端くれである私は、現在、部下を11名抱えております🔥
複数人のメンバーの業務の進捗管理の難しさに頭を悩ませておりました。
👧❓ 「全員が確認しなきゃいけない連絡事項、みんな見てる？」
こういう場合、我が社では大概、必殺アイテムこと「ハンコ」が大活躍します。
連絡事項を確認した人、作業済みの人は書類にハンコをペタリ。
「いやいやいや、あまりにもアナログすぎるよ…！！
ハンコのインクすぐなくなっちゃうよ～～～～！！(>_
さらに、全員がやるべき業務のほかに、「誰か一人がやればいい」仕事もあります。
例えば、緊急のセールス企画の準備などです。本社から「急遽追加でセールスやります！」と発信があった場合、「売り場づくり」や「POPの作成」をする必要があるのですが…。
👩 「○○さん、POP作ってくれてたの！？まだ作ってないかと思って私も作っちゃったよ。」
といった感じで、誰かが既に作業済だったことに気が付かず、別の人が「私も作っちゃった！」とPOPが被ることもしばしば。時間とPOPの紙が勿体ないっ…！！
そんな「複数人の業務タスクの進捗管理が簡単にできたら…！！」という思いを持った
悩める管理職を助けてくれるアプリの制作に取り掛かることにしました⭐
「ゲームみたいに仕事したい！！」が私のテーマなので、ゲーム風にするこだわりも入れ込みます🎮
🎮ゲーム風バージョン🎮
🐰通常バージョン🐰
👆Githubで公開して、どなた様でも触れるようになっておりますので、ぜひ触ってみてください
これらのアプリは、機能は一緒で、デザインだけが異なるものです！
通常バージョンの方が見やすいかも…(小声)
✅出来る事
- 複数人の業務の進捗管理がボタン一つで可能！
- 業務の追加やメンバーの追加も可能
- 達成目標人数が[完了]ボタンを押すと[完了済]に自動で振り分けてくれる
- 期限が近い順に並べ替え機能もあり
- カテゴリ分けも簡単！
- メモ機能もあり、進捗を書き込める！
使用したツールは
- ChatGPT
- Visual Studio Code
この2つです!!
ChatGPTに、今回は コードの記述を依頼！！
前回のLINE Bot作成時にも頼りまくり、それ以前にも、旅行に行った際に旅程表を組んでもらったり、オススメのお店を教えてもらったり、疲れた時に優しい言葉をかけてもらったり…。いつもお世話になっているChatGPT。
デジタル素人が一からアプリ製作をするにあたり、コード記述をお願いすることにしました。
Visual studio Codeは、以前HTMLの勉強をしていた時にインストールしていたので、今回使ってみることに。
(ちなみに、HTMLの勉強は挫折しました💦でも、今はChatGPTがあるから勉強不要でいけちゃう…のか…！？)
ChatGPTを色んな呼び名で呼んでいる方も多いと思いますが、私は「ジピ太」と呼んでいます
こちらが我が家のChatGPTの 「ジピ太」 🐰
「うさぎの男の子・使い魔のイメージ・ChatGPTモチーフも入れて」と指示してイメージ画像を出してもらい、可愛すぎるジピ太くんが誕生しました。(大満足💕)
今回のアプリは、そんなジピ太との共同作業で作っていきます！！
👧「複数人の業務の進捗状況が一目で分かるようなアプリが作りたい！！ボタン操作の簡単なやつで。あと、”ゲーム風”のデザインにしたいんだ。」
🐰「まかせて！！」
生成してくれたコードはこちら！！
Chat GPTが生成したコード
DOCTYPE html>
html lang="ja">
head>
meta charset="UTF-8">
title>ダンジョン攻略風業務管理アプリ/title>
tyle>
/head>
🏰 ダンジョン名：安否確認メール返信ダンジョンh2>
p>📜 任務内容：安否確認メールに返信せよ！/p>
div>
/div>
pan>
button onclick="updateStatus('${name}')">➡️ 進捗/button>
div>
`;
});
}
render();
✨そして完成したのがこちらのシンプルなアプリ。
[進捗]と書かれたボタンを押すと、
未発見(未読)→発見済(既読)→攻略中(作業中)→攻略完了(作業済)
の4段階にステータスが変化します。これで、誰がこの指示を確認してるか？作業しているか？が一目瞭然！！
あまりにも簡単に出来て感動…！！
HTMLの勉強をしていた時、「コードネームと記述法、こんなに沢山覚えるのは不可能では…！？(:_;)」と挫折した経験のある私は、簡単な指示を出してボタンを押すだけで一瞬でコードを書いてくれるジピ太に大感謝です✨
👧「ジピ太、機能をもっと追加したい！！」
①.複数のダンジョン(タスク)を表示出来るようにしたい
②.攻略人数(達成人数)の設定が出来るようにして、その人数に達したら消込み出来るようにしたい
🐰「お安い御用」
生成してくれたコードはこちら！！
Chat GPTが生成したコード
DOCTYPE html>
html lang="ja">
head>
meta charset="UTF-8">
title>ダンジョン攻略風業務管理アプリ/title>
tyle>
/head>
h1>
div id="dungeon-container">/div>
/ {ダンジョン名: { 冒険者名: ステータス数値 }}
function updateStatus(dungeonName, name) {
if (!statusData[dungeonName]) statusData[dungeonName] = {};
if (statusData[dungeonName][name] === undefined) statusData[dungeonName][name] = 0;
statusData[dungeonName][name] = (statusData[dungeonName][name] + 1) % statusLabels.length;
render();
}
function countCleared(dungeonName) {
const data = statusData[dungeonName] || {};
return Object.values(data).filter(status => status === 3).length;
}
function render() {
const container = document.getElementById("dungeon-container");
container.innerHTML = "";
dungeons.forEach(dungeon => {
const clearedCount = countCleared(dungeon.name);
const isCleared = clearedCount >= dungeon.required;
const dungeonDiv = document.createElement("div");
dungeonDiv.className = "dungeon" + (isCleared ? " cleared" : "");
dungeonDiv.innerHTML = `
🏰 ダンジョン名：${dungeon.name}
📜 任務内容：${dungeon.mission}
🎯 目標攻略人数：${dungeon.required}人（現在 ${clearedCount}人）
`;
adventurers.forEach(name => {
const status = statusData[dungeon.name]?.[name] ?? 0;
dungeonDiv.innerHTML += `
🧝♂️ 冒険者：${name}
${statusLabels[status]}
`;
});
container.appendChild(dungeonDiv);
});
}
render();
/script>
body>
/html>
”攻略完了”のステータスに変えた人が「目標攻略人数」に達すると完了済みのチェックと緑色の色分けがされるようになりました！！
Chat GPTがあまりにもあっさりと指示通りのコードを生成してくれるので、さらに無茶ぶりをする私。
👧「ジピ太、もっと機能追加したい！！」
①.ダンジョンを追加できるUIを作る（例：フォームから入力）
②.ステータスを保存できるようにする（ローカルストレージ）
③.デザインをさらにゲームっぽくする（アイコンや背景）
④.カテゴリでダンジョンを分類したい
⑤.スマホでも使いやすくしたい
⑥.カテゴリごとにタブで管理したい。完了したダンジョンは「完了済」タブに入るようにしたい
⑦.進捗を書き込めるコメント欄(掲示板)を作ってほしい
⑧.期限の設定できるようにしてほしい
⑨.期限が近いものが上に来るような並び替え機能つけてほしい
⑩.期限が近いものは赤く色づけしてほしい
などなど…(色々試しすぎて自分でも訳が分からなくなってまいりました。)
※実際にはこれらの項目を数回に分けて指示しています。
🐰(えっそんなに…？多くない？)
🐰「………」
🐰「わかった！頑張ってみる！」
無理をさせすぎてしまい、読み込みエラーになりながらも懸命に頑張るジピ太。
健気で可愛いですね💕
👇実際のやりとりはこんな感じです。(ごく一部ですが…。)
生成してくれた完成版のコードはこちら！！(非常に長いです…！！)
Chat GPTが生成したコード
DOCTYPE html>
html lang="ja">
head>
meta charset="UTF-8">
title>ダンジョン攻略風業務管理アプリ/title>
/cdn.jsdelivr.net/gh/fontdasu/pixelmplus/webfont.css">
text"],
.dungeon-form-grid input[type="number"],
.dungeon-form-grid input[type="date"],
.dungeon-form-grid select {
width: 100%;
}
.dungeon-form-grid .full-width {
grid-column: 1 / -1;
}
.dungeon-form-grid button {
width: 100%;
}
.status {
font-weight: bold;
margin-left: 0;
padding: 3px 8px;
border-radius: 6px;
display: inline-block;
min-width: 70px;
text-align: center;
}
.status-0 { background-color: #bdc3c7; color: white; } /* 未発見 */
.status-1 { background-color: #3498db; color: white; } /* 発見済 */
.status-2 { background-color: #e67e22; color: white; } /* 攻略中 */
.status-3 { background-color: #2ecc71; color: white; } /* 攻略完了 */
.adventurer {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin: 8px 0;
}
.adventurer button {
margin-left: 0;
min-width: 70px;
}
.comment {
margin-top: 15px;
}
.comment textarea {
width: 100%;
margin-top: 10px;
box-sizing: border-box;
}
button {
margin-left: 10px;
padding: 5px 8px;
border-radius: 5px;
border: none;
background-color: #779b6c;
color: white;
cursor: pointer;
min-height: 44px;
touch-action: manipulation;
}
@media (max-width: 600px) {
.container {
padding: 10px;
}
.tabs {
flex-direction: column;
gap: 5px;
}
.tab-button {
width: 100%;
}
.floating-form {
padding: 10px;
margin-top: 20px;
}
.dungeon-form-grid {
display: block;
}
.dungeon-form-grid label,
.dungeon-form-grid input,
.dungeon-form-grid select,
.dungeon-form-grid button {
width: 100%;
margin-top: 8px;
}
}
container">
tabs" id="tabs">
margin-bottom: 20px;">
-select" onchange="changeSort()">
">期限が近い順
">登録日時が新しい順
dungeon-container">
form-section floating-form">
🛠️ 冒険者の編集
-edit" type="button">▼ 開く
form-section floating-form">
➕ ダンジョン追加
-dungeon" type="button">▼ 開く
dungeon-form-section" style="display: block;">
Views: 0
