Posted by Kousukei
はじめに (対象読者・この記事でわかること)
この記事は、JavaScriptの基本的な知識を持ち、ウェブサイトに動的なUI要素やアニメーションを実装したいと考えている開発者、特にユーザー体験（UX）の向上に興味がある方を対象としています。
この記事を読むことで、伝統的なMarqueeのようなテキストスクロールにおいて、JavaScriptを使ってそのテキストの進行方向をリアルタイムで検知し、対応する方向指示ボタンを視覚的に「点滅」させる方法を具体的に理解し、実装できるようになります。これにより、ユーザーに対してテキストがどちらの方向に動いているのかを直感的に伝え、インタラクティブなウェブサイト構築の一助となるでしょう。
古くから存在するMarquee要素は、そのアクセシビリティや制御性の低さから現代のウェブ開発では推奨されません。しかし、情報伝達手段として特定のコンテンツを強調表示するニーズは存在します。この記事では、JavaScriptとCSSを組み合わせることで、より制御可能でユーザーフレンドリーな形でMarquee風のUIを再構築し、さらにUXを向上させるための小技を紹介します。
前提知識
この記事を読み進める上で、以下の知識があるとスムーズです。 * HTML/CSSの基本的な知識（要素の配置、スタイル設定、アニメーションの定義など） * JavaScriptの基本的な知識（変数、関数、DOM操作、イベントハンドリングなど）
動的UIの必要性とMarqueeの再考
ウェブサイトにおいて、ユーザーに特定の情報を効果的に伝えるために、テキストや画像が動く要素は昔から利用されてきました。その代表的な例がHTMLの<marquee>タグです。しかし、このタグはアクセシビリティの課題（視覚障害のあるユーザーが追いにくい、キーボード操作が困難など）や制御の難しさから、現在では非推奨となっています。
それでも、ニュースティッカーやプロモーション情報など、短いテキストを繰り返し表示し、ユーザーの注意を引きたいというニーズは依然として存在します。現代のウェブ開発では、このような動的な表示はJavaScriptとCSSを使って実装することが一般的です。これにより、より柔軟な制御、高いアクセシビリティ、そしてパフォーマンスの最適化が可能になります。
今回のテーマである「動いている文字の方向に応じて、その方向指示ボタンを点滅で示す」というアプローチは、このようなJavaScriptとCSSで再構築されたMarquee風のUIに、視覚的なフィードバックを加えることで、ユーザーエクスペリエンスを一層向上させることを目的としています。ユーザーはテキストの動きを見ているだけでなく、直感的に「今、右（または左）に進んでいるから、このボタンが点滅しているんだな」と理解でき、もし手動でスクロール方向を切り替えるボタンがある場合、どちらのボタンが現在有効なのかを一目で判別できるため、操作性の向上にも繋がります。
JavaScriptによる方向連動型点滅UIの実装
それでは、具体的な実装方法についてステップバイステップで解説していきます。今回は、Marquee風のテキスト要素と、その動きを制御する（または現在の方向を示す）左右の矢印ボタンを想定します。
ステップ1: HTML構造とCSSスタイリング
まずは、基本的なHTML構造と、Marquee風の動き、そして点滅効果のためのCSSを準備します。
Html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Marquee方向連動点滅デモ</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="marquee-container"> <button id="leftArrow" class="arrow-button">◀</button> <div class="marquee-wrapper"> <div id="marqueeText" class="marquee-text"> JavaScriptで動くテキストです！このテキストは左右にスクロールします。方向指示ボタンが点滅します！ </div> </div> <button id="rightArrow" class="arrow-button">▶</button> </div> <script src="script.js"></script> </body> </html>
次に、style.cssを作成します。
Cssbody { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; margin: 0; } .marquee-container { display: flex; align-items: center; width: 80%; max-width: 900px; background-color: #fff; border: 1px solid #ccc; padding: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); overflow: hidden; /* コンテナからはみ出すテキストを隠す */ } .marquee-wrapper { flex-grow: 1; overflow: hidden; /* ラッパー内でのみスクロール */ white-space: nowrap; /* テキストの折り返しを禁止 */ position: relative; height: 30px; /* テキストの高さに合わせる */ line-height: 30px; /* 垂直方向の中央揃え */ } .marquee-text { display: inline-block; /* テキストをインラインブロックにし、幅を持たせる */ position: absolute; left: 0; /* JavaScriptでこの値を変更する */ top: 0; will-change: transform; /* アニメーションの最適化 */ padding-left: 100%; /* 初期表示で画面外にテキストを隠すための余白 */ } .arrow-button { background-color: #007bff; color: white; border: none; padding: 10px 15px; margin: 0 5px; cursor: pointer; border-radius: 5px; font-size: 1.2em; transition: background-color 0.3s ease; } .arrow-button:hover { background-color: #0056b3; } /* 点滅アニメーション */ @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .blink { animation: blink 1s infinite alternate; /* 1秒で点滅、無限繰り返し、往復 */ }
ここでは、marquee-text要素のleftプロパティをJavaScriptで動かすことで、スクロールを実現します。点滅は、blinkクラスが付与された際に@keyframes blinkアニメーションが適用されるように設定しています。
ステップ2: JavaScriptでの動きの制御と方向判定
次に、script.jsにJavaScriptコードを記述します。ここでは、テキストのスクロール、方向の判定、そしてそれに応じたボタンの点滅処理を実装します。
Javascriptconst marqueeText = document.getElementById('marqueeText'); const leftArrow = document.getElementById('leftArrow'); const rightArrow = document.getElementById('rightArrow'); const marqueeWrapper = document.querySelector('.marquee-wrapper'); let position = 0; // テキストの現在の位置 let direction = 1; // 1:右方向, -1:左方向 const speed = 1; // スクロール速度 (ピクセル/フレーム) let lastPosition = 0; // 前回の位置を記録 let currentDirection = 'right'; // 'right' or 'left' // スクロールを開始/停止するフラグ let isScrolling = true; // テキストがWrapperの右端から左端まで移動するのに必要なオフセット // テキストの幅 + ラッパーの幅 const getScrollRange = () => { return marqueeText.offsetWidth + marqueeWrapper.offsetWidth; }; // スクロールアニメーションの実行 function animateMarquee() { if (!isScrolling) { requestAnimationFrame(animateMarquee); return; } const scrollRange = getScrollRange(); // 現在の位置を更新 position += speed * direction; // スクロール範囲の境界チェック if (direction === 1) { // 右方向 (テキストが左に移動) if (position >= marqueeText.offsetWidth) { position = -marqueeWrapper.offsetWidth; // 左端から再スタート } } else { // 左方向 (テキストが右に移動) if (position <= -marqueeWrapper.offsetWidth) { position = marqueeText.offsetWidth; // 右端から再スタート } } marqueeText.style.transform = `translateX(${-position}px)`; // 現在のスクロール方向を判定 const newDirection = (position > lastPosition) ? 'right' : 'left'; if (newDirection !== currentDirection) { currentDirection = newDirection; updateArrowBlink(currentDirection); // 方向が変わったら点滅を更新 } lastPosition = position; requestAnimationFrame(animateMarquee); } // 矢印ボタンの点滅を更新する関数 function updateArrowBlink(dir) { leftArrow.classList.remove('blink'); rightArrow.classList.remove('blink'); if (dir === 'left') { leftArrow.classList.add('blink'); } else if (dir === 'right') { rightArrow.classList.add('blink'); } } // 初期化 document.addEventListener('DOMContentLoaded', () => { // 初回実行 animateMarquee(); updateArrowBlink(currentDirection); // 最初は右方向なので右矢印を点滅 // デモとして、クリックでスクロールを停止/再開する機能 marqueeText.addEventListener('click', () => { isScrolling = !isScrolling; if (!isScrolling) { leftArrow.classList.remove('blink'); rightArrow.classList.remove('blink'); } else { updateArrowBlink(currentDirection); } }); // 左右ボタンで方向を切り替える（オプション） leftArrow.addEventListener('click', () => { direction = -1; // 左方向へ切り替え isScrolling = true; updateArrowBlink('left'); }); rightArrow.addEventListener('click', () => { direction = 1; // 右方向へ切り替え isScrolling = true; updateArrowBlink('right'); }); // ウィンドウのリサイズ時にスクロール範囲を再計算 window.addEventListener('resize', () => { // ラッパー幅が変更される可能性があるので、スクロール位置を調整 // ただし、この実装では position が絶対座標なので、複雑になる。 // 簡単化のため、リサイズ時は marqueeText の位置をリセットする position = 0; marqueeText.style.transform = `translateX(0px)`; }); });
このJavaScriptコードでは、requestAnimationFrame を使ってスムーズなアニメーションを実現しています。position 変数でテキストの現在の位置を管理し、directionで左右どちらに動くかを決定します。
animateMarquee()関数内で、テキストのtransformプロパティを更新してスクロールさせます。positionとlastPositionを比較することで、テキストが現在どちらの方向に動いているかを判定し、currentDirectionを更新します。updateArrowBlink()関数は、判定された方向に合わせて対応する矢印ボタンにblinkクラスを付け外しします。
ハマった点やエラー解決
1. 点滅のちらつきやパフォーマンス問題
setInterval を使ってテキストの移動や点滅のクラス切り替えを行うと、フレームレートが安定せず、アニメーションがカクカクしたり、点滅がちらついたりする場合があります。特に複数の要素を同時に動かす場合に顕著です。
解決策:
アニメーションにはrequestAnimationFrameを使用することが推奨されます。ブラウザの描画サイクルに同期するため、非常にスムーズなアニメーションが実現できます。上記のコードでは requestAnimationFrame を採用しています。点滅自体はCSSの@keyframesアニメーションに任せることで、ブラウザの最適化が働き、パフォーマンスが向上します。JavaScriptで頻繁にクラスを付け外しするのではなく、方向が変化した時のみクラスを更新するように工夫しました。
2. テキストが途切れる、または適切にループしない 特に右から左へ流れる（あるいはその逆）無限スクロールを実装する際、テキストの幅とコンテナの幅の関係で、テキストが完全に画面外に出る前に再出現したり、逆に画面が空白になったりすることがあります。
解決策:
marqueeTextのpadding-left: 100%;と、positionの調整ロジック（position = -marqueeWrapper.offsetWidth;やposition = marqueeText.offsetWidth;）が重要です。これにより、テキストがコンテナの端から完全に消えて、逆の端から滑らかに再出現するように調整します。getScrollRange()のようにテキストの幅とラッパーの幅を正確に考慮することも大切です。
3. スクロール速度がブラウザやデバイスによって異なる 速度をピクセル単位で固定しても、ブラウザのレンダリング速度やデバイスのパフォーマンスによって体感速度が変わることがあります。
解決策:
speed変数を調整することで、速度をコントロールできます。より厳密な時間ベースのアニメーションが必要な場合は、requestAnimationFrameのコールバックに渡されるタイムスタンプを利用して、フレーム間の経過時間に基づいて移動距離を計算する方法もありますが、今回のシンプルなMarqueeではピクセルベースで十分です。
解決策
上記のハマりどころを考慮し、最も効率的でスムーズな実装のために以下のポイントを取り入れました。
- アニメーションの基盤に
requestAnimationFrameを採用: ブラウザの描画タイミングに合わせた最適なパフォーマンスを提供します。 - CSSアニメーションによる点滅:
blinkクラスを付け外しするだけで、複雑なJavaScriptによるタイマー制御なしで滑らかな点滅を実現します。CSSアニメーションはメインスレッドをブロックしにくいため、パフォーマンス上の利点があります。 - 方向判定ロジックの最適化:
positionとlastPositionを比較するシンプルなロジックで方向を判定し、方向が変わった時のみ点滅クラスを更新することで、DOM操作の頻度を最小限に抑えています。 - レスポンシブ対応への考慮:
window.addEventListener('resize', ...)を利用して、ウィンドウサイズ変更時にスクロール範囲の再計算や位置のリセットを行うことで、レイアウト崩れを防ぎます。
これらのアプローチにより、ユーザーに快適な視覚的フィードバックを提供する、堅牢なMarquee風UIが構築できます。
まとめ
本記事では、JavaScriptとCSSを組み合わせることで、伝統的なMarqueeのようなテキストスクロールにおいて、そのテキストの進行方向に応じて対応する方向指示ボタンを点滅させるインタラクティブなUIの実装方法を解説しました。
- HTMLとCSSの準備: コンテナ、スクロールするテキスト、方向指示ボタンの構造を定義し、CSSで基本的なスタイルと点滅用のアニメーションを設定しました。
- JavaScriptによる動きの制御:
requestAnimationFrameを用いてテキストのスクロールアニメーションを実装し、テキストの現在位置と前回の位置を比較することで、リアルタイムでの方向判定を行いました。 - 方向連動型点滅の実装: 判定された方向に応じて、対応する矢印ボタンにCSSの点滅クラスを動的に付与・削除することで、視覚的なフィードバックを提供しました。
この記事を通して、JavaScriptによる動的なDOM操作やアニメーション制御の理解が深まり、ユーザーエクスペリエンスを向上させるための具体的な手法を学ぶことができたでしょう。テキストの動きとボタンの点滅を連動させることで、ユーザーはコンテンツの流れる方向を直感的に把握できるようになり、ウェブサイトの操作性が向上します。
今後は、さらに発展的な内容として、アクセシビリティ（ARIA属性の追加、キーボードナビゲーションの改善など）への対応、テキストのクリックによるスクロール一時停止・再開機能の強化、複数のMarquee要素を効率的に管理するコンポーネント化、あるいはスワイプ操作による方向変更などについても記事にする予定です。
参考資料