「HTML」に関する日記

ゲーム記

せっかくなので、動画も出せるようにしてみました。
あと、タイトルの編集機能も実装。
これ頑張ろうとしたせいでNintendo Switch 2のページ今日も公開できなかったけど、削除までできたらさすがに公開に向けてちゃんと動き出せそう。

HTML/HTTP(Today I Learned)

動画表示実装してて見つけたやつ。
一気に全部ダウンロードしちゃったらページ重くなるんでvideoタグの使用に消極的だったのですが、206 Partial Contentにより最初の部分だけをダウンロードする仕組みになっていて、むしろ画像より軽いという結果になりました。

<video>: 動画埋め込み要素
videoタグのpreload属性がmetadataの場合にこのような挙動になるようで、Google Chromeの場合は初期値がこれだったようです。

videoタグのはなし - クラウドワークス エンジニアブログ
ブラウザによっては一部だけダウンロードがうまくいかないっぽい？
記事は2016年だから今は状況変わってるのかな。

８番出口

一日たってもまとまんなかったから思ったことネタバレ込みで書き連ねるよ。

HTML

とりあえず主要なファイルは一通りアップ終わりました。

アンパンマンDB(システム)

また発動していないバグ修正。
話数が空欄じゃなくて「0」になっていた場合に、「第0話」とかになってしまうんですが、アンパンマンDB的には「0」も空欄扱いしたいので、空欄の処理に飛ぶようにしました。
さっきのHTMLと一緒にアップ済みです。

PHP8.3

もうそろそろPHP8.4の正式リリースも近そうですが、うちはまだ8.2だったので、ひとまず8.3まで上げることにしました。
とりあえず開発環境での動作は一部のライブラリ以外はコードの修正なしで大丈夫そう。
本番サーバーはオプションを変えるだけだからいいとして、DockerとCI環境も対応しておかないと。

簡単な差分確認だけで大丈夫なやつはアップ完了。
未アップファイルが800個ぐらいだったのを400ぐらいまで減らせました。
後は、ほとんどが、出力結果の軽い目視確認だけで済むもの。
ただ、少数ながら、バグっちゃって修正が必要なものもあったから、それらに関してはしっかり時間かけて再確認ですね。

差分確認を効率化しないときりがないとか言ってた件、ツール作りました。
もともと差分検出のため、実行中のマシンのファイル一覧を取得する仕組みがあって、開発環境とサーバーで各々実行して差分を見ていたんですが、ファイル内容の差まではわからなかったんですよね。
それに、各々実行するのも地味に面倒でした。
そこで、開発環境とサーバーでファイル一覧を各々取得して、差分を検出し、差があったファイルを開発環境とサーバーから取ってきて、比較用フォルダに同じ改装になるように配置して、差分表示ツールを起動する…という一連の作業を自動化するツールを作りました。
ここから先の、実際にアップロードする処理は、さすがに差分を確認しながらじゃないと怖いので、手動です。

アンパンマンDB(記事更新)

• Twitterのハッシュタグのページを更新

「#ドキンちゃん生誕祭2024」の追加。
でも、ロールパンナとメロンパンナほどには盛り上がってないみたいですね。

HTML

まだまだアップロード中。
差分確認を効率化しないときりがないな…。

HTML

以前修正したHTMLと、あの後もちまちま作業してたHTML、順次アップ中。
エラーが起こらないかどうかと、デザイン崩れの目視確認もしながらなんで、あんまり進んではないです。

GitHub Copilot

GitHub Copilotちょっとお試し中。
コミットメッセージ生成が便利かなと思ったけど、何でもかんでも「読みやすさのためのリファクタリング」扱いしてくる印象。

HTML修正中。
Lintかけたら「align使うな」が山ほど出てきてる。

中身HTML4.01のガワLiving StandardのページをちゃんとしたLiving Standardにするやつ、途中まで作業したやつを途中までアップしてます。
目次自動生成システムを成立させるために、<a name=～>を<h2 id=～>に変更するのを優先的に作業しています。
h3タグを使うと目次の階層化とかもできるようにはなっているのですが、そこまで対応しているとしんどいので、ひとまずはh2まで。
他には、属性をクォートで囲ってないのとか、タグ自体が廃止されたのを別のタグに置き換えるのとかもやってます。

サーバーサイドでの自動生成の目次の仕組みを作って、各ページに適用中。

うちのサイトって、昔はいろんなページに自動生成の目次がありました。
ただ、それはInternet Explorer、それも古いバージョン専用だったので、もう動いてなかったんですよね。
静的HTMLファイルに労せず目次を取り付けたいという動機でJavaScriptを使ったのですが、動かなきゃ世話ないですね。
私の思想として、サイトの基本的な機能はなるべくJavaScript抜きでも動作するようにしたいというのがあり、この思想にも反する仕組みでした。
一方で、URL上は.html拡張子に見えるファイルは、現在は大部分をHTMLファイルに見せかけたPHPファイルを裏で動かしています。
詳しく言うと、ただのHTMLファイルに見せかけたPHPファイルが出力したただのHTMLファイルを最終的に表示しているのですが、とにかくサーバー側でいったん動的な処理を挟んでいるわけです。
この動的な処理の部分に目次自動生成を差し込めば、JavaScriptに頼らず、ブラウザに依存せず、それでいて労せず目次を作れるのです。

今のところ、自動生成の仕組みはできたので、今は各ページに適用するのを頑張っているところです。
先ほどまで自動化だの労せずだの言っていましたが、目次以前にまずHTMLそのものを修正しないといけないのです。
PHPを使う仕組みに切り替えた時点から、HTMLも4.01から5をすっ飛ばしてLiving Standardに切り替えているのです。

…切り替わってないのです！

PHPに切り替えた時点で、自動生成のヘッダとフッタにより、ガワだけはLiving Standardになりましたが、中身はほとんど手付かず。
4.01のままのHTMLからじゃ、Living Standard用のシステムで目次を自動生成はできないのです。
ブラウザはだましだまし動いてくれますが、ブラウザほど気を利かせてない自作システムは、だませないのです。

ということで、労せず目次を自動生成するために、現在、労しています。

古いページを最新デザインに置き換えるやつ、できているところまで全部アップしました。
HTML 4.01からHTML Living Standardに上げた都合で、HTMLとして不正になってしまった部分も多々ありますが、それは追々直していこうと思います。
一方で、共通デザインが持っている共通ナビとかも自動で付くようになったので、訪問者にとっては純粋に使い勝手が上がっていると思います。

Qiita

見出しとかの日本語をいい感じの塊で自動改行するCSS #CSS - Qiita
やっと投稿できました。
まあひとまずはこの記事で書きたいことは書けたので満足。
他にもいろいろ書けるネタはありそうなんで、スピードアップしてもっと書いていきたいですね。

アンパンマンDB(記事更新)

• 「田中敦子」のデータを更新

訃報。
最近アンパンマンDBの更新はこういうのばっかりですね…。
前向きな更新もいろいろしたいので、スピードアップしてもっと書いていきたいですね。

ドラゴンクエスト10

大型アップデート情報 バージョン7.1 （2024/7/10 更新）｜目覚めし冒険者の広場
大型アップデート！！

毎月10日はDQXで遊ぼう！ ～果ての大地ゼニアス 探索おうえんアイテムプレゼント！～　（2024/7/10更新）｜目覚めし冒険者の広場
テンの日！！

イベントの重なった日だからさぞかしゲームに忙しかっただろうと思いきや、テンの日の最低限のアイテム回収しかしてませんでした。
というのも…

アンパンマンDB(システム)

段階的にまとまり(チャンク)を作って、チャンク内では極力改行しないようにする。横幅が収まらなくなったら、一段階細かいチャンク単位で改行する。最小チャンクでも収まらなくなったら、一般的な禁則処理に従いつつ文字単位の改行を行う。禁則処理すら無理になったら、完全に一文字ずつの改行になる。 pic.twitter.com/bSFxH38lWC

— 📛松田美文 (@matsuda323) July 10, 2024

このやり方もQiitaに書いてもいいかな。
ツイートでは事細かに処理を書いていますが、これを自動でやってくれるHTML/CSSがあるのです。
JavaScriptは使ってないよ。

ゲーム記

PA-APIでAmazonの商品情報を取ってきて商品リンクを作る仕組み開発中。

HTML(Today I Learned)

rel=relation - 関係指定 - とほほのWWW入門
HTML 属性: rel - HTML: ハイパーテキストマークアップ言語 | MDN
aとかlinkタグなどにつけるrel属性。
いくつかは知っていたし使ってもいるんですが、ずいぶんたくさんありますね。
非標準とはいえ実用的に使われているsponsoredなんか、上で言ってた商品リンクにはぴったりです。
rel="external"は、それ自体に特別な効果はないようですが、class="external"で外部リンクのスタイルにしていたところを、もっと自然なマークアップにできそうです。

日記

日記の各記事に固定リンクを追加
昨日言っていたハッシュタグ風のカテゴリ表記、固定リンクとの差別化だったのでした。
固定リンク機能は正直管理人の私以外には大して意味がないような気がしますが、日記で時々やっている過去の日記への言及がこれでやりやすくなったのです。

LocalCrawler

自動でHTMLをバリデートするジョブを作りました。
Nu Html Checkerのコマンドラインツールを使っています。
これまでPHPはPHPUnitを導入するなどして間違いのないプログラムを作るよう心掛けてきましたが、そうやって出力されるHTMLは目視でしか確認してきませんでした。
そうすると、ブラウザが何とかリカバリーしてくれるエラーはすべて見過ごすことになってしまいます。
ということで作ったのですが、さっそく非推奨のimgタグのalign属性が無数に出てきました。
最近は使わなくなったのですが、昔作ったページを形だけHTML5に変換したときに発生したようですね。

faviconをSVG形式にしました。
IEでは正しく表示されず、TGWSのアイコンになってしまいますが、ごく一部の業務システム以外ではもはやIEを実用的に使うことはないはずなので、無視します。
一応faviconがなくてもコンテンツ本体は読める程度には表示されますしね。
それ以外のまともな環境なら、アイコンのダウンロードが速くなった、と言うより、ページ内に表示されている画像と同じなので、別途ダウンロードされることすらなくなりました。

favicon

SVG形式のファビコンを設置しよう | Webクリエイターボックス
ブックマークとかタブとかにアイコンとして表示されるfaviconがいつの間にやらSVG形式にも対応していたようです。
今のうちのサイトの仕組みだと適用がちょっと大変なんですが、マルチアイコンが必要なくなるので、ちょっと試してみてもよさそうです。

アンパンマンDB

フロントエンドコントローラを新しい形式に差し替えるのが全ページでひとまず完了。
実はビューの古い仕組みがずいぶんと残っていて、そこから古いフロントエンドの機能の一部が呼び出されているので、完全に新しくできたわけではないんですけどね。

出力するHTMLのスペース除去の高速化を頑張ってました。
高速化の方は実は副次的な目的で、コードの整理が主目的です。

自前のテストサーバーに対して絨毯爆撃中。 pic.twitter.com/CZ3HnLfhBc

— 📛松田美文 (@matsuda323) October 14, 2020

そうだ、うちのサイトはブラウザ判定やSPAなんてこじゃれたことはしてないんだから、単にページのソースが欲しいだけならcurl系統の、HTTPリクエストを送るだけの機能を使えばいいんだ。
実に単純なことであった。

HTML5のページだけバリデーションかけたいんなら<!DOCTYPE html>で判別すればいいじゃないかと思ったら！
DOCTYPE宣言はPageSourceから省かれている！！！

DOCTYPEに頼らずHTML5を判別する方法はないものか。
DOCTYPE宣言だけHTML5で、中身がHTML4.01なのは問題だから、それはエラーとして検出したい。
つまり、タグを見てHTML4.01じゃないからHTML5っていう判定はできない。

それはそうとして、「--blink-settings=imagesEnabled=false」のオプションを付けたら速くなった。
見たいのはHTMLだけなので、画像を読み込む必要はない。