零弐壱蜂

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

本記事は 阿部寛 Advent Calendar 2017の4日目の記事です。

謝辞#

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

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

コンセプト#

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

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

関連#

手法#

文字コード#

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

HTML

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>

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>

HTML

その他#

  • 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>

HTML

ただ、<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で公開している。
あまりGitHub Pagesを使ったことは無かったが便利。

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

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

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

:)