Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

8,555 views

Published on

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

Published in: Technology
  • Be the first to comment

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

  1. 1. 最近、実務に導入してみたフロントエンドの技術 8つの良かった点と反省点
  2. 2. Profile @seito_horiguchi Front-End-Engineer 最近twitter始めました @seito_horiguchi
  3. 3. 3 最近会社のブログ(LIGBLOG)をリニューアル。 その際に実務でいろいろ導入してみたものについてです
  4. 4. 1st gulp @seito_horiguchi
  5. 5. 1st gulp ・神ツール。できることが超広がります。 (Sass,ectのコンパイル、html,css,js,画像圧縮、複数デバイスでの同時チェッ ク,SVGアイコン画像のwebフォント化、スプライト化など) ・GruntJSよりカスタマイズしやすかった ・綺麗な書き方するのは難しい(ベストプラクティスがまだ見つかりませぬ) @seito_horiguchi
  6. 6. CSS設計 OOCSS @seito_horiguchi 2nd
  7. 7. CSS設計 OOCSS @seito_horiguchi 2nd ・拡張性、保守性を意識したCSSの構成。書き方 ・SMACSS,OOCSSはオススメ。どんな案件にも使えそう。 ・BEMは周囲の環境によりけり。(独特かつ厳格なルールなので、社内やチー ムで浸透させづらい。)
  8. 8. スタイルガイドジェネレーター @seito_horiguchi 3rd
  9. 9. スタイルガイドジェネレーター @seito_horiguchi 3rd ・モジュールの一覧。ボタンとか見出しとか。 ・あるとチームメンバーへの共有や運用フェーズで役に立つ。 ・Grunt,gulpがあればとっても使いやすい。 ・作るのに手間がちょいかかるため、CSS書くスピードは落ちる。
  10. 10. ECT ECT @seito_horiguchi 4th
  11. 11. ECT ECT @seito_horiguchi 4th ・PHPやJSのようにHTMLが書けるテンプレートエンジン。 ・爆速でhtmlが書け、後からくる修正対応もなんのその。 ・jade,ejsと比較して、最もコンパイルが速いって言ってるブログがあった けどURLは忘れました
  12. 12. アイコンWebフォント化 @seito_horiguchi 5th
  13. 13. アイコンWebフォント化 @seito_horiguchi 5th ・今までは実装が超面倒だったけど、gulp導入で障壁ががくんと下がった。 (Terminalでコマンド1つ叩くだけ) ・ここ最近の解像度の乱立化により、使うメリットがでかくなってきたかも ・IE11,Android4.2など、モダン環境でバグが少しあるのが難点 ・実装する際にはキックオフでデザイナーに相談しておく必要あり。PSDが 出揃ってからだとキツい
  14. 14. 内部SEO対策(厳しめ) @seito_horiguchi 6th
  15. 15. 内部SEO対策(厳しめ) @seito_horiguchi 6th ・HTML5ではh1が複数使えるようになったらしいですが、使いません。 (参考http://html5experts.jp/tsuj/2333/) ・各ページのh1はユニークに。 ・そのページで”本当に重要なもの”だけに重要なタグを使い、重要性を高め た(サイドバーとかフッターの見出しなんてpタグでええやん)
  16. 16. PhpStorm @seito_horiguchi 7th
  17. 17. PhpStorm @seito_horiguchi 7th ・最近バージョン8になって、機能的には完全にsublimeText3を抜いちゃっ た気がする ・学習コスト低いです。sublimeText2,3使ってた人なら半日で十分 ・SCのoption + cmd + Oが強力。(試してみてね!) ・ただし有料です…。でも無料トライアル2ヶ月あります。
  18. 18. Google インドアビュー @seito_horiguchi 8th
  19. 19. Google インドアビュー @seito_horiguchi 8th ・設置の仕方がGoogleMap同様、iframeかJS。JSだと自由度高いけど情 報が少なくて辛い。 ・ただ建物内を撮影するだけじゃなく、アイデア次第で面白いことが色々で きそう。(弊社の場合は写真内にお面をかぶせたCTOを立たせるなどしま した。) ・お値段は3~9万円くらい(内容次第)
  20. 20. おしまい ご清聴ありがとうございました! @seito_horiguchi

×