RailsでScrollHintをサクッと導入する

はじめに

• Ruby on RailsでScrollHintを使いたい時のメモ

ScrollHintとは

• 要素がスクロール可能であることをユーザに伝えるためのもの
  • https://appleple.github.io/scroll-hint/

ScrollHintを表示したかった背景

• とあるサービスの管理画面でテーブルを表示しているが、スマホ表示も要件に追加された
• スクロールヒントがないと、見切れているカラムにユーザが気づかない可能性があり不親切

前提

• Ruby3.1, Rails7を使用している
• propshaft, importmapを使用している

手順

1. ScrollHintをインストール

importmapを使っているのでJavaScriptとCSSは
それぞれ別の方法でインストールする必要がある（ちょっと面倒）

JavaScript

bash

./bin/importmap pin scroll-hint

importmap.rb でバージョンを確認する

config/importmap.rb

pin "scroll-hint" # @1.2.5  <-- 今回は1.2.5 だった

CSS

• 上記で確認したバージョンでインストールします

bash

curl -o app/assets/stylesheets/scroll-hint.css https://unpkg.com/scroll-hint@1.2.5/css/scroll-hint.css

2. ScrollHintを読み込むJSのコントローラを設定

StimulusのControllerを追加してscroll-hintを読み込みます

app/javascript/controllers/scroll_hint_controller.js

import { Controller } from "@hotwired/stimulus"
import ScrollHint from "scroll-hint"

export default class extends Controller {
  connect() {
    if (!this.scrollHintInstance) {
      this.scrollHintInstance = new ScrollHint('.js-scrollable', {
        i18n: {
          scrollable: "スクロールできます"
        }
      });
    }
  }

  disconnect() {
    if (this.scrollHintInstance) {
      this.scrollHintInstance = null;
    }
  }
}

3. ScrollHintのCSSを読み込む設定

layout/application.html.erb

<%# "scroll-hint" を追記 %>
<%= stylesheet_link_tag "application", "scroll-hint", "data-turbo-track": "reload" %>

3. erbファイルを追加する

• data-controller="scroll-hint"を指定する
  • app/javascript/controllers/scroll_hint_controller.jsの対象にするため
• class="js-scrollable"を指定する
  • ScrollHintが読み込むため

app/views/users/index.html.erb

<%# ファイル名は仮なのでどこでもよい %>
<table class="min-w-full border border-gray-300 divide-y divide-gray-300">
  <thead>
    <tr>
      <th class="px-4 py-2 text-center border border-gray-300 whitespace-nowrap">名前</div>
      <th class="px-4 py-2 text-center border border-gray-300 whitespace-nowrap">性別</div>
      <th class="px-4 py-2 text-center border border-gray-300 whitespace-nowrap">住所</div>
      <th class="px-4 py-2 text-center border border-gray-300 whitespace-nowrap">メールアドレス</div>
      <th class="px-4 py-2 text-center border border-gray-300 whitespace-nowrap">役割</div>
      <th class="px-4 py-2 text-center border border-gray-300 whitespace-nowrap">プロフィール</div>
      <th class="px-4 py-2 text-center border border-gray-300 whitespace-nowrap">状態</div>
  <tbody>
    <%# 必要に応じて実際のモデル等に置き換えてください %>
    <% 5.times do %>
      <tr>
        <td class="px-4 py-2 text-left border border-gray-300 whitespace-nowrap">サンプル太郎</div>
        <td class="px-4 py-2 text-center border border-gray-300 whitespace-nowrap">男</div>
        <td class="px-4 py-2 text-left border border-gray-300 whitespace-nowrap">東京都千代田区千代田1-1-1</div>
        <td class="px-4 py-2 text-left border border-gray-300 whitespace-nowrap">[e-mail]</div>
        <td class="px-4 py-2 text-left border border-gray-300 whitespace-nowrap">管理者</div>
        <td class="px-4 py-2 text-left border border-gray-300 whitespace-nowrap">こんにちは、私は太郎です。好きなスポー...</div>
        <td class="px-4 py-2 text-center border border-gray-300 whitespace-nowrap">アクティブ</div>

表示

次のような「スクロールできます」の案内が出たらOK