北上研究所

2024年02月14日　ニンテンドーDSiブラウザー

Kitakami Yuma Project.のyumaです。

今回も前回に引き続き北上ゆま 公式HP Liteの話をしたいと思います。
前回は苦労した話をする直前で終わりましたね。

というわけで開発することになったんですが、まず問題になったのはあまりにも古すぎて情報がネット上に残ってなかったことでした。

ブラウザの仕様についてはそれぞれの公式ページに書かれていたので何とかなりましたが、古い仕様しか対応してないんですよね。

DSiの仕様にはHTMLやCSSのバージョンが乗ってなかったのでブラウザのエンジンが近いWiiのインターネットチャンネルを参考としました。
しかしそれによるとHTML4.01とCSS2.1しか対応してないんですよね。
一応XHTML1.1にも対応してるそうですがXHTMLなんて知るわけもなく。

身の回りでXHTMLで書かれているのは遠藤まりな教団公式サイトくらいしか知りません。
後で思い出しましたが小説家になろうの作品のページもXHTMLでしたね。

またDOMやWML、XSLTも対応しているそうですが初めて聞いたレベルです。

HTML4は昔よく参照していたリファレンスのサイトに書いてあって何とかなりましたがCSS2に関しては資料が見つからなかったため行き当たりばったりになりました。
現行のCSS3以降はCSS2.1をベースに機能追加しているので構文を追加しているだけなんですが、逆に何が使えて何が使えないのかが全く分からず困りました。

特に困ったのはdisplay:flex;という指定するだけであら不思議、これだけで勝手に横並びにできましたって機能が使えなかったんですよね。
一応flex以外にも横並びにできる機能はあるんですが、元々flexを多用していたので書き換えるのが大変でした。

試行錯誤の末、何とか横並びにしたんですがfloat:left;やdisplay:inline-block;なんて使ってこなかったので大変でした。
float:left;に至っては学生時代に使ったことありますがdisplay:inline-block;なんて初めて使いましたよ。

あと地味に大変だったのが画像形式の対応が少ないことでしたね。

MPO、GIF、JPEG、PNG、BMP、ICOのたった6形式にしか対応してませんでした。
MPO形式に至っては3DSで使える3Dの画像なので実質5形式しか使えません。

最近登場したAVIFとWebPが対応していないのはわかるんですが、割と昔からあるSVGにすら対応していないんですよね。
SVGに対応してないのを知った時かなり驚きました。

というわけでこれらを変換することにしたんですが、当然古い形式は単純に変換しただけだと容量が大きくなってしまうんですよね。
Liteと名乗るなら軽量化したいという気持ちとは真反対です。

なのでその対策として解像度を落とし色の制限を行いました。
正直元からHTMLを直接書いてるのでHTMLの軽量化は無理がありますからね。

Liteと無印で大きく異なるのはfaviconというブラウザのタブに表示されるホームページの小さなアイコンがありますよね。
元々.icoという形式で作ってたんですが複数の解像度を1つにまとめた形式ということもありかなり重いんですよ。

それを1枚のPNGに変更しかなり色数を制限することによってかなりの容量を削減することができました。
最終的に1バイトでも削るために文字コードをUTF-8からShift JISに変更しましたからね。

その結果、阿部寛のホームページの2.3倍のサイズに抑えることができました。
流石に阿部寛のホームページと同じサイズには出来ませんでしたが元からかなり大幅な軽量化ができました。

正直、新たな技術を得れたかどうかは怪しいですがDSiと3DSのおかげで昔のインターネットに触れることができて楽しかったです。
というわけで今回はこれにて失礼します。