キャラ図鑑を作るのに必要なものって
表示対象のデータを取得することが出来たので、今度は「図鑑アプリ」を作ってみたいと思った。
要はHTML文字列が作れて、ブラウザに「お願い！」したらいい。
完成イメージ
「図鑑アプリ」なので画像（imgタグ）を並べられたらいいということらしい。
■完成イメージ
※実際にはゲーム内のキャラ画像が並びますが「代替え」画像を引用しています。
UI内の各パーツはこんな感じ
| UIパーツ | 役割 |
|---|---|
| <キャラ選択> | UIのタイトル |
| [＊] | つかんでUIを移動 |
| [＿] | UIを非表示 |
| キャラ画像 | キャラの画像イメージ |
| キャラ名 | 選択したキャラ名 |
| キャラ名検索 | キャラ名の部分文字を入力して検索 |
| URL | タップ（クリック）して攻略サイトの情報URLを開く |
| 閉じる | 工事中 |
それぞれをHTMLタグに置き換えてみた。
| UIパーツ | HTMLタグ |
|---|---|
| UI外枠 | DIALOG |
| タイトル | DIV |
| [＊] | BUTTON |
| [＿] | BUTTON |
| キャラ画像 | IMGとDIV |
| キャラ名 | LABEL |
| キャラ名検索 | INPUT |
| URL | BUTTON |
DIALOG は「モーダル」や「モードレス」を選択できるらしい。
「図鑑アプリ」では「モードレス」で表示してみたいと思った。
UIをTypeScriptで作り出す
すくなくとも「キャラ画像」や「キャラ名検索」、「URL」は操作を伴う結果なので、それらを実装する必要がある。
まずは、モードレスダイアログを実装してみようと思う。
そのあと、キャラ画像を並べて表示するだが、最初から画像イメージをセットしたら時間がかかりすぎるかもしれないので、「IntersectionObserver」APIを利用して遅延ロードを実装する。
また、検索したキャラへスクロールする、「scrollIntoView」関数を利用する。