作戦（コーディング編）

sass,BEM,SMACSSを導入

コーディングにはsass,BEM,SMACSSを導入しました。

BEMは「class値のルールを定める」というコーディング思想で、「制約」を設けるものになります。
制約が増えるということは、それだけでは制作スピードにとってデメリットとなってしまいます。
そのデメリットを上回る大きなメリットがなければ導入する意味がありません。

BEMの主なメリットは、「コードを書いたコーダーの意図が、class値から読み取れる」「CSSの汚染（一人のコーダーが書いたスタイルが、予期せず他の要素に影響してしまうこと）が起きない」であると考えています。

今回のように、仕様の打合せをすることなく、複数のコーダーが同時並行的にコーディングを行う現場では、このメリットが、デメリットを大きく上回ると考え、BEMを導入しました。

BEM,SMACSSについては下記の記事にも書いています
GROOWEB SCSS SMACSS BEM ガイドライン（前編）

既存ブロックはどんどん再利用する

今回のプロジェクトで効率化のキーワードとなったのが「再利用」です。

  • コーディング前にすべてのデザインを見ることができない
  • 8名が同時並行的にコーディングを進めている

という、今回の状況では、
「同じレイアウトのブロックが、違うページに存在し、2人のコーダーが、それぞれコーディングしてしまう」という“勿体無い”ケース（重複コーディング）が多発すると予測されます。

重複コーディングを回避し、既に作られたブロックを再利用することで、作業効率を上げたい。
そのために今回、行った特殊な作戦をご紹介します。

1. コーディングしたブロックは必ずキャプチャを撮って共有

コーダーは、ブロックのコーディング完了後に、該当箇所のキャプチャを撮り、それが含まれるページのパスを記載し、Dropboxにアップします。Dorpboxのデータは全コーダー間で共有されます。

blog_2_2
↑ブロックキャプチャの例

キャプチャが増えてくると、Dropbox内は下記のようになります。
ファイル名には、担当コーダー名と、そのブロックのclass値を入れます。

blog_2_1

大事なポイントは、担当者が「こんなのは他では使われないだろう」という判断をせず、「全て」のブロックのキャプチャを保存することです。
キャプチャの有無がまちまちだと、「本当はコーディング済みのページに含まれてるのだけど、キャプチャを撮っていないだけかもしれない・・ブラウザで探そうかな・・」といったような迷いが生じるからです。

2. 新ページコーディング前に再利用できるブロックを探す

コーダーは、新しいページのコーディングに着手する前に、デザインデータを確認し、そのページに含まれるブロックが、既にコーディング済で再利用可能なブロックに含まれるかどうかを、Dropboxで共有されたキャプチャから探し、判断します。

blog_2_3

3. 再利用可能なブロックのHTMLをコピー

該当ページのHTMLファイルから、ブロックのHTMLをコピーし、コーディングするページに引用します。
当然、文言や画像はデザインデータ通りに入れ替える必要があります。
全く同じブロックであれば、これで完了です。少しでも違う点があっても、既存のCSSを編集することはせず、class値にmodifierを追加して調整するか、元のCSSを流用して新しいブロックとして作ります。
modifierとは？

4. 再利用可能なブロックが見つからない場合は新たにコーディング

残念なことにキャプチャが見つからない場合は、新しくコーディングし、キャプチャを追加します。

結果と感想

クライアントより随時送られてくる新しいデザインデータには時折、凝ったレイアウトも含まれており、決して容易なプロジェクトではありませんでした。

しかし結果として、誰も徹夜することなく、また連休は（暦通りに）きちんと休む事ができました。

「ブロックのキャプチャを毎回撮る」という工程が、特殊かつ面倒なため、最初はコーダーにとってストレスだったと思います。
しかし、作業が進みコーディング済みのページが増えるにつれて、再利用可能なブロックが大半を占めるようになりました。そうすると、コーディングの速度が上がり、この作戦が功を奏したと言えるようになりました。

納品後、各コーダーに会ったのですが「後半は ほとんど新しいCSSを書かずにHTMLのコピペだけで1ページ完了してました」という声も聞けました。

反省点

  • 当初から予測はしていましたが、ブロックを他のページからそのまま再利用するため、class値に脈略がないケースが多々ありました（例えば、.festival-info というブロックを「訓練内容」というセクションで使ったり‥）。今回は「特殊なのでそれも認める」としました。
  • ブロックが完了する度にキャプチャを保存するコーダーと、1ページが完了する度にキャプチャを保存するコーダーがいました。後者の場合タイムラグが生じるので、そのタイムラグの間に別のコーダーが着手してしまい、重複コーディングが起きる ということが時々ありました。

お礼

社名を控えさせていただきましたが、弊社を信頼し このようなプロジェクトを任せてくださったクライアント様に感謝します。
また、sass,BEM,SMACSSに加え、特殊な作戦をよく理解したうえで、協力してくださった アイドットデザインの皆様、卜部さん、濱邊さん、本当にありがとうございました。

IMG_5265