Umiを作ってUmiに移行した話

このエントリーは Bootstrap Advent Calendar 2015 15日目のエントリーです。

Umiは、日本語も美しく表示できるBootstrapテーマであるHonokaのフォークテーマです。このテーマは私が運営しているサイトをHonoka移行したいという目的を持って作成しました。このWebサイトも2015/12/15現在はUmiを使っています。

Honokaの紹介はAdvent Calenderの他の記事やHonokaプロダクトサイトに任せるとします。

このエントリーでは、Umiの作成経緯から移行・メンテナンスをまとめたいと思います。

Honoka forkを作りたくなった

Honokaが世に出た時、自分はProconist.netという高専プロコン向けのWebサイトを立ち上げた直後でした。このサイトは、Honoka作者のTakuto Kanzakiさんに全面的に関わっていただいていて、Bootswatch FlatlyをCSSフレームワークとして使っていました。

「うちのサイトにもHonokaを使いたいなぁ」

「Honokaはオープンソース」

「Bootswatchもオープンソース」

そんなことを思いつつ、HonokaのリポジトリにStarがつきまくっているそんな時、Twitterで

@NKMR6194 別キャラの名前とかにしちゃいましょう()

— じゅりあん (@MITLicense) 2015, 5月 26

「……これは？！」

ﾎﾉｶﾁｬﾝ！⊂(・８・)⊃ ｳﾐﾁｬﾝ！⊂(・８・)⊃

という神（作者）からの天啓を受けて、Bootswatch Flatlyで主に使われている 深い紺色からイメージ し、 Umi という名前のHonokaフォークを作ることにしました。

Umiを作る

配色を変える

Umiを作るのは簡単です。Bootstrapにおいて、配色はscss/_variables.scssに書かれた以下の要素を使って表されています。基本的にそれらの値をBootswatch Flatlyから引っ張ってきて、Honokaに上書きするだけです。

$gray-base
$gray-darker
$gray-dark
$gray
$gray-light
$gray-lighter

$brand-primary
$brand-success
$brand-info
$brand-warning
$brand-danger

しかし、これだけだとNavbar周りの配色がうまくいきません。そこで、$navbar-default-colorや$navbar-inverse-colorといった値をBootswatch Flatlyの設定で上書きしています。

ページを変える

HonokaのプロダクトサイトはGitHubリポジトリ上で公開/管理されています。それなら、forkしたテーマもGitHub Pagesでプロダクトサイトを作るのが道理というものです。

先ほど配色を変えたCSSを使っているので、やることはほとんどありません。やることといえば、この３つくらいです。

• 表記をUmiにする
• Honokaのforkテーマであることを明記する
• 海未ちゃんの画像を用意する

Umiへの移行

満を持してUmiを公開したのち、目的であったProconist.netのUmi移行を行いました。

移行手順

UmiのCSSを読み込む おわり

本当にそれだけです。UmiやHonokaはBootstrapのフォークテーマであり互換性が非常に高いので本当にこれだけです。コミットログもそれを示してくれています。

Umiをメンテナンスする

自分のために作ったとはいえUmiはOSSです。せっかく公開したのだから誰かに長く使ってもらいたいですし、HonokaをforkしたテーマとしてはHonokaの恥にならないようにしたいです。そこで、HonokaがバージョンアップするたびにUmiも追随してバージョンアップするようにしています。

作業はHonokaのmasterをマージする。これだけです。

UmiはGitHub上でHonokaをforkしたリポジトリ上で開発しているため、Honokaのブランチの１つとして存在しています。よって、Honokaのmasterをマージすれば変更を取り込むことができるというわけです。しかし、コンフリクトが大量に発生します。こればかりは仕方がないので、該当箇所を手動で修正してマージします。現在リリースされているUmi v3.3.6-1までに、少なくとも４回はマージ作業を行いました。自分としてはマージ作業でGit力がモリモリ上がって、今ではコンフリクトとは友達のような気分です。

これらの作業をすることで、Umi v3.3.6-1ではHonokaと同様にBowerに対応することができました。

まとめ

• Honoka forkを作るのは かんたん
• UmiやHonokaに移行するのは かんたん
• メンテナンスしてコンフリクトと ともだち

まとめも済んだので、この場を借りて謝辞を。

Honokaという素晴らしいプロダクトを作ってくださり、HonokaプロダクトページにUmiを掲載してくださったTakuto Kanzakiさんに感謝いたします。Proconist.netの作成を一緒に頑張ってくれてたうえに、このような素晴らしい人を紹介してくれた @raryosu にもね！

これからもUmiのメンテナンスを続けつつ、Honokaの開発に積極参加していきます。応援よろしくお願いします！

私からは以上となります。あと数日間、Bootstrap Advent Calendar 2015を是非楽しんでください。

P.S.

Honoka, Umi, Nicoに続くテーマを作るのはあなただ！！！