Slide 1
Slide 1 text
@lion_man44
AssetPipelineのきもち
Slide 2
Slide 2 text
自己紹介
Slide 3
Slide 3 text
ライオン
フロントエンドを考え生き抜く会所属(現在会員1名)
・Androidの会社に所属するも、何故か常駐先がRubyの案件
Ruby1.8.7からRuby1.9.3のバージョンアッププロダクトを経験
B2B案件に携わり、初めてBackbone.jsを使ったJS開発を行った
その事によりIT業界特有の上司とのコミュニケーションの闇とJSの闇を知る
・次にスタートアップに携わり、資金回収部隊として○○に常駐に行く
そこでCreate.jsを使ったHTML5ゲームに携わる
その事により人間社会のコミュニケーションの闇とCanvasやCSSとAndroid標準ブラウザ
の闇を知る
Slide 4
Slide 4 text
内容 ゆるふわ
(人生 ゆるふわ)
Slide 5
Slide 5 text
我々(人類)はRailに乗る事にした
Slide 6
Slide 6 text
当初、まさかと思われていたRail的な人生
は見事成功した(Rails2系から)
Slide 7
Slide 7 text
そう思っていたが、問題があった
Slide 8
Slide 8 text
「JavaScript」ファイルどうする
Slide 9
Slide 9 text
キッチリ分かれた
model
と
controller
に
比べ、そこら中に散らばるJSファイル
Slide 10
Slide 10 text
そこに現れた一つのGem
Slide 11
Slide 11 text
「Sprockets」
Slide 12
Slide 12 text
主な機能
Slide 13
Slide 13 text
複数のJavaScriptファイルを1つにまとめる
Slide 14
Slide 14 text
利点
Slide 15
Slide 15 text
利点
• 共通コードを切り出し、再利用しやすいフォルダ構成にしやすい
• JavaScriptファイルを1つにまとめる事によってHTTPリクエストの回数
減
• Requireしやすい
Slide 16
Slide 16 text
こいつがあったおかげでRailsのフロントが救われた
Slide 17
Slide 17 text
Railsに組み込まれる(ver
3.1)
Slide 18
Slide 18 text
もはや無かった時代を思い出せない
Slide 19
Slide 19 text
(そんなにRails触ってないけど)
Slide 20
Slide 20 text
ただ、一つ問題があった
Slide 21
Slide 21 text
個別化して読み込みたい
Slide 22
Slide 22 text
めっちょ個別化して読み込みたい
Slide 23
Slide 23 text
1つにはしてくれて良いんだけど、必要無
い部分まではロードしなくていいんだよ^^;
Slide 24
Slide 24 text
そこで考えた
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
やった事
Slide 27
Slide 27 text
やった事リスト
• (前提条件)本来ならapplication.jsしか呼んでない所がほとんどのプロ
ジェクトだと思うが、 a.js,
b.js,
c.js
と3つに分かれていた。
• 「require_tree
.」を削除した
• 「rails-‐assets.org」を使う事にした
• 「javascript_include_tagのasync:
true」を使う事にした
• htmlと同じ構成でファイルを置いた
Slide 28
Slide 28 text
失敗した
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
ドヤ顔 ꉂꉂ (
ˆᴗˆ
)
Slide 32
Slide 32 text
読み込みタイミングをちゃんと調べきれて
いなかった
Slide 33
Slide 33 text
失敗しない為には
Slide 34
Slide 34 text
unless
心配性？
(#心配性じゃない人達へ)
Slide 35
Slide 35 text
「japascript_include_tag
params[:controller]」
をちゃんと使う
Slide 36
Slide 36 text
「Rails.application.config.assets.precompile
=
%w()」
をちゃんと使う
Slide 37
Slide 37 text
「config.assets.debug
=
false」
Slide 38
Slide 38 text
ローカルでちゃんとがっちゃんこしてくれる
Slide 39
Slide 39 text
WebコンソールのElementsで読み込まれ
ている場所をちゃんと見る
Slide 40
Slide 40 text
else
(心配性な方々へ)
Slide 41
Slide 41 text
スクショを撮る
Slide 42
Slide 42 text
以上です、ありがとうございました！