3-1 Sprockets

　３章は、アセット。わからん。まずはSprocketsの動きを学ぶことで、Asset Pipelineの本質を知る。わからん。

　SprocketsはRackベースのアセットパッケージングツールなんだけど、詳しくは10章で。そうすか。

アセットファイルにアクセスするためのパスを管理する
アセットのコンパイル
アセットファイル同士の依存性を管理する

アセットファイルのアクセスパスを管理する

　まずはrails generateを使わずに進めるみたい。sprockets_sampleディレクトリを作ってrails init。これだとGemfileだけ作られるみたい。

bundle init

　その後、Gemfileにsprocketsを追加してインストール。

~/work/sprockets_sample$bundle install --path .bundle

ここでは--pathをつけてインストールしたパッケージがこのディレクトリ内でのみ使えるように指定している。システム全体で使えるようにするには、--systemオプションをつける。.bundleは設定用のディレクトリ。一般的にhiddenにするのかな。
　Railsの設定ファイルであるconfig.ruを作成し、下記を入力する。

require 'sprockets'
map '/assets' do #sprockets利用宣言
environment = Sprockets::Environment.new
environment.append_path 'assets/javascripts' #このディレクトリ内のアセットファイル
environment.append_path 'assets/stylesheets' #このディレクトリ内のアセットファイル
run environment
end
map '/' do
run Proc.new {|env| [200, {"Content-Type" => "text/html"}, ["Hello World"]]}
end

　で、やっとsprocketsの説明が出てきた。アセットファイルを配置するパスを管理して一つのディレクトリにあるようにアクセスを可能とする機能だそう。つーか、こういうの先に言ってくれないと何の勉強をしているかもわからず辛い。

　どうでもいいけど、眠いとタイプミスだらけであとから無駄に時間を使うことに気づいた。眠いときは寝るか、概要を理解するために本をさらっと読むくらいにしようかな。

Railsでの設定方法

　Railsの〜/assets内はデフォルトでアセットパスが登録されているので設定不要で利用できる。

　足りない場合はconfig/application.rbにアセットパスを追加する。例えば、ルートのconponentsディレクトリをアセットパスに追加する場合はこんな感じ。

class Application < Rails::Application
config.assets.path << Rails.root.join("conponents")
end

コンパイルとAsset Pipeline

　SprocketsはCoffeeScriptとSassっつーJavaScriptとCSSが簡単に書けるスクリプト言語をコンパイルでき、Railsで解釈できるようになっているようです。jsとかCSSってもう古いんですかね。初めてホームページというのを作ったときはhtmlだけで作ったような気がします。その後CSSも使って、便利だけど頭が混乱しました。今はもっと混乱しています。

　Gemfileに必要なパッケージの組み込み。実際にRailsで利用する場合は、右のパッケージを使う。あとJavaScriptが動作する環境が必要。

gem "sprockets"
gem "coffee-script" #coffee-rails
gem "therubyracer"
gem "sass" #sass-rails

　config.ruにはrequireを追加。

require 'coffee-script'
require 'therubyracer'
require 'sass'

　therubyracerはJavaScriptをRuby環境で実行できるようにするために必要なんだそうな。v8エンジンであると説明があるけど、なんだかわからん。Google製のJavaScriptエンジンだって。そうすか。

　このあたりの話で何度か見たことのあるNode.jsは、サーバー側で動作するJavaScript環境を提供するみたい。一応メモ。同じJavaScriptでどうしてサーバーとクライアントが別なのかようわからんけど、今はそういうもんだとしておこう。

　で、coffeeとsassをのファイルをそれぞれ作りアクセス確認する。

# shout.js.coffee
alert("Hellooooooooooo!!!")
shout = ->

　上のcoffeeで書かれたものがブラウザに渡されたときには下記のようなjs書式に変換されている。

(function() {
var shout; shout = function() {
return alert("Hellooooooooooo!!!");
}; }).call(this);

　sassの方も同様。
　でも、CSSはぼんやりわかってもJavaScriptなんてなにも知らないんですけど。
　あ、でもここで重要な説明が。Sprocketsがファイル内容を変換して適切な形にしてレスポンスすること、これがAsset Pipelineなんだって！やっと！そうすか！
　何の説明かわからずに話を聞いているのって、全然頭に入らない。頭が整理されない。辛い。からい、じゃないすよ。

依存性の管理

依存関係のあるアセットファイルでは、先に読み込んでおくべきファイルを下記のように指定することができます。依存関係を管理する独自の構文のことをディレクティブと呼ぶ。

//= require jquery #オプションはディレクティブと引数。

サポートされているディレクティブについては、//= require jquery参照する。

マニフェストファイル

アクセスの度にファイルからいろいろなファイルが呼び出されると効率が悪いので、jsやCSSを事前に１ファイルに渡して提供している。この仲介をしているのがマニフェストファイル。
　Railsでアプリケーションを新規作成した場合にデフォルトで用意されるマニフェストファイルは以下の２点。

app/assets/javascripts/application.js
app/assets/stylesheets/application.css

中にはこのファイル自分自身と、同じディレクトリにあるファイルが自動で読み込まれる設定が書かれている。

Railsにおけるdevelopment環境とproduction環境の違い

production環境ではパフォーマンス重視、でも開発環境では管理しやすさが大事。
　ヘルパーメソッド(stylesheet_link_tag等)を利用すると、ディレクティブで指定した順にファイルが読み込まれる。（ちなみにCSSは後から読み込まれた設定が有効。）
　開発環境ではこの読み込まれた各リンクが個別にhtmlに書き出され、production環境では１ファイルにまとまって読み込まれる。
　強制的にproduction環境を再現する場合は、下記をfalseに変更する。

#config/environments/development.rb
config.assets.debug = true # ->false

マニフェストファイルのプリコンパイル

Sprocketsでは、アクセスごとにコンパイルを行います。でもこれは非効率的なため、Railsにはプリコンパイルという仕組みが用意されている。事前にコンパイルして静的ファイルとして用意して高速なレスポンスを実現します。
　プリコンパイルは下記で実行できる。

.bin/rake assets:precompile

デプロイするときはあれやこれや注意しなさいと書いてあるけど、まだよくわからないのでそのときにp103を見返そう。
　その他、必要に応じて機能ごとにマニフェストファイルを作ったり、ファイルを縮小化して読み込み効率を上げるminifyとかってことが書かれている。

　まずいぞ。まずいぞ。こんなペースだと、演習しながらで１年かかっちゃうぞ。

はるめも - halmemo -

2014年6月30日月曜日