まずは前提条件として
画面（UI）を構成するには、HTMLやCSSという文字列を作るとのこと。
作り出した結果が意図した結果なのかを検証するのに、わざわざブラウザを開いて云々っていうのが、なんとなく効率悪そうな予感がしたので。
・HTMLを作る実装の検証は「VSCode」のデバッガを使いたい。
・見た目の検証やHTMLの構造が正しいかの検証でブラウザを使用する。
という方針でやってみようと思った。
※余談ですが、HTML文字列を作らず「DOM」を利用する方法もあるとのことです。
ブラウザで動いているかの判定
Geminiに「TypeScriptが動いているのがブラウザなのか判定したい」と聞いてみたら。
get isWebRunning(): boolean {
if (typeof document === "undefined") {
return false
}
return true
}
「true」が返ってきたらブラウザで動作しているということらしい。
コラム：行末に「;」をつけるか否か
これもGeminiに聞いてみた。
・私が提示するサンプルには「;」をつけることが多いです。
・MDNでのサンプルや最近の動向では「つけない」ことが一般化しつつあります。
・一部の実装では「つけない」ことで、おかしな挙動になることがあります。
ということで、この投稿では「つけない」方針でいこうと思います。
HTML解析
Geminiに「HTMLの内容を解析したい」と聞いてみた。
「DOMParser」というのでHTML文字列を解析して、DOM構造へ変換してくれるとのこと。
VSCodeでのDOMParser利用
import { JSDOM } from 'jsdom'; //Node.jsで必要
export function createHtmlParserNode(tableHtml: string): DOMParser {
const dom = new JSDOM(tableHtml, {
resources: "usable", // リソースの扱いを指定
// もしスタイルで落ちるなら、そもそも解釈させないように以下の設定を確認
runScripts: "outside-only"
});
const { DOMParser } = dom.window;
const parser = new DOMParser();
return parser
}
let parser: DOMParser
let doc: Document
parser = createHtmlParserNode(htmlText)
doc = parser.parseFromString(htmlText, "text/html");
ブラウザ環境でのDOMParser利用
let parser: DOMParser
let doc: Document
parser = new DOMParser();
doc = parser.parseFromString(htmlText, "text/html");
DOMについて
HTMLの文字列をオブジェクトとして扱えるようにしてくれるらしい。
ブラウザ環境では最初からつかえるようになっているとのこと。
たとえば、
・document/Document
・Window
・DOMParser
・IntersectionObserver
攻略サイトのHTML解釈
DOMへ変換できたので、目的の攻略サイトの情報をゲームの「キャラ情報」へ解釈する準備が整った。
「マルチゲーム」を目標として、
・ぷよクエのキャラ情報
・メメントモリのキャラ情報
・おまけで、放置少女のキャラ情報
それぞれ解釈してみようと思った。