零弐壱蜂

阿部寛のホームページをモダン化する

8 min read

謝辞

まず、「阿部寛のホームページ」関係者の皆様に敬意を評したいと思う。

更新を続ける労力、いち非公認ファンサイトが事務所の承認を得て公式サイトになるという快挙を成し遂げるまでの労力は並大抵のものではなかっただろう。また、今もなお変わらず更新を続けられている運営者に敬意を評したい。
そして、氏の事務所も"今風の格好いいサイト"にリニューアルするでもなく、これまでの"ホームページ"を尊重して、そのまま運用していることにも改めて敬意を評したい。

コンセプト

レガシーサイトのお手本と言える作りなので、ざっくりイマドキの作りにしていきたい。
ここ最近、dev.to と比較して高速化するコンセプトの記事をよく見かけたが、まずは超レガシーなサイト構成をどげんかしていこうと思う。

※ 「阿部寛のホームページ」は、移転前の@nifty 時代 - Wayback Machineからその様相は変わっていない。

関連

手法

文字コード

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />

SJISだったのでUTF-8に変更。SJISが悪というわけじゃないが、新しい仕様としてはUTF-8を指定した方が良いのでこのタイミングで変更する。

Encoding標準は、UTF-8文字エンコーディングの使用を要求し、それを識別するために"utf-8"エンコーディングラベルの使用を要求する。これらの要件は、文書の文字エンコーディング宣言が存在する場合、"utf-8"に対してASCII大文字・小文字不区別での一致を使用してエンコーディングラベルを指定する必要がある。文字エンコーディング宣言が存在するかどうかにかかわらず、文書のエンコードに使用される実際の文字エンコーディングはUTF-8でなければならない。4.2.5.5 文書の文字エンコーディングを指定する - HTML Standard 日本語訳

HTML5 化

何のバージョンで書かれたか分からない HTML を「HTML5」にする。

DOCTYPE タイプ

既存コードには、DOCTYPE タイプの宣言がなかった。（<html>タグから開始されていた）
以下の DOC 宣言を追加。ちなみに、きちんと宣言をする事で、逆に既存のレイアウトが一気に崩れてしまった。

<!DOCTYPE html>

フレーム

HTML5 では廃止されたフレームで構成されている。

frameset / frame / noframes

フレームを使用しているabehiroshi.la.coocan.jpの読み込み時には、以下のファイルが必ず読み込まれることになる。

  • index.htm
    • menu.htm
    • top.htm

1 ページを構成するのに 3 ファイル必要になるのは、やはりパフォーマンス的に宜しくはない。

フレームタグを使わずに HTML5 に則ってフレームを再現するには、インラインフレームもしくは動的な DOM 書き換えを使用することになる。（後述）

テーブルレイアウト

<table>タグで実装して良い箇所（出演リストなど）はそのままに、枠を消してレイアウトに特化した箇所については<div>タグやdisplay: flex;などでレイアウトし直した。

インラインスタイル

基本的に外部 CSS ファイルへ移譲した。

<style type="text/css">
  <!--
  .style1 {color: #FF0000}
  -->
</style>

その他

  • HTML5 で廃止された属性を削除
  • 不要なメタタグ(generator)などを削除
  • <br>や<center></center>などの空タグによるレイアウトを排除

画像最適化

画像最適化の手段として、WebP の採用を考えた。
だが、WebP のサポート状況（WebP image format - Can I use...）を鑑みると、単純な導入は厳しい。

導入するのであれば以下のように指定することで、WebP 未対応ブラウザは<img>へフォールバックが可能になる。

<picture>
  <source srcset="img/abehiroshi.webp" type="image/webp" />
  <source srcset="img/abehiroshi.jpg" type="image/jpeg" />
  <img src="img/abehiroshi.jpg" />
</picture>

ただ、<picture>に対応していないIE という謎のブラウザが存在している。IE に対応するとなると polyfill（scottjehl/picturefill）を使用するしかないのだが、阿部寛のホームページは画像も少なく、導入コストのほうが大きすぎるため、今回は導入を見送った。

今回は、単純に jpg を最適化するに留まった。

Vue.js (Nuxt.js)

先述のフレーム問題を解決するには、SPA 化するのが手っ取り早いと考え、使用実績のあった Vue.js を採用した。さらに個人的に Nuxt.js を触ってみたいという事もあり、Nuxt.js で全体的な構築を開始した。

基本的には Nuxt.js に乗っかっている。

フレーム

フレームは無くし、1 つの html 内で DOM を動的に書き換えるようにした。ファイルを 1 ファイルにすることでリクエスト数も節約できたが、コード数が増えたので高速化には寄与しなかった。

完成

これらの修正をabehiroshi-homepageで公開している。
(アドベントカレンダーの公開日を過ぎたので、参考ページはクローズしました)

なるべくレイアウトは本家を近い形で再現しているが、DOC 宣言を指定したり、空要素で奇跡的にレイアウトされていた部分を CSS に落とし込んだため、ブラウザによってはズレが生じている。ここのレイアウトの再現はモダン化にあたって 1 番難しかった箇所である。（現代の技術でこれを正確に再現するのは非常に困難）

余談だが、ソースを見ていて、ホームページ・ビルダーに「どこでも配置モード」「標準モード」があるのを思い出した（今もあるのだろうか…）。「どこでも配置モード」だとソースがハチャメチャになるが、阿部寛のホームページではそこまで破天荒なソースにはなっていなかった為、「標準モード」なのかなと推察した。

それにしても、「阿部寛のホームページ」は当時のウェブ事情を改めて考える良い資産であると感じた。

Edit on GitHub