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.
【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会 第4回
Ticklecode
Yoshinori Kobayashi 1
Railsで生産性を高めてくれる
「Asset Pipeline(アセットパイプライン)」...
2
生まれは 奈良県 です
小林由憲(こばやしよしのり)
Twitter: @AsbyuKobayashi
ブログ: In Advance Only
・<link>、<script src=”...”>タグの通信コストが大きい
3
フロント(クライアント)側での問題点
・CSS、JavaScriptのデータサイズが肥大化
・CSS、JavaScript、HTMLを直接コーディングしにくい、生...
4
Asset Pipeline(アセットパイプライン)とは
Asset(アセット)
Pipeline(パイプライン)
有用なもの・貴重なものの意
Railsでは、JavaScript・CSS・画像ファイル・ERBなどを示す。
ルート、補給線の...
5
①コンパ
イル
②統合 ③圧縮
④ダイジ
ェスト付
与
Asset Pipelineの流れ
コーディン
グ
ブラウジン
グ
Exp.CSS の場合
common.css.scss
buttons.css.scss
responsive.cs...
6
①コンパイル
デフォルトでサポートされている言語は、CSSに代わるSASS、
JavaScriptに代わるCoffeeScript、ERB。
【変換前】 ⇒ 【変換後】
common.css.scss ⇒ common.css
foobar...
7
②統合
1つのファイルにまとめて、通信回数を減らす。
<link>タグの通信コストが大きいため、記述回数を減らす。
【統合前】
common.css
buttons.css
responsive.css
【統合後】
application....
8
③圧縮
改行、空行、コメントを取り除いて、サイズを縮小する。
【圧縮前】
$(window).load(function(){
// スライドイメージを表示
$('.bxslider img').css("visibility","visi...
9
④ダイジェスト付与
一度、レンダリング(表示処理)された、CSS・JavaScriptはWeb
ブラウザでキャッシュ(一時保存)される。
アセットを修正後は、Webブラウザで修正後を表示さたいために、
キャッシュを確実に破棄させる仕組みが必...
10
まとめ
11
個人的な感想
・フロントツール(Grant、Gulp)よりスッキリしていて統
一感がある。
・Sass、CoffeeScriptのコーディングに集中できて、「あと
はよろしく!」やってくれるイメージ。
・development環境・pro...
アセットパイプライン | Rails日本語ドキュメント | Ruby STUDIO
http://ruby.studio-kingdom.com/rails/guides/asset_pipeline
http://railsguides.jp...
13
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

Railsで生産性を高めてくれる「Asset Pipeline(アセットパイプライン)」を理解する|【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会 第4回

1,926 views

Published on

2015年4月19日に開催された、「【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会 第4回」での発表資料です。
ショートセッション(10分程度)で発表しました。

初心者向けに、Asset Pipeline(アセットパイプライン)はどのようなものか、大まかな機能の説明をしました。

Asset Pipelineにより、Sass、CoffeeScriptのコーディングに集中できます。

今まで手間だったことをほぼ自動で行ってくれるので便利です。

Sprockets(スプロケッツ)のgemとして提供されていて、development環境・production環境によって動作もコントロールできるので、細かな調整もできるイメージです。


=================

「Ruby / Ruby on Rails ビギナーズ勉強会」は初心者が集まって発表したり、自主学習する勉強会です。定期開催しています。

★開催の連絡は以下の方法で受け取ることができます。

## DoorKeeperグループ
イベント申し込みを受け付けている、DoorKeeper でのグループです。
https://coedo-rails.doorkeeper.jp/

## Facebookグループ:
イベント告知や技術情報をお互いにシェアしています。
https://www.facebook.com/groups/rorbeginners/

## Twitterハッシュタグ
ハッシュタグは、 #coedorb です。
Twitterにもイベント、勉強会の情報を流しています。

★勉強会で発表されたスライド、動画をまとめています。
Ruby / Ruby on Rails ビギナーズ勉強会 スライド・動画 #coedorb
http://matome.naver.jp/odai/2143761931840509901

★勉強会を動画収録しています。

## Ustreamで勉強会を中継しています。
http://www.ustream.tv/channel/ruby-ruby-on-rails-%E3%83%93%E3%82%AE%E3%83%8A%E3%83%BC%E3%82%BA%E5%80%B6%E6%A5%BD%E9%83%A8

## Youtubeでセッションを動画収録しています。
https://www.youtube.com/playlist?list=PL2ojdc4KhtHniIyIUx3AdO621ydzz5zpP

Published in: Technology

Railsで生産性を高めてくれる「Asset Pipeline(アセットパイプライン)」を理解する|【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会 第4回

  1. 1. 【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会 第4回 Ticklecode Yoshinori Kobayashi 1 Railsで生産性を高めてくれる 「Asset Pipeline(アセットパイプライン)」 を理解する。
  2. 2. 2 生まれは 奈良県 です 小林由憲(こばやしよしのり) Twitter: @AsbyuKobayashi ブログ: In Advance Only
  3. 3. ・<link>、<script src=”...”>タグの通信コストが大きい 3 フロント(クライアント)側での問題点 ・CSS、JavaScriptのデータサイズが肥大化 ・CSS、JavaScript、HTMLを直接コーディングしにくい、生産性が悪い ・変更時にブラウザキャッシュがクリアされないため、トラブルが起こる フレームワークで自動化することで負荷を軽減したい Asset Pipeline
  4. 4. 4 Asset Pipeline(アセットパイプライン)とは Asset(アセット) Pipeline(パイプライン) 有用なもの・貴重なものの意 Railsでは、JavaScript・CSS・画像ファイル・ERBなどを示す。 ルート、補給線の意 Railsでは、効率的な方法を提供するための一連の作業
  5. 5. 5 ①コンパ イル ②統合 ③圧縮 ④ダイジ ェスト付 与 Asset Pipelineの流れ コーディン グ ブラウジン グ Exp.CSS の場合 common.css.scss buttons.css.scss responsive.css.scss common.css buttons.css responsive.css application .css application .css ※空白、改 行の除去 application- 39737udj....css① ③② ④ コーディングしやすい状態から、閲覧時は通信コストが効率化 できるように最適化される。
  6. 6. 6 ①コンパイル デフォルトでサポートされている言語は、CSSに代わるSASS、 JavaScriptに代わるCoffeeScript、ERB。 【変換前】 ⇒ 【変換後】 common.css.scss ⇒ common.css foobar.js.erb.coffee ⇒ foobar.js.erb ⇒ foobar.js 従来のCSS、JavaScriptでは記述が難しく、効率が悪い。 効率的に記述できる、Sass、CoffeeScriptなどの高級言語を使用。 これら高級言語は、らネイティブ言語への変換が必要。 【変換前 Sass】 // Regulation Margin @for $i from 1 through 10{ $nm:$i * 5; .mb#{$nm}{ margin-bottom:$nm * 1px !important; } } 【変換後 CSS】 .mb5 { margin-bottom: 5px !important; } .mb10 { margin-bottom: 10px !important; } :
  7. 7. 7 ②統合 1つのファイルにまとめて、通信回数を減らす。 <link>タグの通信コストが大きいため、記述回数を減らす。 【統合前】 common.css buttons.css responsive.css 【統合後】 application.css 【統合前】 <link href="common.css" rel="stylesheet" type="text/css"> <link href="buttons.css" rel="stylesheet" type="text/css"> <link href="responsive.css" rel="stylesheet" type="text/css"> 【統合後】 <link href="application.css" rel="stylesheet" type="text/css">
  8. 8. 8 ③圧縮 改行、空行、コメントを取り除いて、サイズを縮小する。 【圧縮前】 $(window).load(function(){ // スライドイメージを表示 $('.bxslider img').css("visibility","visible"); // スライダーの開始とオプション $('.bxslider').bxSlider({ auto: true, captions:true }); }); 【圧縮後】 $(window).load(function(){$(".bxslider img").css("visibility","visible"),$(".bxslider").bxSlider({auto:!0,captions:!0})});
  9. 9. 9 ④ダイジェスト付与 一度、レンダリング(表示処理)された、CSS・JavaScriptはWeb ブラウザでキャッシュ(一時保存)される。 アセットを修正後は、Webブラウザで修正後を表示さたいために、 キャッシュを確実に破棄させる仕組みが必要。 ファイル名にダイジェストを付加するという方法。 <script src="/js/application- 908e25f4bf641868d8683022a5b62f54.js" ・・・ Rails3.1以前の仕組み <script src="/js/application.js?1309495796" ・・・ ※上手くキャッシュ破棄されないことがあるらしい。
  10. 10. 10 まとめ
  11. 11. 11 個人的な感想 ・フロントツール(Grant、Gulp)よりスッキリしていて統 一感がある。 ・Sass、CoffeeScriptのコーディングに集中できて、「あと はよろしく!」やってくれるイメージ。 ・development環境・production環境の違いなどの理解がも っと必要。
  12. 12. アセットパイプライン | Rails日本語ドキュメント | Ruby STUDIO http://ruby.studio-kingdom.com/rails/guides/asset_pipeline http://railsguides.jp/asset_pipeline.html アセットパイプライン — Rails ガイド 12 Ruby on Rails 4 アプリケーションプログラミング 著者:山田 祥寛 参考情報 http://railsguides.jp/asset_pipeline.html 5.2 SassとAsset Pipeline ― Rails チュートリアル
  13. 13. 13 ご清聴ありがとうございました。

×