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.

73

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

最近、実務に導入してみたフロントエンドの技術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
  • EmiNoguchi

    Oct. 19, 2019
  • YoshikiTakahashi2

    Apr. 19, 2016
  • shunkudou5

    Apr. 1, 2016
  • KazumaMatsumoto1

    Feb. 26, 2016
  • rakdos1696

    Feb. 13, 2016
  • takubdm

    Oct. 19, 2015
  • Raryosu

    Aug. 8, 2015
  • ssuseredb34d

    Jun. 7, 2015
  • dmasubuchi

    Jun. 1, 2015
  • sttr110

    May. 12, 2015
  • RyotaKimura3

    May. 10, 2015
  • takanoriobata

    Apr. 23, 2015
  • kouyaiwasaki

    Apr. 23, 2015
  • makotoohmori

    Apr. 14, 2015
  • nakayamayoshiki1

    Mar. 30, 2015
  • HiroshiShiobara

    Mar. 28, 2015
  • Uyauyamit

    Mar. 28, 2015
  • ddt2000

    Jan. 29, 2015
  • kojimatakaaki

    Jan. 28, 2015
  • magicvox

    Jan. 18, 2015

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

Views

Total views

9,248

On Slideshare

0

From embeds

0

Number of embeds

466

Actions

Downloads

32

Shares

0

Comments

0

Likes

73

×