2016年07月

4

月曜日の投稿

菅野 慎
投稿者:菅野 慎
(コーダー)

2016年07月04日

コーディングテンプレートもリニューアル
〜コーディングガイドライン策定 #04〜

コーダーのあーだこーだ

菅野 慎
投稿者:菅野 慎(コーダー)

こんにちは。コーディングファクトリー部の菅野です。
コーディングガイドライン策定についての連載第4回目です。

今回は前回までお伝えさせていただいたガイドラインの変更に伴い、コーディングテンプレートもリニューアルをしたのでその時のお話をしたいと思います。
 

そもそもコーディングテンプレートって?

コーディングテンプレートとは新規案件用のHTML・CSS・JSがセットになったスターターキットです。コーディングファクトリーオリジナルのフレームワークと言っていいかもしれません。コーディングファクトリーでは新規案件のほとんどをこのコーディングテンプレートから始めます。コーディングテンプレートを使用することで品質の均質化や制作効率をアップさせる狙いです。
私が入社した6年ほど前から既に存在し、現在に至るまでバージョンアップを重ねながら受け継がれてきたコーディングファクトリーの財産の一つです。
 

アップデートフロー

今回はガイドラインの大型アップデートということもあり、段取りにも気合いが入っていました。

  1. 私、菅野が既存のコーディングテンプレートを基にたたき台を作る
  2. 最新のトレンドにアンテナを貼りまくっている丸山によるほぼ嫌がらせチェック
  3. 全コーダーによる鬼チェック

この厳しいチェックを通らなければなりません。とても憂鬱でした・・・。


 

今回見直すべき項目は2点

今までご説明させていただいている通り、コーディングファクトリーのコーダーたちにとってコーディングテンプレートはある意味生命線です。半端なものを作ってしまうとコーダーたちに袋叩きに合いそうだったので熟考に熟考を重ね、以下の2点に重点を置いてアップデート作業に挑むことに決意を固めました。・・・い、いいよねこれで?

  1. 新ガイドラインに合わせたclass命名をHTMLとCSSに適用
  2. 不要な項目は削除し、シンプルで使いやすく

     

1. 新ガイドラインに合わせたclass命名をHTMLとCSSに適用

これは新ガイドラインのルールに沿って既存テンプレートを更新していく作業でしたので、それほど苦労せずに作業することができました。前回の新しい時代のCSSへ 〜コーディングガイドライン策定 #03〜でお伝えした、class名に決められた接頭辞を入れつつ、構成を微調整する作業。量こそ多かったですが、それほど迷う要素もないので難なく完了。菅野さん余裕です!
 

2. 不要な項目は削除し、シンプルで使いやすく

これが難しかった・・・。不要だと思うものも、使いやすいと感じることも人それぞれです。あまり考えすぎても進まないのでとりあえず一任されている自分の感情の赴くままに作業しました。
ざっくりとまとめるとこんな感じです。

  • 今まで2ファイルに分かれていたcssファイル(cmn_layout.css(レイアウト&モジュール)とcmn_style.css(汎用スタイル))を「base.css」として1つのファイルに統合
    →汎用スタイルを大幅に減らしたため、統合することに。例えば、以前はmarginやpaddingは5px刻みで50pxまで用意していましたが、使用しないものが大半なので必要なものは都度追記していくことにしました。
  • reset css の刷新
    →cite, dfn, varなど普段使わないタグにまでresetを掛けていたので削除しました。また、html5からbuttonタグをよく使用するようになったので見た目をカスタマイズしやすいよう調整するなどより実用的に変更しました。
  • clearfixの記述を「micro clearfix」に変更
    →以前の記述がIE5から対応している古いタイプでかなりごちゃごちゃ書いていたので、記述がコンパクトですっきりした「micro clearfix」にしました。
  • 古いIE用のCSSの記述は削除
    →IE6,7対応時の名残があったので削除しました。
  • 全ての要素に「box-sizing: border-box;」を適用
    →border-boxの方が幅の指定のときに、widthにborderやpaddingも含めて計算できるので直感的でコーディングしやすいですよね。
  • css3 animation用の汎用classを追加
    →hover時などのアニメーションの動きを一括で指定しやすくするために、 .is-animate{transition: all 0.2s ease 0s;}を追加してみました。
    ※使用率が低ければ今後削除もあり。
  • レスポンシブ用の出し分け汎用classを追加
    →ブレイクポイントごとにdisplay:none;を切り替えます。レスポンシブサイトの制作が増えたため、追加しました。
  • common.js(スムーススクロールなどのベースとなる機能)の選定
    →「ポップアップ」など使用率の低くなったjsは削除しました。

こうして書き出してみると意外に少なく感じていますが、書き順やコメントの入れ方などを考えつつ、丁寧な作業を心掛けながらお仕事させていただきました。

こうして出来上がったものを、フローに則ってコーダーたちに確認してもらい、修正意見を取り入れ、無事完成させることができました。ふぅ〜〜。

しかし、コーディングテンプレートに終わりはありません。目紛しく変わるWeb業界に合わせて今後も更新を続けていかなくてはなりません。
実は今、またコーディングテンプレートをアップデートしようと試行錯誤中です。
コーディングファクトリーの飽くなき挑戦は続くのでした。

ガイドラインお申し込みフォームへ

この投稿を書いた人

菅野 慎

菅野 慎(かんの しん)コーダー

コーディングファクトリー部のチーフコーダーです。愛犬のミニチュアシュナウザー・こてつ君の健康のために、手作りごはんを作っています。しかし、そのこてつ君はただいま実家に帰省中。しばらく枕を濡らす日が続きそうです。

菅野 慎が書いた他の記事を見る