1 : Mugcup(基礎編)の復習


Coffeecup header1

0 : この章の目的

  メッセージアプリケーションのウェブページを作るに当たっては、Mugcup(基礎編)で説明した「雛形の作り方」「Bootstrap」「トップページ」「ユーザー管理」なども使っていきます。

ここではその復習がてら、 までを設定して、 Chrome messages root add nav users sign in up のようなページを作ってみたいと思います。


1 : 雛形を作る

まずはメッセージアプリケーションのウェブページの雛形から作っていきましょう!
※ 詳しい内容はこちら
流れとしては、
  • 雛形を作成
  • Gemの導入
  • データベースの用意
の3つをやってみます。

 ① : 雛形を作る


 ウェブページの雛形を作りましょう!
ウェブページの雛形message-appDesktop < rails_projectに作ります。

 まずは「rails_project」に移動します。


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


 ターミナル
1 2 cd Desktop cd rails_project

ではここでmessage-app」のウェブページの雛形を作ってみましょう!
※ 詳細はこちらを参考にして下さい

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


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


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

FinderでDesktop > rails_projectに、message-appができていますでしょうか?
これが「message-app」のウェブページの雛形になります。

次はgem(ツール)の追加をしましょう!


 ② : Gemの導入


 ここで、ツール・gemの導入をしましょう!

ウェブページ作成で使うGemを導入します。
※ 分からなかったら、こちらを参考にしてみて下さい

gemの設定をしているGemfileの内容を変更しましょう。
 Macをご利用の方

 Gemfile(「gem 'sdoc', '~> 0.4.0', group: :doc」の後ろに追加)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
26 25 27 28 29 30 31 gem 'therubyracer' gem 'less-rails' gem 'twitter-bootstrap-rails' gem 'sprockets', '3.6.3' gem 'execjs' gem 'devise'


設定ができたら、ターミナルで下の入力をして下さい。

 ターミナル
1 bundle install

 動かない場合は、「Gemfile.lock」を削除してから、試してみて下さい。

gemをインストールできたら、Bootstrapのインストールをします。

 ターミナル
1 rails g bootstrap:install

 これで、Macでの「gem」の導入ができました。
 Windowsをご利用の方

 Gemfile(「gem 'sdoc', '~> 0.4.0', group: :doc」の後ろに追加)
※ 半角英数字で入力「ctrl」と「s」を一緒に押して内容を保存して下さい。
26 27 gem 'coffee-script-source', '1.8.0' gem 'devise'

設定ができたら、ターミナルで下の入力をして下さい。

 ターミナル
1 bundle install

 動かない場合は、「Gemfile.lock」を削除してから、試してみて下さい。

gemのインストールができたら、こちらを参考にしてBootstrapを導入して下さい。

 これで、Windowsでの「gem」の導入ができました。
 ここまでで「gem」の設定が完了しました。


 ③ : データベースの用意


 データベースの用意をしましょう!
ウェブページでデータを保存するためにデータベースを用意する必要があります。
※ 分からなかったら、こちらを参考にしてみて下さい

ではそのデータベースを作ってみましょう。ターミナルで下の入力をしてみましょう!

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

 動かない場合は、「bundle exec」を前につけ、「bundle exec rake ...」で入力して下さい。

で行います。やってみましょう!
終わったら、Sequel Proで「message-app_development」というデータベースがあるかを確認してみましょう!
※ Sequel Pro の開き方SqliteBrowser の開き方 を参考にして下さい

 設定した内容はこちらにまとめてあります。


2 : トップページを作る!

 雛形もできたので、まずはトップページを作ってみましょう!
※ 詳細はこちらを参考にして下さい
流れとしては、
  • 7つのページの設定(詳細はこちら
  • データ操作ファイルの設定(詳細はこちら
  • ページ表示ファイルの設定(詳細はこちら
  • ページに画像を表示させる(詳細はこちら
をやってみます。
まずは
  • データ操作ファイル(controllerファイル)
  • ページ設定フォルダ(viewsフォルダ)
を作成しましょう!
※ 詳細はこちらを参考にして下さい

controllerファイル・viewsフォルダの作成のためにターミナルで、

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

を入力して下さい。

これで
  • データ操作設定ファイル「app > controllers > welcome_controller.rb
  • ページ表示設定フォルダ「app > views > welcome
が作成されました。この2つを設定していきます。

この二つのファイルはまず置いといて、最初に「7つのページの設定」をやってみます。

 ① : 7つのページの設定


7つのページ(詳細はこちら)のどれを使うかを設定しましょう。
ここでは「welcome」の「index」のページを「0.0.0.0:3000」に表示させる設定をしましょう!

ページの設定は、config > routes.rbに設定を加えます。
下のように内容を変更しましょう!

 routes.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

3行目で「welcome」の「index」ページを使うことを指定し、
4行目で0.0.0.0:3000」に「welcome」の「index」ページを表示させることを指定しました。
※ 詳細はこちらを参考にして下さい

これでどのページを使うかの設定ができました。

次は、データ操作の設定をやりましょう。


 ② : データ操作


次はデータ操作を設定してみましょう!
データ操作は「controller」ファイル「welcome_controller.rb」に設定します。
今回は「welocme」の「index」のページを作りデータ選択操作はしないので、下のように設定します。
※ 詳細はこちらを参考にして下さい

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


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

これでデータ操作の設定ができました。

次はページを設定をしていきましょう!


 ③ : ページの設定


次はページ表示を設定します。
ページ表示は「app > views」フォルダにある「welcome」に設定します。
まずは「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>

htmlで設定できる内容はここまでになります。
次は「0.0.0.0:3000」を Chrome messages root 1 のように表示させてみます。

この表示をするために、
  • 表示させる画像の保存
  • CSSファイルの設定
をやってみます。
※ 分からなかったら、こちらを参考にして下さい
まずは、トップページに設定したい画像をmessage-app」の「app > assets > imagesに保存しましょう。
もし表示させたい画像がなければ、こちらの画像を下の手順で保存してみて下さい。 Chrome image save assets1 Chrome image save assets2 終わったら、app > assets > stylesheetsstyle.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; }

ここまでできたらターミナルのmessage-appで、

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

を入力してサーバーを立ち上げて、「0.0.0.0:3000」を開いてみましょう!
 Windowsをご利用の方は、「localhost:3000」を開いてみて下さい。 Chrome messages root 1 のように表示されたでしょうか?これでトップページが完成しました!

設定した内容はこちらにまとめてあります。

次は「Bootstrap」を使って、上につけるバーを設定してみましょう!


3 : Bootstrapを使おう!

では「Bootstrap」を使って、上のバー・navigation-barを設定しましょう!
※ 詳細はこちらを参考にして下さい
MacでのBootstrapの導入は、

ターミナル
1 rails g bootstrap:install

を入力して設定しました。
出来ていなかったら、もう一度やり直してみましょう!

 Windowsをご利用の方は、こちらを参考にして下さい。
では、上のバーを設定します!
上のバーは全てのページに設定するので、app > views > layouts」フォルダにある「application.html.erbに内容を設定します。
application.html.erbを下のように変更して下さい。
※ 詳細はこちらを参考にして下さい

 application.html.erb(11〜27、29、30行目を追加)
※ 半角英数字で入力。変更が完了したら「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>

navigation-barの設定とは別にcontainer」と「main-page」の設定も行いました。
※ 詳細はこちらを参考にして下さい。
今のままだと「navigation-bar」が画像にかぶってしまうので、「main-page」のCSSを設定して、これをずらします。

style.scssを下のように設定してみましょう。

 style.scss(1〜3行目を追加)
※ 半角英数字で入力。変更が完了したら「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; }

※ 一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


できたら、「0.0.0.0:3000」を開いてみましょう!
 Windowsをご利用の方は、「localhost:3000」を開いてみて下さい。 Chrome messages root 2 ページは表示されたでしょうか?

設定した内容はこちらにまとめてあります。


4 : ユーザー管理をする

最後にdeviseを使って、ユーザー管理をしてみます。
※ 詳細はこちらを参考にして下さい
流れとしては、
  • 「devise」のインストール(詳細はこちら
  • 会員データベースの作成(詳細はこちら
  • 登録・ログインページの装飾(詳細はこちら
  • 会員ページの作成(詳細はこちら
の4つをやってみます。

 ① : 「devise」のインストール


では「devise」のインストールをやってみましょう!
gemで導入した「devise」をインストールをするには、ターミナルで下の入力をします。
※ 詳細はこちらを参考にして下さい

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

これで「devise」のインストールが完了しました!
次は「devise」の会員データベースを作ってみましょう!


 ② : 会員データベースの作成


次に「devise」の会員データベースの作成をしましょう!
ここでは「devise」で「users」データベースを作ります。「devise」で「users」データベースの作成をするにはターミナルで下の入力をします。
※ 詳細はこちらを参考にして下さい

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

これで「devise」の「users」データベースを作成するための設定ファイルが作成されました。
db > migrate フォルダにある日時_devise_create_users.rbがその設定ファイルになります。
この設定ファイルに下の設定を追加して下さい。

 日時_devise_create_users.rb(33〜36行目を追加)
※ 半角英数字で入力。変更が完了したら「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

ここで、
  • 短い文字列を入れる「first_name」の枠組み
  • 短い文字列を入れる「family_name」の枠組み
  • 長い文字列を入れる「self_introduction」の枠組み
  • 数字を入れる「age」の枠組み
の4つの枠組みの設定をしました。
終わったら設定したデータベースを作成しましょう!
設定したデータベースのファイルのデータベースを作成するには、ターミナルで下の入力をします。

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

 動かない場合は、「bundle exec」を前につけ、「bundle exec rake ...」で入力して下さい。

これで、データベースが作成されました!

ここまで出来たら、Sequel Proで「message-app_development」の「users」データベースが作成されているかを確認してみましょう!
※ Sequel Proの開き方はこちら、SqliteBrowserの開き方はこちらを参考にして下さい

次は「devise」の登録・ログイン画面を装飾してみましょう!


 ③ : 登録・ログイン画面の装飾


「devise」で登録・ログイン画面を作成し、それを装飾してみましょう!
ここで「devise」を使った登録・ログイン画面を作成し、それをBootstrapで装飾してみたいと思います。
「devise」を使った画面を作成するには、ターミナルで下の入力をします。
※ 詳細はこちらを参考にして下さい

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

これで作成されたファイル・フォルダの内、
  • 登録画面
  • app > views > devise > registrations」にある「new.html.erb」
  • ログイン画面
  • app > views > devise > sessions」にある「new.html.erb」
にそれぞれの設定を加えます。それぞれのファイルを装飾をしていきます。
※ 詳細はこちらを参考にして下さい

ここでは、
  • 登録・ログイン画面の入力欄・ボタンの装飾(詳細はこちら
  • Chrome messages users sign in Chrome messages users sign up
  • 上のバー(navigation-bar)に登録・ログイン画面へのリンクの追加(詳細はこちら
  • Chrome messages root add nav users sign in up
  • 登録・ログインの通知の追加(詳細はこちら
  • Chrome messages users sign in notice
の3つをやってみたいと思います

 登録・ログイン画面の入力欄・ボタンの装飾

入力欄とボタンの装飾はBootstrapの設定を使って行いました。
 まずは、登録画面から装飾を始めます。

登録画面の表示をする設定ファイルは、app > views > devise > registrationsにある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" %>

これに加えapp > assets > stylesheets > style.scssに、入力欄の大きさを指定するCSSの設定「my-form」を加えます。
※ 内容はこちらを参考にして下さい

 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{ /* 以下省略 */

※ 一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


できたら、「0.0.0.0:3000/users/sign_up」を開いてみましょう!
 Windowsをご利用の方は、「localhost:3000/users/sign_up」を開いてみて下さい。 Chrome messages users sign up このように登録ページが綺麗に表示されたでしょうか?
次はログインページをやってみます!

 次に、ログイン画面を装飾してみましょう

ログイン画面の表示をする設定ファイルは、app > views > devise > sessionsにあるnew.html.erbになります。

このsessionsnew.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" %>

※ 一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


できたら、「0.0.0.0:3000/users/sign_in」を開いてみましょう!
 Windowsをご利用の方は、「localhost:3000/users/sign_in」を開いてみて下さい。 Chrome messages users sign in このように表示されたでしょうか?
次は上のバー(navigation-bar)に、登録・ログインページへのリンクを加えます。

 上のバー(navigation-bar)に登録・ログイン画面へのリンクの追加

「navigation-bar」の設定は、application.html.erbBootstrapの設定を加えて設定しました。
※ 詳細はこちらを参考にして下さい

この章で設定したこの「navigation-bar」に、 へのリンクを追加しましょう!

app > views > layouts > application.html.erbを開いて、下のように内容を変更して下さい!
※ 内容の説明はこちらを参考にして下さい

 application.html.erb(24〜28行目を追加)
※ 半角英数字で入力。変更が完了したら「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 <!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"> <%= yield %> </div> </body> </html>

if」「else」と「user_signed_in?」で
  • 会員でない場合は、「登録する」「ログインする」のリンク
  • 会員の場合は、「ログアウトする」のリンク
を表示させています。
※ 内容の説明はこちらを参考にして下さい

これで上のバーの設定が完了しました!
一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


できたら、「0.0.0.0:3000」を開いてみましょう!
 Windowsをご利用の方は、「localhost:3000」を開いてみて下さい。 Chrome messages root add nav users sign in up 上のバー(navigation-bar)にリンクが表示されたでしょうか?
できていたら、リンクが正しく使えるかも確認しましょう!
 登録・ログインの通知の追加

登録・ログインの通知の設定は、application.html.erbにBootstrapと「if」「else」を使った分岐を使って設定しました。
※ 詳細はこちらを参考にして下さい

さっき設定を加えたapplication.html.erbを下のように変更してみましょう!

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


35 36 37 38 39 40 41 42 43 44 45 <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>

これで通知の設定ができました!
次は「users」データベースを使ってページを作ってみましょう!



最後に「users」データベースを使ったページを作ってみます
データベースを使ったページを作成するには、
  • 7つのページのうちどれを使うかの設定(routes.rb)
  • データ操作の設定(controller)
  • ページ表示の設定(views)
の3つが必要になります。

まずは「users」データベースのデータ操作・ページ表示の設定ファイルを作成するために、ターミナルで下の入力をします。
※ 詳細はこちらを参考にして下さい

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

これで
  • データ操作設定ファイル「app > controllers > users_controller.rb
  • ページ表示設定フォルダ「app > views > users
が作成されました。
このファイル・フォルダに内容を設定を加えていきます。
今回の「users」データベースでは「devise」が会員の作成をしてくれるので、 の4つを設定します。

なので表示を設定しているapp > views > usersに、これら4つを表示する設定ファイル
  • show.html.erb
  • index.html.erb
  • edit.html.erb
  • update.html.erb
を保存してみましょう(ファイルの保存の方法はここを参考)

ここまでできたら、まず「7つのページの設定」をしてみましょう!
 7つのページの設定

「7つのページの設定」は、config > routes.rbに設定を加えます。routes.rbを下のように設定してみましょう!
※ 内容はこちらを参考にして下さい

 routes.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

これで、「users」データベースで「show」「index」「edit」「update」のページを使う設定ができました!

では一つ一つのページの設定を加えていきましょう!

 showページ

ページを設定するには、
  • データ操作(users_controller.rb
  • ページ表示の設定(html.erb
の2種類が必要になります。
まずはデータ操作の設定からやってみましょう。app > controllers > users_controller.rbにデータ操作の設定を加えます。

このusers_controller.rbを下のように変更してみて下さい。
※ 内容はこちらを参考にして下さい

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


1 2 3 4 5 6 7 8 9 class UsersController < ApplicationController before_action :authenticate_user!, :only => [:show, :index, :edit, :update] def show @user = User.find(params[:id]) end end

ここでは、
  • show.html.erb」で表示するための「@user」の標識
  • ログインした会員でなければ内容を見れないようにするための設定(こちらを参考)
を加えました。
次はページの表示を設定してみましょう!
app > views > users > show.html.erbを下のように設定してみましょう。
※ 内容はこちらを参考にして下さい

 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 %>

「@user」の情報の表示に加えて、
「if」「else」を使い、ログインしている会員が表示している会員と一致している場合だけ

ユーザー情報を編集する

を表示させています。
※ 内容の説明はこちらを参考にして下さい

これで「show」ページの設定が完了しました!

ここまでできたら、
登録ページ「0.0.0.0:3000/users/sign_upで新しい会員を作成しましょう!
 Windowsをご利用の方は、「localhost:3000/users/sign_up」を開いてみて下さい。 Chrome messages users sign up enter info できたら、会員ページ「0.0.0.0:3000/users/1を確認してみましょう! Chrome messages users 1 no info このように表示されたでしょうか?

次は「index」ページをやってみます!
 indexページ

まず、データ操作(controller)からやってみたいと思います。
app > controllers > users_controller.rbを下のように設定して下さい。
※ 内容の説明はこちらを参考にして下さい

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


1 2 3 4 5 6 7 8 9 10 11 12 13 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 end

これで、ページに表示させる「@users」の標識を設定しました。
次にページの表示をしてみます。

「index」ページの表示は、app > views > users > index.html.erbファイルに表示内容を設定します。
index.html.erbの内容を下のように設定してみましょう!
※ 詳細はこちらを参考にして下さい

 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>

この設定で、users_controller.rb」で設定した「@users」を一つ一つのデータにして表示させています。

※ 一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


できたら、「0.0.0.0:3000/users」を開いてみましょう!
 Windowsをご利用の方は、「localhost:3000/users」を開いてみて下さい。 Chrome messages users このように表示されたでしょうか?

次は「edit」ページをやってみます
 editページ

まずはデータ操作からやってみます。
app > controllers > users_controller.rbを下のように設定して下さい。
※ 内容はこちらを参考にして下さい

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


9 10 11 12 13 14 15 16 17 18 19 20 21 22 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 end

ここでも「if」「else」を使って、
  • 会員情報が一致する場合

  • そのまま表示

  • 会員情報が一致しない場合

  • "/"「0.0.0.0:3000に移動して

    無効なユーザー

    を表示
するような設定をした。
※ 詳細はこちらを参考にして下さい
次にページの表示をしてみます。

「edit」ページの表示は、app > views > users > edit.html.erbファイルに表示内容を設定します。
edit.html.erbを下のように変更してみましょう!
※ 内容の説明はこちらを参考にしてみて下さい

 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>

※ 一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


できたら、「0.0.0.0:3000/users/1/edit」を開いてみましょう!
 Windowsをご利用の方は、「localhost:3000/users/1/edit」を開いてみて下さい。 Chrome messages users 1 edit このようなページは表示されたでしょうか?

次は「update」ページの設定をやってみましょう!
 updateページ

今回の「update」ページは、
編集完了のページではなく、0.0.0.0:3000/users/1/editのような編集ページに移動させるような設定にしてみます。 Chrome messages users 1 update after 「edit」ページで「登録ボタン」を押したら、このようなページを表示させます。

これはデータ操作の「controller」ファイルで「redirect_to」と「通知:flash」を使用して設定します。
ではapp > controllers > users_controller.rbに設定を加えてみましょう。
内容はこちらを参考にして下さい

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


13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 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

今回も「if」「else」で条件分岐をしました(詳細はこちらを参考)。
この「if」「else」に加えて、

26 27 redirect_to "/users/#{@user.id}/edit" flash[:notice] = "編集が完了しました"

が加わりました。

27行目で、

編集が完了しました

を表示させているのは分かると思いますが、

28行目は、redirect_toでどこのページに移動しているのでしょうか?
なんとなく「users」データベースの「edit」ページに移動しようとしている、と予測することもできると思います。

ページの表示をする「html.erb」では、標識などの表示は

1 <a href="/users/<%= @user.id %>/edit">ユーザー情報を編集</a>

のように

1 <%= @user.id %>

表示しました。
今回の、

1 redirect_to "/users/#{@user.id}/edit"

同じことを「controller」ファイルで行った設定になります。

なぜか#{@user.id}という表示になっていて、おかしいと感じるかもしれません。
「""」の中のこの
#{}
「html.erb」ファイル
<%= %>
と同じようなものになります。

もしこの「#{}」がなかったら、「""」の中の「@user」の部分は変換されず、
0.0.0.0:3000/users/@user.id/editに飛んでしまいます。

このように、「@user」のような標識を「""」の中で使うには「#{}」で表示をします。

 「posts」データベースの「show」ページへの移動は、「redirect_to」を使うとどのように設定すればいいでしょうか?


1 redirect_to "/posts/#{@post.id}/edit"

※ 一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


できたら、「0.0.0.0:3000/users/1/edit」を開いてみましょう!
 Windowsをご利用の方は、「localhost:3000/users/1/edit」を開いてみて下さい。

情報を入力して「登録する」ボタンを押してみましょう! Chrome messages users 1 update after こんな感じなページはでてきたでしょうか?
ついでに0.0.0.0:3000/users/1で内容が変更されたかを確認してみましょう!

最後にupdate.html.erbは使わないので削除できたら削除して下さい。

設定した内容はこちらにまとめてあります。


ここまでで「message-app」のユーザー管理までが完成しました!
ここまでは復習だったので、比較的楽だったのではないかと思います。

次の章から、メッセージアプリケーションのページを作ってみましょう!