北上研究所

2024年01月01日　近代化改修

Kitakami Yuma Project.のyumaです。

今回、このホームページを少しリニューアルしました。
まあ目で見てわかるような部分じゃないんですが……。

今回リニューアルした内容は、画面左のメニューの軽量化とスマホで盛大に崩れる問題への対応です。

左のメニューはiframeという技術を使ってるんですが、2023年10月04日　はじめての日記で書かれてる通り、この隠しページを作る時に初めて使った技術何ですよね。
iframeと同時にpictureも初めて使いましたが、pictureはimgタグの延長線上にあるのに対しiframeは全く別なのでかなり無駄が多かったんですよ。

そもそも現在のメニューはiframeで1つ作るだけで完結してますが、メインのページと同じような全てのページにそれぞれ記載する形で実装しようとしていました。
ただ途中で現在の形に変更したため不要な記述が多く残ってたんですよ。

今回、リニューアルしようとしたきっかけは2024年03月28日　あねもねぐりっちと2024年03月29日　かるみあどーるずを書いている時、iframeを多用し少し知識が増えたからです。
まあこの2つではiframe以外の方が多かったですが……。

というわけでリニューアルする時に更にiframeの仕様について調べてみたんですが、iframeと通常ページで同じCSSがあるとそれぞれのために読み込み行うそうなんですよね。
通常normalize.cssとcommon.cssと専用のcssの3つを読み込んでるんですが、メニューのためだけにこの3つ全てを読み込むのは無駄ですよね。

メニューに関しては全てに共通するのでnormalizeとcommonだけで完結してたんですが、normalizeもそこそこ大きいファイルなので2回も読み込むのは大きな無駄でしょう。
というわけで、無駄な記載を省いた上、normalizeとcommonからメニューに必要な部分だけ抽出し分離させました。

たったこれだけで数kb軽量化できたので全体でみると大きな軽量化となったでしょう。

スマホで盛大に崩れる問題に関してですが、元々このページは完全にPCだけに特化して作っていてそもそもスマホには対応させる気がありませんでした。
そのため盛大にバグり散らかしていてもガン無視していたんですが、ある日スマホで阿部寛のホームページを見たら普通に表示されてたんですよ。

阿部寛のホームページってどんな古い端末やブラウザでも開けるような物凄く古い構造であり、互換があるから表示できてるだけでスマホなんてない時代のページなんですよ。
それがまさかの見やすいかは置いといてとりあえず正常に表示できてるのを見て物凄く驚き、そしてこのページでも阿部寛のホームページと同程度には表示させたいと思いました。

阿部寛のホームページに衝撃を受けた後、リンクに集めた当時のページを見たところ、どれもしっかり表示されていて盛大にバグるのはありませんでした。
実際に見たらわかりますが、見やすさに差があれどどれもしっかり表示できてますよね。

こんな理由でスマホ対応に舵を切りました。
流石に過去の遺産みたいなページに負けるわけにはいきませんからね。

というわけで盛大に崩れる原因を探したわけですが、原因はヘッダーにありました。
<meta name="viewport" content="width=device-width, initial-scale=1">
これを呪文のように何も考えず記入してたんですが、これが盛大に崩れた原因でした。

そもそも、阿部寛のホームページは文字の幅が画面全体なので正常に表示しようと思えばできると思いますが、それにしても明らかにPCとそっくりでまるで画面をそのまま縮小したような感じだったんですよね。

ただスマホにはviewportという物があり2つや3つのドットを1つのドットとして扱うことで小さい画面で文字を大きくすることができます。
そのviewportに阿部寛のホームページは対応しておらず、律儀に1ドットを1ドットとして扱っているから小さいですが表示出来てるとわかりました。

おそらくホームページの作成において最も正しい方法はviewportなどを用いて幅を可変させて適切なサイズで表示させることでしょう。
しかしこのページは90年代のホームページを現代の技術で再現がコンセプトです。
幅を可変させるつもりはありませんし、可変させる必要がありません。

なのでviewportを削除し1ドットを1ドットとして扱うことで盛大に崩れる問題を克服しました。
多分、このページを見ても文字は小さいですがしっかり崩れないで表示されてるでしょう。

正直、今の常識から考えたら非常識でしょう。
スマホファーストなこの時代、viewportを設定しないのは非常識でしょう。

ただ目的が目的ですからね。
最低限見れればヨシなのでこれで解決したこととします。

まあそもそも、隠しページなんでこれくらい適当でいいんですよ。
まあやりたいことがやれたのでこれで終わりにします。