フロントエンド

GA4でクライアントID取得したい（analytics.jsからgtag.jsへの移行の場合）

先日、前々から言われていたユニバーサル アナリティクスの終了の日がついにアナウンスされました。 「うちもいよいよGA4移行か・・・」となったわけです。 ユニバーサル アナリティクスのしかもanalytics.js版でクライアントIDの取得を行っているのですが、GA4でも取得できるのかなと思って探していたら様々な取得パターンをまとめた記事がありまし……

続きを読む

funnydreamer

IE 11やIE 10でinputタグやtextareaタグにplaceholderがある時に変なタイミングでoninputイベントが発火する件の解決方法

遭遇 今まで、タイトルの状況に遭遇した事が無かったのです。年に1回くらいはフォーム関連のスクリプトは書いていたのに、なぜ今更と思ったんですが、良く考えるとjQuery使用していたり、IEを対象にしていないサイトだったりだったので、遭遇しなかったんだと思います。しかし、昨年辺りから「普通のサイトでも脱jQueryしたい」と思ってVanilla JSでコー……

続きを読む

funnydreamer

HTML5のCanvasでのグロー表現を使って花火っぽい何かを打ち上げる

もともとグロー表現が好きなのもあり、canvasでグロー効果ってどうやるんだろうって始まったのが2、3年くらい前でした。 いろんなコードを見てても、決定的な参考例が中々見つからずだったのですが・・・・その後も「そういえばグロー効果を探さなきゃ」と思い出す度に、インターネット上を飢えた狼のように探してたら、以下の記事を見つけることができました。 h……

続きを読む

funnydreamer

JavaScriptでSVGのpathをアニメーションする

以前どこかで見たSVGのパス（path）アニメーションがずーっと頭に残っていて、当時は作ってみたいと思っていたものの長い間放置していました。ふと、実装してみたくなったので、試行錯誤してみました。その結果が以下です。 See the Pen SVG Path Hover Animation by Shunichi Fujita……

続きを読む

funnydreamer

jQuery Validate Pluginで、初回入力時のフォーカスアウトでバリデーションが走らない場合の対処法

最近、EFO（エントリーフォームオプティマイズ）の一環として、久しぶりにjQuery Validate Pluginを使って実装しておりました。 デフォルトだと、必須のテキストフィールドにフォーカスして未入力の場合、フォーカスアウトしてもバリデーションが実行されないようです。 海外の掲示板を見ていると、これを"Lazy validation"（怠……

続きを読む

funnydreamer

MAMPでhttpd-vhosts.confのDocumentRootに日本語パスが使えない問題に対処する方法

今の会社では、主にWindowsを使って仕事しています。やはりMacが恋しいなと思っていたら、余っているMacBook Proがあったので会議用などで使うために貰いました。運用上、WindowsのXAMPでバーチャルホストで、共有フォルダにあるPHPファイルを参照して、サイトを閲覧しています。実は、XAMPの時に苦労したのが、共有フォルダに日本語パスが含まれ……

続きを読む

funnydreamer

CSS3のflexでspace-btweenを使うと最後の行で変になる

古いIEのサポートの切って、最近だと、flexを使う機会が多くなってきています。大変便利ですが、justify-contentのspace-betweenやspace-araoundを使って、4列とかにした時に、最後の行が、２、３個の要素しかない時に間がスカスカになったりしちゃいますよね。 こういう時だけは、左寄せにして欲しいんですがtext-align:……

続きを読む

funnydreamer

Windows10のChorme開発ツールのモバイルモードでマウスポインター消失

Chromeの開発ツールのモバイルモードは便利で良く使う機能ですよね。
今週から働いている会社では、PCはWindows10なのですが、モバイルモードにすると、ポインター（マウスカーソルが丸くなったもの）が消えてしまいました。
どこを押しているか分から無いのですごく不便です。
解決しようと探していると、Google ……

続きを読む

funnydreamer

zoomした要素の中でzoomした要素の高さを取得しようとしたら

以前のプロジェクトで、訳あってレスポンシブとか使えないので、<html>にzoomを指定して、どんな機種でも画面幅にあわせるようにzoom値を変更する処理というのを行っていました。
さらにその中で、そのページをどうしても画面内に収めたいという仕様が降りてきました。イメージとしては、以下のような感じ。
<html&……

続きを読む

funnydreamer

CSSで子要素の高さが親要素に収まる時は高さ100%、超える時は可変にしたい

コンテンツの最低限の高さを100%として、 子要素がその高さより大きくなる時は、その大きさに合わせて、大きくなる ならない時は子要素は高さが100%になる ような要素を作りたい時があったんです。
まぁ、今でなら、flex使えばいけるのかな？というような気もしなくも無いんですが、IEの旧バージョン対応がどうしても必要だっていう時は、……

続きを読む

funnydreamer

iPhoneでimgにCSS3のanimationでopacityを0から1にしようとしたら画像が表示されなかった

少し前のプロジェクトでガワネイティブのアプリを作っていた時に、iPhoneで見たら画像が、表示されない状態が発生しました。
例えば、以下のようなCSSをimgタグに設定している場合です。 .img { position: absolute; top: 120px; visibility: visible; opacit……

続きを読む

funnydreamer

WPの記事をJSONで返しそれをAjaxで取得してHandlebars.jsで処理する

このブログの情報を別サイトで表示するのに、タイトルのような事をしたいなと思いました。昔、普通に記事をwhileで回しつつthe_post()した後にJSON形式に出力してたけど面倒なので、もっと楽な方法は無いかと調べると、WPでJSONの出力は、 WordPressの新着記事をJSON形式で取得し外部サイトで表示する方法のようなプラグインを作る方法 ……

続きを読む

funnydreamer