shonen.hateblo.jp

やったこと,しらべたことを書く.

Ruby on Rails アプリ製作の基本的な手順

Railsの勉強としていくつかのwebappを作ったときのノートを残していたので,ブログに載せます.

ブログを書くのを後回しにしていたら年が明けてしまった.

記事の目的

作るもの

  • mygist という名前のウェブアプリ.
  • 機能は次の2つ
    • 投稿された記事の一覧を表示
    • 記事を新たに投稿する

RubyHTML5が分かっていれば出来る,という物では無かったので大変でした…

前提

  • 環境構築済みであること
    • railsruby-devはもちろん,それ以外のパッケージについてもエラーが出たらその都度エラーを読んで,必要なものをインストールする.
  • 詳しい説明はしない.
    • 流れを把握することが目的であるため.
    • 他のウェブサイトが詳しい.記事末尾の参考サイトを参照してください.
  • bash on ubuntu で操作を行う.

やる

準備

  • プロジェクト作成
rails new rails_gist
  • bootstrapGemfile に追加
gem 'bootstrap'
gem 'jquery-rails'
  • いつもの.必要なGemを一括インストールする.
bundle install
  • サーバを立てる.デフォルトでは localhost:3000にアクセスできる.
rails server

controller

  • コントローラを作る.
rails generate controller mygist
  • app/controllers/mygist_controller.rb を開き,アクションを定義する.
  • 名前は予約語で無ければ何を指定しても構わないが,以下の7つが基本.
class MygistController < ApplicationController
    def index
        # 一覧を表示
    end
    def new
        # 新規作成するためのフォームを返す
    end
    def create
        # 作成する.(POST)
    end
    def show
        # 特定のコンテンツを表示する.
    end
    def edit
        # 編集するためのHTMLフォームを1つ返す
    end
    def update
        # 特定のコンテンツを更新する
    end
    def destroy
        # 特定のコンテンツを削除する.
    end
end
  • config/routes.rb でルーティングを設定する.
  • get "mygist/" => "mygist#index" …でも良いけれど,こちらの記法を試す.

  • http://guides.rubyonrails.org/routing.html の通り,この1行で7つのルーティングが作成される.

  • 定義するアクション名の統一に役立ちそう.
Rails.application.routes.draw do
  resources :mygist
end

view

  • …bootstrapが適応するのを忘れていたので適応する.
  • app/assets/stylesheets
  • application.cssscss にする.
  • @import 'bootstrap' を加える.

  • app/views/mygist/ に view を作成する.

  • ファイル名は #{viewname}.html.erb
  • とりあえず, index new の 2つのviewを作っておく.

  • erbの中身を書き込んでいく.まずはindexから.

  • デザインはbootstrapで適当に書けばそれっぽくなる気がする
  • 軽い気持ちでbootstrap4に移行したらぜんぜん違う…

    • panel -> card とか.
  • index.html.erb

<div class="container">
    <h2>my gist</h2>
    <ul class="nav nav-pills" style="margin: 20px;">
        <li class="nav_item"><a class="nav-link active" href="./mygist/new">new</a></li>
    </ul>

    <div class="container">
        <div class="card">
            <div class="card-header">
                title
            </div>
            <div class="card-block">
                <pre style="margin: 10px;">contents</pre>
                <ul class="nav nav-pills">
                    <li class="nav_item"><a class="nav-link" href="#">edit</a></li>
                    <li class="nav_item"><a class="nav-link" href="#">remove</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
  • new.html.erb
<div class="container">
    <h2>my gist</h2>
    <ul class="nav nav-pills" style="margin: 20px;">
        <li class="nav_item"><a class="nav-link" href="../">back</a></li>
    </ul>

    <form action="./" method="POST">
        <div class="card">
            <div class="card-header">
                create new mygist
            </div>
            <div class="card-block container">
                <div class="form-group">
                    <div>
                        <label for="inTitle">title</label>
                        <input class="form-control" type="text" id="inTitle">
                    </div>
                    <div>
                        <label for="inCont">text</label>
                        <textarea class="form-control" id="inCont" style="overflow: scroll"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <button class="form-control" type="submit">submit</button>
                </div>
            </div>
        </div>
    </form>
</div>
    

model

  • ただのHTMLなので,DBと連携させていきたい.
  • modelを作る.
  • rails generate model gists

  • db/migrate の中のcreate_gistsを書き換えて,テーブルの設計.

  • タイトル,コンテンツ,作成日,最終更新日 の4つがあれば良さそう.
class CreateGists < ActiveRecord::Migration[5.1]
  def change
    create_table :gists do |t|
      t.string :title
      t.text :content
      t.datetime :created
      t.datetime :updated

      t.timestamps
    end
  end
end
  • マイグレーション
  • rake db:migrate

  • 初期データを定義しよう.

  • 初期データを定義するには, db/seeds.rb を編集して,rake db:seed
Gist.create title:"example", content:"Hello, Hello!", created:"2017-1-1", updated:"2017-2-2"

model の表示

  • 表示出来るように,mygistコントローラのindexアクションを修正していく.
  • Gist.all で,全てのデータを取得出来る.
  • 取得したデータを,インスタンス変数に入れておく.
class MygistController < ApplicationController
    def index
        # 一覧を表示
        @gists = Gist.all
    end
    # ...
end
  • index.html.erb も修正.
  • phpjsp で馴染み深い記法でrubyを埋め込める.
    <!-- 一部略 -->
    <div class="container">
        <% @gists.each do |gist| %>
            <div class="card">
                <div class="card-header">
                    <%= gist.title %>
                </div>
                <div class="card-block">
                    <pre style="margin: 10px;"><%= gist.content %></pre>
                    <!-- 略 -->
                </div>
            </div>
        <% end %>
    </div>

model の書き換え(追加)

  • new.html.erb の submit ボタンを押すと,POSTクエリが送信される.

  • 送信されたデータはどのように受け取るか?

  • formの書き方を改める必要があるらしい.
  • HTMLではなく,Rails の form helper を使って記述する.
  • modelに関連付けるので,form_for を使う.
<div class="container">
    <h2>my gist</h2>
    <ul class="nav nav-pills" style="margin: 20px;">
        <li class="nav_item"><a class="nav-link" href="../">back</a></li>
    </ul>

    <%= form_for(Gist.new, url: {action: 'create'}) do |f| %>
        <div class="card">
            <div class="card-header">
                create new mygist
            </div>
            <div class="card-block container">
                <div class="form-group">
                    <div>
                        <label for="gist_title">title</label>
                        <%= f.text_field :title, class: 'form-control' %> 
                    </div>
                    <div>
                        <label for="gist_content">text</label>
                        <%= f.text_area :content, class: 'form-control', style: 'overflow: scroll' %> 
                    </div>
                </div>
                <div class="form-group">
                    <%= f.submit class: 'form-control' %>
                </div>
            </div>
        </div>
    <% end %>
</div>
  • 生成される部品の id は,model_name の様な形式になる.labelのforプロパティを貼り直しておく.
  • 新しく生成したレコード Gist.new は未だ空なので,表示されるhtmlのフォームも空.

    • @gist = Gist.new しておき, @gist.title='untitled' と入れておくと,formのtitleの欄に 予め untitled と書き込まれた状態となる.
  • 送信されたPOSTクエリは mygist#create アクションが受ける.

  • mygist#create を編集しよう.
  • 受け取ったパラメータは,params で拾うことができる.
  • mygist#create に画面は要らないので,redirect_to を記述,一覧ページにリダイレクトする.
class MygistController < ApplicationController
    # ...
    def create
        # 作成する.
        Gist.create title: params[:gist][:title], content: params[:gist][:content]
        redirect_to '/mygist/'
    end
end

link

同様の内容は https://github.com/buyoh/rails_gist/blob/master/work.md にもあります.

参考サイト

  1. https://railsguides.jp/
  2. https://www.rubylife.jp/rails/
  3. https://github.com/capistrano/capistrano
  4. https://qiita.com/Esfahan/items/1258d37eb6a85fa35b02