アセットパイプラインにフォントも加える

いつの間にか、DMM Sampler（18歳未満は見ちゃダメ！）のアクセスが、ここ1ヶ月で右肩上がりになっておりました。（9月頃まではほぼ0だった）
とは言っても累計3,000アクセスぐらいなんだけど。

で、Google Analyticsで見てみると半分ぐらいはスマートフォン（iOS、Android）からのアクセスのようです。
が、DMM Samplerは動画の再生をFlowplayerで行っているため（以前の記事参照）、Flashが必須なのですがスマートフォン用のブラウザには対応していないみたいなので、多分見れて無いんじゃないかと思いました。

そこで今回スマートフォン向けに、動画再生はHTML5の<video>で行うページを作りました！！

ただし、PC向けのページでは動画の自動連続再生をしていますが、それは実装していません。（というかやってみたけど動かなかった・・・）

今回行った、スマートフォン向けページの対応を覚書きしておきます。

fontsのプリコンパイル

railsプロジェクト構成はこんなかんじ。

Rails.root
   |--app
      |--assets
         |--stylesheets  // スタイルシート格納
             |--fonts       // フォントファイルを格納

スタイルシート内でのフォントの指定は以下のとおり・・・

/* app/assets/stylesheet/sampler.css */
@font-face {
   font-family: 'Glyphicons Halflings Sampler';
     src: url('fonts/glyphicons-halflings-regular.eot');
     src: url('fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('fonts/glyphicons-halflings-regular.woff') format('woff'), url('fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

これだと以前の記事のとおり、本番環境ではオリジナルファイルが無くなるから動かないんじゃ？と思うのですが動いてる。
が、他のファイルに合わせて直しておこう。

/* app/assets/stylesheet/sampler.css.scss.erb */
@font-face {
   font-family: 'Glyphicons Halflings Sampler';
   src: url(asset-path('fonts/glyphicons-halflings-regular.eot'));
   src: url(asset-path('fonts/glyphicons-halflings-regular.eot?#iefix')) format('embedded-opentype'), url(asset-path('fonts/glyphicons-halflings-regular.woff')) format('woff'), url(asset-path('fonts/glyphicons-halflings-regular.ttf')) format('truetype'), url(asset-path('fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular')) format('svg');
}

asset-pathを使うためにerbファイル化しただけですね。

最初はネットの情報を鵜呑みにしてapplication.rbやら設定していました。
Rails4以降はapp/asset配下はすべてアセットパイプラインとなり、かつjs、css以外のファイルはすべてプリコンパイル対象なので特に設定する必要は無いですね。

Rails 4 で assets に font を追加する方法 
Rails 4 with font-face · Issue #239 · thoughtbot/bourbon · GitHub
設定ファイル(config) - - Railsドキュメント 

タブレットからのアクセスはPCと同じページを出す

今回スマートフォン用ページへの振り分けは、おなじみのJpmobileを利用しました。
設定はgemを入れて、application_controller.rbに1行追加するだけでめちゃめちゃ簡単です。

#app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  include Jpmobile::ViewSelector
end

Jpmobile::ViewSelectorをincludeするだけ。
そしてviewとしてindex_smart_phone.html.erbのように、「レンダリングするview名_smart_phone」となるファイルを用意することで、スマートフォンからのアクセス時はそちらのhtmlが出力されるようになる。

だがしかし！
DMM Samplerの特徴を考えた場合、ある程度画面の大きいタブレットからのアクセス時はPC用のページを出したほうがユーザは使いやすいだろうと考えました。
が、上記の設定ではタブレットだろうとスマートフォン用のページが出力されます。

どうすればいいんだろうなぁと思い検索してみると・・・
ズバリそのものがありました。
http://prog.hateblo.jp/entry/2012/09/26/130501

application_controller.rbを以下の通り設定。

#app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  include Jpmobile::ViewSelector
  before_filter :disable_mobile_view_if_tablet

  def disable_mobile_view_if_tablet
    if request.mobile && request.mobile.tablet?
      disable_mobile_view!
    end
  end
end

振り分け前に（before_filterで設定）disable_mobile_view_if_tabletというメソッドを実行します。
メソッド内ではリクエストしてきたデバイスがモバイルであり、かつタブレットである場合にスマートフォン用ページの出力を無効化（＝通常ページを出力）しています。
ちなみにrequest変数はRack::Requestとして定義されたもので、ユーザのリクエスト情報を格納しているようです。

GitHub - jpmobile/jpmobile: A Rails plugin for Japanese mobile-phones
Rails 3.2 + jpmobile でスマートフォン対応したみた - 彼女からは、おいちゃんと呼ばれています 
Route 477