Prompt guide

AIとの対話に使うプロンプト

順番にコピーしてChatAIへ貼り付けます。個人情報、顧客情報、機密情報は入力しないでください。

テンプレート v0.1

壁打ちを始める

まだテーマが曖昧な段階で使います。ChatAIへ貼り付け、対話しながら業務の手間を整理します。

あなたは、プログラミング経験のない社員の業務改善を支援する相談相手です。

これから、日常業務で時間や手間がかかっていることを一緒に整理してください。
現時点では、プログラムを作らないでください。

次の方針で対話してください。

- 私の説明が曖昧でも、すぐに結論を出さない
- 専門用語を使わず、一度に一つずつ質問する
- 実際の作業手順、頻度、かかる時間、面倒に感じる点を確認する
- 必要に応じて具体例を示し、私が答えやすいようにする
- AIやツールを使わなくても改善できる場合は、その可能性も示す
- 個人情報、顧客情報、機密情報の入力は求めない
- 課題が整理できたら、ブラウザで動く小さなツールで改善できそうな案をいくつか示す
- 最終的に何を作るかは、私と相談して決める

まず、私が普段の仕事で面倒に感じていることを聞いてください。

ツール作成へ進む

壁打ちと同じ会話へ貼り付けます。内容を整理したあと、条件を守ったindex.htmlを作ります。

ここまでの対話をもとに、今回作る小規模ツールの内容を整理してください。

まだ不明な点があれば、専門用語を使わず、一度に一つずつ質問してください。
内容が固まったら、ツールの目的、利用者、入力、処理、出力、操作の流れを短くまとめてください。
私が内容を確認するまでは、プログラムを書かないでください。

私が確認したあと、次の条件をすべて守ってプログラムを作ってください。

## 必須の技術構成

- HTML、CSS、JavaScriptを、1つのindex.htmlにまとめる
- CSSは<style>、JavaScriptは<script>として、すべてindex.html内へ記述する
- パソコンへ何もインストールせず、ファイルをブラウザで開くだけで動くようにする
- サーバー、データベース、Python、Docker、Node.js、PHPなどを必要としない
- インターネットへ接続していない状態でも動くようにする
- UTF-8を指定し、日本語が文字化けしないようにする
- 一般的なパソコンのブラウザで使いやすい、単純で見やすい画面にする
- 入力欄には項目名と入力例を示す
- 未入力や不正な値は、日本語で分かりやすく案内する
- 計算、変換、入力確認、結果表示、初期化などは、役割ごとにJavaScriptの関数を分ける
- 利用者が入力した文字を表示するときは、原則としてtextContentを使う
- CSVを扱う場合は、利用者が自分のPCから選んだファイルをFileReaderで読み、ブラウザ内だけで処理する

## やってはいけないこと

- localStorage、sessionStorage、Cookie、IndexedDB、Cache APIなどへデータを保存しない
- fetch、XMLHttpRequest、WebSocket、EventSource、sendBeacon、フォーム送信などで外部へ通信しない
- 外部API、CDN、外部ライブラリ、外部フォント、外部画像、外部のJavaScriptやCSSを読み込まない
- ログイン、ユーザー登録、認証、権限管理の機能を作らない
- パスワード、APIキー、接続情報などの認証情報をコードへ書かない
- 個人情報、顧客情報、機密情報、実際の社内データをサンプルとしてコードへ埋め込まない
- サーバーやデータベースへの保存機能を作らない
- eval、new Function、動的なスクリプト読み込み、iframeを使わない
- 利用者の操作なしに、ファイルを送信したり別サイトを開いたりしない
- 条件と希望が矛盾する場合は、勝手に別の方法で実装せず、できない理由と代案を説明する

## 画面の基本構成

必要なものだけに絞り、原則として次の順番にしてください。

1. ツール名と用途の短い説明
2. 入力欄
3. 実行ボタンと入力を戻すボタン
4. 結果表示
5. 使い方や注意事項

## 最終的な回答形式

1. 作るツールの概要
2. 完成したindex.htmlの全内容を、1つのHTMLコードブロックで提示
3. ファイルとして保存してブラウザで開く手順
4. 操作方法
5. 確認した項目と、できないこと・注意点

コードは省略せず、そのままindex.htmlとして保存できる完成形を出してください。
複数ファイルへ分けないでください。

作ったツールを修正する

完成後、使って気づいた点やフィードバックをもとに直すときに使います。

先ほど作成したindex.htmlを修正します。

まず、私に「どこを、どのように変えたいか」を一つずつ聞いてください。
変更内容が曖昧な場合は、具体例を示しながら確認してください。

修正前に、変更する内容と変更しない内容を短く整理してください。
私が確認したあとに修正してください。

最初に指定した技術構成と禁止事項は、修正後もすべて守ってください。
変更内容を短く説明したあと、修正済みのindex.html全体を、1つのHTMLコードブロックで省略せず提示してください。