LoginSignup
1
0

More than 3 years have passed since last update.

@hiroyuki_nagata(ながた ひろゆき)

【JavaScript】その他

Last updated at Posted at 2019-06-03

配列をシャッフルする

Fisher-Yates法というそうです
配列(Array)を拡張

関数

Array.prototype.shuffle = function() {
    var tmp;
    for(var i = this.length -1;i>0;i--){
        var r = Math.floor(Math.random()*(i+1));
        tmp = this[i];
        this[i] = this[r];
        this[r] = tmp;
    }
    return this;
};

使用方法

var a = [1,2,3,4,5,6,7,8,9];
console.log( a.shuffle() );

関連リンク

Fisher-Yates法

日付を取得する

概要

日付を取得する

スクリプト

function hirgetDate(){//日付取得
    var stoday = new Date();
    var syear = stoday.getFullYear();
    var smonth = stoday.getMonth()+1;

    return {
        year: syear ,
        month:smonth ,
        date:stoday.getDate() ,
        hours:stoday.getHours(),
        minutes:stoday.getMinutes(),
        seconds:stoday.getSeconds()
    }
}

スクロール禁止＆復活

概要

スクロール禁止＆復活

施策

スクロール禁止用関数

//スクロール禁止用関数
function no_scroll(){
    //PC用
    var scroll_event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
    $(document).on(scroll_event,function(e){
        e.preventDefault();
    });
    //SP用
    $(document).on('touchmove.noScroll', function(e) {
        e.preventDefault();
    });
}

スクロール復活用関数

//スクロール復活用関数
function return_scroll(){
    //PC用
    var scroll_event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
    $(document).off(scroll_event);
    //SP用
    $(document).off('.noScroll');
}

ダウンロードイベント

スクリプト

(function(){

    Element.prototype.downLoadEventListener = function(o){
        var method,action,serial;

        if(o.method){
            method = o.method;
        }else{
            method = 'GET';
        }

        if(o.data){
            serial = o.data;
        }else{
            serial = '';
        }
        if(o.url){
            action = o.url;
        }

        if(method==='POST'){
            var obj = {};
            var serAry = serial.split('&');
            for(var prop in serAry){
                var sr = serAry[prop];
                var sAry = sr.split('=');
                obj[sAry[0]] = sAry[1].replace(/%2F/g,'/');
            }
            serial = obj;
        }

        this.req = $.ajax({
            cache: false,
            type: method,
            url: action,
            data: serial,
            xhrFields: {
                responseType: 'blob'
            },
            xhr:function(){
                var xhr = $.ajaxSettings.xhr();
                xhr.addEventListener("progress",this.progress);
                return xhr;
            },
            progress:function(ev){
                if(o.progress){
                    o.progress(ev);
                }
            },
            success: function (response, status, xhr) {
                var filename = "";
                var disposition = xhr.getResponseHeader('Content-Disposition');

                if (disposition) {
                    var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                    var matches = filenameRegex.exec(disposition);
                    if (matches !== null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                }else{
                    var actAry = action.split('/');
                    filename = actAry[actAry.length-1];
                }

                try {
                    var blob = new Blob([response], { type: 'application/octet-stream' });

                    if (typeof window.navigator.msSaveBlob !== 'undefined') {
                        window.navigator.msSaveBlob(blob, filename);
                    } else {
                        var URL = window.URL || window.webkitURL;
                        var downloadUrl = URL.createObjectURL(blob);
                        if (filename) {

                            var ua = window.navigator.userAgent.toLowerCase();

                            var a = document.createElement("a");

                            if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome')===-1){
                                function saveAs(uri, filename) {
                                    var link = document.createElement('a');
                                    if (typeof link.download === 'string') {
                                        link.href = uri;
                                        link.download = filename;
                                        document.body.appendChild(link);
                                        link.click();
                                        document.body.removeChild(link);
                                    } else {
                                        window.location = uri;
                                    }
                                }

                                var reader = new FileReader();

                                reader.onloadend = function() {
                                    var base64data = reader.result;
                                    saveAs(base64data, filename);
                                };
                                reader.readAsDataURL(blob);
                            } else {
                                a.href = downloadUrl;
                                a.download = filename;
                                document.body.appendChild(a);
                                a.target = "_blank";
                                a.click();
                            }
                        } else {
                            window.location = downloadUrl;
                        }
                    }

                } catch (ex) {
                    console.log(ex);
                }

                if(o.success){
                    o.success();
                }
            },
            error: function () {
                if(o.error){
                    o.error();
                }
            }
        });

        this.abort = function(){
            this.req.abort();
        };

        return this;
    };///


})();

使用方法

$(function(){

    $('a').on('click',function(){
        try{
            var de = this.downLoadEventListener({
                method:'POST',
                url :'test.jpg',
                data :'a=1&b=2',
                success:function(){
                    console.log('success');
                },
                progress:function(ev){
                    console.log(ev);
                }
            });

        }catch (e){
            console.log(e);
        }
        return false;
    });
});

スムーズスクロール

施策

(function() {
    ////////////////
    function IlrSmoothScroll(){
        this.init();
    }
    IlrSmoothScroll.prototype = {
        w : window,
        arvPos : 0,
        pos : 0,
        speed : 5,
        lastTime : 0,
        vendors : ['ms', 'moz', 'webkit', 'o'],
        wheel : 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll',
        init : function(){

            var _me = this;
            _me.isTouch = ('ontouchstart' in window);
            _me.isPointer = ('onpointerenter' in window);

            if(_me.isTouch){
            }else{
                _me.set();
                _me.ready(function(){
                    _me.on(_me.w, _me.wheel + '.wheel' , function(e){
                        _me.onWheel(e);
                    });

                    _me.on(_me.w, 'scroll.pageScroll' , function () {
                        _me.arvPos = _me.w.pageYOffset;
                    });
                });
                _me.on(_me.w, 'load.pageScroll' , function () {
                    setTimeout(function(){
                        _me.pos = _me.arvPos = _me.w.pageYOffset;
                        _me.interval();
                    },50);
                });
            }
        },
        set : function(){
            var _me = this;

            for(var x = 0; x < _me.vendors.length && !_me.requestAnimationFrame; ++x) {
                _me.requestAnimationFrame = _me.w[_me.vendors[x]+'RequestAnimationFrame'];
                _me.cancelAnimationFrame = _me.w[_me.vendors[x]+'CancelAnimationFrame']
                    || _me.w[_me.vendors[x]+'CancelRequestAnimationFrame'];
            }

            if (!_me.requestAnimationFrame){
                _me.requestAnimationFrame = function(callback) {
                    var currTime = new Date().getTime();
                    var timeToCall = Math.max(0, 16 - (currTime - _me.lastTime));
                    var id = _me.w.setTimeout(function() { callback(currTime + timeToCall); },
                        timeToCall);
                    _me.lastTime = currTime + timeToCall;
                    return id;
                };
            }

            if (!_me.cancelAnimationFrame){
                _me.cancelAnimationFrame = function(id) {
                    clearTimeout(id);
                };
            }
        },
        ready : function(eventHandler){
            if (document.readyState === 'complete' || document.readyState !== 'loading') {
                eventHandler();
            } else {
                document.addEventListener('DOMContentLoaded', eventHandler);
            }
        },
        on:function(elem , event, cb, opts){
            if( !elem.namespaces ) // save the namespaces on the DOM element itself
                elem.namespaces = {};

            elem.namespaces[event] = cb;
            var options = opts || false;

            elem.addEventListener(event.split('.')[0], cb, options);
        },
        off:function(elem , event) {
            elem.removeEventListener(event.split('.')[0], elem.namespaces[event]);
            delete elem.namespaces[event];
        },
        onWheel:function(e) {
            var _me = this;
            if(!e) e = _me.w.event; //for legacy IE

            e.preventDefault();

            var delta = e.deltaY ? -(e.deltaY) : e.wheelDelta ? e.wheelDelta : -(e.detail);

            _me.pos = _me.pos - delta;

            var bdy = document.querySelector('body');

            if(_me.pos<0){
                _me.pos = 0;
            }else if(_me.pos > bdy.offsetHeight - _me.w.innerHeight ){
                _me.pos = bdy.offsetHeight - _me.w.innerHeight;
            }
        },
        interval : function() {
            var _me = this;
            requestAnimationFrame(function(){
                _me.interval();
            });
            _me.arvPos += (_me.pos - _me.arvPos)/_me.speed;
            _me.w.scroll(0, _me.arvPos);
        },
        scrollTop:function(n){
            var _me = this;
            _me.pos = n;
        },
        noConflict:function(){
            return this;
        }
    };

    ////////////////
    window.ilrSmoothScroll = new IlrSmoothScroll();

})();

IEでconsole.logエラーを出さないようにする

if (!('console' in window)) {
     window.console = {};
     window.console.log = function(str){
        return str;
     };
}

画像読み込み時のプログレス取得

概要

画像読み込み時のプログレス取得

スクリプト

Image.prototype.onChangeSize;
Image.prototype.load = function(url){
  var _this = this;
  var req   = ((XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"));
  req.open('GET', url, true);
  req.responseType = 'arraybuffer';
  req.onload = function(e) {
    if(req.response) {
      var blob = new Blob([req.response]);
      _this.src = window.URL.createObjectURL(blob);
    }
  };
  req.onprogress = function(e) {
    if(_this.onChangeSize) {
      _this.onChangeSize(e.loaded, e.total);
    }
  };
  req.send();
};

使用方法

var getLoadingPercentage = function (imgUrl){
  var img = new Image();
  img.onChangeSize = function(loaded, total) {
    var loadingPercentage = parseInt((loaded / total) * 100);
  };
  img.onload = function() {
    //読み込み完了
  };
  img.onerror = function(){
    //エラー
  };
  img.load(imgUrl);
};

getLoadingPercentage(画像パス);

グーグルカスタム検索　オートコンプリート編集

概要

グーグルカスタム検索のオートコンプリート編集をCSVで管理してXMLで書き出す

CSV

term,type,score,language
図書館,1,10,

スクリプト

XMLへの変換はgulpで行います。

////////////////////////////////
const gulp = require("gulp");
const fs = require('fs');
const iconv = require('iconv-lite');
const Converter = require("csvtojson").Converter;
const jsonxml = require('jsontoxml');
////////////////////////////////

const converter = new Converter({});

gulp.task('customsearch', function(){

    converter.on("end_parsed", function (jsonArray) {
        comp(jsonArray);
    });

    fs.createReadStream("custom-search/cse.csv")
        .pipe(iconv.decodeStream('SJIS'))
        .pipe(iconv.encodeStream('UTF-8'))
        .pipe(converter);

    function comp(json){

        var ary = [];
        for(var prop in json){
            var obj = {
                name:'Autocompletion',
                attrs:json[prop]
            };
            ary.push(obj);
        }

        var jsn = {
            Autocompletions:ary
        };

        var xml = jsonxml(jsn,{ xmlHeader:true });
        fs.writeFile('custom-search/cse.xml', xml, function(err) {
            if (err) throw err;
            console.log('file saved');
        });
    }

});

実行

ターミナルから実行

gulp customsearch

XML

<?xml version="1.0" encoding="utf-8"?>
<Autocompletions>
<Autocompletion term="図書館" type="1" score="8" language=""/>
</Autocompletions>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
Sign upLogin
1
0