【JavaScript】その他

配列をシャッフルする

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>