別途で作成したslimをRailsアプリに乗せて見る:開発作業ログ
・デザイナーがgulp利用等別のローカル環境で書いた静的ファイルをrailsに乗せて確認したい時
用の覚え書き。
このシリーズの派生記事です↓
まずはslimディレクトリ構成
こんな感じとします。
/ pages
/ common
/ layouts
/ parts
/ views に既存のslimファイルを突っ込む
app/viewsに上記のslimディレクトリ、ファイルを突っ込みます。
「index.slim」のまま変更しなくても、「index.html.slim」に変更してもOK。
サンプル作った回↓
突っ込んだら実作業。
コントローラをつくる → ルーティング設定する → 作る の3ステップです。作業するのは「ページ」だけで良いのでincludeファイルまでやる必要はないです。
設定①:コントローラをつくる
どのページを表示させるのか決める係のコントローラを作ります。
app/controllersの中にpages_controller.rbというファイルを作成。
class PagesController < ApplicationController
def index
end
end
中身はこんな感じで。
設定②:ルーティングの設定
どのURLで出すよ〜とか決める係に指示出し。
/configにroutes.rbがあるので
Rails.application.routes.draw do
get "/index" => "pages#index"
end
こう書いてみる。
get "URLはこれだよ" => "コントローラ名#アクション名"
コントローラ名は上記で作ったpages_controller.rbのpages。
slimのディレクトリ名と同じにしておく。
アクション名はslimファイルの名前。
つくるのと、足りないものを足してもらう
①②ができたらterminalで
rails generate controller pages index
rails generate controller コントローラ名 アクション名
これを叩くと
route get 'pages/index'
invoke slim
exist app/views/pages
conflict app/views/pages/index.html.slim
Overwrite 〜〜〜/app/views/pages/index.html.slim? (enter "h" for help)
と聞かれるので「n」(上書きしないよ)と打つと
skip app/views/pages/index.html.slim
invoke test_unit
create test/controllers/pages_controller_test.rb
invoke helper
create app/helpers/pages_helper.rb
invoke test_unit
invoke assets
invoke coffee
create app/assets/javascripts/pages.coffee
invoke scss
create app/assets/stylesheets/pages.scss
なんか作ってくれる。
今回は既存のslim/scssファイルを乗せる作業だからscssはあとで差し替え。
元ファイルがindex.slimのままの場合は自動で出来たindex.html.slimを削除しておくこと。
rails s
http://0.0.0.0:3000/indexを叩くと表示されている状態になる。
scss反映されていない場合はパスが違う。include使っている場合はエラーが出る。
疑問:slimのinclude使えないの?
そのままじゃ使えない。
Gemfileにslimを追加
# Use Slim
gem 'slim'
bundle install
.rbに記載
require 'slim/include'
これでincludeが使えるようになる。どのrbファイルに書くのがベストなのかは不明。とりあえず
module ApplicationHelper
require 'slim/include'
end
こんな感じでapplication_helper.rbに入れたよ
rails s
で確認。
なんかエラーでた(パスの変更)
ActionView::Template::Error ('_head.slim' not found in アプリのある場所:.):
_head.slimがないよ〜!と言われた。
include _head
を
include app/views/common/_head
に変更したら表示された。
けど・・長くない・・?
gulpみたいに指定の複数のdirから勝手に探してくれないかな・・調べます。
他のassetsについては以下参照↓
この記事が気に入ったらサポートをしてみませんか?