はじめに
治療ノートのフロントエンドエンジニアの @uemurakenta です。
今年もあと少しですねということで、フロントエンド界隈は今年もてんやわんやだったなぁと思い出してみると、node.jsがio.jsと統合されてv4.0がリリースされたと思ったらすぐにv.5.0がstableになったりBootstrapがBabelやSassを導入したり、npmがフロントエンドのpackageを受け入れる発表をしたのに対して、Bower側はBowerは元気ですと高らかに宣言したのは記憶に新しいですね
これから書くことと全然関係ないので本題に入ろうと思います。
医療業界のあたりまえを発明するために
少し事業の話になりますが、治療ノートは「治療法を選択できる世の中」を実現するためのサービスです。
現在リリースから半年くらいで、主に、治療法、体験談、医療に関するコラムなどを展開しています。
ただ、新規事業が当初の計画通りうまくいく保証はありません。
前述の医療に関するコラムなどは当初の予定には無かったものです。
当初の予定
リリース時PLから
とにかく早く出したいです。早く出して感触をつかみたい
と言われていたので、さっさと作るんなら、Bootstrapや、semantic UIなどのUIフレームワークで充分だったかもしれないのですが、新規事業は小さく出して、細かいレベルのピボットを繰り返していくものだと思っていたので、出来るだけライブラリの依存度を低くしようと思って下記のような構成にした。hogehuga.c-notes.jp,foobar.c-notes.jpなどにheaderやfooterのデザインを共通化させるために大掛かりなUIフレームワークが必要になるのを避けたい意味合いが強い。また、googleがレスポンシブ・ウェブデザインを推奨していることを受けjpmobileなどのgemは利用していない
c-notes.jpのCSSパッケージ構成
| パッケージ（Ruby Gems） | 用途 | 当初の所感 |
|---|---|---|
| normalize-rails | ブラウザ間の誤差を無くす | 問題なし |
| sass-rails | sassを使いたい |
map便利。モジュールや要素でファイルを切り分けて@import
|
| burbon | sassのmixinライブラリ | 問題なし |
| neat | グリッドレイアウト | 問題なし |
半年経過
PL曰く
コラムを始めましょう do do do
ここでc-notes.jpにコラムも持たせるか、blog.c-notes.jpなどを新設するかの議論があったが、c-notes.jpに持たせることにした。
| パッケージ（Ruby Gems） | 用途 | 半年運用してみた感想 |
|---|---|---|
| normalize-rails | ブラウザ間の誤差を無くす | 問題なし |
| sass-rails | sassを使いたい |
cssnext気になりだし始める |
| bourbon | sassのmixinライブラリ | 実はそんなにmixin使ってないのと、制限なく使うと当たり前だけどどんどん依存する |
| neat | グリッドレイアウト |
_grid.scssとかに依存をとどめておくのがよさげ |
半年間で変わったこと
-
sass-railsもいいけどcsnext気になるなぁ - bourbonのmixin実はそんなに使ってない
- neat便利だけど使い方間違えるとcssの記述が
@include media($hogehuga)だらけになる - コラム、お薬検索など、医療に関するコンテンツが増えた
- チームにsassが書けるデザイナー @htmlmogmog 登場
半年間の学び
- レスポンシブ・ウェブデザインは一定の効果があると思う レスポンシブ？ アダプティブ？ デザイナーにとってのベストな選択肢とは
- neat使うためだけになってしまってるbourbonがちょっと…
- c-notes.jpのコードは安定してきているので、今後サービスの展開に応じて治療ノート共通デザインcssを切り出した方がいい気がしている（COOKPADさんのsaraみたいなやつ）
今後の準備
PLは言うかもしれない
〇〇に向けた動画配信サービスやバツバツ向けのECサイトが作りたいです！
半年間の学びと今後の展望からしても、治療ノート内で共通で取り扱うデザインCSSがそろそろ必要そうで、それには出来るだけ外部パッケージの依存を減らしたい。今の構成のままでもいいのだけどcssnextの動向とかも含めこんな感じにしたらどうかという案が下記
| パッケージ（npm） | 用途 | 懸念 |
|---|---|---|
| normalize-css | ブラウザ間の誤差を無くす | まだ分からない |
| postCss | bourbonやsassが担ってきた部分。autoprefixer、@importや変数を扱うライブラリなど必要に応じて |
まだ分からない |
| Lost Grid | グリッド・システム | まだ分からない |
postCssに関してはこちらに詳しく書かれているので参考にしてください
Lost Gridに関して日本語の記事が無かったので簡単に解説
Lost Grid に以下のようなことが書いてある
Lost Grid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS. You can think of it like the Autoprefixer of grid systems.
It is built upon years of studying and building grid systems with tons of community feedback.
It makes use of calc() to create stunning grids based on fractions you define without having to pass a ton of options.
I can tell you with no ego, this is my finest grid.
以下訳（適当ですすいません）
Lost Gridはすげー強力なグリッドシステムを提供するよ。グリッドシステムのAutoprefixerみたいな感覚で使ってね。vanilla CSSでも動くよ
みんなからのフィードバックを受けて結構頑張って作ったよ
css3のcalc()関数をベースに作ってるからね
良かったら使ってね
calc()かと思って一応 caniuseしてみた。IE8はいいとしてもAndroid Browserがちょっと…と思ったけど環境は常に変化するものと信じ突き進む
使い方
lostのページからmasterブランチをcloneしてきてnpm install&gulpしたらpostCssのバージョンが古いよと怒られたので適当にnpm install --save postCss@latestとかしないと動かなかった
レスポンシブ
@media()の部分はbreakpoint指定。基本的にはlost-columnに適応させたい分割を書けばよさ気
.responsive
background: #42CAFD
div
lost-column: 1/1
background: darken(#42CAFD, 10%)
@media (min-width: 500px)
lost-column: 1/2 全体の1/2に分割
@media (min-width: 800px)
lost-column: 1/3
@media (min-width: 1100px)
lost-column: 1/4
ネスト
.nest
background: #8EB19D
div
lost-column: 1/3
background: darken(#8EB19D, 10%)
div
lost-column: 1/2
background: darken(#8EB19D, 20%)
ワッフル
susyとかでいうgallery
折り返すタイミングをしていするためにneatみたいに@include omega(3n);しなくていい
// Waffle Grid
.waffle
background: tomato
div
lost-waffle: 1/3
margin-top: 0
background: darken(tomato, 10%)
line-height: inherit
padding: $block
使ってみた所感
-
postCssはprocessorで依存関係を明記出来るので素敵 -
lostを使うところだけes6みたいに@import `lost` from 'lost'みたいにグリッド処理を記述するcssだけに読み込ませられたらいいなぁと思った - calc()どうなんだろう
まとめ
- 新規事業は何が起こるか分からないので柔軟にストレッチさせたり、減らしたりできる開発が望まれる(柔軟な対応が出来ればライブラリの選定は何でも大丈夫だと思う)
- 今回は
lostを使ってみたがbourbon,neatもpostCss版でてるみたいで期待(´∀｀∩)