キャラの一覧表を解読してみる
ぷよクエ、メメントモリに絞ってみると攻略サイトに「キャラ一覧」が載っている。
キャラ一覧には、
・キャラ画像
・キャラ名
・詳細情報へのURL
・その他
がキャラ毎に載っている。
これらは、TABLEタグによって表現されているので、タグの構造がわかればいいことになる。
DOMParserを使って構造をなぞってみる。
前回の「DOMParser」を使ってDOMに変換した後、タグの構造をなぞってみる。
全体のHTMLから必要な部分のみピックアップするのは「querySelector」にクラス名を指定すればいいらしい。
const table = doc.querySelector(*TABLEタグのクラス名*)
要するに、クラス名の指定さえわかれば、ゲームの種類に関係なく必要な情報を取り出せるということになる。
一覧の各行・各カラムをなぞる。
TABLEタグが取り出せたので、一覧内の各行をなぞる。
const rows = table.querySelectorAll('tr')
const rowArray = Array.from(rows)
for (const row of rowArray) {
const cols = row.querySelectorAll('td')
//この後は、cols配列を確認しながら必要な情報を取り出す
}
カラム内の「属性情報」をとりだす。
カラム内の、例えば「href」や「src」の属性は、こんな感じでとりだせるらしい。
const colCh = cols[0]
const imgTag = colCh.querySelector('img')
const src = imgTag.getAttribute('src') || ""
const aTag = colCh.querySelector('a')
const href = aTag.getAttribute('href') || ""
取り出せた結果は配列になっているとのこと。
キャラ図鑑UIを作ってみる。
一通りのキャラ情報を取り出せたので、UIに表示してみたいと思った。
UI用のパッケージを使うのでなく、HTML文字列を作りたい。