Webのトホホ(その1)

昨年来ずっとHTML(.php)ばかりやっていて、XSL-FOの世界はほとほと忘れてしまいました.それでもオープンソースで出しているリポジトリに、時たま障害報告や改善要望が寄せられるので、ちょこちょことメンテしています.さて今は仕事の主になってしまったXMLHTML5(.php)ですが、実際はトホホの連続でした.

まあみんなWebを使っているけれど、その裏方でいかほどのWeb技術者が苦労しているか、なかなかわからないものです.そしていざ自分がやってみると、Webの世界のあまりの技術の進展の速さについてゆけないのが正直です.たぶん自分もその一人.

そして、私にとってはHTMLとCSSはずっとトラウマです.本当を言えばダイキライ!元はまだNetscapeが健在だったり、MicrosoftIEを出し始めたり、そのうち悪乗りして、Officeの文書をIEでしか解釈できないようなHTMLに出したり、ブラウザ大戦争があったりとWebの世界はまあ思い出すだけでもろくなことがありませんでした.こんな時代をすべてはたから見てきたので、使いはすれども、自分で開発する立場からは遠く離れていました.

しかし自分のことを考えても、システム開発上で沸いた疑念や問題点、わからないことは今ではWebの検索で調べるのがあたりまえとなりました.昔は専門書を仕入れて、いつもわからない点のキーワードを索引から拾い上げてしみじみ本で調べるのがあたりまえでした.しかし、検索の発達した今は、いちいち重い専門書を開くのがおっくうでたまりません.Webの検索の方がはるかに多くの情報を入手できるし、同じことで悩んでいる人は世界には居るもので、例えばはるか彼方の海外のStackoverflowのやりとりから解決策を得ることもしばしばです.

やっぱり、Webから身を遠ざけている訳にはゆきませんね.という訳で、やりはじめた仕事ですが、経験した「トホホ」を紹介したいと思います.

最初は「Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier.」というエラーメッセージです.こんなメッセージに出会った人はまずいないかもしれません.出会ったのは、必死に開発を重ねて、.phpを生成するところまでやっとたどり着き、自分のPCでXAMPPを立ち上げてローカルでその.phpファイルを読み込んだ時です.

意図した画面とはまったく違った崩れるだけ崩れはてたWebページ.しかも(私には)訳のわからない、JavaScript満載のものでした.一瞬「やっぱり私の実力じゃダメか」とあきらめかけたんですが、ChromeでF12を押してデバッグコンソールを立ち上げて、ブラウザが解釈したDOMを見ると、見事に破壊されつくしているのがわかりました.

ブラウザがDOMに展開された結果を見ると、なんとlink要素でCSSを参照している箇所が分断されていています.ある箇所まではhtml/headに、それから下はなんとhtml/bodyに(しかも入れ子に)展開されています.こんな状態ではまともに表示されるはずがありません.

f:id:toshi_xt500:20200922212956p:plain
ボコボコのHTMLのDOM

しかしChromeの「ページのソースを表示(Ctrl + U)」で見るとPHPが出しているのは意図通りのHTMLです.決して間違っていない.

悩みに悩んだんですが、別のブラウザではどうかとFireFoxを試すとやはり同じように展開されたHTMLのDOMは散々な状態です.ここでFireFoxのHTMLソース表示をやってみると、link要素の箇所にカーソルを持って行ったとき、「Quote " in attribute name. Probable cause: Matching quote missing somewhere earlier.」というエラーが表示されます.

f:id:toshi_xt500:20200922213107p:plain
Firefoxの出してくれるエラー

しかし、ダブルクォートをいくら追っても、決して間違ってはいません.そこでもう一度、html/headとhtml/bodyで分断されたCSSへの参照のlink要素をタイプし直して実行すると、今度はエラーが出る箇所が下へ下へとずれます.そう原因は実は要素名と最初の属性名の間の空白でした.これが ではなく (NO BREAK SPACE)になっていました.こんなの意図的に入れる訳がないので、どこかでコピー/ペーストする際に混入したみたいです.

ブラウザのHTMLのリーダーは、こんなコードが入っていても、どんどんHTMLを解釈してとんでもないDOMを作り上げます.ブラウザなのでどんなHTMLでもエラーを出さずにそれなりに出してしまうところがスゴク恐ろしい.

しかしこんなエラーでも丹念に出してくれたFireFoxには感謝です.普段Chromeしか使っていないですが、初心者のエラーでもちゃんと表示してくれるのには頭が下がりました.