ダイアログを表示したい
ダイアログを表示するには、こんな感じを実装したらいいらしい。
・DIALOG要素を作成する
・DOMへの追加を依頼する
・表示を依頼する
それぞれは、DOMのAPIを利用すればいいとのこと。
DOM APIを利用してダイアログを作成＆表示する
DIALOG要素を作成する
要素（Element）は「document.createElement("タグ名")」を利用すると作成できる。
たとえば、
| タグ名 | 要素（Element） |
|---|---|
| dialog | HTMLDialogElement |
| div | HTMLDivElement |
ダイアログを作成するのは、こんな感じ
const dlg = document.createElement("dialog")
const dlgName = `char-dlg`
dlg.id = dlgName
dlg.className = dlgName
ちなみに、「document」はブラウザではいつでもどこでも参照できるらしい。
作った要素は「開発者ツール(DevTools)」を利用すると、こんな感じで確認できる。
<dialog id="char-dlg" class="char-dlg"></dialog>
DOMへの追加を依頼する
要素を作成しても「追加」しないとブラウザは管理対象にしないらしい。
※管理対象にしなくても、しばらくは「存在」しているらしい。
追加するのは「親要素」を指定して、「どこへ表示したいか」を指定するとのこと。
const dlgParent = document.getElementById(parentName)
dlgParent!.appendChild(dlg)
「parentName」は、たとえば既存のDIVタグの"id"を指定する。
表示を依頼する
ダイアログを作成できたので、最後に「表示」を依頼する。
表示には２通りの方法があり、
| 表示 | メソッド | 効果 |
|---|---|---|
| モーダル | showModal | 他のダイアログの最も上に表示 |
| モードレス | show | ダイアログの外側のコンテンツも操作できる状態 |
※詳しい説明が「MDN」に載っています。
https://developer.mozilla.org/ja/docs/Web/API/HTMLDialogElement/show
https://developer.mozilla.org/ja/docs/Web/API/HTMLDialogElement/showModal
今回は、モードレスを使うことにする。
dlg.show()
キャラ画像を追加したい
キャラ画像を入れる枠が作れたので、次にキャラ画像を入れたくなった。
キャラ画像の数は、実はアプリを実行するまで想定できない、というか決め打ちできない。
また、UIに表示できる数が総数より少ない場合の方が多い。要するにスクロールできることが要求される。
こういうのは「CSS」の役割らしいが、まったくわからないのでGeminiに聞きまくった。