はじめに
ChatGPTを活用してHTMLコードを生成する機会が増えてきました。非常に便利ではありますが、コードの確認には少々手間がかかると感じている方もいらっしゃるのではないでしょうか。
通常、ChatGPTから得たHTMLコードを確認するためには、
・HTMLファイルを手動で作成し、
・テキストエディタで内容を貼り付けて保存し、
・それをブラウザで開いて確認する
といった手順を都度踏む必要があります。
修正が発生した場合も、再度ファイルを開いて編集・保存し直すことになり、この一連の作業は思いのほか面倒です。
サイトを作成しました
このような手間を少しでも軽減できればと考え、HTMLコードを入力するだけで、即座にその内容をページ上に反映できるサイトを作成しました。
よろしければ、ぜひ以下のリンクからご利用ください。
🔗 サイトはこちら
使い方
使い方はとてもシンプルです。
- ChatGPTで生成したHTMLコードをコピーします
- サイト上のテキストエリアに貼り付けます
- 「表示」ボタンをクリックすると、新しいタブでその html を開きます。（便利ですが、その反面エラーが出た場合、行番号は一致しないです）
これにより、HTMLファイルをローカルで作成・保存・確認するという作業が不要になります。軽微な修正もその場で即座に反映でき、確認のサイクルが非常にスムーズになります。
また、更新ボタンを押すと最初の状態に戻ります。
html を再度入力したい場合は更新ボタンを押すのが便利です。
エラーハンドリングについて
構文エラーの行番号を正確に把握し、ChatGPTに伝えるためには、まず「表示（Safe Mode）」ボタンを使用してプレビューをご確認ください。
この時点でエラーが出ているならば、「ChatGPT プロンプト生成」ボタンを活用してコードの修正を行って下さい。
その後、見た目全体を確認したい場合は「表示（Replace Whole Page）」を使用するとよいでしょう。
この手順を踏むことで、エラー時に行番号がずれてしまうといった問題を回避しやすくなります。
おわりに
HTMLコードを都度ファイルとして保存し、ブラウザで開いて確認するという作業は、一見地味ながら繰り返すうちに大きな負担となることがあります。
今回ご紹介したツールを通じて、そのような負担が少しでも軽くなり、より快適にHTMLの検証・学習・開発を進めていただければ幸いです。
GitHub に公開 していますので、是非ダウンロードしてデスクトップに置いて頂けると嬉しいです。
最後までお読みいただき、ありがとうございました。
追記
この文章は作成後に ChatGPT で添削しています。
生成 AI による添削が苦手な方は申し訳ありません。