こんにちは。ユウカです。
現在デジタルについて学んでいますが、わからないことだらけで日々悪戦苦闘しながら学んでいます。
注文管理をもっとラクにしたい
私は接客業で働いており、お客さまからいただいた商品の管理業務を行うことがあります。注文管理では、顧客名や商品名、数量などを記録し、商品が入荷したか、代金の支払いが完了しているかを確認する必要があります。また、お客さまから受けた注文内容を共有するための記録と、後から確認できるように保管をするための記録をそれぞれ作成しているため、同じ内容を複数回記入する場面があります。
注文件数が増えると記入や確認に時間がかかるだけでなく、記入漏れや確認漏れが発生する可能性もあります。また、過去の注文情報を探したい場合にも手間がかかることがありました。
そこで、注文情報を一覧で管理し、確認作業や検索作業を効率化することで、働く仲間たちの管理業務を少しでもラクにしたいと考え、注文管理システムを制作しました。
CodePenとPower Automateを活用した注文管理システム
今回制作したのは、注文情報を管理するための注文管理システムです。
このシステムでは、顧客名や商品名などの注文情報を登録し、編集や削除ができるようにしました。また、CSV形式でデータを出力できる機能も追加しました。
制作にはCodePenを使用しました。ブラウザ上でHTML、CSS、JavaScriptをまとめて編集できるため、初心者でも動作確認をしながら作りやすいと考えたためです。
また、出力したCSVデータをExcelで管理し、Power Automateと連携することで、注文情報の管理をさらに効率化できる仕組みの構築を目指しました。
完成動画はこちら
完成した注文管理システムの動作動画です。CodePenへの入力からCSV出力、OneDriveへの保存、Power AutomateによるExcelへの自動反映までの一連の流れを紹介しています。
使用したツール
・ChatGPT：コード作成やエラー修正のサポート、記事の文章構成
・CodePen：注文管理システムの制作
・OneDrive：CSVファイルの保存先
・Excel：注文情報の管理
・Power Automate：CSVデータをExcelへ自動反映
実際にやったこと
今回は、
①CodePenで注文管理システムを作成
②OneDriveでファイル管理
③Power Automateによる自動化
④Excelで管理
という流れで構築しました。
①CodePenで注文管理システムを作成
まずはCodePenを使用して注文管理システムを作成しました。CodePenを選んだ理由は、ブラウザ上でコードを編集しながらリアルタイムで動作確認ができるためです。
今回はChatGPTを活用しながらコードの作成や修正を行い、注文情報の登録やCSV出力ができる仕組みを作成しました。
完成したシステムでは、注文情報を一覧で管理できるようになり、CSV形式で出力することも可能になりました。登録した注文情報はCSV形式で出力できるようにし、後続のExcel管理やPower Automateとの連携に活用しました。
②OneDriveを活用したファイル管理
CodePenから出力したCSVファイルの保存先としてOneDriveを使用しました。OneDriveを活用することでファイルを一元管理できるだけでなく、Power Automateとの連携も行いやすくなります。また、CSVファイルが保存されたことをきっかけにPower Automateを自動で起動できるため、後続の自動処理につなげることができます。
③Power Automateによる自動化
今回の制作で最も苦戦したのが、Power Automateです。
Power Automateでは、OneDriveにCSVファイルが保存されたことをきっかけにフローを起動し、注文情報をExcelへ自動で反映する仕組みを構築しました。設定項目が多く、思うように動作しないこともありましたが、一つずつ確認しながら設定を進めました。
その結果、CSVファイルを保存するだけでExcelへ自動反映されるようになり、手作業による転記の手間を削減できるようになりました。
Power Automateのフロー全体です。OneDriveへCSVファイルが保存されたことをきっかけに処理を開始し、Excelへ自動反映する仕組みを構築しました。
Excelへデータを自動反映するため、保存先ファイルとテーブルを指定して設定を行いました。
④Excelで注文情報の管理
Power Automateによって自動反映された注文情報は、Excelで管理するようにしました。これにより手作業で転記する必要がなくなり、注文情報を一覧で確認できるようになります。また、過去の注文情報も確認しやすくなり、管理業務の効率化につながりました。
ChatGPTを活用したこと
今回の制作ではChatGPTを活用しながら進めました。
主にコードの作成や修正、エラー発生時の原因調査、Power Automateの設定方法の確認などに活用しました。
思うように進まない場面が多くありましたが、ChatGPTに相談しながら一つずつ課題を解決することができました。
注文管理システムのコードはこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>客注管理システム</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
font-size: 16px;
}
h2 {
font-size: 24px;
}
input, textarea, button {
margin: 5px;
padding: 5px;
}
textarea {
width: 220px;
height: 50px;
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
font-size: 16px;
}
th {
background: #ddd;
}
/* 両方まだ */
.notyet {
background-color: #f8d7da;
}
/* 片方だけ完了 */
.half {
background-color: #fff3cd;
}
/* 入荷済み＆代済み */
.done {
background-color: #d4edda;
}
/* 入荷済みの目印 */
.arrivedMark {
border-left: 5px solid blue;
}
</style>
</head>
<body>
<h2>客注管理</h2>
<input type="date" id="date">
<input type="text" id="customer" placeholder="顧客名">
<input type="text" id="product" placeholder="商品名">
<input type="number" id="qty" placeholder="数量">
<input type="number" id="price" placeholder="単価">
<textarea id="memo" placeholder="詳細"></textarea>
<button onclick="addOrder()">追加</button>
<button onclick="deleteSelected()">選択削除</button>
<button onclick="downloadCSV()">CSV出力</button>
<table>
<thead>
<tr>
<th>削除</th>
<th>受注日</th>
<th>顧客名</th>
<th>商品</th>
<th>数量</th>
<th>単価</th>
<th>合計</th>
<th>詳細</th>
<th>入荷</th>
<th>代済み</th>
<th>編集</th>
</tr>
</thead>
<tbody id="list"></tbody>
</table>
<script>
let orders = [];
let editIndex = -1;
function addOrder() {
const date = document.getElementById("date").value;
const customer = document.getElementById("customer").value;
const product = document.getElementById("product").value;
const qty = Number(document.getElementById("qty").value);
const price = Number(document.getElementById("price").value);
const memo = document.getElementById("memo").value;
const order = {
date: date,
customer: customer,
product: product,
qty: qty,
price: price,
total: qty * price,
memo: memo,
arrived: false,
paid: false,
del: false
};
if (editIndex === -1) {
orders.push(order);
} else {
order.arrived = orders[editIndex].arrived;
order.paid = orders[editIndex].paid;
orders[editIndex] = order;
editIndex = -1;
}
saveData();
render();
clearForm();
}
function render() {
const list = document.getElementById("list");
list.innerHTML = "";
orders.forEach((o, i) => {
const tr = document.createElement("tr");
if (o.arrived && o.paid) {
tr.classList.add("done");
} else if (o.arrived || o.paid) {
tr.classList.add("half");
} else {
tr.classList.add("notyet");
}
if (o.arrived) {
tr.classList.add("arrivedMark");
}
tr.innerHTML =
"<td><input type='checkbox' onchange='toggleDelete(" + i + ")'></td>" +
"<td>" + o.date + "</td>" +
"<td>" + o.customer + "</td>" +
"<td>" + o.product + "</td>" +
"<td>" + o.qty + "</td>" +
"<td>" + o.price + "</td>" +
"<td>" + o.total + "</td>" +
"<td>" + o.memo + "</td>" +
"<td><input type='checkbox' " + (o.arrived ? "checked" : "") + " onchange='toggleArrived(" + i + ")'></td>" +
"<td><input type='checkbox' " + (o.paid ? "checked" : "") + " onchange='togglePaid(" + i + ")'></td>" +
"<td><button onclick='editOrder(" + i + ")'>編集</button></td>";
list.appendChild(tr);
});
}
function toggleArrived(i) {
orders[i].arrived = !orders[i].arrived;
saveData();
render();
}
function togglePaid(i) {
orders[i].paid = !orders[i].paid;
saveData();
render();
}
function toggleDelete(i) {
orders[i].del = !orders[i].del;
}
function deleteSelected() {
orders = orders.filter(o => !o.del);
saveData();
render();
}
function editOrder(i) {
const o = orders[i];
document.getElementById("date").value = o.date;
document.getElementById("customer").value = o.customer;
document.getElementById("product").value = o.product;
document.getElementById("qty").value = o.qty;
document.getElementById("price").value = o.price;
document.getElementById("memo").value = o.memo;
editIndex = i;
}
function clearForm() {
document.getElementById("date").value = "";
document.getElementById("customer").value = "";
document.getElementById("product").value = "";
document.getElementById("qty").value = "";
document.getElementById("price").value = "";
document.getElementById("memo").value = "";
}
function saveData() {
localStorage.setItem("orders", JSON.stringify(orders));
}
function loadData() {
const data = localStorage.getItem("orders");
if (data) {
orders = JSON.parse(data);
}
}
function downloadCSV() {
let csv = "\uFEFF顧客名,商品名,数量,単価,合計\n";
orders.forEach(o => {
csv += [
o.customer,
o.product,
o.qty,
o.price,
o.total
].join(",") + "\n";
});
const blob = new Blob([csv], {
type: "text/csv;charset=utf-8;"
});
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "orders.csv";
link.click();
}
loadData();
render();
</script>
</body>
</html>
実際に共有してみて
完成したシステムを実際に周囲の方へ共有したところ、「業務がラクになりそう」「注文情報を一覧で確認できるのが良い」といった意見をいただきました。また、「在庫の有無や発注状況も確認できるようになるとさらに便利になりそう」という改善案もいただきました。
一方で、「実際の業務に導入するには運用面や管理面で課題もあるのではないか」という意見もありました。
今回のシステムは、実際に利用する立場の方から意見をいただくことで、新たな課題や改善点を知ることができました。
苦戦したところ
今回の制作で最も苦戦したのは、Power AutomateとExcelの連携部分です。
CSVファイルの保存先設定やExcelテーブルとの連携がうまくいかず、思うように動作しないことが何度もありました。また、エラーが発生した際には原因の特定に時間がかかることもありました。
しかし、ChatGPTや周囲の方々の力を借りながら一つずつ問題を解決し、最終的にはCSVファイルをExcelへ自動反映できる仕組みを構築することができました。
最後に
今回は、注文管理システムを作りました。制作を進める中で生成AIはコード作成やエラー解決だけでなく、考え方の整理や学習のサポートにも役立つことを実感しました。
一方で、生成AIを活用する際は質問内容が曖昧だと、思うような回答が得られなかったり、同じ内容を繰り返してしまったりすることもありました。
そのため、自分が何を実現したいのかを整理し、相手に伝わるように説明することの大切さも学ぶことができました。
今回の経験を今後の学習や業務改善に活かしながら、引き続きデジタルツールや生成AIの活用に挑戦していきたいと思います。