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

Like this? Share it with your network

Share

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

  • 222 views
Uploaded on

最近実務で実戦投入したフロント技術について、導入した際のメリット・デメリットを記しました。 ...

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post
    Be the first to comment
No Downloads

Views

Total Views
222
On Slideshare
215
From Embeds
7
Number of Embeds
1

Actions

Shares
Downloads
2
Comments
0
Likes
3

Embeds 7

https://twitter.com 4

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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