feat: cssbundling-railsを導入、foreman導入、bin/devで自動更新するように

Author: H-Hp

Gemfile

@@ -14,6 +14,7 @@ gem "puma", ">= 6.0"#~> 6.0 は、Puma 6.0 以上、かつ 7.0 未満の最新
 #gem 'webpacker', '~> 5.0'
 gem "propshaft"
 gem 'jsbundling-rails'
+gem 'cssbundling-rails'
 
 gem 'turbolinks', '~> 5'
 gem 'jbuilder', '~> 2.7'

Gemfile.lock

@@ -102,6 +102,8 @@ GEM
     concurrent-ruby (1.3.5)
     connection_pool (2.4.1)
     crass (1.0.6)
+    cssbundling-rails (1.4.3)
+      railties (>= 6.0.0)
     date (3.4.1)
     diff-lcs (1.6.2)
     dockerfile-rails (1.7.9)
@@ -263,7 +265,7 @@ GEM
     sentry-ruby (5.23.0)
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.0.2)
-    set (1.0.4)
+    set (1.1.2)
     sidekiq (7.3.6)
       connection_pool (>= 2.3.0)
       logger
@@ -314,6 +316,7 @@ DEPENDENCIES
   bunny
   byebug
   capybara (>= 3.26)
+  cssbundling-rails
   dockerfile-rails (>= 1.7)
   jbuilder (~> 2.7)
   jsbundling-rails
@@ -340,4 +343,4 @@ RUBY VERSION
    ruby 3.3.6p108
 
 BUNDLED WITH
-   2.2.16
+   2.7.1

Procfile.dev

@@ -1,2 +1,3 @@
 web: bin/rails server
-js: bin/rails javascript:build --watch
+js: yarn build:js:watch
+css: yarn build:css:watch   # TailwindCSS などを使う場合css: yarn build:css --watch

app/assets/stylesheets/application.css

@@ -0,0 +1,21 @@
+@import "tailwindcss";
+
+ * {
+  box-sizing: border-box;
+  font-size: inherit;
+  /* フォントレンダリングを統一・Braveのレイアウト崩れ防止 */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-variant-ligatures: none;
+}
+body, html {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  font-size: 16px; /* 基準サイズを明確に指定 */
+  font-family: sans-serif;
+  display: flex;
+  flex-direction: column;
+  overscroll-behavior: none;
+}

app/assets/stylesheets/application.tailwind.css

@@ -10,6 +10,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 //import Shogi from '../components/shogi/index'
 import Shogi from './components/shogi/index.js';
+import Matching from './matching.js';
 //import Header from '../components/Header';
 import Header from './components/Header.jsx';
 

app/javascript/application.js

@@ -884,7 +884,7 @@ class Matching extends React.Component {
 
         <div className={`h-[calc(100%-30px)] flex items-center justify-center from-indigo-500 to-purple-600 p-4  bg-no-repeat bg-cover bg-center bg-[url('${gamebackPath}')]`}>
           <div className="bg-[#696969] p-8 rounded-lg shadow-xl w-full max-w-md text-center">
-            <h1 className="text-3xl font-extrabold text-white mb-6">{t('matching.title')}</h1>
+            <h1 className="text-3xl font-extrabold text-white mb-6">aああ{t('matching.title')}</h1>
             <div className="mb-6">
               <label className="mr-4 text-white">
                 <input
@@ -1462,6 +1462,8 @@ document.addEventListener('turbo:load', () => {
 });
 
 
+export default Matching;
+
 //export default withTranslation()(Matching);
 
 /*// withTranslation で t を注入

app/javascript/matching.js

@@ -8,7 +8,7 @@
 <%#= react_component("matching", { }) %>
 
 <meta id="matching-data"  data-session-id="<%= session.id.to_s %>" data-matching-queue="<%= @matching_queue_data %>">
-<%= react_component("Header", { logoPath: asset_path("Logo.png") }) %>
+<%#= react_component("Header", { logoPath: asset_path("Logo.png") }) %>
 <%= stylesheet_link_tag 'game_lobby_matching_board', media: 'all' %>
 
 

app/views/matching/game_lobby_matching_board.html.erb

@@ -1,2 +1,11 @@
-#!/usr/bin/env ruby
-exec "./bin/rails", "server", *ARGV
+#!/usr/bin/env sh
+
+if gem list --no-installed --exact --silent foreman; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+# Default to port 3000 if not specified
+export PORT="${PORT:-3000}"
+
+exec foreman start -f Procfile.dev --env /dev/null "$@"

bin/dev

@@ -4,12 +4,17 @@
   # アセットの動的コンパイルを有効化
   config.assets.compile = true
   config.assets.debug = true
+  #config.assets.compile = false # jsbundling-rails使用時はfalse
+  #config.assets.debug = false # jsbundling-rails使用時はfalse
+  
   config.assets.digest = false
+  #config.assets.digest = true
 
   # Settings specified here will take precedence over those in config/application.rb.
 
-  # Make code changes take effect immediately without server restart.
-  config.enable_reloading = true
+  # コード変更を即時反映
+  config.cache_classes = false
+  config.enable_reloading = true # サーバーの再起動なしで、コードの変更を即時に反映させる。
 
   # Do not eager load code on boot.
   config.eager_load = false