電光掲示板ポータルの文字速度変更

はじめまして。

カスタマイズ初心者で初めてこちらに投稿させて頂きます。

ガルーンポータル活用 Tips #4 「電光掲示板ポータル(ガルーン掲示板編)」

上記Tipsに記載のカスタマイズをGaroonに適用し利用しているのですが、

文字速度をもう少し早くしたい!といった場合に「jquery.marquee.js」

のどこの部分を書き換えれば良いのかが分からず困っております。

恐れ入りますがどなたかご教授頂けないでしょうか。どうぞよろしくお願いいたします。

/**
* author Remy Sharp
* url http://remysharp.com/tag/marquee
*/
var adjustment = 20;
(function ($) {
    $.fn.marquee = function (klass) {
        var newMarquee = [],
            last = this.length;

        // works out the left or right hand reset position, based on scroll
        // behavior, current direction and new direction
        function getReset(newDir, marqueeRedux, marqueeState) {
            var behavior = marqueeState.behavior, width = marqueeState.width, dir = marqueeState.dir;
            var r = 0;
            if (behavior == 'alternate') {
                r = newDir == 1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : width;
            } else if (behavior == 'slide') {
                if (newDir == -1) {
                    r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] : width;
                } else {
                    r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : 0;
                }
            } else {
                r = newDir == -1 ? marqueeRedux[marqueeState.widthAxis] : 0;
            }
            return r;
        }

        // single "thread" animation
        function animateMarquee() {
            var i = newMarquee.length,
                marqueeRedux = null,
                $marqueeRedux = null,
                marqueeState = {},
                newMarqueeList = [],
                hitedge = false;
                
            while (i--) {
                marqueeRedux = newMarquee[i];
                $marqueeRedux = $(marqueeRedux);
                marqueeState = $marqueeRedux.data('marqueeState');
                
                if ($marqueeRedux.data('paused') !== true) {
                    // TODO read scrollamount, dir, behavior, loops and last from data
                    marqueeRedux[marqueeState.axis] += (marqueeState.scrollamount * marqueeState.dir);

                    // only true if it's hit the end
                    hitedge = marqueeState.dir == -1 ? marqueeRedux[marqueeState.axis] <= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState) : marqueeRedux[marqueeState.axis] >= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);
                    
                    if ((marqueeState.behavior == 'scroll' && marqueeState.last == marqueeRedux[marqueeState.axis]) || (marqueeState.behavior == 'alternate' && hitedge && marqueeState.last != -1) || (marqueeState.behavior == 'slide' && hitedge && marqueeState.last != -1)) {                        
                        if (marqueeState.behavior == 'alternate') {
                            marqueeState.dir *= -1; // flip
                        }
                        marqueeState.last = -1;

                        $marqueeRedux.trigger('stop');

                        marqueeState.loops--;
                        if (marqueeState.loops === 0) {
                            if (marqueeState.behavior != 'slide') {
                                marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
                            } else {
                                // corrects the position
                                marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);
                            }

                            $marqueeRedux.trigger('end');
                        } else {
                            // keep this marquee going
                            newMarqueeList.push(marqueeRedux);
                            $marqueeRedux.trigger('start');
                            marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
                        }
                    } else {
                        newMarqueeList.push(marqueeRedux);
                    }
                    marqueeState.last = marqueeRedux[marqueeState.axis];

                    // store updated state only if we ran an animation
                    $marqueeRedux.data('marqueeState', marqueeState);
                } else {
                    // even though it's paused, keep it in the list
                    newMarqueeList.push(marqueeRedux);                    
                }
            }

            newMarquee = newMarqueeList;
            
            if (newMarquee.length) {
                setTimeout(animateMarquee, 25);
            }            
        }
        
        // TODO consider whether using .html() in the wrapping process could lead to loosing predefined events...
        this.each(function (i) {
            setWidth = $(this).attr('width') || $(this).width();
            if(setWidth < $(window).width()){
                setWidth = $(window).width() - adjustment;
            }
            //alert(setWidth);
            var $marquee = $(this),
                //width = $marquee.attr('width') || $marquee.width(),
                width = setWidth,
                height = $marquee.attr('height') || $marquee.height(),
                //$marqueeRedux = $marquee.after('<div ' + (klass ? 'class="' + klass + '" ' : '') + 'style="display: inline-block; width: ' + width + 'px; height: ' + height + 'px; overflow: hidden;"><div style="float: left; white-space: nowrap;">' + $marquee.html() + '</div></div>').next(),
                $marqueeRedux = $marquee.after('<div class="wrapper" ' + (klass ? 'class="' + klass + '" ' : '') + 'style="width: ' + width + 'px; overflow: hidden;"><div class="inner" style="float: left; white-space: nowrap;">' + $marquee.html() + '</div></div>').next(),
                marqueeRedux = $marqueeRedux.get(0),
                hitedge = 0,
                direction = ($marquee.attr('direction') || 'left').toLowerCase(),
                marqueeState = {
                    dir : /down|right/.test(direction) ? -1 : 1,
                    axis : /left|right/.test(direction) ? 'scrollLeft' : 'scrollTop',
                    widthAxis : /left|right/.test(direction) ? 'scrollWidth' : 'scrollHeight',
                    last : -1,
                    loops : $marquee.attr('loop') || -1,
                    scrollamount : $marquee.attr('scrollamount') || this.scrollAmount || 2,
                    behavior : ($marquee.attr('behavior') || 'scroll').toLowerCase(),
                    width : /left|right/.test(direction) ? width : height
                };
            
            // corrects a bug in Firefox - the default loops for slide is -1
            if ($marquee.attr('loop') == -1 && marqueeState.behavior == 'slide') {
                marqueeState.loops = 1;
            }

            $marquee.remove();
            
            // add padding
            if (/left|right/.test(direction)) {
                $marqueeRedux.find('> div').css('padding', '0 ' + width + 'px');
            } else {
                $marqueeRedux.find('> div').css('padding', height + 'px 0');
            }
            
            // events
            $marqueeRedux.bind('stop', function () {
                $marqueeRedux.data('paused', true);
            }).bind('pause', function () {
                $marqueeRedux.data('paused', true);
            }).bind('start', function () {
                $marqueeRedux.data('paused', false);
            }).bind('unpause', function () {
                $marqueeRedux.data('paused', false);
            }).data('marqueeState', marqueeState); // finally: store the state
            
            // todo - rerender event allowing us to do an ajax hit and redraw the marquee

            newMarquee.push(marqueeRedux);

            marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
            $marqueeRedux.trigger('start');
            
            // on the very last marquee, trigger the animation
            if (i+1 == last) {
                animateMarquee();
            }
        });            

        return $(newMarquee);
    };
}(jQuery));

var timer = false;
(function ($) {
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        //wrapper��width
        setWidth = $(window).width() - adjustment;
        $('.wrapper').each(function(){
            //setWidth = $(this).attr('width') || $(this).width();
            $(this).css("width",setWidth);
            /*if(setWidth < $(window).width()){
                setWidth = $(window).width();
            }*/
        });
        //inner��padding
        $('.inner').each(function(){
            setPadding = setWidth;
            $(this).css("padding","0px "+ setWidth + "px");
        });
    }, 200);
});
}(jQuery));

Mikaさん

こんにちは。

 

実環境で試せてはいないですが、jquery.marquee.jsにオプションがあるようです。

jquery.marquee.jsはそのままで、処理を当てているJSの方を書き換えてみていかがでしょうか。

 

GitHub

↓こちらにオプションを色々変えた例があります。

各EDIT ON CODEの右上を押すとソースコードが見れます。

http://aamirafridi.com/jquery/jquery-marquee-plugin

$('.marquee p').marquee({
  speed: 5000,
});

Koichi

こんにちは。コメント頂きありがとうございます。

ご教授頂いたとおり処理を当てているJSにコードを書き換えてみたのですが…

上手く動作しない状況となっております。。

私の書き間違えだとは思うのですが、ご確認頂けると幸いです。

    // ---- makeHtml end ----//}}}
  
    function showSignage(newestFollow) {
      console.log(newestFollow);
      var number = newestFollow.getAttribute('number');
      var text = newestFollow.getAttribute('text');
      var signageHtml = makeSignageHtml(newestFollow);
      $('#signage').append(signageHtml);
      $('.marquee p').marquee({
        speed: 5000,
      });
  }

また、教えて頂きましたGitHubサイトにはHTMLやCSSの記述についても記載がありましたが、

GaroonのHTMLポートレットの書き換え?も必要なのでしょうか?

<!--
* Garoon Portal sample program
* Copyright (c) 2016 Cybozu
*
* Licensed under the MIT License
* https://opensource.org/licenses/mit-license.php
-->

<!-- ▼Javascript設定▼ -->
<script type="text/javascript" src="https://js.cybozu.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/g/cabinet/download.csp/-/jquery.marquee.js?fid=8&ticket=&hid=4&.js"></script>
<script type="text/javascript" src="/g/cabinet/download.csp/-/bulletinsignage_test.js?fid=10&ticket=&hid=4&.js"></script>

<!-- ▼CSS設定▼ -->
<link rel="stylesheet" href="/g/cabinet/download.csp/-/marquee.css?fid=9&ticket=&hid=4&.css" type="text/css" />

<style type="text/css">
<!--
/*↓設定変更可能↓*/
/*電光掲示板風*/
.ledText01 {
    margin: 0 auto -10px;  /*周りの余白を調整*/
    padding:5px 0;   /*文字周りの余白を調整*/
    /*color: #FFB400;*/   /*←フォントカラー例:オレンジ*/
    /*color: #FF51A8;*/   /*フォントカラー例:ピンク*/
    /*color: #00FF00;*/   /*フォントカラー例:グリーン*/
    color: #72645D;   /*フォントカラー例:とても暗い橙系の色*/
    font-size: 20px;   /*←フォントサイズ設定*/
}

/*シンプルパターン*/
.ledText02 {
    margin: 0 auto 20px;  /*周りの余白を調整*/
    padding:5px 0;   /*文字周りの余白を調整*/
    font-size: 20px;   /*←フォントサイズ設定*/
}
/*オリジナルの配色設定*/
.ledText02.marqueeColorScheme {
    color: #FFF;   /*←フォントカラー設定*/
    background: #333;   /*←背景色設定*/
}
-->
</style>

<div id="signage"></div>

度々の質問で恐縮ですが、よろしくお願いいたします。

ご確認ありがとうございます。

元々は正常に文字が横に流れており、下記部分だけ変更したところ文字が流れなくなったという認識で合っていますか?

ブラウザのデベロッパーツールのコンソールを開いたときに赤文字エラーは出てますでしょうか?

(上記リンクはkintoneの画面ですが、ガルーンでも同様です)

$('.marquee p').marquee(
    speed: 5000,
});

Koichi

早速のコメントありがとうございます。

現象といたしましては、ご教示頂いた部分のコードを変更したところ

文字は普通に流れている状況で、速度が変わっていないといった状況です。

ご説明が不足しており申し訳ございません。

赤文字のエラーが出ておりましたので画像を添付させて頂きます。どうぞよろしくお願いいたします。

すみません、私の認識が誤っていました。

よくよく見てみると、最初に投稿いただいたナレッジに添付されているものと

私が提示したGitHubのライブラリが別物でした。

 

お手数ですが、当初の状態に戻してください。

その上で、「jquery.marquee.js」の以下★の値を変えてみてください。

marqueeState = {
  dir : /down|right/.test(direction) ? -1 : 1,
  axis : /left|right/.test(direction) ? 'scrollLeft' : 'scrollTop',
  widthAxis : /left|right/.test(direction) ? 'scrollWidth' : 'scrollHeight',
  last : -1,
  loops : $marquee.attr('loop') || -1,
  scrollamount : $marquee.attr('scrollamount') || this.scrollAmount || 2,     // ★ここの2の値 
  behavior : ($marquee.attr('behavior') || 'scroll').toLowerCase(),
  width : /left|right/.test(direction) ? width : height,
};

Koichi

度々ありがとうございます。

早速「jquery.marquee.js」の値を変更し、適用してみたのですが、

普通に文字は流れておりますが、速度はそのままの状態を維持している状況です。

コンソールエラーも先ほどと変わらずといった形です。。

私がガルーン環境が無いのでkintoneでしか動作確認できていないのですが

例えば、「10」に変えるとかなり早く流れるようになります。

ちなみに、「dir」の値を「-1」に固定したら、左から右に流れるようになりますか?(デフォルトは右から左)

marqueeState = {
// dir : /down|right/.test(direction) ? -1 : 1, // コメント
dir : -1, // ★
  axis : /left|right/.test(direction) ? 'scrollLeft' : 'scrollTop',
  widthAxis : /left|right/.test(direction) ? 'scrollWidth' : 'scrollHeight',
  last : -1,
  loops : $marquee.attr('loop') || -1,
scrollamount : $marquee.attr('scrollamount') || this.scrollAmount || 10,     // ★
  behavior : ($marquee.attr('behavior') || 'scroll').toLowerCase(),
  width : /left|right/.test(direction) ? width : height,
};

Koichi

Kintoneでの動作確認まで頂きありがとうございます。

大変失礼いたしました。こちら側のブラウザのキャッシュの問題でございました。

先ほど記述頂いたコードで「10」に設定してみたところ、文字がかなり早く流れる様になりました。

微調整を行い本番環境に早速適用してみたいと思います!

この度はご丁寧に教えてくださりありがとうございました。

キャッシュでしたか。解決されて何よりです!