blog
これから始める Ruby on Rails シリーズRuby on Railsで静的ページを作る
この記事は書かれてから1年以上経過しており、内容が古い場合があります。
はじめに
前回の記事でRuby on Railsのscaffoldを使ったデモアプリを作りました。今回は静的なページを作ってみます。詳しい内容はRuby on Rails チュートリアルの第3章を参考にしています。この記事では実行結果のみを掲載します。
コントローラーを作る
$ rails generate controllerコマンドを使い、StaticPagesという名前のコントローラーとhome,helpという名前のViewを作ります。
$ rails generate controller StaticPages home help
create app/controllers/static_pages_controller.rb
route get 'static_pages/help'
route get 'static_pages/home'
invoke erb
create app/views/static_pages
create app/views/static_pages/home.html.erb
create app/views/static_pages/help.html.erb
invoke test_unit
create test/controllers/static_pages_controller_test.rb
invoke helper
create app/helpers/static_pages_helper.rb
invoke test_unit
create test/helpers/static_pages_helper_test.rb
invoke assets
invoke coffee
create app/assets/javascripts/static_pages.js.coffee
invoke scss
create app/assets/stylesheets/static_pages.css.scss
静的ページなので、scaffoldと違い、DBのマイグレーションは不要です。
サーバーの起動
まずは作成した静的ページが表示されるかどうかチェックしましょう。 サーバーを起動します。
$ rails s
静的ページにアクセスする
URLはhttp://127.0.0.1:3000/static_pages/homeになります。
以下のように表示されていれば成功です。
ルーティングとは
Ruby on RailsではURLとパラメータを紐付けるための仕組みをルーティングと言います。
静的ページも例外ではありません。
ルーティングを確認する
先ほど作成したStaticPagesコントローラーのルーティングを確認してみましょう。
２つのルーティングが設定されているはずです。
$ rake routes
Prefix Verb URI Pattern Controller#Action
static_pages_home GET /static_pages/home(.:format) static_pages#home
static_pages_help GET /static_pages/help(.:format) static_pages#help
ルーティングが設定されているファイル
ルーティングはconfigディレクトリ内のroutes.rbに記述されています。 下記2行目と3行目が静的ページのルーティングです。
Rails.application.routes.draw do
get 'static_pages/home'
get 'static_pages/help'
# The priority is based upon order of creation: first created -> highest priority.
# See how all your routes lay out with "rake routes".
# You can have the root of your site routed with "root"
# root 'welcome#index'
# Example of regular route:
# get 'products/:id' => 'catalog#view'
# Example of named route that can be invoked with purchase_url(id: product.id)
# get 'products/:id/purchase' => 'catalog#purchase', as: :purchase
# Example resource route (maps HTTP verbs to controller actions automatically):
# resources :products
# Example resource route with options:
# resources :products do
# member do
# get 'short'
# post 'toggle'
# end
#
# collection do
# get 'sold'
# end
# end
# Example resource route with sub-resources:
# resources :products do
# resources :comments, :sales
# resource :seller
# end
# Example resource route with more complex sub-resources:
# resources :products do
# resources :comments
# resources :sales do
# get 'recent', on: :collection
# end
# end
# Example resource route with concerns:
# concern :toggleable do
# post 'toggle'
# end
# resources :posts, concerns: :toggleable
# resources :photos, concerns: :toggleable
# Example resource route within a namespace:
# namespace :admin do
# # Directs /admin/products/* to Admin::ProductsController
# # (app/controllers/admin/products_controller.rb)
# resources :products
# end
end
config/
route.rbの他にconfigディレクトリの中には以下のようなファイルが入っています。
.
├── application.rb
├── boot.rb
├── database.yml
├── environment.rb
├── environments
│ ├── development.rb
│ ├── production.rb
│ └── test.rb
├── initializers
│ ├── assets.rb
│ ├── backtrace_silencers.rb
│ ├── cookies_serializer.rb
│ ├── filter_parameter_logging.rb
│ ├── inflections.rb
│ ├── mime_types.rb
│ ├── session_store.rb
│ └── wrap_parameters.rb
├── locales
│ └── en.yml
├── routes.rb
└── secrets.yml
Rakeとは
RakeはRuby on Railsに関わる様々なタスクをコマンドラインから呼び出すことができるコマンドです。 下記コマンドでどんなことができるかチェックすることができます。
$ rake --tasks
rake about # List versions of all Rails frameworks and the environment
rake assets:clean[keep] # Remove old compiled assets
rake assets:clobber # Remove compiled assets
rake assets:environment # Load asset compile environment
rake assets:precompile # Compile all the assets named in config.assets.precompile
rake cache_digests:dependencies # Lookup first-level dependencies for TEMPLATE (like messages/show or comments/_comment.html)
rake cache_digests:nested_dependencies # Lookup nested dependencies for TEMPLATE (like messages/show or comments/_comment.html)
rake db:create # Creates the database from DATABASE_URL or config/database.yml for the current RAILS_ENV (use db:create:all to cre...
rake db:drop # Drops the database from DATABASE_URL or config/database.yml for the current RAILS_ENV (use db:drop:all to drop al...
rake db:fixtures:load # Load fixtures into the current environment's database
rake db:migrate # Migrate the database (options: VERSION=x, VERBOSE=false, SCOPE=blog)
rake db:migrate:status # Display status of migrations
rake db:rollback # Rolls the schema back to the previous version (specify steps w/ STEP=n)
rake db:schema:cache:clear # Clear a db/schema_cache.dump file
rake db:schema:cache:dump # Create a db/schema_cache.dump file
rake db:schema:dump # Create a db/schema.rb file that is portable against any DB supported by AR
rake db:schema:load # Load a schema.rb file into the database
rake db:seed # Load the seed data from db/seeds.rb
rake db:setup # Create the database, load the schema, and initialize with the seed data (use db:reset to also drop the database f...
rake db:structure:dump # Dump the database structure to db/structure.sql
rake db:version # Retrieves the current schema version number
rake doc:app # Generate docs for the app -- also available doc:rails, doc:guides (options: TEMPLATE=/rdoc-template.rb, TITLE="Cu...
rake log:clear # Truncates all *.log files in log/ to zero bytes (specify which logs with LOGS=test,development)
rake middleware # Prints out your Rack middleware stack
rake notes # Enumerate all annotations (use notes:optimize, :fixme, :todo for focus)
rake notes:custom # Enumerate a custom annotation, specify with ANNOTATION=CUSTOM
rake rails:template # Applies the template supplied by LOCATION=(/path/to/template) or URL
rake rails:update # Update configs and some other initially generated files (or use just update:configs or update:bin)
rake routes # Print out all defined routes in match order, with names
rake secret # Generate a cryptographically secure secret key (this is typically used to generate a secret for cookie sessions)
rake stats # Report code statistics (KLOCs, etc) from the application
rake test # Runs test:units, test:functionals, test:generators, test:integration together
rake test:all # Run tests quickly by merging all types and not resetting db
rake test:all:db # Run tests quickly, but also reset db
rake time:zones:all # Displays all time zones, also available: time:zones:us, time:zones:local -- filter with OFFSET parameter, e.g., O...
rake tmp:clear # Clear session, cache, and socket files from tmp/ (narrow w/ tmp:sessions:clear, tmp:cache:clear, tmp:sockets:clear)
rake tmp:create # Creates tmp directories for sessions, cache, sockets, and pids
View
次にViewについてです。Viewはappディレクトリのviewsの中に入っています。StaticPagesコントローラーのViewはapp/views/static_pages/にあるhome.html.erbとhelp.html.erbです。
Viewの中身
home.html.erbの中身はこのようになっています。
<h1>StaticPages#home</h1>
<p>Find me in app/views/static_pages/home.html.erb</p>
.erbとはembedded Rubyのことで、HTML内に<% RubyCode %>ようにRubyのコードを含めることができます。このファイルを編集することで静的ページを作ることができます。
app/
app/の中には他にも以下のようなファイルが格納されています。
.
├── assets
│ ├── images
│ ├── javascripts
│ │ ├── application.js
│ │ └── static_pages.js.coffee
│ └── stylesheets
│ ├── application.css
│ └── static_pages.css.scss
├── controllers
│ ├── application_controller.rb
│ ├── concerns
│ └── static_pages_controller.rb
├── helpers
│ ├── application_helper.rb
│ └── static_pages_helper.rb
├── mailers
├── models
│ └── concerns
└── views
├── layouts
│ └── application.html.erb
└── static_pages
├── help.html.erb
└── home.html.erb
静的ページのCSS（SCSS）
HTMLの編集場所は理解したわけですが、CSSも同様にappフォルダ内に作られています。app/view/assets/stylesheets/の中にあるstatic_pages.css.scssが今回作成したStaticPages向けのCSSになります。ここにCSSを書くことで、StaticPagesコントローラーで制御される静的ページに反映させることができます。
以上、静的ページに関するメモでした。