Mac

Ruby on Railsでアプリを作ってみる

まず環境が整っていることを前提としておきますので割愛させていただきます。
ruby 2.7.0
rails 6.0.2
sublimetext
mysql(SequelPro)

アプリの作成

$ rails new 〇〇 -d mysql
と入力しましょう!
〇〇は作りたいアプリ名です。
このとき、作りたいフォルダに
$ cd 〇〇
で移動しておいてください。
作成には時間かかりますので、〜$って入力できるようになるまでは触らないようにしましょう!

bundleのインストールやアップデート

私はサブライムテキストを使用しているので、コマンド+Oでfinderから作ったアプリを開きます。
Gemfileを開いて必要なGemを書いてバージョンを合わせたりします。

ターミナルで
$ cd アプリ名
で作ったアプリへ移動します。
確認したいときは、
$ pwd
で確認してください。

$ bundle update
$ bundle install
をします。
これ何回やったとしても問題が怒るわけではありませんから、変更とかしていないけど、心配な人はインストールしておきましょう。

データベース作成

$ rake db:create
とすると、すぐに入力できるようになって「作成したの?」って思いますけど、作成されているはずです。
SequelProを開いて確認しましょう。

これでひとまずアプリが表示できるようになりました。
ブラウザでlocalhost:3000ってすると、
「Yay! You’re on Rails!」って表示されています。
さてボチボチ作っていきましょう!

アプリの概要

ツイートできる簡単なアプリを開発してみます。

コントローラの作成

$ rails g controller tweets
と入力してツイートコントローラを作成します。
もし間違えて作成してしまった場合は、
$ rails d controller 〇〇
とすると削除されます。
ちなみに、gとdはgenerateとdestroyの意味です。

コントローラの編集

class TweetsController < ApplicationController
def index
end

end
このように追記しましょう!

ルートの編集

config/route.rbを
Rails.application.routes.draw do
get “tweets” => “tweets#index”
end
と追記します。

ビューの作成

app/views/tweetsを右クリックして、
new fileでindex.html.erbを作成します。

表示の確認

ブラウザで、localhost:3000/tweetsにアクセスすると、
ルート→コントローラ→ビューをたどって表示されるようになります。
index.html.erbに適当に入力して、
ターミナルで
$ rails s
と入力して、ブラウザをリロードして表示されるかやってみましょう!
これでテストサーバー起動まで確認できました!

モデルの作成

$ rails g model tweet
と入力してツイートモデルを作成します。

マイグレーションファイルの作成

この段階ではまだデータベースと関連づけされていません。
db/migrate/2020XXXXXXXXXXXX_create_tweets.rb
を開きます。

class CreateTweets < ActiveRecord::Migration[6.0]
def change
create_table :tweets do |t|
t.string :name
t.text :text
t.text :image

t.timestamps
end
end
end

と3行追加します。
$ rake db:migrate
と実行すると、データベースに関連づけされるようになります!

ここでもし間違えて実行してしまったという場合は
rake db:rollback
と実行すると1つ戻ることができます。
絶対にファイルを削除しないでください。

bootstrapを導入する

gemfileに以下を追記して
gem ‘uglifier’
gem ‘jquery-rails’
gem ‘bootstrap’


$ bundle install  します。

config/environments/production.rbに、本番環境でJSファイルが圧縮されるように追記します。
config.assets.js_compressor = :uglifier

assetsの下にjavascriptsフォルダを作り、application.jsファイルを作成して、記述します。
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .


assets/config/manifest.jsに以下を追記
//= link_directory ../javascripts .js

app/assets/stylesheets/application.css
上記のcssファイルをscssファイルにリネームして、
以下を追記
@import “bootstrap”;

これでブートストラップだけでなく、jQueryも使えるようになりました。
ブートストラップはこちら
アクセスして、テストしてみましょう!

投稿画面の作成

route.rbに
get “tweets/new” => “tweets#new”
を追記

tweets_controller.rbに
def new
end

追記

def index
@tweets = Tweet.all
end
後々使うので追記していきます。

app/views/tweetsにnew.html.erbを作ります。

<%= form_tag(“/tweets”, method: :post) do %>
〜〜〜〜
〜〜〜〜
<% end %>

と書いていきます。
localhost:3000/tweets/new
にアクセスできたらOK!

ログイン機能の実装

gemfileに
gem “devise”
を追記し、
$ bundle install
$ rails g devise:install
$ rails g devise user

ここですぐにマイグレートしたいところなんですけど、
Mysql2::Error: Specified key was too long; max key length is 767 bytes
ってエラーが走るんです。
データベースを確認するとuserテーブルは作成されているけど、
諸々調べた結果、
2020XXXXXXXXXX_devise_create_users.rbの最後の方の
add_index :users, :email, unique: true
add_index :users, :reset_password_token, unique: true
をコメントアウトしてから
$ rake db:migrate
するとエラーがなくなった。
エラーをどうにかしたいということであれば緊急対処としては一番オススメ。

$ rails g devise:views
でdeviseのビューファイルを作る。

Herokuで公開しよう

アプリのデザイン等々は長くなってしまうので、割愛させていただきます。

ここからヘロクの登録をします。
仮登録をしたらメールが届きますので、パスワードを設定してアカウントを作りましょう!

HerokuはデフォルトがPostgreSQLなので、Mysql使いたい人はクレジットカードを登録しないといけません。

コマンドツールを使えるようにする

ここからダウンロードしましょう
とりあえずパッケージ開いてOKしていき、インストールしましょう。

ターミナルからログイン

アップロードしたいアプリのディレクトリで
$ heroku login

emailやパスワードを求められると思うので、入力に間違いなければ
Logged in as (Emailアドレス)
となります。

rails_12factorを設定する

Gemfileを開いて以下を追記します。
group :production do
gem “rails_12factor”
end

一旦gemfile.lockを削除して
$ bundle install

gitコマンドをしていく

$ git init
$ git add .
$ git commit -m “init commit”

initでリポジトリを作成して、
add . でファイルを指定します。この時、dとドットの間に半角スペースがあることに気をつけてください。
commitでコミットします。今回はinit commitとコメントを残しておきます。

herokuコマンドをしていく

$ heroku create 〇〇
〇〇にはアプリ名を入れてください。
もし間違えたり変更したいときは、
$ heroku rename 新しいアプリ名
としてください。

データベースをMysqlに切り替える

$ heroku addons:add cleardb
=> Adding 〜〜〜〜って感じになればOK!

$ heroku config | grep CLEARDB_DATABASE_URL
=> CLEARDB_DATABASE_URL: mysql://〜〜〜
となると思うので、mysql://〜〜〜はコピーしておきます。

$ heroku addons:detach DATABASE -a アプリ名
これで、一旦解除して

$ heroku config:add DATABASE_URL=”mysql2:〜〜”
と、
先ほどmysql:〜〜だったのをmysql2:〜〜にしてデータベース情報を更新します。

=> Setting DATABASE_URL〜〜〜
みたいにくればOKです!

git pushする

$ git push heroku master
これでアプリが更新されます。

最後にマイグレート

$ heroku run rake db:migrate
でマイグレートすればOK!

https://アプリ名.herokuapp.com
にアクセスしてみましょう!

補足:SequelProに接続する

$ heroku config –app アプリ名
とすると
mysql2://〜〜〜と返ってきます。
ここ大事です。
mysql2://ユーザー名:パスワード@ホスト名/データベース?reconnect=true
これをSequelProの標準で入力します。
(ポートは空でいいです)
これで接続できます。

補足2:変更を加えた場合

$ git add -u(指定せずに全部を変更できる$ git add .でも良い)
$ git commit -m “〜〜”
$ git push heroku master

たったこれだけ!

補足3:データベースの初期値を設定する

ローカルで開発していた際に残してあるデータを本番環境でも使いたい(初期値として使いたい)ってこともありますよね。
その場合、まずdb/seed.rbを開いて以下を追記します。

User.create(email: “〜〜@〜〜”, password: “〜〜〜〜”, “nickname: “〜〜”)

これでgitしていきます。
$ git add db/seed.rb
$ git commit -m “〜〜〜”
$ git push heroku master
$ heroku run rake db:seed

はい、これだけ!

ABOUT ME
kininaru
野球が好き 地方移住者 システム系の仕事してます