東京で開催された「CSS Nite LP54 Corder’s High 2017」の参加レポートです。

セッション1つめはイー・ネットワークスの前川さん。

セッションを聴いて思ったこと・感想

エンジニアとしてのスキルはコーディングだけじゃないってことを改めて思ったセッションでした。

ブラウザの選定、技術の選定、仕様の確認、ほかメンバーとの意思疎通などなど、前仕事は主にコミュニケーション的な要素から開発環境周りまでのノウハウを多くご紹介されていました。

後仕事はチェック作業、GAタグの挿入作業（何故か最後の工程に回されることが多いというネタにあるある〜ってなりましたｗ）などなど。

「前仕事」「後仕事」がしっかりできるようなエンジニアがこの先生き残っていくんだろうなーと感じました。

以下はその場で書き起こしたメモです。

対応ブラウザとか

  • IE11以降
  • Android 4.4以降

事前の使用の確認として

  • Flexbox使えるか？
  • レスポンシブWebデザインで大丈夫か？
  • ファイルの命名規則は大丈夫か？（@など）
  • ファイルのパスのルール
  • JSライブラリの仕様可否・バージョンなど

黒い画面が苦手な人向けに

バッチファイルを作成し社内で共有している。
→誰でもダブルクリックで実行できるように

Node.jsの管理

nodenv/nodistを使って管理。
.node-version ファイルを共有してマシン間のバージョンの違いをなくす

ローカルサーバー

  • BrowserSync

    • 単独でも使える
    • PHPが動かない
    • Shift_JISなどが使えない

  • XAMPP/MAMP

  • VirtualHostX

  • Local (wordpress)

    • これ便利

画像の書き出し

  • Photoshopアセット書き出し

    • defaultレイヤーの活用
    • 最小の記述? : default 100% + 200% @2x
    • 余白が必要な場合
      • レイヤーマスクを活用する

  • Photoshop乗算問題

    • スクリプトを使う

  • Illustratorにもアセット書き出しはある

    • 書き出されるデータは思い
    • AjustItemsを利用する

デザインとの整合性

  • PerfectPixel

    • Chrome拡張機能、位置や透過度を指定できる

  • Fluid Browser

    • 透過できるBrowser

  • ChromeのDevTool

    • スクショ機能とか標準でついた

エミュレータの動作確認

  • iOS

    • iOSシミュレータ

  • Androidのエミュレータ

    • Genymotion

  • Browserstack

GAタグ

  • 複数あるonclickタグをdata属性に入れてJSで処理してしまう
    • コードを見通しよく