進捗が生で届く！SSEで作るリアルタイム通知
プロンプト
Server-Sent Events（SSE）を使った進捗通知を実装するシングルHTMLページを作成してください。長時間実行されるタスク（例：ファイル処理）をシミュレートし、SSEを使ってリアルタイムで更新されるプログレスバーを表示します。JavaScriptのEventSource（またはサーバーなしで動作するモック）を使ってシンプルなバックエンドをシミュレートしてください。開始ボタン、プログレスバー、ステータスメッセージ、完了アラートを含めてください。クリーンでモダンなUI、最小限のCSSにします。コードは自己完結型で、外部依存なし（必要な場合はCDNライブラリ可）でブラウザで動作するようにしてください。
CODE PREVIEW
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
このデモは、長時間実行されるタスク（例：ファイル処理）をシミュレートし、Server-Sent Events（SSE）を介してライブ進捗状況を表示します。▶ Start Taskをクリックして開始します。プログレスバーがリアルタイムで更新され、各ステップがログに表示されます。赤いボタンでいつでもキャンセル可能です。タスクが完了するとアラートが表示されます。
本番環境では、シミュレートされたインターバルを、サーバーのSSEエンドポイント（例：/progress-stream）を指す実際のEventSourceに置き換えてください。コードは自己完結型で、バックエンドなしで動作します。
プロンプトの解説
このデモは、長時間実行されるタスク（例：ファイル処理）をシミュレートし、Server-Sent Events（SSE）を介してライブ進捗状況を表示します。▶ Start Taskをクリックして開始します。プログレスバーがリアルタイムで更新され、各ステップがログに表示されます。赤いボタンでいつでもキャンセル可能です。タスクが完了するとアラートが表示されます。
本番環境では、シミュレートされたインターバルを、サーバーのSSEエンドポイント（例：/progress-stream）を指す実際のEventSourceに置き換えてください。コードは自己完結型で、バックエンドなしで動作します。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選