サイトをリニューアルしました

サイトリニューアルの経緯について書いてみた。文章としてはそこまで頑張って書いていないので読みにくかったらごめんなさい。

リニューアルした理由

デザインがダサい

配色やレイアウトがもはやインターネット黎明期のサイトみたいだった。それから、細かいアニメーションというのか、例えばリンクをマウスがホバーしたときに変化がなかったり。もっとモダンなデザインにシフトしたかった。

クソコードで保守性ゴミ

サイト作ったのがかれこれ一年前になる。作り方の右も左もわからなかったときに適当な解説サイトを参考にしながら一から作ったので当然コードも微妙なわけで。特にclass属性に一つしかclassが割り当てれないと思い込んでいて、classを重ねるたびにdiv要素で囲んだのでHTMLが煩雑極まりないありさまだった。それからCSSのセレクタがごっちゃごちゃで意味不明。手を入れようがない状況だった。

コードの統一性が失われてきた

かつての個性派文庫はすべてのページを一枚一枚すべて手書きで、ヘッダーとかフッターは毎回コピペしていたのでそれら部品を更新するとほかのコードにもコピペしないといけなくて忘れると統一性が失われる。

ホスティングサービスを変えたかった

従来はFC2を使っていたのですが、FC2って聞いて変ないサイトを思い浮かべる人がいるらしくサイトの評判が変な方向に走りかねなかったので…

リニューアルに当たって変えたこと

静的サイトジェネレーターを採用

ヘッダーやフッターなどのサイトの部品を一つのコードで済ませたかった。採用したおかげでめんどくさい作業が減って生産性が向上した。今回はJekyllというツールを採用してみた。

Jekyllを採用した理由にはリニューアルをした理由のホスティングサービスを変えたかったも少々関係してくる。別の用事でGitHubのアカウントを取得したのでホスティングサービスをGitHub Pagesに決定した。GitHub PagesはJekyllで書かれたコードを上げるだけでサイトを自動生成してくれるみたいなので、特に考えずに採用した。

正直、Jekyll自体は悪くないんだけど、ローカルでサイトをビルドするのにわざわざRubyの実行環境を導入して、Jekyllのライブラリを導入して、となかなかJekyllを使えるようにするのがめんどくさいのですね。Jekyll使うためだけにRubyインストールするとかどうなんだろと思ったりもした。例えばHugoという静的サイトジェネレーターはコンパイル済みのバイナリ単体でサイトをビルドできるらしい。Jekyllもバイナリを提供してほしいな。

BEMを導入

従来のサイトはCSSのセレクタがHTMLの文書構造に強く依存して再利用が不可能なコードだったので、どうにかうまくCSSを使えないかと考えていた。CSSの文法について解説するサイトは数多くあるけど、CSSは文法だけじゃどうにもならないことが多いことに気づいた。セレクタが無数にあって、どれを使えばいいがわからないのだった。結果カオスになる。表示が問題なくてもそれを表現するコードが汚いといかなるものか。

それらのCSSにまつわる悩みを解決する手法がCSS設計と呼ばれるものだと思っている。CSS設計にはいろいろな手法があるが、今回はHTMLのclass命名法でもある（感じ）で比較的簡単そうなBEMを採用してみた（詳細は自分で調べてみてください）。なかなかよかったです。部品とその中のパーツに分けて部品ごとに再利用可能な形で書いていくのはもはや楽しかったです。class名見るだけでそのコードがどんな物のために作ったのかわかりやすい。

おわりに

静的サイトジェネレーターを採用したおかげで、こんな感じでブログ記事的なのを書くことができるようになった。これからはこのサイトを少しずつブラッシュアップしていきたい。