From 858b54313941e5fb57ecc838d7758a80f06be83a Mon Sep 17 00:00:00 2001 From: tsuchiya-yu2 Date: Mon, 24 Aug 2026 17:07:43 +0900 Subject: [PATCH 1/6] =?UTF-8?q?fix:=20=E5=9B=BA=E5=AE=9A=E3=83=98=E3=83=83?= =?UTF-8?q?=E3=83=80=E3=83=BC=E3=81=A8=E3=82=B3=E3=83=B3=E3=83=86=E3=83=B3?= =?UTF-8?q?=E3=83=84=E3=81=AE=E9=87=8D=E3=81=AA=E3=82=8A=E3=82=92=E8=A7=A3?= =?UTF-8?q?=E6=B6=88=E3=81=97=E3=83=AC=E3=82=B9=E3=83=9D=E3=83=B3=E3=82=B7?= =?UTF-8?q?=E3=83=96=E8=A1=A8=E7=A4=BA=E3=82=92=E6=95=B4=E3=81=88=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Rails 8へのアップグレードでカスタムスタイルシートが失われ、fixed-topな navbarぶんの余白を確保していたbodyのpadding-topが消えていたため、全ページで 見出しがヘッダーに潜り込んでいた。 navbarの高さをCSSカスタムプロパティとして定義し、min-heightでnavbar側の下限を 固定したうえで同じ値をbodyのpadding-topへ渡すことで、高さと余白が常に一致する ようにした。値はブレークポイントに連動させ、lg未満は3.5rem、lg以上は4rem。 ページ内リンクの着地点も隠れないようscroll-padding-topを同値で設定する。 あわせて以下のレスポンシブ調整を行った。 - navbarの展開をnavbar-expand-xlからnavbar-expand-lgへ変更。1200px未満で ハンバーガーのままだったのを992px以上で展開されるようにした - フィードバックのテキストエリアが全幅でoffset-2 col-8固定だったのを 段階的な指定に変更し、他ページの段組みと揃えた --- app/assets/stylesheets/_layout.scss | 27 +++++++++++++++++++ .../stylesheets/application.bootstrap.scss | 1 + app/views/feedbacks/new.html.slim | 2 +- app/views/shared/_navbar.html.slim | 2 +- 4 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 app/assets/stylesheets/_layout.scss diff --git a/app/assets/stylesheets/_layout.scss b/app/assets/stylesheets/_layout.scss new file mode 100644 index 0000000..a0064a9 --- /dev/null +++ b/app/assets/stylesheets/_layout.scss @@ -0,0 +1,27 @@ +$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); +} + +.feedback-input { + resize: none; + height: 280px; +} diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss index b61b612..15df8c2 100644 --- a/app/assets/stylesheets/application.bootstrap.scss +++ b/app/assets/stylesheets/application.bootstrap.scss @@ -1,2 +1,3 @@ @import 'bootstrap/scss/bootstrap'; @import 'bootstrap-icons/font/bootstrap-icons'; +@import 'layout'; diff --git a/app/views/feedbacks/new.html.slim b/app/views/feedbacks/new.html.slim index 3cfc36b..be2d9b9 100644 --- a/app/views/feedbacks/new.html.slim +++ b/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 diff --git a/app/views/shared/_navbar.html.slim b/app/views/shared/_navbar.html.slim index 86dbf1a..3f162a1 100644 --- a/app/views/shared/_navbar.html.slim +++ b/app/views/shared/_navbar.html.slim @@ -1,4 +1,4 @@ -nav.navbar.navbar-expand-xl.navbar-dark.bg-secondary.fixed-top +nav.navbar.navbar-expand-lg.navbar-dark.bg-secondary.fixed-top = link_to 'ReLINE', root_path, class: 'navbar-brand ps-3' button.navbar-toggler.me-3 data-bs-toggle='collapse' data-bs-target="#navbarSupportedContent" aria-label="Toggle navigation" span.navbar-toggler-icon From e502679418c1b2ecdac347796d878efa7f0b085b Mon Sep 17 00:00:00 2001 From: tsuchiya-yu2 Date: Mon, 24 Aug 2026 17:08:02 +0900 Subject: [PATCH 2/6] =?UTF-8?q?fix:=20Rails=208=E7=A7=BB=E8=A1=8C=E3=81=A7?= =?UTF-8?q?=E5=A4=B1=E3=82=8F=E3=82=8C=E3=81=9F=E3=83=95=E3=82=A9=E3=83=B3?= =?UTF-8?q?=E3=83=88=E3=81=A8=E3=83=95=E3=82=A7=E3=83=BC=E3=83=89=E3=82=A4?= =?UTF-8?q?=E3=83=B3=E3=81=AE=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E3=82=92?= =?UTF-8?q?=E5=BE=A9=E5=85=83=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Rails 8へのアップグレードで削除されたスタイルのうち、以下がクラス名だけ ビューに残って無効になっていたため復元する。 - .web-font / .meiryo-font: Hachi Maru PopとMeiryoのフォント指定。 Google FontsはSassの@import url(...)だとバンドル途中に出力されて無効に なるため、preconnectを添えてhead内のlinkで読み込む。display=swapのため テキストの描画はブロックしない - .fade-in / .fade-in-up / .scroll-in: スクロール連動のフェードイン。 prefers-reduced-motionではアニメーションせず最初から表示する scroll.jsは判定をgetBoundingClientRect().topから直接行う形に整理したうえで、 初期表示時とTurbo Drive遷移後にも実行するようにした。従来はスクロールする まで実行されず、ファーストビューに入っている要素がopacity: 0のまま残っていた。 あわせてresizeにも追随させ、リスナはpassive、判定対象は未表示の要素に絞った。 --- app/assets/stylesheets/_layout.scss | 34 +++++++++++++++++++++++++ app/javascript/scroll.js | 32 +++++++++++------------ app/views/layouts/application.html.slim | 3 +++ 3 files changed, 53 insertions(+), 16 deletions(-) diff --git a/app/assets/stylesheets/_layout.scss b/app/assets/stylesheets/_layout.scss index a0064a9..e2571e8 100644 --- a/app/assets/stylesheets/_layout.scss +++ b/app/assets/stylesheets/_layout.scss @@ -21,6 +21,40 @@ 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; + } +} + +.web-font { + font-family: 'Hachi Maru Pop', cursive; +} + +.meiryo-font { + font-family: Meiryo, sans-serif; +} + .feedback-input { resize: none; height: 280px; diff --git a/app/javascript/scroll.js b/app/javascript/scroll.js index dc4f963..60f1ad3 100644 --- a/app/javascript/scroll.js +++ b/app/javascript/scroll.js @@ -1,18 +1,18 @@ -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; + + targets.forEach((target) => { + if (target.getBoundingClientRect().top < windowHeight - REVEAL_OFFSET) { + 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); diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim index 793fae5..8b06952 100644 --- a/app/views/layouts/application.html.slim +++ b/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 From 020b95e4d96de343d54c59dd7bb5faae998c0ac0 Mon Sep 17 00:00:00 2001 From: tsuchiya-yu2 Date: Mon, 24 Aug 2026 17:08:14 +0900 Subject: [PATCH 3/6] =?UTF-8?q?perf:=20=E3=83=8A=E3=83=93=E3=82=B2?= =?UTF-8?q?=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=AA=E3=83=B3=E3=82=AF?= =?UTF-8?q?=E3=82=92=E3=83=97=E3=83=AA=E3=83=AD=E3=83=BC=E3=83=89=E3=81=97?= =?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B8=E9=81=B7=E7=A7=BB=E3=81=AE=E5=BE=85?= =?UTF-8?q?=E3=81=A1=E6=99=82=E9=96=93=E3=82=92=E3=81=AA=E3=81=8F=E3=81=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ナビゲーションのリンクにdata-turbo-preloadを付与し、初期表示の完了後に Turbo Driveが各ページを先読みしてスナップショットキャッシュへ格納する ようにした。クリック時はキャッシュから即描画されるため、サーバー応答を 待たずに遷移する。 ローカルでの実測では、クリックから描画までが応答待ちの265ms程度から13msに なった。Turbo 8はホバー時のプリフェッチが既定で有効だが、タッチデバイスでは ホバーがないためプリロードの方が確実に効く。 なおdata-turbo="false"でHotwireの対象から外す案は採らなかった。毎回フル リロードになりCSS/JSの再取得と再パースが発生するぶん、かえって遅くなるため。 --- app/views/shared/_navbar.html.slim | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/views/shared/_navbar.html.slim b/app/views/shared/_navbar.html.slim index 3f162a1..849153f 100644 --- a/app/views/shared/_navbar.html.slim +++ b/app/views/shared/_navbar.html.slim @@ -1,26 +1,26 @@ nav.navbar.navbar-expand-lg.navbar-dark.bg-secondary.fixed-top - = link_to 'ReLINE', root_path, class: 'navbar-brand ps-3' + = 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 | フィードバック From 7a44fbd6406037848c4be0f26ffa8ae34bd59589 Mon Sep 17 00:00:00 2001 From: tsuchiya-yu2 Date: Mon, 24 Aug 2026 17:08:38 +0900 Subject: [PATCH 4/6] =?UTF-8?q?refactor:=20=E9=9D=9E=E6=8E=A8=E5=A5=A8?= =?UTF-8?q?=E3=81=AEconfig.cache=5Fclasses=E3=82=92config.enable=5Freloadi?= =?UTF-8?q?ng=E3=81=B8=E7=BD=AE=E3=81=8D=E6=8F=9B=E3=81=88=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit config.cache_classesはRails 8.1で非推奨のため、後継のconfig.enable_reloading へ移行する。真偽が反転するため、意味が変わらないよう1対1で対応させた。 - development: cache_classes = false -> enable_reloading = true - test: cache_classes = false -> enable_reloading = true - production: cache_classes = true -> enable_reloading = false development / testでRails.autoloaders.main.reloading_enabled?が従来どおり trueであることを確認済み。 --- config/environments/development.rb | 2 +- config/environments/production.rb | 2 +- config/environments/test.rb | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/config/environments/development.rb b/config/environments/development.rb index 99ddf8a..9ecdb33 100644 --- a/config/environments/development.rb +++ b/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 diff --git a/config/environments/production.rb b/config/environments/production.rb index ba6662a..77d2999 100644 --- a/config/environments/production.rb +++ b/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 diff --git a/config/environments/test.rb b/config/environments/test.rb index 32f33c3..70694e1 100644 --- a/config/environments/test.rb +++ b/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 From afa11f7ca9bb369d4e071350ca93f7d066138f22 Mon Sep 17 00:00:00 2001 From: tsuchiya-yu2 Date: Mon, 24 Aug 2026 17:08:52 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=E3=83=88=E3=83=83=E3=83=97?= =?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AE=E4=BD=BF=E3=81=84=E6=96=B9?= =?UTF-8?q?=E3=82=BB=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92lg?= =?UTF-8?q?=E4=BB=A5=E4=B8=8A=E3=81=A7=E5=B7=A6=E5=8F=B3=E4=BA=A4=E4=BA=92?= =?UTF-8?q?=E3=81=AE2=E3=82=AB=E3=83=A9=E3=83=A0=E3=81=AB=E3=81=99?= =?UTF-8?q?=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit すべてのセクションが「見出し -> イラスト」の縦積み固定だったため、画面幅が あっても中央の狭い1カラムに収まり続け、縦に非常に長くなっていた。 lg以上ではテキストとイラストを横並びにし、セクションごとに左右を入れ替える ジグザグ配置にした。左右の入れ替えはorder-*で行うためDOM順は常にテキストが 先頭で、スマホでの縦積み順とスクリーンリーダーの読み上げ順が左右どちらの パターンでも一貫する。lg未満は従来どおりの縦積み。 繰り返しになるブロックはパーシャルへ切り出した。見出しの改行はsafe_joinで 組み立て、rawやhtml_safeを使わずに済ませている。またレイアウトが container-fluidで全幅のため、横並び時に左右へ離れすぎないようセクションの幅を 960pxで頭打ちにした。 装飾目的のイラストにはalt=""を明示した。従来はalt属性自体がなく、 スクリーンリーダーがファイル名を読み上げる状態だった。 ワイド画面での全体の高さは4484pxから3947pxになった。 --- app/assets/stylesheets/_layout.scss | 5 ++ app/views/customers/_usage_section.html.slim | 10 ++++ app/views/customers/top.html.slim | 54 ++++++++------------ 3 files changed, 36 insertions(+), 33 deletions(-) create mode 100644 app/views/customers/_usage_section.html.slim diff --git a/app/assets/stylesheets/_layout.scss b/app/assets/stylesheets/_layout.scss index e2571e8..8e2cb4d 100644 --- a/app/assets/stylesheets/_layout.scss +++ b/app/assets/stylesheets/_layout.scss @@ -47,6 +47,11 @@ html { } } +.usage-section { + max-width: 960px; + margin-inline: auto; +} + .web-font { font-family: 'Hachi Maru Pop', cursive; } diff --git a/app/views/customers/_usage_section.html.slim b/app/views/customers/_usage_section.html.slim new file mode 100644 index 0000000..8fda249 --- /dev/null +++ b/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: '' diff --git a/app/views/customers/top.html.slim b/app/views/customers/top.html.slim index 768d6e2..aadaf37 100644 --- a/app/views/customers/top.html.slim +++ b/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 - | あの日を最後に
連絡が途切れた人はいませんか？ - .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 - | 猫さんが
間を取り持つ手助けをします。 - .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 - | 最後の投稿から
3週間〜2ヶ月後に
猫さんが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,14 @@ h1.mt-5 | 約2ヶ月にしたい場合は
"Would you set to latter." .mb-5 | デフォルトに戻したい場合は
"Would you set to default."
と投稿してください🖍 -.fade-in.fade-in-up.col-md-6.offset-md-3 + +.fade-in.fade-in-up.usage-section.my-5 .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' + +.usage-section.my-5 + = image_tag 'undraw_friends_r511.webp', class: 'img-fluid', alt: '' From 3644638624415790a7d6a343fbf4fd443e40da55 Mon Sep 17 00:00:00 2001 From: tsuchiya-yu2 Date: Mon, 24 Aug 2026 17:19:05 +0900 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC?= =?UTF-8?q?=E6=8C=87=E6=91=98=E3=82=92=E5=8F=8D=E6=98=A0=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - フェードインの発火位置をビューポート高に連動させる。オフセットが275px固定 だったため、高さ275px以下のビューポートでは画面内の要素が表示されなかった。 windowHeightの35%を上限にすることで、786px以上の一般的なビューポートでは 従来と同じ位置で発火しつつ、短いビューポートでも表示されるようにした - 働きかけを止めるセクションのテキストとイラストが別ブロックに分かれており、 lg以上でも縦積みのままだったため、他と同じくusage_sectionへまとめた。 直前のセクションがテキスト左のため、reverseで左右の交互を維持している --- app/javascript/scroll.js | 3 ++- app/views/customers/top.html.slim | 12 ++---------- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/app/javascript/scroll.js b/app/javascript/scroll.js index 60f1ad3..3c4e0d5 100644 --- a/app/javascript/scroll.js +++ b/app/javascript/scroll.js @@ -3,9 +3,10 @@ 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 - REVEAL_OFFSET) { + if (target.getBoundingClientRect().top < windowHeight - revealOffset) { target.classList.add('scroll-in'); } }); diff --git a/app/views/customers/top.html.slim b/app/views/customers/top.html.slim index aadaf37..de5e3ba 100644 --- a/app/views/customers/top.html.slim +++ b/app/views/customers/top.html.slim @@ -34,13 +34,5 @@ h1.mt-5 .mb-5 | デフォルトに戻したい場合は
"Would you set to default."
と投稿してください🖍 -.fade-in.fade-in-up.usage-section.my-5 - .h4.mt-5 - | もし働きかけを止めたいときは - .h4.mt-5 - | "Cat sleeping on our Memory." - .h4.mt-5 - | と投稿してください🐾 - -.usage-section.my-5 - = image_tag 'undraw_friends_r511.webp', class: 'img-fluid', alt: '' += render 'usage_section', lines: [['もし働きかけを止めたいときは'], ['"Cat sleeping on our Memory."'], ['と投稿してください🐾']], + image: 'undraw_friends_r511.webp', reverse: true