Ruby
Rails

Ruby on RailsでWebアプリケーション作成してからブラウザに表示するまでの最短ルート

More than 1 year has passed since last update.

はじめに

RubyやRailsなどの開発環境導入は済んでいる前提で進めていきます。
自分用のメモのつもりで書いていますが、質問やわかりにくいところがあれば訂正します。
Qiita初投稿、Rails勉強中なのでお許しください。

実行環境

OS:macOS Sierra 10.12.6
Rails 4.2.6
Ruby 2.3.1

アプリ作成

アプリケーションを作るディレクトリの中で、アプリの雛型を作成します。

$ rails new sample -d mysql

今回作るアプリ名はsampleとします。ここは各自の作りたいアプリの名前に変えてください。
この時、-d mysqlと打つことでDBを標準のSQLiteからMySQLに変更しています。(MySQLの方が実行速度が速いらしい。)
その後、アプリケーションのディレクトリに入ります。

$ cd sample

その中にGemfileというものがあるので、これに追記します。
これはアプリケーションを開発するにあたって利用するRubyGems(以下gem)という、Rubyのライブラリのようなものを設定するためのものです。
このファイルの最後に以下のように追記します。

gem 'pry-rails' #デバッグ用gem
gem 'devise' #ログイン機能実装
gem 'paperclip' #画像アップロード
gem 'kaminari' #ページネーション実装
gem 'bootstrap-sass' #Bootstrap導入
gem 'therubyracer' #以下はレイアウトをいじるためのgem。詳しくは各自調べてください。
gem 'twitter-bootstrap-rails'
gem 'bootstrap-material-design'

他にこのgemはほぼ必須だよ!ってgemがあったら教えてください。

$ bundle install

Gemfileは追記しただけでは動作しません。保存したのを確認してbundle installすることで、実際にgemをインストールします。

$ bundle exec rake db:create

上記コマンドでDBを作成します。

Bootstrap導入

app/assets/stylesheetsapp/assets/javascriptsの中にそれぞれapplication.scssapplication.jsというファイルがあるのでそれぞれ追記します。

application.scss
  @import "bootstrap-sprockets";
  @import "bootstrap";
application.js
  //= require bootstrap-sprockets

その後、application.html.erbにコンポーネントを対応させるために以下のコマンドを実行します。

$ rails g bootstrap:layout application

あとはBootstrapのビューファイルを用意するだけでOKです。

最後に以下のコマンドを実行しておきます。詳しくは後ほど解説します。
この時のarticleは概念名で、その後ろはカラム名ですので各自作りたいアプリに合わせてください。

$ bundle exec rails g scaffold article title:string content:text

devise導入

$ bundle exec rails g devise:install #deviseで使うコントローラのインストールやルーティングの変更?
$ bundle exec rails g devise user #userモデルを作成
$ bundle exec rake db:migrate #レコードを作成
$ bundle exec rails g devise:views #viewファイルのインストール

先ほど導入したgemの1つ、deviseを使うためのコマンドです。

devise:installした時にいくつか文章が出ていると思うので、その通りに作業を進めます。

config/environments/development.rbを以下のように編集してください。

config/environments/development.rb
Rails.application.configure do
#省略

  config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
end

config/routes.rbを以下のように編集してください。

config/routes.rb
Rails.application.routes.draw do
  devise_for :users
  root to: "articles#index"
  resources :articles
end

この時、順番が重要になってきますのでdevise_for,root,resourcesの順番で記述されているか確認してください。順番が違うとルーティングエラーになると思いますので、書き換えてください。

ログイン時の一時的に出すメッセージをフラッシュメッセージといいます。
これを導入するために、<%= notice %>、<%= alert %>を通常は記入するのですが、今回はtwitter-bootstrap-railsというCSSフレームワークのgemを利用しているため、ビューヘルパーの<%= bootstrap_flash %>を記述します。

application.html.erb
<!DOCTYPE html>
#省略
  <body>

    <%= bootstrap_flash %>
    <%= yield %>

  </body>
#省略

ローカル環境で表示してみる

$ bundle exec rails g scaffold article title:string content:text #これは実行しなくていいです。

先ほど実行したscaffoldコマンドについて説明します。
scaffoldコマンドとは、railsに備わったコマンドで、ある概念に対するルーティング、コントローラー、ビュー、モデルとテーブルの記述やファイル作成を一度に自動でやってくれます。他のコマンドを利用して、controllerやmodelを個別に作成する手間を省けます。この時作成されるルーティングは、railsの定める7つのアクションになります。
ちなみにこのコマンドを実行してからdevise:installを行わないとroutes.rbの中身のdevise_forresourcesの自動記述の順番が変わってルーティングエラーになると思います。

今回は、articleという概念にstring型のtitleというカラムとtext型のcontentというカラムを生成しています。

その後、アプリケーションのディレクトリにて以下のコマンドを実行します。

$ bundle exec rake db:migrate
$ rails s

これでマイグレーションファイルが実行され、サーバーが立ち上がりました。

ブラウザにlocalhost:3000と入力して表示されればOKです。

今日はここまで。