Mugcup(基礎編)の復習:設定一覧

Mugcup(基礎編)の復習

Coffeecup header1

0 : この章の目的

 「Mugcup(基礎編)の復習」の設定一覧の確認をする


1 : 設定一覧

Mugcup(基礎編)の復習」では、

  • 「message-app」のウェブサイトの雛形
  • 0.0.0.0:3000」へのページ
  • Bootstrap
  • devise

の4つを設定して、「message-app」のトップページを作った。


ここでその設定内容をまとめる。

  • 「message-app」の作成

  • 最初に「message-app」をターミナルへの入力で作成した。

     ターミナル
     Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
    1 2 cd Desktop cd rails_project

    で「rails_project」に移動し、

     Windowsでの移動の方法はこちらを参考



    この「rails_project」フォルダに「message-app」の雛形を作成した。

     ターミナル
    1 rails new message-app -d mysql

     Windowsをお使いの方は、下の入力をして下さい。

     コマンドプロンプト
    1 rails new message-app



    終わったら、ツール(gem)の設定と導入をしました。

     ターミナル
     Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
    1 bundle install

    ここまでができたらデータベースの用意をします。
    「データベースの用意」は、ターミナルで下の入力をすることで行う。

     ターミナル
     Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
    1 rake db:create

    これでmessage-app_development」のデータベースが完成しました。

  • トップページを作る

  • トップページを作るための設定ファイルをターミナルの次の入力で作った。

     ターミナル
     Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
    1 rails g controller welcome

    この入力で作成された
    • データ操作の設定ファイル「app > controllers > welcome_controller.rb
    • ページ表示の設定フォルダ「app > views > welcome
    に設定を加えていく。

    まずは「7つのページのうちどのページを使うか」を「route.rb」で設定する。

     route.rb(3、4行目を追加)
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 ... 60 Rails.application.routes.draw do resources :welcome, :only => [:index] root "welcome#index" # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # 省略 end

    データ操作はapp > controllers > welcome_controller.rbに設定する。

     welcome_controller.rb
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 class WelcomeController < ApplicationController def index end end

    ページ表示の設定は、app > views > welcomeフォルダにindex.html.erbを保存し(保存の方法はこちらを参考)、下の内容に設定する。

     index.html.erb(「app > views > welcome」フォルダに保存)
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 <div class="header-image"> <h1 class="text-center header-content"><strong>ようこそ</strong></h1> </div>

    次にapp > assets > stylesheets > style.scssを保存し、下の内容を追加する。

     style.scss
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 9 10 11 12 .header-image{ background-image: url(/assets/保存した画像名); height:400px; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .header-content{ font-size:75px; padding-top:150px; }

    最後の「Bootstrap」の設定を加える。

     ターミナル
    1 rails g bootstrap:install

     Windowsをご利用の方は、こちらを参考にして下さい。

  • Bootstrap

  • Bootstrapで上のバー・navigation-barを、application.html.erbに設定した。

     application.html.erb
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <!DOCTYPE html> <html> <head> <title>MessageApp</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="navbar-brand">Message-app</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> </ul> </div> </div> </nav> <div class="container main-page"> <%= yield %> </div> </body> </html>

    これに加え、CSSの設定も加えた。

     style.scss
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .main-page{ margin-top:50px; } .header-image{ background-image: url(/assets/保存した画像名); height:400px; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .header-content{ font-size:75px; padding-top:150px; }

  • devise

  • まずは「devise」のインストールからやります。

     ターミナル
     Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
    1 rails g devise:install

     ターミナル
     Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
    1 rails g devise user

    この入力で作成されたdb > migrate > 日時_devise_create_users.rbの内容を下のように変更します。

     日時_devise_create_users.rb
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 class DeviseCreateUsers < ActiveRecord::Migration def change create_table(:users) do |t| ## Database authenticatable t.string :email, null: false, default: "" t.string :encrypted_password, null: false, default: "" ## Recoverable t.string :reset_password_token t.datetime :reset_password_sent_at ## Rememberable t.datetime :remember_created_at ## Trackable t.integer :sign_in_count, default: 0, null: false t.datetime :current_sign_in_at t.datetime :last_sign_in_at t.string :current_sign_in_ip t.string :last_sign_in_ip ## Confirmable # t.string :confirmation_token # t.datetime :confirmed_at # t.datetime :confirmation_sent_at # t.string :unconfirmed_email # Only if using reconfirmable ## Lockable # t.integer :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts # t.string :unlock_token # Only if unlock strategy is :email or :both # t.datetime :locked_at t.string :first_name t.string :family_name t.text :self_introduction t.integer :age t.timestamps null: false end add_index :users, :email, unique: true add_index :users, :reset_password_token, unique: true # add_index :users, :confirmation_token, unique: true # add_index :users, :unlock_token, unique: true end end

    終わったら設定内容を適用させるために、

     ターミナル
     Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
    1 bundle install

    をします。

    これができたら、表示を設定するために

     ターミナル
     Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
    1 rails g devise:views

    これで作成された
    • 登録ページ「app > views > devise > registrations > new.html.erb
    • ログインページ「app > views > devise > sessions > new.html.erb
    に内容を表示の内容を設定します。

    登録ページの「new.html.erb」は、

     new.html.erb(8、16、21、23、25行目を変更)
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <h2>Sign up</h2> <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= devise_error_messages! %> <div class="field"> <%= f.label :email %><br /> <%= f.email_field :email, autofocus: true, :class => "form-control my-form" %> </div> <div class="field"> <%= f.label :password %> <% if @minimum_password_length %> <em>(<%= @minimum_password_length %> characters minimum)</em> <% end %><br /> <%= f.password_field :password, autocomplete: "off", :class => "form-control my-form" %> </div> <div class="field"> <%= f.label :password_confirmation %><br /> <%= f.password_field :password_confirmation, autocomplete: "off", :class => "form-control my-form" %> </div> <br> <div class="actions"> <%= f.submit "Sign up", :class => "btn btn-primary" %> </div> <% end %> <%= render "devise/shared/links" %>

    ログインページの「new.html.erb」は、

     new.html.erb
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <h2>Log in</h2> <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> <div class="field"> <%= f.label :email %><br /> <%= f.email_field :email, autofocus: true, :class => "form-control my-form" %> </div> <div class="field"> <%= f.label :password %><br /> <%= f.password_field :password, autocomplete: "off", :class => "form-control my-form" %> </div> <% if devise_mapping.rememberable? -%> <div class="field"> <%= f.check_box :remember_me %> <%= f.label :remember_me %> </div> <% end -%> <br> <div class="actions"> <%= f.submit "Log in", :class => "btn btn-primary" %> </div> <% end %> <%= render "devise/shared/links" %>

    入力欄の長さの調節のためにCSSの設定を加えます。

     style.scss
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 ... .main-page{ margin-top:50px; } .my-form{ width:500px; } .header-image{ /* 以下省略 */

    次に、上のバー・navigation-barの設定通知:flashを加える。

     application.html.erb(24〜28行目と36〜43行目を追加)
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 <!DOCTYPE html> <html> <head> <title>MessageApp</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="navbar-brand">Message-app</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <% if user_signed_in? %> <li><%= link_to "ログアウト", destroy_user_session_path, :method => :delete %></li> <% else %> <li><a href="/users/sign_up">登録する</a></li> <li><a href="/users/sign_in">ログインする</a></li> <% end %> </ul> </div> </div> </nav> <div class="container main-page"> <% if notice %> <br> <p class="alert alert-success"><%= notice %></p> <% end %> <% if alert %> <br> <p class="alert alert-danger"><%= alert %></p> <% end %> <%= yield %> </div> </body> </html>

    最後の「users」データベースのページを作成しました。まずは設定ファイルの作成をします。

     ターミナル
     Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
    1 rails g controller users

    これで作成された
    • データ操作設定ファイル「app > controllers > users_controller.rb
    • ページ表示設定フォルダ「app > views > users
    にそれぞれの設定をする。

    「show.html.erb」「index.html.erb」「edit.html.erb」app > views > users」フォルダに保存する(保存の方法はこちらを参考)。
     まずは「7つのページのうちどのページを使うか」の設定を、route.rbに加える。

     route.rb(6行目を追加)
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 9 ... 62 Rails.application.routes.draw do devise_for :users resources :welcome, :only => [:index] root "welcome#index" resources :users, :only => [:show, :index, :edit, :update] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # 省略 end

     次はデータ操作の設定を、app > controllers > users_controller.rbに加える。

     users_controller.rb
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 class UsersController < ApplicationController before_action :authenticate_user!, :only => [:show, :index, :edit, :update] def show @user = User.find(params[:id]) end def index @users = User.all end def edit @user = User.find(params[:id]) if @user.id == current_user.id else redirect_to "/" flash[:alert] = "無効なユーザー" end end def update @user = User.find(params[:id]) if @user.id == current_user.id @user.update(params.require(:user).permit(:first_name, :family_name, :self_introduction, :age)) redirect_to "/users/#{@user.id}/edit" flash[:notice] = "編集が完了しました" else redirect_to "/" flash[:alert] = "無効なユーザー" end end end

     最後にページの表示の設定を、「app > views > users」フォルダにあるファイルに加える。

     show.html.erb
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 9 <h1>ユーザー情報</h1> <hr> <p>名前:<%= @user.family_name %><%= @user.first_name %>さん(<%= @user.age %>歳)</p> <p>自己紹介:<%= @user.self_introduction %></p> <hr> <p><a href="/users" class="btn btn-primary">ユーザー一覧に戻る</a></p> <% if @user.id == current_user.id %> <p><a href="/users/<%= @user.id %>/edit" class="btn btn-success">ユーザー情報を編集する</a> <% end %>

     index.html.erb
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 <h1>ユーザー一覧</h1> <hr> <% @users.each do |u| %> <p><a href="/users/<%= u.id %>"><%= u.family_name %><%= u.first_name %>さん</a></p> <hr> <% end %> <a href="/" class="btn btn-info">トップに戻る</a>

     edit.html.erb
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <h1>ユーザー情報を編集する</h1> <hr> <%= form_for @user do |f| %> <p>名字</p> <%= f.text_field :family_name, :class => "form-control my-form" %> <p>名前</p> <%= f.text_field :first_name, :class => "form-control my-form" %> <p>年齢</p> <%= f.number_field :age, :class => "form-control my-form" %> <p>自己紹介</p> <%= f.text_area :self_introduction, :class => "form-control my-form" %> <hr> <%= f.submit "登録する", :class => "btn btn-primary" %> <% end %> <hr> <a href="/users/<%= @user.id %>" class="btn btn-info">ユーザー情報に戻る</a>

になります。