「効率」と「品質」を両立する、チームワークのためのCSSテクニック(前編)

豪華賞品が当たる、スマホアプリ開発者向けアプリコンテストを開催する「TapApp(タップ＊アップ)プロジェクト」と連動した本連載。第7回は、「効率」と「品質」を両立するチームワークのためのCSSテクニックについて紹介する。

スマートフォン向けアプリケーションが複雑化・高機能化するにしたがい、肥大化する一方のCSSをいかに効率的に取り回すか。今回は、サイバーエージェント（以下、CA）ネット総合事業本部クリエイティブグループでソーシャルアプリケーションを手がけるデベロッパーに、現場で実際に活用されているテクニックを紹介してもらった。また、本誌開発者向け技術動向の記事執筆でおなじみの後藤大地氏には、技術監修を担当してもらった。

なぜチームワークのためのCSSテクニックが必要なのか

複数のスタッフが協業して開発を行い、アップデートを猛スピードで繰り返すスマートフォンアプリケーション開発の現場。ここにおいては、個人レベルのスキルだけでは肥大化するCSSを管理しきれない場面が存在する。確かに、複雑なCSSを手書きで書き上げてしまうコーダーは心強いが、そのスキルだけに頼ってしまうと、別のスタッフがメンテナンスを行いにくくなるばかりか、細部の見栄えや表示速度等のパフォーマンスまでもが個人に大きく左右されることになるからだ。特段の開発スピードと共同作業が前提となる現場では、チームレベルでCSS 開発効率の改善に取り組み、開発コストを削減しながら、関係するスタッフ全員がアプリケーションのスタイルや品質について共通認識を持つ必要があるといえるだろう。

今回と次回は、スマートフォンアプリケーション開発効率向上のために利用されているCSSテクニック紹介する。たとえば、CSS を直接書くのではなく、別の言語で記述したものをCSSへ変換して利用する「CSSプリプロセッサ」と呼ばれる技術がある。煩雑な記述を省略して手間を省けるだけでなく、デザイン要素を目的ごとにモジュール化できるといった利点がある。また、スタッフの間でサイトのCSS仕様を共有するのに便利なツールも登場した。それぞれの技術について詳しく追っていこう。

Session A　コーディング効率を大幅向上させるCSSプリプロセッサとは

谷拓樹　マークアップエンジニアとしてテクニカルディレクションを担当。企業向けASPサービス開発などを経てCA入社。

CSSのコーディングでは繰り返しや数値計算など手間のかかる作業が多いが、このような処理をCSSプリプロセッサに任せることで開発効率が大きく向上する。CAでは、CSSプリプロセッサ「Sass(サス)」を利用した開発を行っている。CSSプリプロセッサにはいくつかの実装が存在するが、コミュニティが活発で機能が着実にアップデートされていること、日本語の情報が豊富であること、CSS Spritesとの連携機能があることなどから、Sassを選択した。シンタックス(記法)としては「SCSS」(※注)を採用しており、変数が利用できるほか、ネストしたルール記述、セレクタの継承、ミックスインなどの機能を利用できる。

CSSプリプロセッサ導入にあたっては、単に開発時の手間を削減するためだけでなく、CSS のモジュール化も視野に入れている。実際の開発ではプロジェクトごとに同じようなコードを繰り返し書くことも多い。よく使われる要素を整理し、CSSプリプロセッサを活用すれば、成果物の再利用も可能となり開発効率を大きく向上させられると考えている。(谷)

※注　より効率的にコードを記述できるようにCSSを拡張したメタ言語

.btn {
     @include box-sizing;
     @include border-radius(20px);
     @include box-shadow(0 2px 3px #000);
     display: inline-block;
     margin: 1em 0;
     padding: 0.5em 1em;
     width: 200px;
     background-color: #FF1C97;
     color: #FFF;
     text-decoration: none;
}

.message {
     @include box-sizing;
     @include border-radius(9px);
     @include box-shadow(inset 0 1px #333);
     border: 1px solid #CCC;
     margin: 1em auto;
     padding: 1em;
     width: 80%;
     background-color: #FFEEFE;
}

SCSSと呼ばれる記法で記述されたファイル。CSSには存在しないキーワードがある。上記のコードをCSSプリプロセッサで処理すると、以下のようなCSSが生成される。ベンダプリフィックスなどが生成されていることがわかる。

btn {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: 0 2px 3px black;
  box-shadow: 0 2px 3px black;
  display: inline-block;
  margin: 1em 0;
  padding: 0.5em 1em;
  width: 200px;
  background-color: #FF1C97;
  color: #FFF;
  text-decoration: none;
}

.message {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-border-radius: 9px;
 border-radius: 9px;
 -webkit-box-shadow: inset 0 1px #333333;
 box-shadow: inset 0 1px #333333;
 border: 1px solid #CCC;
 margin: 1em auto;
 padding: 1em;
 width: 80%;
 background-color: #FFEEFE;
}

CSSに記述するすべての値を事前に計算して記述するのはかなり面倒な作業だ。「変数や四則演算が使えればもっと高速に開発が行えるし、記述もスマートにできるのに」と考えるデザイナーやデベロッパーは少なくないだろう。CSSプリプロセッサを使うと、そうした処理を実現できる。

仕組みは簡単だ。CSSプリプロセッサは、拡張された記法で記述されたソースに対して変数や四則演算、ミックスインなどの処理を行い、その結果としてスタンダードなCSSを出力する。「プリプロセッサ」という言葉が使われているのは、このようにCSSを利用する前に変換をかけるからだ。CSSメタ言語と呼ばれることもある。

SCSSと呼ばれる記法で書かれたソースからCSSを生成したサンプルを上記に公開していただいた。生成されたCSSにはベンダプリフィックスなどが生成されていることがわかるだろう。CSSプリプロセッサを導入することで、コーディングにおけるこうした煩雑な処理をまとめて行うことができるのだ。(後藤)

次回は今回に続き、他のアプリケーションの開発現場で活用されている、開発効率の改善や、品質管理の向上にも役立つCSSテクニックについて解説する予定だ。

※サービス開発運用状況によって、仕様に変更が入る可能性がありますのでご了承ください。
※当記事は、株式会社マイナビ刊行のWeb Designing2013年1月号掲載の記事を加筆、修正したものです。

スマホ向けアプリコンテスト｢TapApp Awards｣開催中!!

スマホアプリ開発技術の啓蒙と次世代の才能発掘を目的とした「TapApp（タップ＊アップ）」プロジェクトでは、スマホ向けアプリアワードを開催中です。詳細は、下記Web ページに記載していますので、ご確認の上、どしどしご応募ください。

• 【募集部門】フリー部門◎「繋がる」をキーワードとしたアプリケーションをあなたのアイデアで創ってください。
• 【募集部門】テーマ部門◎ 下記のいずれかを選び、それをテーマとしたアプリケーションをあなたのアイデアで創ってください。［Clock（時計）］ ［カレンダー／スケジューラー］［毎日3 分遊びたくなるゲーム］ ［リズムで遊ぶアプリケーション］［温かみを感じるアプリケーション］ ［Photo Library（写真共有）］
• 【開催スケジュール】募集期間◎～2013年1月15日（火）、結果発表◎ 2013年3月 中旬
• 【賞金/ 副賞】「上海クリエイティブオフィスツアー」ほか、総額約150万円

詳細はTapApp(タップ＊アップ)プロジェクト公式サイトをご覧ください。※内容が変更になる場合があります。