カラーミー 2024年01月09日 naeco.jp 機能追加カラーミーショップ JS / jQuery

カラーミーショップにニュースティッカーを設置する

カラーミーショップにおいて、ヘッダー上に一行ニュースを表示する欄があるサイトをときどき見かけます。
簡単に更新できる作り方をしておくと、利便性が大幅アップします。

今回は、長文テキストをニュースとして流したい要望があったので、プラグインを入れて、自前でコードを追加して作り込んでみました。
サンプルコードを書きましたので、参考にどうぞ。

AcmeTicker

ニュースティッカーのjQueryプラグインは、いくつか種類があります。
デモを見て、自分のサイトに合いそうなものを選びます。

今回は、画面にはみ出るくらいの長文テキストを右から左へ流したい、という要望があったので、AcmeTickerを設置しました。このプラグインは長文を流すのに向いています。

jsファイルは下記サイトからダウンロードして、手持ちのサーバーにアップロードして使います。
公式）https://github.com/codersantosh/acmeticker

AcmeTickerの動作形式

AcmeTickerの動作は、以下の4種類あります。挙動はデモサイトを参考にどうぞ。
Marqueeを選ぶと、テキストが横方向に流れます。

Vertical
Horizontal
Marquee
Typewriter

AcmeTickerのオプション

流れる速度、流れる方向、フォーカス時ホバー時に動作を止めるか、などのオプションがあります。
機能はシンプルなので、設置も難しくないです。

type : (string) vertical/horizontal/marquee/typewriter
autoplay: ( number ) Recommended : For vertical/horizontal 4000, For typewriter 2000, marquee doesnot take this option
speed: ( number ) Recommended : For vertical/horizontal 600, For typewriter 50, For marquee 0.05
direction: ( string ) Recommended : For vertical up/down, For horizontal/marquee right/left
pauseOnFocus: ( boolean )
pauseOnHover: ( boolean )
controls : Set of selectors for prev, next and toggle button

controls: {
prev: /Can be used for vertical/horizontal/typewriter//not work for marquee/
next: '',/Can be used for vertical/horizontal/typewriter//not work for marquee/
toggle: ''/Can be used for vertical/horizontal/marquee/typewriter/
}

設置する一行ニュースティッカーの概要

カラーミーショップを使う場合は更新しやすいように、管理画面内にテキストを入力してそれを表示するように作ります。使えそうな欄は以下の通りです。

「店長一言メモ」欄が全ページで表示可能な欄です。
「お知らせ」「フリースペース」欄はトップページのみ表示可能な欄です。

ニュースティッカーを全ページで表示したい場合は「店長一言メモ」欄を使うのがよいです。

サンプルコード

テキストを流し始めるまでの待機時間を3秒設けています。
読み込み直後、すぐにテキストが流れると読みにくいためです。
テキストと表示エリアの横幅の長さを調べて、テキスト＞表示エリアの横幅の場合、流れるようになっています。

ブラウザ幅を広げたり狭めたりすることで、動作したり止めたりします（リサイズ時の処理）。

表示したい場所に（HTML）

<!-- tickerプラグイン -->
<script src="https://your-domain.jp/js/acmeticker/acmeticker.js"></script>

<!-- News Ticker -->
<{if $manager_memo != ""}>
<div class="l-ticker">
  <div class="l-ticker-box u-container">
    <div class="l-ticker-box__inner">
      <ul class="js-acme-ticker">
        <li><{$manager_memo}></li>
      </ul>
    </div>
  </div>
</div>
<{/if}>

JavaScript

<script>
var abox = $('.l-ticker-box__inner');
var atext = $('.l-ticker-text');
var acontent = abox.html();
var tscroll = 0;
var outer;

/*ロード時*/
$(function () {	
  outer = atext.outerWidth();
  ticker();
});	

/*リサイズ時の処理*/
$(window).on('resize', function () {
  outer = atext.outerWidth();
  
  if(abox.width() < outer) {
    if(tscroll == 0) {
      tscroll = 1;
      ticker();
    }
  } else {
    if(tscroll == 1) {
      tscroll = 0;
      abox.html(acontent);

    } else {
      if(outer <= 0) {
        atext = $('.l-ticker-text');	
        outer = atext.outerWidth();			
      }
    }		
  }	
});
  
function ticker() {			
  if(abox.width() < outer) {
    window.setTimeout(function(){
      $('.js-acme-ticker').AcmeTicker({
        type:'marquee',
        direction: 'left',
        speed: 0.08, //スクロール速度
      });
    }, 3000); //スクロール前の停止時間
  }
}
</script>

CSS

.l-ticker {
  background: var(--bg-ticker-color);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  width: 100%;
  height: 34px;
}

.l-ticker a, .l-ticker a:hover  {
  color: #fff;
}

.l-ticker-box__inner {
  overflow: hidden; 
}

.l-ticker-box__inner li {
  text-align: center;
  padding: 11px 0;  
}

.acmeticker-wrap {
  height: 34px; 
}

.l-ticker-text {  
  white-space: nowrap; /*重要*/
}

おわりに

ヘッダー上に一行表示する場合は、スクロール時に隠れたり、出てきたりという挙動を求められることがあります（よくある挙動なので、他サイトで見たことがあるかもしれません）。

ヘッダーをposition: sticky;することでうまくいく場合もありますし、サイトのメニュー機能次第では崩れることもよくあります。
崩れる場合はJavaScriptで対応する必要が出てくるので、完璧を目指すと、この作り込みがかなり手間になります（ある程度かんたんに設置できる仕様をお願いすることになります）。

執筆者

えいじ@naeco.jp　この記事を書いた人

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら