fix: レスポンシブ表示の崩れとページ遷移の待ち時間を解消する

app/assets/stylesheets/_layout.scss

@@ -0,0 +1,66 @@
+$reline-navbar-height: 3.5rem;
+$reline-navbar-height-lg: 4rem;
+
+:root {
+  --reline-navbar-height: #{$reline-navbar-height};
+
+  @include media-breakpoint-up(lg) {
+    --reline-navbar-height: #{$reline-navbar-height-lg};
+  }
+}
+
+.navbar.fixed-top {
+  min-height: var(--reline-navbar-height);
+}
+
+body {
+  padding-top: var(--reline-navbar-height);
+}
+
+html {
+  scroll-padding-top: var(--reline-navbar-height);
+}
+
+.fade-in {
+  opacity: 0;
+  transition-duration: 1000ms;
+  transition-property: opacity, transform;
+}
+
+.fade-in-up {
+  transform: translate(0, 50px);
+}
+
+.scroll-in {
+  opacity: 1;
+  transform: translate(0, 0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade-in {
+    opacity: 1;
+    transition: none;
+  }
+
+  .fade-in-up {
+    transform: none;
+  }
+}
+
+.usage-section {
+  max-width: 960px;
+  margin-inline: auto;
+}
+
+.web-font {
+  font-family: 'Hachi Maru Pop', cursive;
+}
+
+.meiryo-font {
+  font-family: Meiryo, sans-serif;
+}
+
+.feedback-input {
+  resize: none;
+  height: 280px;
+}

app/assets/stylesheets/application.bootstrap.scss

@@ -1,2 +1,3 @@
 @import 'bootstrap/scss/bootstrap';
 @import 'bootstrap-icons/font/bootstrap-icons';
+@import 'layout';

app/javascript/scroll.js

@@ -1,18 +1,19 @@
-window.addEventListener('scroll', () => {                                         // 'スクロール'(イベント)が発生するとアロー関数以下が動きます。
-  let targets = document.querySelectorAll('.fade-in');                            // 'fade-in'クラスを集計。
-  for (let i = 0; i < targets.length; i++){                                       // iに0を代入し、'targets'の数を下回れば、iの値を増やします。
-    const selectorPlace = targets[i].getBoundingClientRect().top;                 // 個々の'targets'までの距離
-    const scrollAmount = window.scrollY || document.documentElement.scrollTop;    // 現在のスクロール位置
-    const referencePoint = selectorPlace + scrollAmount;                          // 基準点
-    const windowHeight = window.innerHeight;                                      // ユーザーが使用しているブラウザの高さ
-    if (scrollAmount > referencePoint - windowHeight + 275) {
-      targets[i].classList.add('scroll-in');
+const REVEAL_OFFSET = 275;
+
+const revealVisibleTargets = () => {
+  const targets = document.querySelectorAll('.fade-in:not(.scroll-in)');
+  const windowHeight = window.innerHeight;
+  const revealOffset = Math.min(REVEAL_OFFSET, windowHeight * 0.35);
+
+  targets.forEach((target) => {
+    if (target.getBoundingClientRect().top < windowHeight - revealOffset) {
+      target.classList.add('scroll-in');
     }
-  }
-});
+  });
+};
+
+window.addEventListener('scroll', revealVisibleTargets, { passive: true });
+window.addEventListener('resize', revealVisibleTargets, { passive: true });
 
-// https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for
-// https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect
-// https://developer.mozilla.org/ja/docs/Web/API/Window/scrollY
-// https://developer.mozilla.org/ja/docs/Web/API/Element/scrollTop
-// https://flex-box.net/js-scrollin/
+document.addEventListener('DOMContentLoaded', revealVisibleTargets);
+document.addEventListener('turbo:load', revealVisibleTargets);

app/views/customers/_usage_section.html.slim

@@ -0,0 +1,10 @@
+- reverse = local_assigns.fetch(:reverse, false)
+.fade-in.fade-in-up.usage-section.my-5
+  .row.align-items-center.g-4.g-lg-5
+    div class=['col-12', 'col-lg-6', ('order-lg-2' if reverse)]
+      - lines.each do |paragraph|
+        .h4.mb-0.mt-4.mt-lg-0
+          = safe_join(paragraph, tag.br)
+    div class=['col-12', 'col-lg-6', ('order-lg-1' if reverse)]
+      .usage-images
+        = image_tag image, class: 'img-fluid', alt: ''

app/views/customers/top.html.slim

@@ -8,37 +8,23 @@ h1.mt-5
 .special_thanks.mt-2.mb-5
   | 猫さんのイラスト協力：Sapico様
 
-/ ===== 使い方に関して(フェードイン方式) =====
-.fade-in.fade-in-up.col-md-6.offset-md-3
-  .h4.mt-5
-    | あの日を最後に<br>連絡が途切れた人はいませんか？
-  .usage-images.my-5
-    = image_tag 'undraw_true_friends_c94g.webp', class: 'img-fluid'
-.fade-in.fade-in-up.col-md-6.offset-md-3
-  .h4.mt-5
-    | 猫さんが<br>間を取り持つ手助けをします。
-  .usage-images.my-5
-    = image_tag 'undraw_connection_b38q.webp', class: 'img-fluid'
-.fade-in.fade-in-up.col-md-6.offset-md-3
-  .h4.mt-5
+= render 'usage_section', lines: [['あの日を最後に', '連絡が途切れた人はいませんか？']],
+                          image: 'undraw_true_friends_c94g.webp'
+= render 'usage_section', lines: [['猫さんが', '間を取り持つ手助けをします。']],
+                          image: 'undraw_connection_b38q.webp', reverse: true
+
+.fade-in.fade-in-up.usage-section.my-5
+  .h4
     | 具体的な操作は2つだけ
-.fade-in.fade-in-up.col-md-6.offset-md-3
-  .h4.mt-5
-    | 1.猫さんをLINEの友だちに追加
-  .usage-images.my-5
-    = image_tag 'undraw_Following_re_d5aa.webp', class: 'img-fluid'
-.fade-in.fade-in-up.col-md-6.offset-md-3
-  h4.mt-5
-    | 2.猫さんをグループに加える
-  .usage-images.my-5
-    = image_tag 'undraw_Chatting_re_j55r.webp', class: 'img-fluid'
-.fade-in.fade-in-up.col-md-6.offset-md-3
-  .h4.mt-5
-    | "2"まで完了すると…
-  .h4.mt-5
-    | 最後の投稿から<br>3週間〜2ヶ月後に<br>猫さんがLINEします。
-  .usage-images.my-5
-    = image_tag 'undraw_Online_messaging_re_qft3.webp', class: 'img-fluid'
+
+= render 'usage_section', lines: [['1.猫さんをLINEの友だちに追加']],
+                          image: 'undraw_Following_re_d5aa.webp'
+= render 'usage_section', lines: [['2.猫さんをグループに加える']],
+                          image: 'undraw_Chatting_re_j55r.webp', reverse: true
+= render 'usage_section', lines: [['"2"まで完了すると…'], ['最後の投稿から', '3週間〜2ヶ月後に', '猫さんがLINEします。']],
+                          image: 'undraw_Online_messaging_re_qft3.webp'
+
+.fade-in.fade-in-up.usage-section.my-5
   .mt-5.mb-4
     | 〜 通知時期を設定したい場合 〜
   .mb-3
@@ -47,12 +33,6 @@ h1.mt-5
     | 約2ヶ月にしたい場合は<br>"Would you set to latter."
   .mb-5
     | デフォルトに戻したい場合は<br>"Would you set to default."<br>と投稿してください🖍
-.fade-in.fade-in-up.col-md-6.offset-md-3
-  .h4.mt-5
-    | もし働きかけを止めたいときは
-  .h4.mt-5
-    | "Cat sleeping on our Memory."
-  .h4.mt-5
-    | と投稿してください🐾
-.col-md-6.offset-md-3.my-5
-  = image_tag 'undraw_friends_r511.webp', class: 'img-fluid'
+
+= render 'usage_section', lines: [['もし働きかけを止めたいときは'], ['"Cat sleeping on our Memory."'], ['と投稿してください🐾']],
+                          image: 'undraw_friends_r511.webp', reverse: true

app/views/feedbacks/new.html.slim

@@ -1,7 +1,7 @@
 h1.mt-5
   | フィードバック
 = form_with model: @feedback, data: { turbo: false } do |f|
-  .form-group.my-5.offset-2.col-8
+  .form-group.my-5.col-10.offset-1.col-md-8.offset-md-2.col-lg-6.offset-lg-3
     = f.label :text, Feedback.human_attribute_name(:text)
     = f.text_area :text, maxlength: 500, placeholder: '30〜500文字でお願いします🐾', class: 'form-control rounded-3 py-2 px-2 mt-3 feedback-input'
   .form-group.my-5

app/views/layouts/application.html.slim

@@ -16,6 +16,9 @@ html
     meta[name="viewport" content="width=device-width,initial-scale=1"]
     = csrf_meta_tags
     = csp_meta_tag
+    link[rel="preconnect" href="https://fonts.googleapis.com"]
+    link[rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"]
+    link[rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap"]
     = stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload'
     = javascript_include_tag 'application', 'data-turbo-track': 'reload', type: 'module'
   body.web-font

app/views/shared/_navbar.html.slim

@@ -1,26 +1,26 @@
-nav.navbar.navbar-expand-xl.navbar-dark.bg-secondary.fixed-top
-  = link_to 'ReLINE', root_path, class: 'navbar-brand ps-3'
+nav.navbar.navbar-expand-lg.navbar-dark.bg-secondary.fixed-top
+  = link_to 'ReLINE', root_path, class: 'navbar-brand ps-3', data: { turbo_preload: true }
   button.navbar-toggler.me-3 data-bs-toggle='collapse' data-bs-target="#navbarSupportedContent" aria-label="Toggle navigation"
     span.navbar-toggler-icon
   .collapse.navbar-collapse id='navbarSupportedContent'
     ul.navbar-nav.ps-3
       li.nav-item
-        = link_to root_path, class: 'nav-link my-1 mx-1 d-inline-flex align-items-center' do
+        = link_to root_path, class: 'nav-link my-1 mx-1 d-inline-flex align-items-center', data: { turbo_preload: true } do
           icon.fas.fa-home.me-2
           .guide-text
             | ホーム
       li.nav-item
-        = link_to terms_path, class: 'nav-link my-1 mx-1 d-inline-flex align-items-center' do
+        = link_to terms_path, class: 'nav-link my-1 mx-1 d-inline-flex align-items-center', data: { turbo_preload: true } do
           icon.far.fa-file.me-2
           .guide-text.ms-1
             | 利用規約
       li.nav-item
-        = link_to privacy_policy_path, class: 'nav-link my-1 mx-1 d-inline-flex align-items-center' do
+        = link_to privacy_policy_path, class: 'nav-link my-1 mx-1 d-inline-flex align-items-center', data: { turbo_preload: true } do
           icon.fas.fa-lock.me-2
           .guide-text
             | プライバシーポリシー
       li.nav-item
-        = link_to new_feedback_path, class: 'nav-link my-1 mx-1 d-inline-flex align-items-center' do
+        = link_to new_feedback_path, class: 'nav-link my-1 mx-1 d-inline-flex align-items-center', data: { turbo_preload: true } do
           icon.far.fa-comment.me-2
           .guide-text
             | フィードバック

config/environments/development.rb

@@ -16,7 +16,7 @@
   # In the development environment your application's code is reloaded any time
   # it changes. This slows down response time but is perfect for development
   # since you don't have to restart the web server when you make code changes.
-  config.cache_classes = false
+  config.enable_reloading = true
 
   # Do not eager load code on boot.
   config.eager_load = false

config/environments/production.rb

@@ -4,7 +4,7 @@
   # Settings specified here will take precedence over those in config/application.rb.
 
   # Code is not reloaded between requests.
-  config.cache_classes = true
+  config.enable_reloading = false
 
   # Eager load code on boot. This eager loads most of Rails and
   # your application in memory, allowing both threaded web servers

config/environments/test.rb

@@ -8,7 +8,7 @@
 Rails.application.configure do
   # Settings specified here will take precedence over those in config/application.rb.
 
-  config.cache_classes = false
+  config.enable_reloading = true
   config.action_view.cache_template_loading = true
 
   # Do not eager load code on boot. This avoids loading your whole application