最近実務で実戦投入したフロント技術について、導入した際のメリット・デメリットを記しました。 ちなみにその実務というのは、会社のプロダクト「LIGBLOG(liginc.co.jp)」のリニューアルです。 第5回HTML5minutes登壇時の資料です。

1. 最近、実務に導入してみたフロントエンドの技術
8つの良かった点と反省点

2. Profile
@seito_horiguchi
Front-End-Engineer
最近twitter始めました
@seito_horiguchi

3. 3
最近会社のブログ（LIGBLOG）をリニューアル。
その際に実務でいろいろ導入してみたものについてです

4. 1st gulp
@seito_horiguchi

5. 1st gulp
・神ツール。できることが超広がります。
（Sass,ectのコンパイル、html,css,js,画像圧縮、複数デバイスでの同時チェッ
ク,SVGアイコン画像のwebフォント化、スプライト化など）
・GruntJSよりカスタマイズしやすかった
・綺麗な書き方するのは難しい（ベストプラクティスがまだ見つかりませぬ）
@seito_horiguchi

6. CSS設計
OOCSS
@seito_horiguchi
2nd

7. CSS設計
OOCSS
@seito_horiguchi
2nd
・拡張性、保守性を意識したCSSの構成。書き方
・SMACSS,OOCSSはオススメ。どんな案件にも使えそう。
・BEMは周囲の環境によりけり。（独特かつ厳格なルールなので、社内やチー
ムで浸透させづらい。）

8. スタイルガイドジェネレーター
@seito_horiguchi
3rd

9. スタイルガイドジェネレーター
@seito_horiguchi
3rd
・モジュールの一覧。ボタンとか見出しとか。
・あるとチームメンバーへの共有や運用フェーズで役に立つ。
・Grunt,gulpがあればとっても使いやすい。
・作るのに手間がちょいかかるため、CSS書くスピードは落ちる。

10. ECT
ECT
@seito_horiguchi
4th

11. ECT
ECT
@seito_horiguchi
4th
・PHPやJSのようにHTMLが書けるテンプレートエンジン。
・爆速でhtmlが書け、後からくる修正対応もなんのその。
・jade,ejsと比較して、最もコンパイルが速いって言ってるブログがあった
けどURLは忘れました

12. アイコンWebフォント化
@seito_horiguchi
5th

13. アイコンWebフォント化
@seito_horiguchi
5th
・今までは実装が超面倒だったけど、gulp導入で障壁ががくんと下がった。
（Terminalでコマンド１つ叩くだけ）
・ここ最近の解像度の乱立化により、使うメリットがでかくなってきたかも
・IE11,Android4.2など、モダン環境でバグが少しあるのが難点
・実装する際にはキックオフでデザイナーに相談しておく必要あり。PSDが
出揃ってからだとキツい

14. 内部SEO対策（厳しめ）
@seito_horiguchi
6th

15. 内部SEO対策（厳しめ）
@seito_horiguchi
6th
・HTML5ではh1が複数使えるようになったらしいですが、使いません。
（参考http://html5experts.jp/tsuj/2333/）
・各ページのh1はユニークに。
・そのページで”本当に重要なもの”だけに重要なタグを使い、重要性を高め
た（サイドバーとかフッターの見出しなんてpタグでええやん）

16. PhpStorm
@seito_horiguchi
7th

17. PhpStorm
@seito_horiguchi
7th
・最近バージョン8になって、機能的には完全にsublimeText3を抜いちゃっ
た気がする
・学習コスト低いです。sublimeText2,3使ってた人なら半日で十分
・SCのoption + cmd + Oが強力。（試してみてね！）
・ただし有料です…。でも無料トライアル2ヶ月あります。

18. Google インドアビュー
@seito_horiguchi
8th

19. Google インドアビュー
@seito_horiguchi
8th
・設置の仕方がGoogleMap同様、iframeかJS。JSだと自由度高いけど情
報が少なくて辛い。
・ただ建物内を撮影するだけじゃなく、アイデア次第で面白いことが色々で
きそう。（弊社の場合は写真内にお面をかぶせたCTOを立たせるなどしま
した。）
・お値段は3~9万円くらい（内容次第）

20. おしまい
ご清聴ありがとうございました！
@seito_horiguchi