編集履歴

質問編集履歴

jqueryを追加

2020/10/22 16:09

投稿

Zengo_Master

スコア19

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -794,6 +794,8 @@
     "@rails/webpacker": "4.3.0",
+    "jquery": "^3.5.1",
     "turbolinks": "^5.2.0"
   },

package.jsonのコード追加

2020/10/22 16:09

投稿

Zengo_Master

スコア19

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -774,6 +774,44 @@
+package.json
+```
+{
+  "name": "kifu_app",
+  "private": true,
+  "dependencies": {
+    "@rails/actioncable": "^6.0.0-alpha",
+    "@rails/activestorage": "^6.0.0-alpha",
+    "@rails/ujs": "^6.0.0-alpha",
+    "@rails/webpacker": "4.3.0",
+    "turbolinks": "^5.2.0"
+  },
+  "version": "0.1.0",
+  "devDependencies": {
+    "webpack-dev-server": "^3.11.0"
+  }
+}
+```
 ## ブラウザでの表示
 ![イメージ説明](315544b58ade49fe219241f99b41bfc5.png)

コードの追加

2020/10/22 13:00

投稿

Zengo_Master

スコア19

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -162,6 +162,8 @@
+app/controllers/kifus_controller.rb
 ```ruby
 class KifusController < ApplicationController
@@ -366,6 +368,52 @@
+app/assets/stylesheets/index.scss
+```scss
+.index-wrapper {
+  margin: 20px;
+}
+.new-link {
+  font-size: 20px;
+}
+h2 {
+  margin-top: 10px;
+}
+.kifu-lists {
+  margin-top: 5px;
+}
+.one-kifu {
+  font-size: 18px;
+}
+```
 app/views/kifus/new.html.erb
 ```html

全ファイルのコードを掲載

2020/10/20 06:26

投稿

Zengo_Master

スコア19

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -146,6 +146,528 @@
+config/routes.rb
+```ruby
+Rails.application.routes.draw do
+  root to: 'kifus#index'
+  resources :kifus
+end
+```
+```ruby
+class KifusController < ApplicationController
+  before_action :set_kifu, only: [:edit, :show, :destroy, :update]
+  def index
+    @kifus = Kifu.all.order('date DESC')
+  end
+  def new
+    @kifu = Kifu.new
+  end
+  def create
+    @kifu = Kifu.create(kifu_params)
+    if @kifu.valid?
+      @kifu.save
+      redirect_to root_path
+    else
+      render 'new'
+    end
+  end
+  def edit
+  end
+  def update
+    if @kifu.update(kifu_params)
+      redirect_to kifu_path(@kifu.id)
+    else
+      render 'edit'
+    end
+  end
+  def show
+  end
+  def destroy
+    if @kifu.destroy
+      redirect_to root_path
+    else
+      redirect_to kifu_path(@kifu.id)
+    end
+  end
+  private
+  def kifu_params
+    params.require(:kifu).permit(:date, :opponent, :result_id, :type_id, :kifu)
+  end
+  def set_kifu
+    @kifu = Kifu.find(params[:id])
+  end
+end
+```
+app/views/kifus/index.html.erb
+```html
+<div class="index-wrapper">
+  <div class="new-link">
+    <%= link_to '棋譜投稿ページへ', new_kifu_path %>
+  </div>
+  <h2>＜棋譜一覧＞</h2>
+  <div class="kifu-lists">
+    <% @kifus.each do |kifu| %>
+      <div class="one-kifu">
+        <%# 日付 %>
+        <span class="date">
+          <%= kifu.date %>
+        </span>
+        <%# 相手 %>
+        <span class="opponent">
+          <%= kifu.opponent %>
+        </span>
+        <%# 結果 %>
+        <span class="result">
+          <%= kifu.result.name %>
+        </span>
+        <%# 戦型 %>
+        <span class="type">
+          <%= kifu.type.name %>
+        </span>
+        <%# 棋譜リンク %>
+        <span class="kifu-page">
+          <%= link_to '棋譜', kifu_path(kifu.id)  %>
+        </span>
+      </div>
+    <% end %>
+  </div>
+</div>
+```
+app/views/kifus/new.html.erb
+```html
+<div class="new-wrapper">
+  <div class="input-forms">
+  <h2>＜対局情報入力＞</h2>
+    <%= form_with(model: @kifu, local: true) do |f| %>
+      <%# 日付 %>
+      <div class="input-field">
+        <%= f.label :date, '日付：' %>
+        <%= raw sprintf(
+                    f.date_select(
+                        :date,
+                        use_month_numbers: true,
+                        start_year:        2015,
+                        end_year:          2025,
+                        default:           Date.today,
+                        date_separator:    '%s'),
+                    '年 ', '月 ') + '日'
+        %>
+      </div>
+      <div class="input-field">
+        <%= f.label :opponent, '相手：' %>
+        <%= f.text_field :opponent %>
+      </div>
+      <div class="input-field">
+        <%= f.label :result_id, '結果：' %>
+        <%= f.collection_select :result_id, Result.all, :id, :name, {} %>
+      </div>
+      <div class="input-field">
+        <%= f.label :type_id, '戦型：' %>
+        <%= f.collection_select :type_id, Type.all, :id, :name, {}  %>
+      </div>
+      <div class="input-field">
+        <%= f.label :kifu, '棋譜' %><br>
+        <%= f.text_area :kifu, placeholder: '棋譜を貼り付け', size: "35x5"  %>
+      </div>
+      <div class="submit">
+        <%= f.submit "保存", class: 'submit-btn' %>
+      </div>
+      <div class="back">
+        <%= link_to "棋譜一覧へ戻る", root_path, class: "back-btn" %>
+      </div>
+    <% end %>
+  </div>
+</div>
+```
+app/assets/stylesheets/new.scss
+```scss
+.new-wrapper {
+  margin: 20px;
+}
+.input-field {
+  margin-top: 20px;
+}
+.back {
+  font-size: 20px;
+  margin-top: 20px;
+}
+.submit-btn {
+  width: 50px;
+  height: 30px;
+}
+```
+app/views/kifus/show.html.erb
+```html
+<div class="show-wrapper">
+  <div class="kifu-text">
+    <textarea id="fe_text" name="" rows="10" cols="40"><%= @kifu.kifu %></textarea>
+    <button class='my_clip_button' data-clipboard-target='fe_text' data-clipboard-text='Default clipboard text from attribute' id='d_clip_button'>
+      <b>コピー</b>
+    </button>
+  </div>
+  <strong>※解析は棋譜をコピーしてから押してね</strong>
+  <div class="btns">
+    <div class="edit">
+      <%= link_to "編集", edit_kifu_path(@kifu.id), method: :get, class: "edit-btn" %>
+    </div>
+    <div class="destroy">
+      <%= link_to "削除", kifu_path(@kifu.id), method: :delete, class: "destroy-btn" %>
+    </div>
+    <div class="analysis">
+      <%= link_to '解析', 'https://www.shogi-extend.com/adapter', class: "analysis-btn" %>
+    </div>
+  </div>
+  <div class="back">
+    <%= link_to '棋譜一覧へ戻る', root_path, class: "back-btn" %>
+  </div>
+</div class="div">
+```
+app/assets/stylesheets/show.scss
+```scss
+.show-wrapper {
+  margin: 20px;
+}
+.btns {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+}
+.edit, .destroy, .analysis, .copy {
+  margin-right: 20px;
+}
+.edit-btn, .destroy-btn, .analysis-btn {
+  font-size: 20px;
+  font-weight: bold;
+  text-decoration: none;
+  background-color: yellow;
+  padding: 5px;
+  border: 2px solid black;
+  border-radius: 5px;
+}
+.edit-btn {
+  color: black;
+}
+.destroy-btn {
+  color: red;
+}
+.analysis-btn {
+  color: blue;
+}
+```
 app/javascript/packs/application.js
 ```js
@@ -204,74 +726,6 @@
-app/views/kifus/show.html.erb
-```html
-<div class="show-wrapper">
-  <div class="kifu-text">
-    <textarea id="fe_text" name="" rows="10" cols="40"><%= @kifu.kifu %></textarea>
-    <button class='my_clip_button' data-clipboard-target='fe_text' data-clipboard-text='Default clipboard text from attribute' id='d_clip_button'>
-      <b>コピー</b>
-    </button>
-  </div>
-  <strong>※解析は棋譜をコピーしてから押してね</strong>
-  <div class="btns">
-    <div class="edit">
-      <%= link_to "編集", edit_kifu_path(@kifu.id), method: :get, class: "edit-btn" %>
-    </div>
-    <div class="destroy">
-      <%= link_to "削除", kifu_path(@kifu.id), method: :delete, class: "destroy-btn" %>
-    </div>
-    <div class="analysis">
-      <%= link_to '解析', 'https://www.shogi-extend.com/adapter', class: "analysis-btn" %>
-    </div>
-  </div>
-  <div class="back">
-    <%= link_to '棋譜一覧へ戻る', root_path, class: "back-btn" %>
-  </div>
-</div class="div">
-```
 ## ブラウザでの表示
 ![イメージ説明](315544b58ade49fe219241f99b41bfc5.png)

jQuery導入後のコード

2020/10/20 06:25

投稿

Zengo_Master

スコア19

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -18,6 +18,134 @@
+Gemfile
+```
+source 'https://rubygems.org'
+git_source(:github) { |repo| "https://github.com/#{repo}.git" }
+ruby '2.6.5'
+# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
+gem 'rails', '~> 6.0.0'
+# Use mysql as the database for Active Record
+# gem 'mysql2', '>= 0.4.4'
+gem 'mysql2', '0.5.3'
+# Use Puma as the app server
+gem 'puma', '~> 3.11'
+# Use SCSS for stylesheets
+gem 'sass-rails', '~> 5'
+# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
+gem 'webpacker', '~> 4.0'
+# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
+gem 'turbolinks', '~> 5'
+# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
+gem 'jbuilder', '~> 2.7'
+# Use Redis adapter to run Action Cable in production
+# gem 'redis', '~> 4.0'
+# Use Active Model has_secure_password
+# gem 'bcrypt', '~> 3.1.7'
+# Use Active Storage variant
+# gem 'image_processing', '~> 1.2'
+# Reduces boot times through caching; required in config/boot.rb
+gem 'bootsnap', '>= 1.4.2', require: false
+group :development, :test do
+  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
+  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
+end
+group :development do
+  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
+  gem 'web-console', '>= 3.3.0'
+  gem 'listen', '>= 3.0.5', '< 3.2'
+  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
+  gem 'spring'
+  gem 'spring-watcher-listen', '~> 2.0.0'
+  gem 'rubocop', require: false
+end
+group :test do
+  # Adds support for Capybara system testing and selenium driver
+  gem 'capybara', '>= 2.15'
+  gem 'selenium-webdriver'
+  # Easy installation and use of web drivers to run system tests with browsers
+  gem 'webdrivers'
+end
+# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
+gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+gem 'active_hash'
+gem 'zeroclipboard-rails'
+gem 'jquery-rails'
+```
 app/javascript/packs/application.js
 ```js
@@ -56,6 +184,14 @@
 //= require zeroclipboard
+//= require jquery
+//= require rails-ujs
+//= require turbolinks
+//= require_tree .
 $(document).ready(function() {