【10分でできる】笑っていいとも100分の1アンケートのRailsアプリを作ってみた

# はじめに
　[GitHub](https://github.com/mzmz02/qiita_yes_no_app_sample)にコードを公開してるので，コードだけ知りたい方は飛ばしてもらって大丈夫です．

```:開発環境
Windows10 
ruby: 2.6.10
Rails: 5.2.8
``` 

# 完成図
　Herokuでデプロイしてるので，ぜひ試してみてください．

　結果画面↓
　https://it-yes-no-app.herokuapp.com/posts/index
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/915dd486-6e7d-d28c-facf-4430cb9ad88b.png)


　回答画面↓
　https://it-yes-no-app.herokuapp.com/posts/new
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/000d6bf4-991d-b097-2c83-a70a26387578.png)

# 仕組み
　管理者画面（結果画面）に，STARTボタンとSTOPボタンがある．STARTボタンを押すと，テーブルのデータがリセット（削除）され，回答者は回答できるようになる．STOPボタンを押すと回答できなくなり，管理者画面に結果が表示される．

　STOPボタンを押したとき↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/fae3bf8c-8de9-220c-b68e-275e04058a07.png)

　回答者側がボタンを押したとき↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/5e6616dd-9307-4640-b8a6-90046b7ef19d.png)


# Yes/Noアプリの作り方

## 1. Railsアプリを新規で作成
　（Rails，Rubyがインストールされていることを前提）

```:ターミナル
rails new アプリ名
```

## 2. モデル，コントローラ，ビュー，ルーティングの作成
　scaffoldについては，[以前の記事](https://qiita.com/mzmz__02/items/658699a5db5a0ece2d3c)で詳しく説明しているので説明は省く．
　ここでは簡単にscaffoldを使ってモデル，コントローラ，ビュー，ルーティングを作成する．

　モデル名：post，カラム名：yes_no（string型）で作成した．


```:コマンド
rails generate scaffold post yes_no:string
```

　正しくscaffoldで自動生成できてることを確認したら，マイグレーションする．

```:ターミナル
rails db:migrate
```

　`rails s`で起動し，`http://localhost:3000/posts/new`にアクセスすると以下のようになる．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/5857f12e-dd04-fb7f-da57-1f1126c1a72d.png)


## 3. viewファイルの変更

```erb:posts/new.html.erb
<% if $stop == "stop" %>
  <div class="question_stop">
    受付停止中です．
  </div>
  <% else %>
  <div class="yes_no_button">
    <%= form_tag("/posts/yes", {multipart: true}) do %>
      <input type="submit" name="yes_no" value="YES" class="button_yes">
    <% end %>
    <br>
    
    <%= form_tag("/posts/no", {multipart: true}) do %>
      <input type="submit" name="yes_no" value=" NO " class="button_no">
    <% end %>
  </div>
<% end %>
```

```erb:posts/index.html.erb
<%= form_tag("/posts/start") do %>
  <input type="submit" value="START" >
<% end %>
<%= form_tag("/posts/stop") do %>
  <input type="submit" value="STOP">
<% end %>

<div class="content">
  <h2 class="people"><%= Post.count %> <span  style="color:navy">人中</span></h2>
  
  <h1 style="display:inline"><%= Post.where(yes_no: "YES").count %></h1>
  <h3 style="display:inline" class="nin">人</h3>
</div>
```

```erb:posts/show.html.erb
<div class="show">
  受け付けました．
  <br>
  回答は1質問につき1回まででお願いします．
  <br>
  <%= link_to("回答ページに戻る", "/posts/new") %>

</div>
```

## 4. コントローラの書き換え

```rb:posts_controller.rb
class PostsController < ApplicationController
  # before_action :authenticate_user
  
  def index
    @posts = Post.all.order(created_at: :asc)
  end
  
  def show
  end

  def edit 
  end

  def yes
    @post = Post.new( yes_no: "YES" )
    if @post.save
      redirect_to("/posts/show")
    else
      render("posts/new")
    end
  end

  def no
    @post = Post.new( yes_no: "NO" )
    if @post.save
      redirect_to("/posts/show")
    else
      render("posts/new")
    end
    
  end

  def stop
    $stop = "stop"
    redirect_to("/posts/index")
  end

  def start
    $stop = "start"
    Post.destroy_all
    redirect_to("/posts/index")
  end
  
end

```

## 5. ルーティングの書き換え


```rb:config/routes.rb
Rails.application.routes.draw do
  get "posts/index" => "posts#index"
  get "posts/new" => "posts#new"
  get "posts/show" => "posts#show"

  post "posts/yes" => "posts#yes"
  post "posts/no" => "posts#no"

  post "posts/stop" => "posts#stop"
  post "posts/start" => "posts#start"
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

```

## 6. レイアウトを整える（cssの変更）
　scaffoldで自動的に生成された`assets/stylesheets/scaffolds.scss`を削除する．
　[Google Fonts](https://fonts.google.com/)を利用した．
　ボタンは，[こちらのサイト](https://webparts.cman.jp/button/submit/)を利用した．


```css:assets/stylesheets/post.scss
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Keania+One&family=Qahiri&display=swap');

h1 {
  font-family: 'Black Ops One', cursive;
  color: #FFF3B8;
  background-color: black;
  font-size: 15rem;
  text-align: center;
}

/* ボタンのデザイン */
.button_yes {
  display       : inline-block;
  border-radius : 50%;          /* 角丸       */
  font-size     : 36pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 100px 100px;   /* 余白       */
  background    : #ef6262;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 8px 8px 3px #666666;  /* 影の設定 */
  border        : 2px solid #ef6262;    /* 枠の指定 */
}
.button_yes:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #ef6262;     /* 背景色     */
  background    : #ffffff;     /* 文字色     */
}

.button_no {
  display       : inline-block;
  border-radius : 50%;          /* 角丸       */
  font-size     : 36pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 100px 100px;   /* 余白       */
  background    : #5e5ed8;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 8px 8px 3px #666666;  /* 影の設定 */
  border        : 2px solid #5e5ed8;    /* 枠の指定 */
}
.button_no:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #5e5ed8;     /* 背景色     */
  background    : #ffffff;     /* 文字色     */
}

.show {
    text-align: center;
    padding-top: 40px;
}

.yes_no_button {
    text-align: center;
    padding-top: 40px;
}

.yes {
    text-align: center;
    font-size: 10rem;
}

.people {
    color: red;
    text-align: center;
    background-color: #FFF3B8;
    padding: 20px;
    margin: 0;
    font-size: 3rem;
}

.content {
  text-align: center;
  background-color: black;
  height:100vh;
}

.nin {
    color: rgb(223, 223, 133);
}
```

## 7.完成！！
http://localhost:3000/posts/index ：管理者画面（結果表示画面）
http://localhost:3000/posts/new ：回答画面

試しに動かして，データベースを覗いてみた↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/472af1a5-9c6b-b29f-ee4a-ad61b6b7fe7d.png)