20230925ChatGPTでHPのようなものを作ってもらう(アコーディオンメニュー)
こちらは、パソコン素人です。
こちらは、html素人です。
こちらは、chatGPT素人です。
自分用メモです。
少し、また、ChatGPT試してみました（GPTの記事は３回目）。
手順等は省きますが、下記のような文書から作成開始。
１０回くらいのやりとりで、それなりのコードができました。
あなたはウェブデザイナーです。htmlを作成して下さい。
可能ならアコーディオンメニュー（<details>）で以下の構成を作成して下さい。
（入れ子可能。コードは理解しやすいようにシンプルにお願いします。）
（<!-- 最初から表示 -->というようにアコーディオンメニューの開閉について指示しています。）
（<Ul><li>を使ってもいいです。）
************************
第１編 <!-- 最初から表示 -->
第１章 <!-- 上位レベル「第１編」を押すと表示 -->
第１節 <!-- 上位レベル「第１章」を押すと表示 -->
１ あいう <!-- 上位レベル「第１節」を押すと表示 -->
２ かきく <!-- 上位レベル「第１節」を押すと表示 -->
３ さしす <!-- 上位レベル「第１節」を押すと表示 -->
第２節 <!-- 上位レベル「第１章」を押すと表示 -->
１ たちつ <!-- 上位レベル「第２節」を押すと表示 -->
２ なにぬ <!-- 上位レベル「第２節」を押すと表示 -->
第３節 <!-- 上位レベル「第１章」を押すと表示 -->
１ はひふ <!-- 上位レベル「第３節」を押すと表示 -->
２ まみむ <!-- 「第３節」を押すと表示 -->
第４節 <!-- 上位レベル「第１章」を押すと表示 -->
１ やゆよ <!-- 上位レベル「第４節」を押すと表示 -->
２ わおん <!-- 上位レベル「第４節」を押すと表示 -->
第５節 <!-- 上位レベル「第１章」を押すと表示 -->
１ いろは <!-- 上位レベル「第５節」を押すと表示 -->
２ にほへ <!-- 上位レベル「第５節」を押すと表示 -->
第６節 <!-- 上位レベル「第１章」を押すと表示 -->
第２章 <!-- 上位レベル「第１編」を押すと表示 -->
第１節 <!-- 上位レベル「第２章」を押すと表示 -->
第２節 <!-- 上位レベル「第１章」を押すと表示 -->
１ たちつ <!-- 上位レベル「第２節」を押すと表示 -->
２ なにぬ <!-- 上位レベル「第２節」を押すと表示 -->
第３節 <!-- 上位レベル「第１章」を押すと表示 -->
１ はひふ <!-- 上位レベル「第３節」を押すと表示 -->
２ まみむ <!-- 上位レベル「第３節」を押すと表示 -->
第４節 <!-- 上位レベル「第１章」を押すと表示 -->
１ やゆよ <!-- 上位レベル「第４節」を押すと表示 -->
２ わおん <!-- 上位レベル「第４節」を押すと表示 -->
第５節 <!-- 上位レベル「第１章」を押すと表示 -->
第６節 <!-- 上位レベル「第１章」を押すと表示 -->
１ いろは <!-- 上位レベル「第６節」を押すと表示 -->
２ にほへ <!-- 上位レベル「第６節」を押すと表示 -->
第３章 <!-- 「第２編」を押すと表示 -->
第４章 <!-- 「第２編」を押すと表示 -->
第２編 <!-- 最初から表示 -->
第３編 <!-- 最初から表示 -->
第４編 <!-- 最初から表示 -->
第５編 <!-- 最初から表示 -->
第６編 <!-- 最初から表示 -->
第７編 <!-- 最初から表示 -->
================================
こんな感じで、最初アコーディオンメニューの作成について、指示しました。
あまりうまくできなかったので、途中で、例を少なくしたりしました。
やりたかったのは、アコーディオンメニューの表示・非表示を検索ワードによって変化させることです。
でも、なかなか、難しい。
単純に<summary>と<Ul>の内容をテキストボックスの内容と比較して、やると・・・親の<details>も表示(open)させる必要があったり、
できたかと思うと、<Ul>の設定がない<details>（<summary>のみ）の場合でも、動作するようにしたりと、
自分でコードを作成する時と違い、挙動を見て、「なんで動かないんだろう？」と考える必要が出ました。
（作ってもらったコードでは、ところどころできないことがあっても気づきにくい。）
下の画像は伸びたところ
素人には勉強になります。
下の画像はたたんだところ
