読者です 読者をやめる 読者になる 読者になる

かもメモ

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

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 のページで作ることが出来ます。 で、貼り付けよ!と出てくるコードがこんな感じ。

jQuery Ajaxでファイルを送りたい!

input[type="file"]をAjaxで送信したい時 普通にAjaxを使って送ると、ファイルが文字列になってしまい form.submit()した時と違うのでハマったのでメモ。どうやら FormData を使い Ajaxが自動的に送信データを整形する機能をOFFにすれば form.submit()と同じ…

JS複数の画像をload後に処理したい

desandro/imagesloaded · GitHubって便利なプラグインもあるけれど、そこまでしなくても良いやくらいな時に。。。例えばこんなHTMLで画像が全て読み込まれたら何か処理を実行したい (width取りたいとか。) <div id="images"> <img src="/img/hoge.jpg" /> <img src="/img/fuga.jpg" /> <img src="/img/mofu.jpg" /> </div> 画像のロード完了数を数えてcallbackを実行す…

jQueryのonとoff

jQueryでイベントをバインドする際にイベント名もつける事ができる。 これを利用すればこれを利用すれば、イベント名でまとめてアンバインドもできる。 $(document).on('click.myEvent', 'selector', event1) .on('click', 'selector', event2) .on('click.m…

jsでformを送る(submitする)際に気をつけること。

以前、他のブログにも書いてた事にまた引っかかってしまったので。 改めて。javascriptでフォームを送る方法 <form type="post" name="myForm" action="mofumofu"> こんなフォームだよ― ... </form> javascriptの場合。 // javascript document.myForm.submit(); jQueryの場合 // jQuery var $form = jQuery('form[name…

Gruntfileを晒す。

jade, scssのコンパイル、jsとcssのmin化とgzip化な感じで使っています。 // Gruntfile.js module.exports = function(grunt) { var pkg = grunt.file.readJSON('package.json'); grunt.initConfig({ jade: { compile: { expand: true, cwd: 'dev/jade/publi…

jsでブラウザの表示領域を取得するメモ

よく忘れすので。 var w = window; var d = document; var width = w.innerWidth || d.documentElement.clientWidth || d.body.clientWidth; var height = w.innerHeight || d.documentElement.clientHeight || d.body.clientHeight; スクロール領域も含めた…

Gruntで処理をコンボする!

最近scssやjs, jadeのコンパイルや結合, min化にもっぱらgruntを使っています。 例えば concatで、自作のjsを結合してmain.jsに、jQueryなどのライブラリを結合してlib.jsを作成 uglifyで、main.jsをmin化してmain.min.jsを作成 再びconcatで、lib.jsとmain.…