• 投稿日
  • 著者 Quidam

マークアップトレーニングを実施中（第一回レポート）

グランフェアズでは現在、開発環境をちょっと大きめに変える取り組みが進んでいて、その中のステップとしてマークアップのトレーニングを実施することにしました。6月15日（月）に初回の振り出しをしたので、その内容をレポートします。

トレーニングの目的

このトレーニングの目的は主に3つ。

  1. レスポンシブWebデザインの実現に必要なマークアップ術を段階的に理解すること
  2. 社内標準のCSSアーキテクチャを再定義し、内外メンバーによる協業とメンテナンスの精度を向上すること
  3. 全社的にCSSプリプロセッサ（SASS）を導入すること

3つ挙げましたが、1 については、たまたま最適な題材があったから（ほんとに難しい部分は一旦置いておいて）レスポンシブWebデザインを体感する、といった程度で、トレーニングのメインの目的は 2 のCSSアーキテクチャの再定義にあります。

CSSのアーキテクチャやコーディングルールってのは「これで完璧」という正解はなく、さまざまな要因によってベストが違ってくるもの。そこでこのトレーニングでは「誰かが決めた決まりに従う」のではなく、自身のコードと向き合ってダメな点を修正していくことによって、本質的に求められるものを理解し、私たちのベストプラクティスを定義するような流れを考えました。

トレーニングの計画

いきなり一足飛びは難しい＆身にならないので、3つのフェーズに分けて実施します。

  1. 課題のデザインを、まずは自力でマークアップ
  2. CSSアーキテクチャの考え方を取り入れ、1 のコードをリファクタリング
  3. CSSプリプロセッサ（SASS）を導入して 2 を再度リファクタリング

同じ課題に対し、6人が別々にオレオレマークアップをします。今の標準ルールはコードの外の取り決めがほとんどなので、コード自体はきっとバラバラになるでしょう。。

課題に取り組むメンバーもいろいろ。

  • 867　（ウチ）
  • 神谷さん　（デザイン + コーディングスキルをベースに持つディレクター）
  • 前ちゃん　（日々技術の壁にぶちあたる進行管理系ディレクター）
  • 井上さん　（デザイン > コーディング　な将来ディレクター　4月入社）
  • 服部さん　（デザイン < コーディング　な将来ディレクター　4月入社）
  • 長屋さん　（来年4月入社予定の専門学校生）

どんなのが上がってくるか、ちょっと楽しみです。

課題（レスポンシブWebデザイン：初級）

今回の課題は、主要なスマホやタブレットのUAを判別して、それ以外（主にPC）のターゲットとサイトを別に持つ仕様を想定した、スマホ～タブレット用の可変幅サイト（1ページ）です。

主な仕様

レスポンシブWebデザインの要素のうち、次は含みません。

  • IE8などのレガシーブラウザ対応
  • マルチ画像対応（解像度別・スクリーンサイズ別）
  • 大きなスクリーン（PC）を想定したグリッドシステム

フルードグリッドではないので厳密にはレスポンシブWebデザインとは言えませんが、それ以外の以下の要素を含んでいます。

  • Media Queries の使用
  • レスポンシブタイプセッティング
  • フルードイメージ
  • Webフォントの利用 （欧文タイプとアイコン）

その他、よく使われる動作パーツも含まれます。

  • グローバルメニュー開閉パネル（ハンバーグメニュー）
  • アコーディオン開閉式コンテンツ
  • フリック可能なコンテンツスライダー（サムネイルありとなしの2種）
  • 常に画面右下に表示される「先頭へ」ボタン

デザイン

こんなデザインです！と公開できると分かりやすいんですが、非公開案件のデザインを課題用に改変してるので出せません。。が、肉体美と笑顔が素敵な海外セレブのトレパン姿がいたるところに出てくる、オトナ女子率高めなメンバーにはもってこいのデザインです。

デザインはPSDで、幅640pxで作成されています。 （幅640pxで作る意味がもはやないわけですが、なぜ意味がないのかもマークアップできると理解が進みます。）

実装条件

コード以外の部分で大きなばらつきが出ないよう、必要な外部ファイルを含んだ HTML のプリセットを用意。 各自そのセットを自身の開発領域にクローンしてスタートします。 主な条件は次のとおり。

  • リセットには normalize.css を使う
  • 画像ファイルの命名規則は、GF標準の「用途識別子-固有名称-2桁連番」とする
  • JavaScript のライブラリには jQuery を使う
  • 動作のうちGFオリジナルのプラグインJSで対応できるものはそれを使う
  • Webフォントは、Google Font, Font Awesome, icomoon のいずれかを使う

用意されたプリセットのファイル構造は次のとおり。

[root]
    ├ index.html
    └ [assets]
          ├ [css]
          　   ├ normalize.css
               └ main.css
          ├ [img]
               ├ [common]
               └ [home]
          ├ [font]
          └ [js]
               ├ [vendor]
                     └ jquery.min.js
               └ common.js

締め切り

課題の締め切りは、1週間と1日後の23日（火）です。 ちなみにウチは完了したのですが、まるっと2日くらいはかかりました。結構タフなお題です。

次回にむけて

メンバーには、成果物のほかに、つまづいたところやこれで良いのか分からないところ、みんなで議論したいポイントなどのレポートも合わせて提出してもらいます。 各自のコードを読み、レポートに挙がったポイントへの対応方法と課題を共有して、次の「CSSアーキテクチャをもとに各自リファクタリング」のフェーズに進みます。