CSS Nite LP26「CSS Preprocessor Shootout」フォローアップ（8）『GREEを支える技術フロントエンド版』山田 あかねさん

2013年1月12日（土） 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、山田 あかね（グリー）の『GREEを支える技術フロントエンド版』のスライドなどを公開します。

• スライド
• 音声

メッセージ、補足

• Sass vs Less
• 疎結合

グリーの山田あかねです。このたびはご参加いただきましてありがとうございました。

GREEの高速化にあたりSassで行っていることを中心にご紹介させていただきました。Sassでできることはもっとたくさんあるため、是非皆様も実際に触ってみて、楽しさを実感していただければ幸いです。

アンケートでいくつかご意見・ご質問をいただきましたので、回答させていただきます。

Q: ファイルの管理は基本的にローカル＋Gitなのでしょうか？複数人でファイルを同時に触るさいに気を付けていることがあれば教えてほしいです。

A: ローカル+Gitにくわえ、エンタープライズ版のGithubを活用しています。Gitはおのおのの開発者で分散して開発できるのが魅力ですが、実際にリリースをする際にはSubversionのように中央集中型の管理をおこなうメリットも大きいため、Githubを使いながら両方の良さを取り入れて開発しています。

Gitを使えば、複数人でファイルを触る際にも「ブランチを切る」というかたちで、同時進行で異なる機能の開発が可能になります。個人的に、Gitを使ってしまうと、もう以前の開発スタイルに戻れなくなるほど便利だと思います。

少し古い記事になりますが、グリーの開発フローについての記事も参考にしていただければと思います。http://labs.gree.jp/blog/2011/05/3528/

Q: 使っているmixin群とかを見てみたいです。

A: 全て公開することはできませんが、一部ご紹介させていただきます。webkitにしか対応していないプロパティに対して、compassのexperimentalを読み込むようなことをmixinでやってたりします。

// デバイスを傾けたときの文字の大きさ調整
@mixin text-size-adjust($val:none) {
@include experimental(text-size-adjust, $val,
not -moz, -webkit, not -o, not -ms, -khtml, not official
);
}

// タップハイライトカラー
@mixin tap-highlight-color($color) {
$color: none;
@include experimental(tap-highlight-color, $color,
not -moz, -webkit, not -o, not -ms, -khtml, not official
);
}

// ボタンのスタイル
// ボタンの色関連：文字色・背景ハイライト色・背景シャドウ色・枠線色・枠線トップ色・枠線ボトム色・テキストシャドウ色・ボックスシャドウ色・内側のボックスシャドウ色の順に指定
@mixin button-colors
(
$color1: $button-text-color,
$color2: $button-top-bgcolor,
$color3: $button-bottom-bgcolor,
$color4: $button-line-color,
$color5: $button-top-line-color,
$color6: $button-bottom-line-color,
$color7: $button-text-shadow-color,
$color8: $button-box-shadow-color,
$color9: $button-box-shadow-inset-color,
$text-shadow-y: 1px
) {
border: 1px solid $color4;
border-top-color: $color5;
border-bottom-color: $color6;
color: $color1;
text-shadow: 0 $text-shadow-y 0 $color7;
@include background-image(linear-gradient($color2, $color3));
@include box-shadow-mix(0,1px,1px,$color8,0,1px,0,$color9);
}

このようなかたちで、mixinの中でも別のmixinをincludeして使っているものもあります。 デザインに秩序がある場合、特に仕組み化しやすいのではないかと思います。

Q: 変数の方面なども是非おうかがいしたいです。

A: 最初はLessやSassの機能を試してみたい好奇心で、色を変数化して、亜種の色を演算で表現したりもしていました。しかし実際にやってみてわかったのですが、デザインの方向性がしっかり固まっていないうちに色を変数にするとかえってややこしくなるという印象です。

それでも色を変数にするメリットは大きいです。たとえばトーン＆マナーを保ちながら、カラースキームだけをがらっと変更したいようなときなどです。キーカラー、アクセントカラーなどを変数化しておけば、たった数個の変数の値を変えるだけでサイトの印象をがらっと変更できます。

また、レスポンシブに設計したいときには幅やグリッドのしきたりに対して変数をつけておくと運用しやすいかと思いますが、こちらもやはりデザインルールがしっかりしていないとかえってややこしくなってしまうと思います。プリプロセッサを使う使わないに関係なく、設計をしたり、長持ちする仕組みをつくるためにはデザイナーとのコミュニケーションは欠かせないと考えております。

以上、回答とさせていただきます。

ありがとうございます。