[TypeScript][JavaScript]jQueryのコンパイル時にエラー

npm経由でjQueryをインストールした場合、tscコマンド打つと、

../node_modules/@types/jquery/index.d.ts(41,63): error TS2304: Cannot find name 'Iterable'.

というコンパイルエラーが発生しました。

で、調査したところ、tsconfig.jsonに、

{
    "compilerOptions": {
          "lib":["es2015", "es2015.iterable", "dom"]
    }
}

という形で、libを入れたらコンパイルエラーが通りしました。

[node.js][npm][jQuery]webpackでjqueryを使う その3

前回、npmを使ってjQueryをwebpackさせる方法について書きましたが、その際に、

const webpack = require('webpack');
 
module.exports = {
  entry: './src/app.1.0.0.js',
  output:{
    path:'./dist/',
    filename:'app.1.0.0.js',
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
    })
  ]
}

と書くと警告が表示されましたが、

const webpack = require('webpack');
 
module.exports = {
  entry: './src/app.1.0.0.js',
  output:{
    path:'./dist/',
    filename:'app.1.0.0.js',
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      }
    })
  ]
}

と「warnings: false」プロパティーを使ったら警告がとれました。

まぁーあたり前と言えば当たり前なのですが...

[node.js][npm][jQuery]webpackでjqueryを使う その2

少し前にwebpackでjQueryを使う方法について書きました。

で、今回は、npmでjQueryをインストールする方法がわかったのでそれ経由でwebpackの設定方法について調べました。

webpack.config.jsを次のように設定します。

const webpack = require('webpack');

module.exports = {
  entry: './src/app.1.0.0.js',
  output:{
    path:'./dist/',
    filename:'app.1.0.0.js',
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
    })
  ]
}

前回に比べて相当シンプルになりました。

で、/src/app.1.0.0.jsには、

var $ = require('jquery');

$(function() {
  console.log("hello")
})

と書きました。

で、最後に、

webpack --watch

を叩きましたが、ビルドはされブラウザで確認しても正常に出力されるのですが、

WARNING in app.1.0.0.js from UglifyJs
Condition always true [./~/jquery/dist/jquery.js:10213,0]

という警告が表示されてしまい、なかなか取ることができない。

jQueryのプログラムを確認するとif文の部分で、必ずtrueになりますよということなのだが。

これ他のエンジニアってどうやって回避しているんだろー？

[node.js][npm][jQuery]npmでjQueryをインストール

npmでjQueryをインストールする方法について調査しました。

ただただ漠然と

npm install jquery --save

と打ったら

npm WARN saveError ENOENT: no such file or directory, open 'C:\package.json'

npm WARN enoent ENOENT: no such file or directory, open 'C:\package.json'
npm WARN hoge No description
npm WARN hoge No repository field.
npm WARN hoge No README data
npm WARN hoge No license field.

と怒られたので同じディレクトリに
package.jsonファイル
と
README.mdファイル
をそれぞれ用意しました。

で、package.jsonファイルに

{
  "name": "hoge",
  "version": "1.0.0",
  "description": "",
  "repository": "",
  "license": "MIT",
}

を入れて、再度、同じコマンドを打ったら

npm WARN hoge@1.0.0 No description
npm WARN hoge@1.0.0 No repository field.

と警告が表示された。

そして、さらに、

{
  "name": "hoge",
  "version": "1.0.0",
  "description": "hoge",
  "repository": {},
  "license": "MIT",
}

と修正を行い、再再実行したら警告が解消されて無事にインストールされました。

descriptionとrepositoryが必須みたい。

[JavaScript]滞在時間の計測

滞在時間の計測をする必要性に迫られたので、やり方を調査しました。

[JavaScript]ページの滞在時間を求める
で確認すると、以下のような形で着地しそうです。

jQuery(function(){
  var _startTime = (new Date()).getTime();
  $(window).on('unload',function(){
    var _endTime = (new Date()).getTime();
    console.log(_endTime - _startTime)
  });
});

まぁーこれ厳密には、dom readyで発火させているので、もっと厳密性を持たしたい場合は、

var _startTime = (new Date()).getTime();
jQuery(function(){
  $(window).on('unload',function(){
    var _endTime = (new Date()).getTime();
    console.log(_endTime - _startTime)
  });
});

にしないといけないかもしれない。

[JavaScript][jQuery]テキストエリアを入力内容に応じて自動的に高さを調整

昔書いたかもしれないのですが、忘れてしまったので、改めて。

テキストエリアを入力内容に応じて自動的に高さを調整する方法を調査しました。

qiita 入力内容の量に応じたtextareaの自動サイズ変更
テキストエリアの高さを文字数に応じて変更
を参考にしながら、少しアレンジして、以下のように実装しました。

$('textarea').on('keydown', function (e) {
    if (e.target.scrollHeight > e.target.offsetHeight) {
        $(e.target).height(e.target.scrollHeight);
    }
    else {
        //_textAreaHeight is default height
        var _height = $(e.target).height() - _textAreaHeight;
        if (_height < _textAreaHeight) {
            _height = _textAreaHeight;
        }
        $(e.target).height(_height);
        if (e.target.scrollHeight > e.target.offsetHeight) {
            $(e.target).height(e.target.scrollHeight);
            return;
        }
        else if ($(e.target).height() <= _textAreaHeight) {
            return;
        }
    }
});

[jQuery][css]rgbを16進数に変換

jQueryでstyleメソッドを使ってcolorプロパティーを取得すると、rgbで返ってくるので、
これを16進数にしたい場合を調査しました。

jQueryでrgb(255,255,255)を#FFFFFF形式に変換
によると、

jQuery(function(){
    $(".color").click(function(){
        $(".color").css({"borderColor":"#CCC"});
        $(this).css({"borderColor":"blue"});

        //クリックされた要素の背景色取得
        var bgColor = $(this).css("backgroundColor").toString();
        //背景色の余計な文字列削除
        bgColor = bgColor.replace("rgb(","");
        bgColor = bgColor.replace(")","");
        //文字列分割
        bgColor = bgColor.split(",");
        //10進数を16進数に変換して連結
        bgColor = "#"+parseInt(bgColor[0]).toString(16)+parseInt(bgColor[1]).toString(16)+parseInt(bgColor[2]).toString(16);
        //inputに値を設定
        $(this).nextAll("input[type=hidden]").val(bgColor);
    });
});

と記載されているが、実際、10より小さい数字に場合、違う値が返ってしまうと思っていたところ、何人かの人がコメントで突っ込みをしていた。

var bgColor = $(this).css("backgroundColor").toString().match(/\d+/g);
bgColor = "#"+bgColor.map(function(t){return ("0"+(t|0).toString(16)).substr(-2)}).join("");

[jQuery][slick]slickプラグインのfade処理

slickプラグインを使ってスライドではなくフェードで次のバナーに切り替えたい場合は、どうすればいいのだろうか？

<link rel="stylesheet" type="text/css" href="./slick.css"/>
<link rel="stylesheet" type="text/css" href="./slick-theme.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./slick.min.js"></script>
<div class="_slick">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<script>
jQuery(function($){
  var $slick = $('._slick');
  $slickFade.slick({
    autoplay: false,
    autoplaySpeed: 3000,
    infinite:true,
    fade: true,
    cssEase: 'linear'
  });
});
</script>

fadeプロパティーをtrueにすればおｋ

[jQuery][JavaScript]history api state

前回、JavaScriptを使ってhistory back(ヒストリーバック　戻る) 、history forward(ヒストリーフォワード　進む)を検知する方法を書きました。
で、その時に一体、今、どの状態なのか把握したいときがあります。

そんなときは、stateプロパティーで取得することができます。

$(window).on('popstate',function(){
  //初回アクセス
  if (!e.originalEvent.state){
  }else{

  }
});
//history.pushState(state, null, url);

ただ、
History APIとスマホブラウザでのハマりどころ
によると、
iOSの7では、stateを参照することができず、android 4.1もだめだったりするので、それより上のバージョンで使いたいですね。

[JavaScript][jQuery]jQueryを使わずにclassを削除

jQueryを使わずにclassを削除したい場合は、どうすればいいのだろうか？

クラス名（class属性に値）を削除
によると、

document.getElementsByClassName('hoge')[0].classList.remove('foo')

でおｋ

[android][JavaScript][jQuery]cssメソッドのheightプロパティーで%が設定できない件

何故今までこの問題にぶち当たらなかったのか気になるところではあるのですが、

$('#hoge').css('height','100%')

みたいな形でcssメソッドを使ってheightに100%を設定しても何故か100%になってくれない。

Cannot set height with css units vw, vh or percentage
によると、android 4.2.Xでは、そもそも設定できないみたいって。

これ、不具合なのか仕様なのかわからないwww

[JavaScript][jQuery]onpopstate

JavaScriptを使ってhistory back(ヒストリーバック　戻る) 、history forward(ヒストリーフォワード　進む)を検知するにはどうすればいいのだろうか？

pushStateでブラウザの履歴を追加する
History APIとスマホブラウザでのハマりどころ
によれば、onpopstateメソッドでいけるみたい。

$(window).on('popstate',function(){
  console.log("hoge")
});

[JavaScript][jQuery]tag名を取得する その2

すごーい前にjQueryからtag名を取得する方法を書きました。

で、これとは別にclickイベントで発生したイベントオブジェクトからタグ名を取得するにはどうすればいいのだろうか？

Check if event target is hyperlink
で確認すると、以下のような形でおｋみたい。

$('#hoge').on('click',function(e){
  var tagName = e.target.tagName.toLowerCase();
  //tagName = e.currentTarget.tagName.toLowerCase();
});

実行した結果、確かに取得できました。

[JavaScript][jQuery]slickプラグインでスクロールイベントを検知する

slickプラグインでスクロールが完了した後にコールバックを受け取りたい場合はどうすればいいのだろうか？

解答としてはafterChangeメソッドをバインドすればおｋみたい。

<link rel="stylesheet" type="text/css" href="./slick.css"/>
<link rel="stylesheet" type="text/css" href="./slick-theme.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./slick.min.js"></script>
<div class="_slick">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<script>
jQuery(function($){
  var $slick = $('._slick');
  $slick.on('afterChange',function(){
    console.log("scroll完了後に実行したいこと")
  });
  $slick.slick({
    autoplay:false
  });
  
});
</script>

確かに実行したらスクロール完了後にイベントがtrigger(トリガー)された。

[JavaScript][jQuery]slickプラグインでautoScrollを途中でonにする

slickプラグインでオートスクロールをoff(false)にしている状態で、途中から、autoScrollをon(オン)にしたい場合、どうすればいいのだろうか？

解答としてはslickメソッドにslickPlayを引数に設定してコールすればいいみたい。

<link rel="stylesheet" type="text/css" href="./slick.css"/>
<link rel="stylesheet" type="text/css" href="./slick-theme.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./slick.min.js"></script>
<div class="_slick">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<script>
jQuery(function($){
  var $slick = $('._slick');
  $slick.slick({
    autoplay:false
  });
  $slick.slick('slickPlay');
});
</script>

確かに実行したらオートスクロールが始まった。

[JavaScript][jQuery]slickプラグインでautoScrollを途中でキャンセルする

slickプラグインでオートスクロールをon(true)にしている状態で、途中から、autoScrollをoff(キャンセル)にしたい場合、どうすればいいのだろうか？

解答としてはslickメソッドにslickPauseを引数に設定してコールすればいいみたい。

<link rel="stylesheet" type="text/css" href="./slick.css"/>
<link rel="stylesheet" type="text/css" href="./slick-theme.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./slick.min.js"></script>
<div class="_slick">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<script>
jQuery(function($){
  var $slick = $('._slick');
  $slick.slick({
    autoplay:true
  });
  $slick.slick('slickPause');
});
</script>

確かに実行したら停止した。

[jQuery]複数selectorでdomを選択

いつもdomを選択する場合は、ならべくkey-valueっぽく、1keyで済ませるようにしているのですが、複数同時に指定したい場合があって、かつ、それが属性だった場合について調べました。

$('._hoge').filter('[data-foo][data-bar]')

めっちゃ単純だった。

[JavaScript]スロットの実装その2

昨日のエントリーでスロットを実装するプログラムの紹介をしましたが、それを編集して掲載さいているサイトがあったので、紹介。

jQuery + jQuery Easing Plugin

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>Sample Slot:jQuery+jQuery Easing Plugin</title>
  <script src="libs/jquery-1.8.3.min.js" type="text/javascript"></script>
  <script src="libs/jquery.easing.1.3.js" type="text/javascript"></script>
  <script src="slots.js" type="text/javascript"></script>
  <link href="slots.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
  <p align="center">
   回転スタートから停止までの時間：
   <input id="txt_duration" type="text" value="3" size="3" maxlength="3" />
   [秒]
  </p>
  <p align="center">
   アニメーション（回転）方式：
   <select id="sel_easing" size="1">
    <option selected>jswing</option>
    <option>easeInQuad</option>
    <option>easeOutQuad</option>
    <option>easeInOutQuad</option>
    <option>easeInCubic</option>
    <option>easeOutCubic</option>
    <option>easeInOutCubic</option>
    <option>easeInQuart</option>
    <option>easeOutQuart</option>
    <option>easeInOutQuart</option>
    <option>easeInQuint</option>
    <option>easeOutQuint</option>
    <option>easeInOutQuint</option>
    <option>easeInSine</option>
    <option>easeOutSine</option>
    <option>easeInOutSine</option>
    <option>easeInExpo</option>
    <option>easeOutExpo</option>
    <option>easeInOutExpo</option>
    <option>easeInCirc</option>
    <option>easeOutCirc</option>
    <option>easeInOutCirc</option>
    <option>easeInElastic</option>
    <option>easeOutElastic</option>
    <option>easeInOutElastic</option>
    <option>easeInBack</option>
    <option>easeOutBack</option>
    <option>easeInOutBack</option>
    <option>easeInBounce</option>
    <option>easeOutBounce</option>
    <option>easeInOutBounce</option>
   </select>
  </p>
  <div align="center">
   <div style="width:306px;" align="center">
    <div class="slots" id="slots_a">
     <div class="wrapper" style="margin-top: -200px;"></div>
    </div>
    <div class="slots" id="slots_b">
     <div class="wrapper" style="margin-top: -200px;"></div>
    </div>
    <div class="slots" id="slots_c">
     <div class="wrapper" style="margin-top: -200px;"></div>
    </div>
    <div style="text-align:center;clear:both;">
     <input id="btn_start" type="button" value="Start" onClick="go();" style="margin-top:4px;">
     <input id="btn_reset" type="button" value="Reset" onClick="reset();" style="margin-top:4px;" disabled>
    </div>
    <p id="result" style="text-align:center;color:red;font-size:42px;margin-top:0px"></p>
   </div>
  </div>
 </body>
</html>

body {
 background-color: white;
 padding: 0px;
 margin: 0px;
 font-size: 12px;
}

.slots {
 font-size: 100px;
 font-family: arial, helvetica, sans-serif;
 overflow: hidden;
 width: 100px;
 height: 100px;
 border: 1px solid black;
 float: left;
}

.slots .wrapper {
 margin-top: 3px;
 width: 100px;
}

.slots .slot {
 width: 100px;
 height: 100px;
 text-align: center;
}

var opts = ['1357464992_github.png', '1357465001_ffffound.png', '1357465007_live-journal.png', '1357465012_bebo.png', '1357465021_icon-dock.png', '1357465029_metacafe.png', '1357465036_newsvine.png'];
var results = new Array(3);
var time;
var select;
var columns;

$(document).ready(function() {
 onload();
});

function onload() {
 // initialize drawed this html page.
 columns = 0;
 addSlots($("#slots_a .wrapper"));
 addSlots($("#slots_b .wrapper"));
 addSlots($("#slots_c .wrapper"));
}

function go() {
 // initialize after pushed Start button.
 time = parseInt($("#txt_duration").val()) * 1000;
 select = document.getElementById('sel_easing');
 $("#btn_start").attr("disabled", "disabled");

 // addSlots($("#slots_a .wrapper"));
 moveSlots($("#slots_a .wrapper"));
 // addSlots($("#slots_b .wrapper"));
 moveSlots($("#slots_b .wrapper"));
 // addSlots($("#slots_c .wrapper"));
 moveSlots($("#slots_c .wrapper"));

 // refee.
 $(this).delay(time + 1000).queue(function() {
  if (results[0] == results[1] && results[1] == results[2]) {
   $("#result").text("当たり！");
  } else {
   $("#result").text("はずれ～");
  }
  $("#btn_reset").removeAttr("disabled");
  $(this).dequeue();
 })
}

function reset() {
 $("#slots_a .wrapper").children().remove();
 $("#slots_a .wrapper").css({
  "margin-top" : "-200px"
 });
 $("#slots_b .wrapper").children().remove();
 $("#slots_b .wrapper").css({
  "margin-top" : "-200px"
 });
 $("#slots_c .wrapper").children().remove();
 $("#slots_c .wrapper").css({
  "margin-top" : "-200px"
 });

 $("#btn_start").removeAttr("disabled");
 $("#btn_reset").attr("disabled", "disabled");
 $("#result").text("");
 onload();
}

function addSlots(jqo) {
 for (var i = 0; i < 15; i++) {
  var ctr = Math.floor(Math.random() * opts.length);
  jqo.append("<div class='slot'><img border='0' src='../images/" + opts[ctr] + "' /></div>");
  if (i == 12) {
   results[columns] = ctr;
   columns++;
  }
 }
}

function moveSlots(jqo) {
 time += Math.round(Math.random() * 1000);

 var marginTop = parseInt(jqo.css("margin-top"), 10)
 marginTop -= (10 * 100)

 jqo.stop(true, true);
 jqo.animate({
  "margin-top" : marginTop + "px"
 }, {
  'duration' : time,
  'easing' : select.options[select.selectedIndex].text
 });
}

[JavaScript]スロットの実装

ベガスにあるようなスロットを実装するにはどうすればいいのだろうか？

a simple jquery slot machine effect
によると、以下のプログラムでいける模様。

<!-- html -->
<body>
<script src="http://kirkjerk.com/m/files/jquery.1.6.4.min.js" type="text/javascript"></script>
<script src="http://kirkjerk.com/m/files/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="slots.js" type="text/javascript"></script>
<link href="slots.css" rel="stylesheet" type="text/css" />
<div style="width:310px">
<div class="slots"  id="slots_a">
 <div class="wrapper" ></div>
</div>
<div class="slots"  id="slots_b">
 <div class="wrapper" ></div>
</div>
<div class="slots"  id="slots_c">
 <div class="wrapper" ></div>
</div>
<div style="text-align:center">
<input type="button" value="spin!" onClick="go();" style="margin-top:4px;">
</div>
</div>
</body>

body{
 background-color:white;
 padding:0px;
 margin:0px;
}

.slots {
 font-size:100px;
 font-family:arial,helvetica,sans-serif;
 overflow:hidden;
 width:100px;
 height:100px;
 border:1px solid black;
 float:left;
}

.slots .wrapper{
 margin-top:-6px;
 width:100px;

}
.slots .slot{
 width:100px;
 height:100px;
 text-align:center;

}

//note parseInt
//note stop


var opts = ['A','B','C','D','F'];

function go(){
 addSlots($("#slots_a .wrapper"));
 moveSlots($("#slots_a .wrapper"));
 addSlots($("#slots_b .wrapper"));
 moveSlots($("#slots_b .wrapper"));
 addSlots($("#slots_c .wrapper"));
 moveSlots($("#slots_c .wrapper"));
}

$(document).ready(
function(){
 addSlots($("#slots_a .wrapper"));
 addSlots($("#slots_b .wrapper"));
 addSlots($("#slots_c .wrapper"));
 
}  
);


function addSlots(jqo){
 for(var i = 0; i < 15; i++){
  var ctr = Math.floor(Math.random()*opts.length);
  jqo.append("<div class='slot'>"+opts[ctr]+"</div>");

  
 }
}

function moveSlots(jqo){
  var time = 6500;
  time += Math.round(Math.random()*1000);
 jqo.stop(true,true);

  var marginTop = parseInt(jqo.css("margin-top"), 10)
  
  marginTop -= (7 * 100)
  
 jqo.animate(
  {"margin-top":marginTop+"px"},
  {'duration' : time, 'easing' : "easeOutElastic"});

}

[jQuery][JavaScript]SwiperプラグインのCoverflowでloop

先日のエントリーでswiperプラグインを使ってCoverflowを実現する方法を書きました。
でかつloopさせたい場合はどうすればいいのだろうか？
swiperプラグインのリファレンスによると下のような形でおｋみたい。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/css/swiper.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/js/swiper.jquery.min.js"></script>
<style>
.swiper-container {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}
.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 300px;
}
</style>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/1)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/2)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/3)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/4)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/5)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/6)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/7)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/8)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/9)"></div>
        <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/10)"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>
<script>
jQuery(function($){
    new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        loop:true
        coverflow: {
            rotate: 50,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows : true
        },
        loopedSlides:1
    });
});
</script>

loopパラメータをtrueに設定して、この場合、slidesPerViewがautoなのでloopedSlidesパラメータを設定する必要があります。