かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

javascript

JS 配列の重複を取り除きたい

配列の重複した値を削除したい時のメモ。 filterでループさせindexOfで値の重複をチェックするパターン array.indefOf(value)がvalue自身のインデックスと異なる場合は既に配列内に同じ値があるという判定 var arr = [0, 1, 2, 3, 4.1, true, false, 1, "2",…

JS 2つの配列の差分を取得したい

1. 値の差分をチェック 2. 値とインデックスでチェック 2-1. 新旧の比較のように、配列Aと配列Bを比べ配列Aから変化しているものを返す 2-2. お互いの配列で異なっているものを返す

JS call apply vs bind アロー関数

javascriptの関数とthisとの関係のメモの続きです。 関数のthisを決めることができるcall()とapply()で実行される関数がFunction.prototype.bindやアロー関数でthisが決められているものだった場合どうなるのか気になったので調べてみました。 call と apply…

Javascript 関数とthisについてのメモ

以前書いた記事でオブジェクトの関数内でsetTimeout()に無記名関数を渡した際のthisの値について理解が不明瞭だったのでjavascriptの関数とthisについて調べたメモです。 関数について 関数宣言 (function declaration) function 関数名(){} 関数の巻き上げ…

JS オブジェクトのキーがあるかチェックしたい。

オブジェクト({})のキーが存在しているか調べる時、if文を使うと値によっては上手くいかない。 var obj = { A: 0, B: 1, C: 2, D: "" }; var foo; obj.E = foo; ["A", "B", "C", "D", "E", "F"].forEach(function(key) { if( obj[key] ) { console.log( obj[…

JS 0や文字列を含んだ数字のチェックをしたいメモ

数値を扱う時や数値変換を行う時に0が鬼門になることが多いのでメモ var checklist = [ 0, "0", "", undefined, "undefined", false, "false", true, "true", null, "null", NaN, "NaN", Infinity, "Infinity", -Infinity, "-Infinity" ]; -0で数値変換した…

JS 配列の要素が全て条件を満たすか調べたい

EX: 配列に含まれる数が全て0 <= N <= 255 かどうか調べたい 次のデータから条件にマッチする配列だけを取り出す。 // 調べる配列の入ったデータ var data = [ [ 217, 0, 0, 0 ], [ 169, 254, 0, 1 ], [ 0, 0, 0, 256 ], [ 1, 0, -1, 255 ], [ '', 0, 0, 0 ]…

Javascript 自然数の約数の総和を求めたい

プログラム書く仕事が無いので、お脳が腐らないように息抜きにプログラムのパズルをしています。 自然数の約数の総和を求める方法を考えてたのでメモ。 数学的なやつ 自然数Nが P1のa1乗、P2のa2乗に素因数分解できる時 Nの約数の総和は (1+P1+P1**2+...+P1*…

GoogleMaps マウスホイールでのズームしないようにしたい。

シングルページのサイトなどで100%幅でGoogleMapsを表示させるような時、マウスホイールで地図がズームしてしまうと不都合があるので、地図のマウスホイールでのズーム機能をOFFにするメモ。 scrollwheel オプションを使用する。 マウスホイールでのズーム機…

JS 配列の初期化についてのメモ

長さNの配列をSで埋めて作成したい。 var a = (new Array(3)).fill('A'); // ["A", "A", "A"] length N の配列の作成は new Array(N) arr.fill()メソッドは第一引数で指定された値で配列の値を設定する。 arr.fill(value[, start = 0[, end = this.length]])…

JS 呼び出し元の this を担保するメモ。

例 オブジェクト内の関数でsetTimeoutを使ってその中で、オブジェクト自身をthisとして使いたいような場合 var obj = { name: 'obj', func: function() { console.log(this); // => Object setTimeout(function() { console.log(this, this.name); // => Win…

jQuery .triggerと.onとで実行される関数へのデータの渡し方の違いメモ。

オブジェクトのイベントを呼出して、オブジェクト自身をイベント内で使いたい時とかのメモ .trigger .trigger( eventType [, extraParameters ] ) extraParameters Type: Array or PlainObject Additional parameters to pass along to the event handler. .…

WordPress ContactForm7 フォーム送信時に送信確認のチェックをリセットしたい

ContactForm7は送信前の確認したかのチェックボックスを設置することができます。 ただ、フォームを送信した後、エラーの有無にかかわらず送信確認がチェックされたままで、送信ボタンを押すことができる状態になったままになっています。 そこで、ContactFo…

WordPress ContactForm7 フォーム送信時に任意のjsを実行したい。

管理画面から WordPressの管理画面 > コンタクトフォームの編集画面 > その他の設定 を選択して、記入エリアにon_sent_ok:(送信完了時)、on_submit:(送信された時常に) のキーワードに続けて実行したいjavascriptのコードをテキスト形式で記述する。 on_sent…

Gulp min化したJS・CSSに自動でコメントを入れたい

コーディングをする時、Gulpでコンパイル&min化をしています。 min化したコードにコメントでバージョン情報とか、元のライセンス情報を入れたいケースとかがあります。 javascript ライブラリなどのライセンス情報で/*!で始まるコメントの場合はgulp-uglify…

PHP Slim 2.x Ajaxでputで送った値を取得したい。

"Slim is a PHP micro-framework" Rubyのテンプレートエンジンじゃない娘のお話です。 3系が既に出ているのですが、先方のサーバーのPHPのバージョンの関係で2系で開発をしています。今回 Ajaxのputメソッドでデータを送ったのですが、Slim側で値をとるのに…

javascript 確認ダイアログ(confirm)の文章を改行させたい。

削除するとか、元に戻せない動作を行う前には誤動作の可能性を考慮して、確認ダイアログを入れるのが好ましいと思っています。 独自実装しても良いのですが、デザインが無かったりで、とりあえずサクット作ってしまっておきたい場合はデフォルトのwindow.con…

ある要素までスクロールしたらアクションをさせるJavascriptを作成する時に気をつけること。

画面をスクロールさせて、特定の要素の場所に来た時にアニメーションをさせるなどスクロールに応じたアクションの作成をすることがあります。 複雑なものの場合ライブラリを使うのが手っ取り早いと思いますが、簡易なものの時や大きなライブラリを読み込ませ…

Javascript 連想配列(オブジェクト)をforEachでループさせたい。

いい加減配列のループにはArray#forEachを使っていきたいと思っています。 通常の配列であれば下記のような感じ。 var array = ['暁', '響', '雷', '電']; array.forEach(function(val, i) { console.log(i, elmval; }); /* ↓ 出力 0 "暁" 1 "響" 2 "雷" 3 "…

javascript 文字列中の文字を取得

文字列中のn番目の文字を取得したいとか、があるかもしれません。 javascriptの文字列ではlengthで文字数が測ることができ、配列のようにアクセスすると文字列の先頭から順番に文字を取得することができます。 需要あるんでしょうかね。まぁいいや。 var str…

HISTORY API Safariでウィンドウ ロード時にpopStateイベントが呼ばれてしまう。

pushState, popStateを使ってURLの履歴を追加したり、ブラウザバックに対応したりする事ができるので画面遷移をせずにAjaxとかで画面を切り替えるサイトを作ることができます。 で、記事の概要をクリックされたら、Ajaxで記事内容を取ってきて全面モーダルで…

javascript 文字列のまま数字を比較すると危険が危ない。

例えば入力された数字をそのまま比較するなどすると、数字が文字列になっていると予期せぬ挙動をする事があります。 // 引数を比較して大きい方を返す関数 var f = function(a, b) { if(a == b) { return "eq" } else { return (a > b)? a : b; } } // 数字…

input[type="date"]がサポートされてない時だけjQuery UIのプラグインを使うようにしたい。

HTML5のフォームパーツがたくさん増えて便利なのですが、割りとよく使いたくなるinput[type="date"]、Firefoxなどカレンダーで選択できる機能が実装されてないプラウザもまだまだ多い印象があります。単純にinput[type="text"]にしてjQueryUIのdatepicker使…

jQuery.whenのdone()にAjaxで取得したデータを加工して渡したい

$.when()で複数の非同期処理を行って、.done()で結果を受け取ってその後の処理をするのですが、特に非同期処理がAjaxの時、$.when()の.done()でAjaxで取得できた値を受け取って加工するのではなく、Ajax側で取得したデータを加工して$.when()のdone()に渡し…

Bower で入れたBootstrapのCSSとJSをGulpで開発環境に持ってきたい。

パッケージマネージャーのBowerでBootstrapをインストールして、Gulpを使ってBootstrapのCSSとjavascriptを開発ディレクトリに持ってくる方法のメモ。 npmを使うのでnode.jsを前もってインストールしておく必要があります。 プロジェクトの準備 $ npm init n…

javascript 2つの配列からそれぞれランダムに値を取り出しかつ値が被らないようにしたい。

Teratailに JavaScriptでかぶらないように変数を分配したい(14969)|teratail というクイズみたいなのがあったので、面白そうだから考えてみました。 各配列の値が同じにならない様に取り出すパティーン。 各配列の中に同じ文字列があって、これが被らないよ…

Google Map 埋め込んだ地図にピン(マーカー)を打ちまくりたい。ついでに色々カスタマイズしてみた。

会社やお店のアクセスページとかでGoogle Mapを埋め込んだりすることも多いかと思います。別棟があるとか2号店が近くにあるとか駐車場が別だとか、ピンを複数個打ちたい場合のメモです。 1. ピン(マーカー)を複数打つ方法 google.maps.Markerでピンが打てる…

WordPress 投稿のカテゴリーをラジオボタンにカスタマイズしたら、クイック編集でカテゴリーがチェックされなくなったので。

ちょっと古い記事なのですが、LIGさんの解決!WordPress投稿画面のカテゴリーをカスタマイズする方法という記事を参考に投稿のカテゴリーを複数選択できないようにラジオボタンに変更しました。 記事に掲載されているコードの通りに行うことでカテゴリー選択…

javascript iPhoneで今まで使ってた判別方法だとscrollTopが効かなくなっていたので調べた。

jQueryを使ってページをスクロールさせるスクリプトでよく見かけるのは下記のような感じです。 $('body, html').animate( {scrollTop: 0}, 'fast' ); このコード動くんですけど、bodyとhtml両方でイベントが起きているので、処理中にチラツキが発生したりコ…

javascript setTimeoutで関数内から自身を呼び出す時に初回を即時関数にするとうまく動作しない

javascriptでAPIを叩く関数を作ってAPIからデータ取得後にsetTimeoutを使って同じ関数を呼びたいような時 次のような関数を作ったりします。 var timer; // AjaxでAPIを叩いてデータを取得する関数 var getMyAPIData = function() { clearTimeout(timer); $.…

Twitterのフォローボタンをカスタマイズしたい

Twitterのアカウントをフォローできるボタンを作るには公式のドキュメントから作成できます。 Follow Button | Twitter Developers こんな感じに。 Follow @twitter window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr…

jQuery .each()のループから抜けたい。

javascriptでループから抜けるときはbreak;を使います。 for(var i=0, l=myArg.length; i

Google Apps Script 俺がスプレットシートの値を変更した時に特定のセルの値によって異なるシートに行(row)をまるっとコピーしたいんだが。

ちょっと前に流行ったラノベみたいなタイトルになってしまったが後悔はしていない。 例えば数箇所で行うイベントの予約をGoogleDriveのフォームで取っていたとして、予約のリストが回答というスプレットシートに反映されます。で、入金を確認した時にシート…

Google Apps Script スプレットシートでスクリプトのlogをとりたい。

何かと楽なのでGoogle Driveのスプレットシートを使うのですが、自動化をしたいとかでApps Scriptを書いている時、スクリプトエディターから実行させるだけ時はLogger.log()で書いておいてメニューの表示からログを表示させておけばよいのですが、セル内を変…

SublimeText3 jsHintで書いてるjsをチェックできるようにする

引越のするので、普段開発に使ってなかったラップトップに色々と開発環境を設定している日々です。一度やったことなのに直ぐにドキュメント化してないから、まぁ色々と忘れてる!3歩あるいたら忘れる。それくらい自分の記憶力に自身がない今日この頃です。 S…

iPhone aタグでclickイベントが効かない時があるっぽい!

iPhone用のサイトを作っていて、aタグに付けたclickイベントがchromeのデベロッパーツールで確認した時は動作しているのに、実機では動作しないという現象に出会ったのでメモです。 今回はボタンクリックでモバイル用のメニューを表示させるような機能を作っ…

javascript thisはトラップが多いよねー大井っちー

第1回 JavaScriptの基礎を見直す:聞いたら一生の宝,プログラミングの基礎の基礎 |gihyo.jp … 技術評論社 という記事を読みました。 jsってthisのトラップ多いよねーと思いながら読んでいたのですが気になる所があったので検証してみました。 thisの使い分…

Google Analyticsのスクリプトがあるとページをリロード直後の.scrollTop()が上手く動作しない?

1ページの長いサイトを作っていてページがロードされた時にパラメータに合わせて該当する場所に予めスクロールさせたいと思い下記のようなコードを書いていました。 jQuery(function($) { (function(w, d) { var hash = w.location.hash; var $area; // ロー…

javascript jQuery スクロールバーの幅を含むウィンドウサイズを取得したい。

.width()で取得できる。 var width = $(window).width(); $(window).width();で取得できる値は表示されているエリアのサイズになります。 Y方向にスクロールがあるページの時、これで取れるwidthにはスクロールバーの幅は含まれないっぽいです。 レスポンシ…

jQuery $.data()と.data()、データの保存と取得で気をつけること。

jQueryのパフォーマンスを下げるアンチパターンに関する超意訳 - Qiita こちらの記事に data() // 普通の書き方 $(elem).data(key, value); // 10倍速い! $.data(elem, key, value); とあったので、$.data(elem, key, value);を使おうとして少し気になる挙…

javascript 続・即時関数のトラップ!

以前ファイル結合した際などに起こりうるJavascriptの即時関数のトラップについて書きました。 しかし、即時関数にはまだトラップがあったのです!( -言- )ククク... それは、、、 変数に即時関数を代入する時に即時関数の書き方で代入される値が変化してしまう…

Javascript 配列を連結する

concat()関数を使う。 var a = [1,2,3,4,5]; var b = [6,7,8,9,10]; // 配列を結合 var c = a.concat(b); console.log(c); // [1,2,3,4,5,6,7,8,9,10] console.log(a); // [1,2,3,4,5] cosole.log(b); // [6,7,8,9,10] 元の配列を破壊せずに結合できる。 Arr…

jQueryのバージョンを確認する方法。

ページで使われているjQueryのバージョンを確認する方法。ディベロッパーツールのコンソールに下記を入力 $.fn.jquery js内に記述するなら console.log($.fn.jquery); よく忘れる。

javascript 即時関数のトラップ

(function() { })(); こんなのを即時関数って呼びます。よく書くと思います。で、gruntなどでライブラリなどを結合して、min化したりするのですが この即時関数の前に;が無いと死んでしまうトラップがあったりするので注意が必要です。特に自分で書いていな…

javascript 連想配列(オブジェクト)の要素数が知りたい。

javascriptの連想配列(オブジェクト)の要素数を知りたい時Object.keys()を使うと便利。 var myKantai = { flagship: '鬼怒', destroyer1: '吹雪', destroyer2: '白雪', destroyer3: '初雪', destroyer4: '深雪' }; 例えば上の様なオブジェクトの要素数を知り…

javascript 引数の配列を展開して関数に渡したい。

jQueryの.triggerみたいな処理をjQuery以外で使いたい。 ・ .trigger() | jQuery 1.9 日本語リファレンス | js STUDIO要は.triggerと同じで引数に関数名と配列を渡して、 その関数に配列を展開した引数を渡して実行する見たいな事をしたい。 ActionScriptのd…

めも。wordpress × pjax

使いたい。 WordPressにPjaxを実装してみる | かくれざとう javascript:pjaxを使って非同期通信する方法 | webデザイン | web is a creation WordPressで初めてのバイラルメディアサイトを一時間で作る方法

JSで1つめのクラス名を取得する。

javascriptで要素についたクラスの1つめだけ取り出したい時。 element.className.split(" ")[0]; で最初のクラス名を取得できます。たいていjQueryを使っている思うので、 // HTML <p id="hoge" class="className1 className2">要素だよ</p> // jQuery $('#hoge').attr('class').split(" ")[0]; の様な記述を…

めも。高速化など出来になったサイト

Tumblrの省メモリーな無限スクロール - 記録 display = "none"でメモリ節約になるのか!! 高速で安全なjQueryを書くために今できること | Dress Cording [jQuery]closest()とparents() | WEBプログラム覚書 closest()は最初のDOM要素だけですが、parents([exp…

Ajaxで読み込んだPinterestのボタンをアクティブ化する

サイトにPinterestにPin itするボタンを設置する事も多いと思います。こんな感じに↓ ボタンそのものはWidget Builder | for Business のページで作ることが出来ます。 で、貼り付けよ!と出てくるコードがこんな感じ。