開発

ブログテーマの変更とzatsuな取り組み

更新日 2019.12.10

#社内イベント/プロジェクト

[markdown]
今日はみなさん、@niisan-tokyoです。

エンジニアブログの旧テーマは、実は２代目だったのですが、色々と問題があり、内部から「かっちょよくしようぜ！」って声が上がったのを機に、思い切って変えてみました。技術的な話については、Qiitaあたりに走り書くとして、こっちではどういう経緯でテーマ変更に至ったのかを書いていこうと思います。現在開発室で試みている施策なんかを併せて紹介できるといいかなって考えてます。

# エンジニアブログの v1 と v2
エンジニアブログの様相の変更は、すでに２回ありました。特に１回目の変更はかなりドラスティックなものでしたので、その辺の状況を軽く紹介します。

### v1 の誕生
前室長が自作した(と思われる)静的サイトジェネレータによって、エンジニアブログは産声をあげました。「React触りたかったんだ」という謎の動機によって作られたブログv1は、弊社エンジニア待望の公式ブログとして、しばらくの間運用されていました。

### v2 への遷移
ところが、前室長がニジボックスを離れてしまったので、前室長謹製のブログのジェネレータのメンテが難しくなってしまいました。そこで、オープンソースの静的サイトジェネレータを使って、ブログを構築し直すことになったのです。

担当した@attakei により、Hugoを使って生成したブログをGitLab上で運用する仕組みが構築されました。これがいわゆるブログ v2 です。 v1にあった記事を全てv2 に移動し、新たなエンジニアブログの運用が始まりました。

### ひとまず安定稼働
v2 はv1 に近づけるためのテーマを使用していたわけですが、まだまだ改善の余地がありそうでした。自分自身が感じていたのは、v2 のトップページでは、最新の記事が全て展開され、その下に過去の記事が短縮表示で続く形になっていて、これでは短期間にブログの更新があっても、最新のものしか目立たないという状況になっていました。ただ、それほど更新頻度が高くなかったので、エンジニアブログのテーマをよくしようというモチベーションも出て来ず、そのままの状況が続きました。

# 新テーマの導入
### zatsuの始まり
少しだけそれた話になりますが、クックパッドさんで採用しているzatsuというissue専用のリポジトリを作って、そこで自由な議論をしようという取り組みをはじめました。実は前からやってみようという感じではあったのですが、少人数のクローズドでやっていた上、中心となって盛り上げていく人物もいなかったため、ほとんど使われることなくお蔵入りされていました。

これらの問題を解決するため、クローズドであることをやめ、社員であれば誰でも書き込めるようにし、議論しようという下地が出来上がるまでは、タスクに余裕があった私の方で拾っていこうという方針を立て、運用を再開してみました。

### エンジニアブログの改善提案が上がる
zatsuが上手く動きはじめて、いくつか議論もたまってきたとき、ついにエンジニアブログを改善しようという提案がなされました。

エンジニアブログをカッコ良くしたい、というなんとも切実な響きではないですか。私自身もこれに関しては不満があったので、それならHugoの勉強も兼ねていっちょやてみっか！という感じで、テーマ変更を開始しました。

### テーマやフォントの選別
まずは全体のレイアウトを変えるために良さげなテーマを探しに行きます。幸い、Hugoではたくさんのテーマが公開されているので、探すのに苦労することはありませんでした。

このなかで、とりあえず自分が課題だと感じていた部分を解消できるテーマとして、post card 形式の記事表示を実現している Casper Two というテーマを使ってみることにしました。

Hugoのテーマ変更は簡単で、submoduleにテーマを追加して、configを書き換えるだけです。

“`html:sample
git submodule add https://github.com/eueung/hugo-casper-two.git themes/casper-two
“`
すると、これだけでテーマが変わり、サイトの状態がガラッと変わるわけです。

さらに、テーマのデフォルト状態では、色々と不備があったりしましたので、構造や構成をいじって、こちらに都合のいい形を模索して行きました。フォントも変えて欲しいというので、Googleが公開しているwebフォントをいくつか導入してみたりもしました。ちょっとネタに走って、肉球フォントというものも使ってみました。