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に決まりました。
しかし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の色が強すぎること、またwarningとdangerの色が元の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 |
なおdefaultとinverseも色を変えれば使いやすくなるかもしれませんが、これを変えてしまうとNicoがNicoで無くなってしまうため、変える予定は今のところありません。
これから
というわけで必要に迫られて作り、いろいろと更新したNicoですが、これからの展望としてはHonokaの変更にできる限り付いていきたいと思います。 なんだかんだでBootstrapは便利ですし、しばらく廃れないと思うので、このNicoやHonokaを通じてBootstrapがどのように進化していくのかを見ていこうと思います。