2018/12/12

ホームページデザイン更新

職場の組織が変わって、職場の方のホームページを更新しなければいけなくなったのが発端なのですが、同僚と会話していて、ぼそっと「なんか昔のホームページだよねー」と言われてしまったので、ホームページ作成のバックエンドを更新しました。

もともと割とブラウザを選ばないように、またレイアウトも画面サイズに柔軟に作っていたのですが、ここ5年位で急速にWebの古い環境が消え去っていったので、一気に HTML5 + CSS3  ベースに更新するとともに、モバイル環境に正式対応することにしました。
とはいえ、静的コンテンツしか置けないような環境もあるので、システムの基本の作りは変わっていません。

今回、自分の記録を兼ねて、過去のデータを調べなおしてみました。WayBack Machine をみると、(今となっては恥ずかしい)データがいろいろ残っています。




今回のシステムは3代目で、記録をたどると初代のシステムは1997年12月に作っていました。学部3年生の時のようです。
1つのファイルから日本語と英語のページを生成して、ファイルの更新日時とヘッダ・フッタのフォーマットを管理する作りは、この時からのこだわりのものです。要するに、「英語を書かないとホームページが更新できない」という強制を自分に課すものです。また、企業などにありがちな、「English」をクリックするとトップページに戻されるホームページデザインを嫌ったという理由もあります。
この頃はまだ、便利なCMSなんて殆どなかったために当然自作で、HTMLの断片をPerlで処理するものでした。HTML4 のドラフトに準拠していたようです。

この頃のイメージがこちら。Web archive の2001年(D1年)の画像です。CSS導入前の「懐かしいHTMLのイメージ」ですが、今の作りの原型が出来ていました。

スタイルシート (CSS2) を投入した2002年(D2年)の2代目デザイン。当時「Borderの太さ変更使ってカッコいい(当時基準で)枠が描ける」と試行錯誤して、実にこの時以来、16年もずっとこのスタイルだったことになります。

これをもとにした 2005 年(就職直前)の前ブログのデザイン。HTML/CSS を (Internet Explorer以外で) 読んでもらうとわかるのですが、div をスタイルシートで加工して、無理やり table としてサイドバーを表示するスタイルは、当時自分で強引に編み出したものでした。Float で幅を固定して無理やりサイドバーを作るのは当時の流行りでしたが、やりたくなかったのです。本文もサイドバーも、ブラウザの画面幅に合わせて動的に幅が変わるようにしています。ただ、極端に幅の狭いモバイル環境への対応はまだイマイチでした。

2代目のシステムは、デザインをそのまま、本文をHikidocをベースに書くように総入れ替えしたものでした。旧情報セキュリティ研究センターのWebページのバックエンドに(大改造した)HikiWikiを使っていたので、こちらに合わせて2009年にRubyで作り直したものです。

この頃までは、英語は ISO-8859-1、日本語は ISO-2022-JP で生成していました。
日本語については、Unicode の初期は統合漢字の扱いがいまいちで信用ならず、日本語であることが内容から明示できる文字コードを選んだのでした。
一方で英語版が Latin-1 なのは標準的ですが、英語を書き忘れていると文字化けして分かる(ソースファイルは EUC-JP なので「良い感じに」崩れずに文字化けする)という隠れ利点も。

そして今回のもの(個人HP職場HP)がシステム・デザインともに3代目。

デザインの見た目には一見パンくずリストとかが増えたくらいですが、HTML5+CSS3 では flex layout がかなり広範なブラウザで使えることがわかったので、flex layout で書き直して、本文も2段組とか自在に作れるようになりました。
また、モバイル環境などの幅の狭い環境で見ると、ちゃんといい感じにレイアウトが変わります。これは table layout では出来なかったことですね。
マークアップ上も navigation とかがちゃんと意味づけできるようになったのは嬉しいです。文字コードは UTF-8 に統一しました。

また、バックエンドもパンくずリストに合わせて、また担当プロジェクトのページなどを今後拡大充実してゆけるように、ページの親子関係を認識するシステムを作り込んだりしています。この辺りは、かつての HikiWiki 改造のときのデータ設計をもとにしました。GitHub 等との互換性を意識して、記述は Hiki と Markdown を選べるようにしていますが、日本語・英語共存の強制は意地でもそのままにしています。ここさえ拘らなければ、既存CMSの選択肢もたくさんありそうでしたが、結局自作になりました。

そして、この新ブログのデザインも、基本的には同じスタイルシート構成です。サイドバーも flex layout なので、ちゃんと画面幅に連動して拡大したり、狭いブラウザでは下に移動します。ホームページの方でも同じ仕組みが使えるようにしてありますが、まだサイドバーを置くほどコンテンツ構造が複雑ではないので…。
ただし、中身の実態は、 Blogger の CSS をほぼ全部上書きしているかなり強引な作りです。もう少しエレガントにやりたいところです。

0 件のコメント: