I'm kubosho_

思想の固まり

Nicoのこれまでとこれから

Bootstrap Advent Calendar 2015 8日目の記事です。 ここではBootstrapのテーマの1つである、Nicoのこれまでとこれからについて書きます。

これまで

まずはNicoができてから、現時点の最新バージョンであるv3.3.6-1.1.0までの軌跡を振り返ります。

はじめにNicoを作ったきっかけとしては、現在冬コミに向けて執筆中のサイト制作のSTART:DASH!!という同人誌です。 同人誌の目的上、ラブライブ!のアニメにでてきたラブライブ参加者募集サイトを実際に作る必要がでてきました。 ただ1からCSSを書くのが面倒と感じた自分は、Honokaをforkし、オリジナルのBootstrapテーマを作ることにしました。

このラブライブ参加者募集サイトですが、図1のアニメ画像キャプチャを見て分かるように配色がピンク系となっています。 配色がピンク系ということは、にこしかいないということで、名前がNicoに決まりました。

f:id:kubosh0:20151208024641j:plain

図1:ラブライブ参加者募集サイトトップページ(ラブライブ!第2期 1話より)© プロジェクトラブライブ!

しかしHonokaをforkしてできあがったNicoですが、リポジトリーのファイルを見ているうちにいろいろと作業環境を整えたくなりました。 そのためまずは作業環境を整えました。

作業しやすくするためのSTART:DASH!!

主にやったことは3つあります。

1つめは、Gruntをなんとなく気分的にグローバルインストールしたくないと思ったため、npmのrun-scriptでラップしました

2つめは、scssファイルがちゃんとできるか自動で確認したかったので、Travis CIを導入しました

3つめは、Travis CI導入に関係していますが、HonokaだったりNicoの公開用ファイルをgh-pagesブランチに上げる際は手動で上げないといけませんでした。 しかし手動は面倒だと感じたため、よしなにgh-pagesブランチへpushしてくれるシェルスクリプトを書きました

Nico襲来

これで作業がしやすくなったので、ようやく配色をHonokaからNico仕様にしていきます。 配色を考える上で真姫・凛・花陽・絵里・希のイメージカラーを入れたいと思い、考えた結果次のような配色になりました。 dangerが紫色になっているのは、希のイメージカラーを入れたいためだったのですが、一応根拠もあります。 それは、天気予報で特別警報の配色が紫色というところから来ています。

名前 カラーコード
default #f3d4df
inverse #ff50ac
primary #ff50ac
success #4caf50
info #5cfaf9
warning #ff5052
danger #ac62ff

そしてNico v3.3.5aをリリースという流れになります。

なんとかしなきゃ!

リリースした後は、Honokaのバージョン更新に追従していくだけだったのですが、ある時自分の中で事件が起こります。 それは、商用利用無料!Bootstrap 3, Bootstrap 4をベースに最近のUIデザインのトレンドを取り入れた新作テーマのまとめ | コリスという記事にHonokaとUmiは掲載されたのですが、Nicoが掲載されなかったことです。 最初は自分で使うために作ったとはいえ、せっかく作ったし他の人にも使ってほしいと思った自分にとって、ショックを受けた出来事でした。

この時にはHonokaのサイトからNicoがリンクされていたので見てないということはたぶん無いとは思う(と信じたい)のですが、それでも掲載されなかった理由を考えて、配色的に使いづらさがあったという結論に至りました。

特にinfoの色が強すぎること、またwarningdangerの色が元のBootstrapだったり、Honokaとかけ離れているのが原因だったと思います。 そのため、v3.3.5-1.0.0より次のような配色にしました。 基本Honokaを踏襲しつつ、モノクロで見たときにprimaryよりsuccessのほうが色が強くなるよう調整しました。 またinfo > warning > dangerの順に色が強くなっています。

名前 カラーコード
default #f3d4df
inverse #ff50ac
primary #ff64b1
success #0faf20
info #a27dac
warning #ff7302
danger #f45042

なおdefaultinverseも色を変えれば使いやすくなるかもしれませんが、これを変えてしまうとNicoがNicoで無くなってしまうため、変える予定は今のところありません。

これから

というわけで必要に迫られて作り、いろいろと更新したNicoですが、これからの展望としてはHonokaの変更にできる限り付いていきたいと思います。 なんだかんだでBootstrapは便利ですし、しばらく廃れないと思うので、このNicoやHonokaを通じてBootstrapがどのように進化していくのかを見ていこうと思います。