AIを使ってコードを書かずに業務アプリを作成する

# 依頼：業務効率化ツールの作成

あなたは優秀なフロントエンドエンジニアです。ブラウザですぐに使える便利な業務ツールを作成してください。

## 1. 作成したいもの
「ボタン一つで業務報告が作れる、簡易工数管理ツール」

## 2. 必要な機能
* **入力項目**: 
    * 業務カテゴリ（「会議」「資料作成」「メール対応」「休憩」から選択）
    * 詳細メモ（自由入力）
* **操作ボタン**: 
    * 「開始」ボタンと「終了」ボタン
* **自動計算**: 
    * 終了ボタンを押すと、開始からの経過時間を計算し、画面下の履歴リストに追加する。
* **出力機能**: 
    * 記録された履歴を「日報形式のテキスト」にまとめ、ワンクリックでクリップボードにコピーできる機能。

## 3. 技術的な制約
* **1ファイル完結**: HTML、CSS、JavaScriptをすべて1つのファイルにまとめて出力してください。
* **即実行可能**: 作成されたコードを `.html` ファイルとして保存し、ブラウザ（Chrome等）で開くだけで動くようにしてください。
* **デザイン**: 30〜40代が職場で使いやすいよう、清潔感のある「ビジネス風（青と白が基調）」のデザインにしてください。

## 4. 出力の形式
まずは、このアプリを実現するための全コードを提示してください。

# 依頼：業務効率化ツールの作成

あなたは優秀なフロントエンドエンジニアです。ブラウザですぐに使える便利な業務ツールを作成してください。

## 1. 作成したいもの
「ボタン一つで業務報告が作れる、簡易工数管理ツール」

## 2. 必要な機能
* **入力項目**: 
    * 業務カテゴリ（「会議」「資料作成」「メール対応」「休憩」から選択）
    * 詳細メモ（自由入力）
* **操作ボタン**: 
    * 「開始」ボタンと「終了」ボタン
* **自動計算**: 
    * 終了ボタンを押すと、開始からの経過時間を計算し、画面下の履歴リストに追加する。
* **出力機能**: 
    * 記録された履歴を「日報形式のテキスト」にまとめ、ワンクリックでクリップボードにコピーできる機能。

## 3. 技術的な制約
* **1ファイル完結**: HTML、CSS、JavaScriptをすべて1つのファイルにまとめて出力してください。
* **即実行可能**: 作成されたコードを `.html` ファイルとして保存し、ブラウザ（Chrome等）で開くだけで動くようにしてください。
* **デザイン**: 30〜40代が職場で使いやすいよう、清潔感のある「ビジネス風（青と白が基調）」のデザインにしてください。

## 4. 出力の形式
まずは、このアプリを実現するための全コードを提示してください。

# 依頼：業務内容（入力項目）のカスタマイズ

現在作成した「業務工数管理ツール」の入力項目を、私の実際の仕事に合わせて変更してください。

1. **カテゴリの変更**: 
    * 現在の項目を削除し、以下の項目をセレクトボックスから選べるようにしてください。
    * [ここに自分の業務を記入：例：顧客訪問、電話対応、見積作成、社内会議、移動]
2. **デフォルトの追加**: 
    * 備考欄に、よく使うフレーズ「特記事項なし」をあらかじめ入力された状態にしておいてください。

変更後の全コードを出力してください。

# 依頼：業務内容（入力項目）のカスタマイズ

現在作成した「業務工数管理ツール」の入力項目を、私の実際の仕事に合わせて変更してください。

1. **カテゴリの変更**: 
    * 現在の項目を削除し、以下の項目をセレクトボックスから選べるようにしてください。
    * [ここに自分の業務を記入：例：顧客訪問、電話対応、見積作成、社内会議、移動]
2. **デフォルトの追加**: 
    * 備考欄に、よく使うフレーズ「特記事項なし」をあらかじめ入力された状態にしておいてください。

変更後の全コードを出力してください。

# 依頼：操作性の向上（ユーザー体験の改善）

このツールを毎日ストレスなく使えるよう、以下の「使い勝手」を向上させてください。

1. **ミスの防止**: 
    * 誤ってブラウザを閉じたり更新したりしても、入力中のデータや履歴が消えないように「LocalStorage（ローカルストレージ）」に自動保存されるようにしてください。
2. **削除機能の追加**: 
    * 履歴リストの各項目に「削除」ボタンを付け、間違えて登録したものを個別に消せるようにしてください。
3. **視認性の向上**: 
    * 合計時間が1時間を超えた場合、その項目の背景色を薄い黄色にして目立たせてください。
4. **一括リセット**: 
    * 「今日の記録をすべて消去する」ボタンを画面の一番下に追加してください。

これらの修正を反映した、最新の全コードを提示してください。

# 依頼：操作性の向上（ユーザー体験の改善）

このツールを毎日ストレスなく使えるよう、以下の「使い勝手」を向上させてください。

1. **ミスの防止**: 
    * 誤ってブラウザを閉じたり更新したりしても、入力中のデータや履歴が消えないように「LocalStorage（ローカルストレージ）」に自動保存されるようにしてください。
2. **削除機能の追加**: 
    * 履歴リストの各項目に「削除」ボタンを付け、間違えて登録したものを個別に消せるようにしてください。
3. **視認性の向上**: 
    * 合計時間が1時間を超えた場合、その項目の背景色を薄い黄色にして目立たせてください。
4. **一括リセット**: 
    * 「今日の記録をすべて消去する」ボタンを画面の一番下に追加してください。

これらの修正を反映した、最新の全コードを提示してください。

# 依頼：機能改善の提案と実装

現在作成した「業務工数管理ツール」を、より現場で使いやすくしたいと考えています。

1. **機能の提案**: 
    * 30〜40代の事務職や現場管理者が「これがあればもっと便利だ」と感じる追加機能を3つ提案してください。
    * （例：データのグラフ化、休憩時間の自動差し引き、ダークモード対応など）

2. **実装の選択**: 
    * 提案してもらった中から、私が「それをお願いします」と選んだものを、今のコードに組み込んで書き直してください。

まずは、どのような機能が追加可能か、3つのアイデアを教えてください。

# 依頼：機能改善の提案と実装

現在作成した「業務工数管理ツール」を、より現場で使いやすくしたいと考えています。

1. **機能の提案**: 
    * 30〜40代の事務職や現場管理者が「これがあればもっと便利だ」と感じる追加機能を3つ提案してください。
    * （例：データのグラフ化、休憩時間の自動差し引き、ダークモード対応など）

2. **実装の選択**: 
    * 提案してもらった中から、私が「それをお願いします」と選んだものを、今のコードに組み込んで書き直してください。

まずは、どのような機能が追加可能か、3つのアイデアを教えてください。

# 依頼：セキュリティおよびバグのセルフチェック

このツールのコードを安心して利用できるよう、以下の観点で確認をお願いします。

1. **セキュリティリスク**: 
    * 外部へのデータ流出や、ブラウザ上での脆弱性（クロスサイトスクリプティングなど）の心配はありませんか？
2. **バグの原因**: 
    * データの入力ミスや、ブラウザの更新などで動かなくなるような「考慮不足」の箇所はありませんか？
3. **改善策の提示**: 
    * もし修正が必要な箇所があれば、その理由を初心者にも分かりやすく解説した上で、修正済みの全コードを提示してください。

# 依頼：セキュリティおよびバグのセルフチェック

このツールのコードを安心して利用できるよう、以下の観点で確認をお願いします。

1. **セキュリティリスク**: 
    * 外部へのデータ流出や、ブラウザ上での脆弱性（クロスサイトスクリプティングなど）の心配はありませんか？
2. **バグの原因**: 
    * データの入力ミスや、ブラウザの更新などで動かなくなるような「考慮不足」の箇所はありませんか？
3. **改善策の提示**: 
    * もし修正が必要な箇所があれば、その理由を初心者にも分かりやすく解説した上で、修正済みの全コードを提示してください。

# 依頼：見積・請求金額シミュレーターの作成

あなたは優秀なフロントエンドエンジニアです。ブラウザで簡単に使える「見積金額シミュレーター」を作成してください。

## 1. 作成したいもの
商品名、単価、数量を入力すると、即座に合計金額（税込）を算出するシミュレーター。

## 2. 必要な機能
* **入力項目**: 
    * 行の追加機能（複数の商品を入力できるように）
    * 各行に「商品名」「単価」「数量」の入力欄
* **計算ロジック**: 
    * 小計（単価 × 数量）を自動計算
    * 消費税（10%固定）を計算し、税込合計を表示
* **出力機能**: 
    * 入力した内容を、簡易的な「見積書風」の見た目でプレビュー表示する機能。
    * プレビュー内容をクリップボードにコピーするボタン。

## 3. 技術的な制約
* **1ファイル完結**: HTML、CSS、JavaScriptをすべて1つのファイルにまとめてください。
* **即実行可能**: 作成されたコードを .html ファイルとして保存し、ブラウザで開くだけで動くようにしてください。
* **デザイン**: 信頼感のある「誠実なビジネス風」のデザイン（グレーや紺色を基調）にしてください。

## 4. 出力の形式
まずは、このアプリを実現するための全コードを提示してください。

# 依頼：見積・請求金額シミュレーターの作成

あなたは優秀なフロントエンドエンジニアです。ブラウザで簡単に使える「見積金額シミュレーター」を作成してください。

## 1. 作成したいもの
商品名、単価、数量を入力すると、即座に合計金額（税込）を算出するシミュレーター。

## 2. 必要な機能
* **入力項目**: 
    * 行の追加機能（複数の商品を入力できるように）
    * 各行に「商品名」「単価」「数量」の入力欄
* **計算ロジック**: 
    * 小計（単価 × 数量）を自動計算
    * 消費税（10%固定）を計算し、税込合計を表示
* **出力機能**: 
    * 入力した内容を、簡易的な「見積書風」の見た目でプレビュー表示する機能。
    * プレビュー内容をクリップボードにコピーするボタン。

## 3. 技術的な制約
* **1ファイル完結**: HTML、CSS、JavaScriptをすべて1つのファイルにまとめてください。
* **即実行可能**: 作成されたコードを .html ファイルとして保存し、ブラウザで開くだけで動くようにしてください。
* **デザイン**: 信頼感のある「誠実なビジネス風」のデザイン（グレーや紺色を基調）にしてください。

## 4. 出力の形式
まずは、このアプリを実現するための全コードを提示してください。

# 依頼：自社ルールに合わせたカスタマイズ

作成したシミュレーターを、私の会社のルールに合わせて変更してください。

1. **税率の変更**: 
    * 項目ごとに「標準税率(10%)」と「軽減税率(8%)」を選択できるようにしてください。
2. **端数処理**: 
    * 消費税計算で発生する小数点以下は「切り捨て」にしてください。
3. **固定項目の追加**: 
    * 見積の末尾に、常に「諸経費」として合計金額の5%が自動で加算されるようにしてください。

変更後の全コードを出力してください。

# 依頼：自社ルールに合わせたカスタマイズ

作成したシミュレーターを、私の会社のルールに合わせて変更してください。

1. **税率の変更**: 
    * 項目ごとに「標準税率(10%)」と「軽減税率(8%)」を選択できるようにしてください。
2. **端数処理**: 
    * 消費税計算で発生する小数点以下は「切り捨て」にしてください。
3. **固定項目の追加**: 
    * 見積の末尾に、常に「諸経費」として合計金額の5%が自動で加算されるようにしてください。

変更後の全コードを出力してください。

# 依頼：操作性とミスの防止機能の追加

このツールをより実用的にするため、以下の改善をお願いします。

1. **入力サポート**: 
    * 単価や数量に数字以外が入力されたら、赤字で「半角数字で入力してください」と警告を出してください。
2. **一括クリア機能**: 
    * 「入力をすべてリセット」するボタンを追加してください。
3. **行の操作**: 
    * 各行の右側に「削除」ボタンを付け、不要な行をすぐ消せるようにしてください。
4. **データの保持**: 
    * ブラウザを閉じても、入力していた内容が消えないように保存機能（LocalStorage）を付けてください。

修正を反映した、最新の全コードを提示してください。

# 依頼：操作性とミスの防止機能の追加

このツールをより実用的にするため、以下の改善をお願いします。

1. **入力サポート**: 
    * 単価や数量に数字以外が入力されたら、赤字で「半角数字で入力してください」と警告を出してください。
2. **一括クリア機能**: 
    * 「入力をすべてリセット」するボタンを追加してください。
3. **行の操作**: 
    * 各行の右側に「削除」ボタンを付け、不要な行をすぐ消せるようにしてください。
4. **データの保持**: 
    * ブラウザを閉じても、入力していた内容が消えないように保存機能（LocalStorage）を付けてください。

修正を反映した、最新の全コードを提示してください。

# 依頼：機能提案とセキュリティ・精度の確認

1. **機能の提案**: 
    * この見積シミュレーターに、「割引機能（○%引き）」や「PDF出力機能」など、さらに便利になる機能を3つ提案してください。
2. **精度の確認**: 
    * JavaScriptの浮動小数点数計算による「計算誤差」が発生しないよう、対策はされていますか？
3. **バグのチェック**: 
    * 単価に「0」が入った場合や、行が一つもない場合にエラーが起きないか確認し、修正が必要なら反映した全コードを出力してください。

# 依頼：機能提案とセキュリティ・精度の確認

1. **機能の提案**: 
    * この見積シミュレーターに、「割引機能（○%引き）」や「PDF出力機能」など、さらに便利になる機能を3つ提案してください。
2. **精度の確認**: 
    * JavaScriptの浮動小数点数計算による「計算誤差」が発生しないよう、対策はされていますか？
3. **バグのチェック**: 
    * 単価に「0」が入った場合や、行が一つもない場合にエラーが起きないか確認し、修正が必要なら反映した全コードを出力してください。

# 依頼：定型文ジェネレーターの作成

あなたは優秀なフロントエンドエンジニアです。ブラウザですぐに使える「定型文ジェネレーター」を作成してください。

## 1. 作成したいもの
よく使うメールやチャットの定型文を選び、相手の名前などを入力するだけで、完成した文章をコピーできるツール。

## 2. 必要な機能
* **テンプレート選択**: 「お詫び」「日程調整」「資料送付」の3種類を切り替えられるようにしてください。
* **入力項目**: 
    * 「相手の会社名」「相手の名前」を入力する欄。
    * 入力した内容が、定型文の中の「[会社名]」「[氏名]」の部分にリアルタイムで反映されるようにしてください。
* **出力機能**: 
    * 完成した文章を表示するエリア。
    * 「クリップボードにコピー」するボタン。ボタンを押すと「コピーしました！」と通知が出るようにしてください。

## 3. 技術的な制約
* **1ファイル完結**: HTML、CSS、JavaScriptをすべて1つのファイルにまとめてください。
* **即実行可能**: 作成されたコードを .html ファイルとして保存し、ブラウザで開くだけで動くようにしてください。
* **デザイン**: 清潔感のある「ビジネスチャット風」のデザイン（白と薄いグレーを基調）にしてください。

## 4. 出力の形式
まずは、このアプリを実現するための全コードを提示してください。

# 依頼：定型文ジェネレーターの作成

あなたは優秀なフロントエンドエンジニアです。ブラウザですぐに使える「定型文ジェネレーター」を作成してください。

## 1. 作成したいもの
よく使うメールやチャットの定型文を選び、相手の名前などを入力するだけで、完成した文章をコピーできるツール。

## 2. 必要な機能
* **テンプレート選択**: 「お詫び」「日程調整」「資料送付」の3種類を切り替えられるようにしてください。
* **入力項目**: 
    * 「相手の会社名」「相手の名前」を入力する欄。
    * 入力した内容が、定型文の中の「[会社名]」「[氏名]」の部分にリアルタイムで反映されるようにしてください。
* **出力機能**: 
    * 完成した文章を表示するエリア。
    * 「クリップボードにコピー」するボタン。ボタンを押すと「コピーしました！」と通知が出るようにしてください。

## 3. 技術的な制約
* **1ファイル完結**: HTML、CSS、JavaScriptをすべて1つのファイルにまとめてください。
* **即実行可能**: 作成されたコードを .html ファイルとして保存し、ブラウザで開くだけで動くようにしてください。
* **デザイン**: 清潔感のある「ビジネスチャット風」のデザイン（白と薄いグレーを基調）にしてください。

## 4. 出力の形式
まずは、このアプリを実現するための全コードを提示してください。

# 依頼：自分専用の定型文への書き換え

作成したツールのテンプレートを、私の実際の仕事に合わせて変更してください。

1. **テンプレートの追加・変更**: 
    * 以下の3つのタイトルと内容に変更してください。
    * 1. [件名：打ち合わせのお礼] 内容：本日はお忙しい中、お時間をいただき…
    * 2. [件名：見積書送付] 内容：ご依頼いただいておりました見積書を…
    * 3. [件名：返信催促] 内容：先日お送りいたしました件、その後の進捗は…
2. **変数の追加**: 
    * 文章の中に「[日付]」という項目も作り、入力欄から日付を選べるようにしてください。

変更後の全コードを出力してください。

# 依頼：自分専用の定型文への書き換え

作成したツールのテンプレートを、私の実際の仕事に合わせて変更してください。

1. **テンプレートの追加・変更**: 
    * 以下の3つのタイトルと内容に変更してください。
    * 1. [件名：打ち合わせのお礼] 内容：本日はお忙しい中、お時間をいただき…
    * 2. [件名：見積書送付] 内容：ご依頼いただいておりました見積書を…
    * 3. [件名：返信催促] 内容：先日お送りいたしました件、その後の進捗は…
2. **変数の追加**: 
    * 文章の中に「[日付]」という項目も作り、入力欄から日付を選べるようにしてください。

変更後の全コードを出力してください。

# 依頼：操作性と表現力の向上

このツールをより便利にするため、以下の改善をお願いします。

1. **敬語の切り替え**: 
    * 「丁寧（〜です・ます）」と「より丁寧（〜でございます・承知いたしました）」をスイッチ一つで切り替えられるように、文章のパターンを2種類持たせてください。
2. **署名の自動挿入**: 
    * 文末に自分の署名（会社名・氏名）を自動で付け加える機能を追加してください。
3. **履歴・お気に入り**: 
    * よく使う文章を「お気に入り」として一番上に固定できるようにしてください。
4. **データの保持**: 
    * 自分の署名設定などが、ブラウザを閉じても消えないようにLocalStorageに保存してください。

修正を反映した、最新の全コードを提示してください。

# 依頼：操作性と表現力の向上

このツールをより便利にするため、以下の改善をお願いします。

1. **敬語の切り替え**: 
    * 「丁寧（〜です・ます）」と「より丁寧（〜でございます・承知いたしました）」をスイッチ一つで切り替えられるように、文章のパターンを2種類持たせてください。
2. **署名の自動挿入**: 
    * 文末に自分の署名（会社名・氏名）を自動で付け加える機能を追加してください。
3. **履歴・お気に入り**: 
    * よく使う文章を「お気に入り」として一番上に固定できるようにしてください。
4. **データの保持**: 
    * 自分の署名設定などが、ブラウザを閉じても消えないようにLocalStorageに保存してください。

修正を反映した、最新の全コードを提示してください。

# 依頼：機能提案とセキュリティ・精度の確認

1. **機能の提案**: 
    * このジェネレーターに、「AIが文章を要約する機能」や「誤字脱字チェック機能」など、さらに便利になるアイデアを3つ提案してください。
2. **セキュリティの確認**: 
    * 顧客名や会社名を入力しますが、これらのデータが外部のサーバーに送信されるリスクはありませんか？（ブラウザ内だけで完結しているか確認してください）
3. **バグのチェック**: 
    * 入力欄が空のままコピーボタンを押した場合に、警告が出るように修正してください。

修正が必要な箇所があれば、反映した全コードを出力してください。

# 依頼：機能提案とセキュリティ・精度の確認

1. **機能の提案**: 
    * このジェネレーターに、「AIが文章を要約する機能」や「誤字脱字チェック機能」など、さらに便利になるアイデアを3つ提案してください。
2. **セキュリティの確認**: 
    * 顧客名や会社名を入力しますが、これらのデータが外部のサーバーに送信されるリスクはありませんか？（ブラウザ内だけで完結しているか確認してください）
3. **バグのチェック**: 
    * 入力欄が空のままコピーボタンを押した場合に、警告が出るように修正してください。

修正が必要な箇所があれば、反映した全コードを出力してください。

# 依頼：備品在庫・発注メール作成ツールの作成

あなたは優秀なフロントエンドエンジニアです。ブラウザで簡単に使える「備品発注サポートツール」を作成してください。

## 1. 作成したいもの
備品リストから必要なものにチェックを入れ、数量を入力すると、発注先へのメール本文を自動で作成するツール。

## 2. 必要な機能
* **備品リスト表示**: 
    * 「コピー用紙」「トナー（黒）」「トナー（カラー）」「除菌スプレー」を初期リストとして表示してください。
    * 各項目には「チェックボックス」と「発注数量」の入力欄を付けてください。
* **メール生成機能**: 
    * 「メール作成」ボタンを押すと、チェックした項目と数量をまとめたメール本文を画面に表示してください。
* **コピー機能**: 
    * 生成された本文をワンクリックでクリップボードにコピーできるボタン。

## 3. 技術的な制約
* **1ファイル完結**: HTML、CSS、JavaScriptをすべて1つのファイルにまとめてください。
* **即実行可能**: .html ファイルとして保存し、ブラウザで開くだけで動くようにしてください。
* **デザイン**: 倉庫やオフィスで使いやすいよう、文字が大きく、すっきりしたデザインにしてください。

## 4. 出力の形式
まずは、このアプリを実現するための全コードを提示してください。

# 依頼：備品在庫・発注メール作成ツールの作成

あなたは優秀なフロントエンドエンジニアです。ブラウザで簡単に使える「備品発注サポートツール」を作成してください。

## 1. 作成したいもの
備品リストから必要なものにチェックを入れ、数量を入力すると、発注先へのメール本文を自動で作成するツール。

## 2. 必要な機能
* **備品リスト表示**: 
    * 「コピー用紙」「トナー（黒）」「トナー（カラー）」「除菌スプレー」を初期リストとして表示してください。
    * 各項目には「チェックボックス」と「発注数量」の入力欄を付けてください。
* **メール生成機能**: 
    * 「メール作成」ボタンを押すと、チェックした項目と数量をまとめたメール本文を画面に表示してください。
* **コピー機能**: 
    * 生成された本文をワンクリックでクリップボードにコピーできるボタン。

## 3. 技術的な制約
* **1ファイル完結**: HTML、CSS、JavaScriptをすべて1つのファイルにまとめてください。
* **即実行可能**: .html ファイルとして保存し、ブラウザで開くだけで動くようにしてください。
* **デザイン**: 倉庫やオフィスで使いやすいよう、文字が大きく、すっきりしたデザインにしてください。

## 4. 出力の形式
まずは、このアプリを実現するための全コードを提示してください。

# 依頼：自社の備品リストと宛先へのカスタマイズ

作成したツールの内容を、私の職場の状況に合わせて変更してください。

1. **備品リストの更新**: 
    * 現在のリストを削除し、以下の項目を登録してください。
    * [ここに自分の職場の備品を記入：例：封筒角2、封筒長3、名刺台紙、インクジェット紙]
2. **宛先情報の追加**: 
    * メールの冒頭に、常に「株式会社〇〇 担当者様　いつもお世話になっております。以下の備品を発注いたします。」という定型文が入るようにしてください。

変更後の全コードを出力してください。

# 依頼：自社の備品リストと宛先へのカスタマイズ

作成したツールの内容を、私の職場の状況に合わせて変更してください。

1. **備品リストの更新**: 
    * 現在のリストを削除し、以下の項目を登録してください。
    * [ここに自分の職場の備品を記入：例：封筒角2、封筒長3、名刺台紙、インクジェット紙]
2. **宛先情報の追加**: 
    * メールの冒頭に、常に「株式会社〇〇 担当者様　いつもお世話になっております。以下の備品を発注いたします。」という定型文が入るようにしてください。

変更後の全コードを出力してください。

# 依頼：操作性の向上とミス防止機能の追加

このツールをより実用的にするため、以下の改善をお願いします。

1. **入力サポート**: 
    * 数量に「0」以下の数字が入っている場合は、メール本文に含まれないようにしてください。
2. **視覚的な工夫**: 
    * チェックを入れた行の背景色が変わるようにして、どれを選んだか一目で分かるようにしてください。
3. **リストの編集機能**: 
    * 画面上で新しい備品を追加したり、不要な備品を削除したりできる機能を追加してください。
4. **データの保持**: 
    * 追加した備品リストや入力した数量が、ブラウザを閉じても消えないようにLocalStorageに保存してください。

修正を反映した、最新の全コードを提示してください。

# 依頼：操作性の向上とミス防止機能の追加

このツールをより実用的にするため、以下の改善をお願いします。

1. **入力サポート**: 
    * 数量に「0」以下の数字が入っている場合は、メール本文に含まれないようにしてください。
2. **視覚的な工夫**: 
    * チェックを入れた行の背景色が変わるようにして、どれを選んだか一目で分かるようにしてください。
3. **リストの編集機能**: 
    * 画面上で新しい備品を追加したり、不要な備品を削除したりできる機能を追加してください。
4. **データの保持**: 
    * 追加した備品リストや入力した数量が、ブラウザを閉じても消えないようにLocalStorageに保存してください。

修正を反映した、最新の全コードを提示してください。

# 依頼：機能提案とセキュリティ・精度の確認

1. **機能の提案**: 
    * このツールに、「前回発注した日付を記録する機能」や「在庫の適正数を設定して不足時にアラートを出す機能」など、さらに便利になるアイデアを3つ提案してください。選んだものを後で実装してもらいます。
2. **セキュリティの確認**: 
    * このツールで入力した備品名や数量などの情報が、外部のサーバーに送信されることはありませんか？（100%ブラウザ内で完結しているか確認してください）
3. **バグのチェック**: 
    * 数量に全角数字が入った場合や、何もチェックせずにボタンを押した場合に、正しく動作するか確認し、不具合があれば修正した全コードを出力してください。

# 依頼：機能提案とセキュリティ・精度の確認

1. **機能の提案**: 
    * このツールに、「前回発注した日付を記録する機能」や「在庫の適正数を設定して不足時にアラートを出す機能」など、さらに便利になるアイデアを3つ提案してください。選んだものを後で実装してもらいます。
2. **セキュリティの確認**: 
    * このツールで入力した備品名や数量などの情報が、外部のサーバーに送信されることはありませんか？（100%ブラウザ内で完結しているか確認してください）
3. **バグのチェック**: 
    * 数量に全角数字が入った場合や、何もチェックせずにボタンを押した場合に、正しく動作するか確認し、不具合があれば修正した全コードを出力してください。

# 依頼：社内規定・判断フローチャートツールの作成

あなたは優秀なフロントエンドエンジニアです。ブラウザで簡単に使える「経費精算・判断フローチャート」を作成してください。

## 1. 作成したいもの
いくつかの質問に「はい」「いいえ」で答えていくと、最終的に「精算可能か、上長承認が必要か」などを判定するツール。

## 2. 必要な機能
* **ステップ形式の質問**: 
    * 1つずつ質問を表示し、「はい」「いいえ」のボタンで次に進む形式にしてください。
* **判定ロジック（例）**: 
    1. 「金額は3万円未満ですか？」→（いいえ）→【結果：部長承認が必要】
    2. （はい）→「領収書はありますか？」→（いいえ）→【結果：精算不可】
    3. （はい）→「会議費ですか？」→（はい）→【結果：精算可能】
* **結果の表示**: 
    * 最後に判定結果と、次に取るべきアクション（例：申請書を提出してください）を表示してください。
* **やり直し機能**: 
    * 最初の質問に戻るボタンを付けてください。

## 3. 技術的な制約
* **1ファイル完結**: HTML、CSS、JavaScriptをすべて1つのファイルにまとめてください。
* **デザイン**: 役所や銀行のサイトのような、信頼感があり、お年寄りから若手まで見やすいユニバーサルデザイン（大きな文字、はっきりしたボタン）にしてください。

## 4. 出力の形式
まずは、このアプリを実現するための全コードを提示してください。

# 依頼：社内規定・判断フローチャートツールの作成

あなたは優秀なフロントエンドエンジニアです。ブラウザで簡単に使える「経費精算・判断フローチャート」を作成してください。

## 1. 作成したいもの
いくつかの質問に「はい」「いいえ」で答えていくと、最終的に「精算可能か、上長承認が必要か」などを判定するツール。

## 2. 必要な機能
* **ステップ形式の質問**: 
    * 1つずつ質問を表示し、「はい」「いいえ」のボタンで次に進む形式にしてください。
* **判定ロジック（例）**: 
    1. 「金額は3万円未満ですか？」→（いいえ）→【結果：部長承認が必要】
    2. （はい）→「領収書はありますか？」→（いいえ）→【結果：精算不可】
    3. （はい）→「会議費ですか？」→（はい）→【結果：精算可能】
* **結果の表示**: 
    * 最後に判定結果と、次に取るべきアクション（例：申請書を提出してください）を表示してください。
* **やり直し機能**: 
    * 最初の質問に戻るボタンを付けてください。

## 3. 技術的な制約
* **1ファイル完結**: HTML、CSS、JavaScriptをすべて1つのファイルにまとめてください。
* **デザイン**: 役所や銀行のサイトのような、信頼感があり、お年寄りから若手まで見やすいユニバーサルデザイン（大きな文字、はっきりしたボタン）にしてください。

## 4. 出力の形式
まずは、このアプリを実現するための全コードを提示してください。

# 依頼：自社の規定に合わせた質問内容のカスタマイズ

作成したツールの判断ロジックを、私の会社の「特別休暇（リフレッシュ休暇）」の規定に合わせて書き換えてください。

1. **質問ツリーの変更**: 
    * Q1：勤続年数は5年以上ですか？
    * Q2：今年度、すでにリフレッシュ休暇を取得しましたか？
    * Q3：取得予定日の1ヶ月前までに申請を出していますか？
2. **判定結果の定義**: 
    * 全て「はい」の場合のみ「取得可能です。申請システムに入力してください」と表示。
    * 途中で「いいえ」があった場合は、その理由（例：勤続年数が足りません）を表示してください。

変更後の全コードを出力してください。

# 依頼：自社の規定に合わせた質問内容のカスタマイズ

作成したツールの判断ロジックを、私の会社の「特別休暇（リフレッシュ休暇）」の規定に合わせて書き換えてください。

1. **質問ツリーの変更**: 
    * Q1：勤続年数は5年以上ですか？
    * Q2：今年度、すでにリフレッシュ休暇を取得しましたか？
    * Q3：取得予定日の1ヶ月前までに申請を出していますか？
2. **判定結果の定義**: 
    * 全て「はい」の場合のみ「取得可能です。申請システムに入力してください」と表示。
    * 途中で「いいえ」があった場合は、その理由（例：勤続年数が足りません）を表示してください。

変更後の全コードを出力してください。

# 依頼：操作性の向上とエビデンス機能の追加

このツールをより実用的にするため、以下の改善をお願いします。

1. **進捗の可視化**: 
    * 「全3問中、いま1問目です」といった進捗バーを画面上部に出してください。
2. **判定結果の出力**: 
    * 最終結果を「診断結果レポート」として、PDF保存または画像としてダウンロードできるボタンを追加してください。
3. **補足情報の表示**: 
    * 質問の横に小さな「？」ボタンを付け、押すと社内規定の該当箇所のテキスト（補足説明）がポップアップで出るようにしてください。

修正を反映した、最新の全コードを提示してください。

# 依頼：操作性の向上とエビデンス機能の追加

このツールをより実用的にするため、以下の改善をお願いします。

1. **進捗の可視化**: 
    * 「全3問中、いま1問目です」といった進捗バーを画面上部に出してください。
2. **判定結果の出力**: 
    * 最終結果を「診断結果レポート」として、PDF保存または画像としてダウンロードできるボタンを追加してください。
3. **補足情報の表示**: 
    * 質問の横に小さな「？」ボタンを付け、押すと社内規定の該当箇所のテキスト（補足説明）がポップアップで出るようにしてください。

修正を反映した、最新の全コードを提示してください。

# 依頼：機能提案とロジックの正確性チェック

1. **機能の提案**: 
    * このフローチャートに、「過去の診断履歴を保存する機能」や「より複雑な分岐図をビジュアル表示する機能」など、さらに便利になるアイデアを3つ提案してください。
2. **ロジックの破綻チェック**: 
    * 質問の組み合わせによって、どこにも辿り着かない「行き止まり」や、矛盾した回答になる可能性はありませんか？プログラマーの視点で確認してください。
3. **メンテナンス性の向上**: 
    * 将来、私が自分で質問内容を書き換えやすいよう、JavaScriptコード内の「質問と回答」の部分だけを、一箇所にまとめて整理（定数化）して書き直してください。

修正・改善した全コードを出力してください。

# 依頼：機能提案とロジックの正確性チェック

1. **機能の提案**: 
    * このフローチャートに、「過去の診断履歴を保存する機能」や「より複雑な分岐図をビジュアル表示する機能」など、さらに便利になるアイデアを3つ提案してください。
2. **ロジックの破綻チェック**: 
    * 質問の組み合わせによって、どこにも辿り着かない「行き止まり」や、矛盾した回答になる可能性はありませんか？プログラマーの視点で確認してください。
3. **メンテナンス性の向上**: 
    * 将来、私が自分で質問内容を書き換えやすいよう、JavaScriptコード内の「質問と回答」の部分だけを、一箇所にまとめて整理（定数化）して書き直してください。

修正・改善した全コードを出力してください。