見出し画像

別途で作成した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については以下参照↓


この記事が気に入ったらサポートをしてみませんか?