ふんばりフロントエンジニアのブログ

新米フロントエンジニアのふんばっている日々と備忘録です。

gulpで「TypeError: args.cb is not a function」が出たらこれが原因

最近Webpackが流行っていますが、やっぱ馴染み慣れたgulpを使ってしまう私がいます…

今回はたまに出くわしていた「TypeError: args.cb is not a function」というエラーの対処法について一つ。

こちら、実際にエラーが出ていても動くものなんですがなんか怖いですし、エラー出るのがまず嫌なんですよね...

私はwatchのタスクを動かすときにこのエラーが出ていたのですが、おそらくこのページを見ている方も同じなのではないでしょうか?

そしてこのエラーの原因はエラー内容にも現れているように「args」にあります。

はい、argsというのはみなさん大好きな配列ですね。(白目)

私がエラーを出していた時のコードはこちらになります。

gulp.watch(['./**/*.html'], [sync.reload]);
gulp.watch(['./src/css/**/*.scss'], ['sass', sync.reload]);
gulp.watch(['./src/js/**/*.js'], ['js', sync.reload]);

こちら、何が問題かというと一番最初の監視対象である「html」のところ。
第一引数に関しては問題ないのですが、問題があるのは第二引数のタスクです。
上記のコードではでreloadさせるようにしていますが、で囲っていいのは動かしたいタスクが二つ以上ある時のみのよう。
以下のように、タスクが一つの時は[]で囲まないようにするとエラーは出なくなりました。

gulp.watch(['./**/*.html'], sync.reload);
gulp.watch(['./src/css/**/*.scss'], ['sass', sync.reload]);
gulp.watch(['./src/js/**/*.js'], ['js', sync.reload]);

特に大したことない情報かもしれませんがお役に立てれば幸いです^^

Google Analyticsでオプトアウトした時はこうなるよ

こんにちは〜〜

今回はGoogle Analyticsでオプトアウトするときの設定をご紹介します。

Google Analyticsは今や多くのWebサイトで活用されているアクセス解析ツールです。

そしてオプトアウト、というのはGoogla Analyticsにサイト閲覧者の情報を送らないようにするための設定のこと。

つまりユーザーが「自分の情報を提供したくないから、アクセス解析に入れないで!」というのがGoogle Analyticsでいう所のオプトアウトです。

しっかりドキュメントを見れば載っている事なので参考にするまでもないことかもしれませんが一応、残しておきます。

Google Analyticsのオプトアウト方法はドキュメントに載ってる!

f:id:ma1129nm:20181022140339p:plain

はい、という事でGoogle Analyticsでオプトアウトをするための方法はドキュメントにしっかり記載してくれています↓

高度な設定 - ウェブ トラッキング(analytics.js)  |  ウェブ向けアナリティクス(analytics.js)  |  Google Developers

このように、windowプロパティに「ga-disable-トラッキングID」を追加し、その値を「true」にする事でオプトアウトの設定が完了します。

ただ、これだけではそのページでだけオプトアウトが設定されることになり、他のページに飛んでしまった時やブラウザを閉じてまたアクセスしてきた時にこのwindowプロパティは消えてしまいます。

じゃあcookieを使うか、と考えながらドキュメントをスクロールして見てみると...
f:id:ma1129nm:20181022140811p:plain

これまた親切に、cookieを使ったオプトアウトの例を書いてくれています。

ただ、cookieの設定は適宜変える必要がありますね。

そして注意点としてタグマネージャー のjsだけでなく、しっかりanalytics.jsも読み込んであげてください。

つまりこのような感じになりますね。

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXX-YY', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

<!-- Google Tag Manager -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KXPVFMN"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','XXX-YYYY');</script>
<!-- End Google Tag Manager -->

そして、このGoogle Analyticsを読み込む前に先ほどのwindowプロパティを変更する必要があります。

そうしないとオプトアウトされないので注意しましょう。

これらの設定ができ、ページを確認して↓のようになっていればオプトアウトは完了です。
f:id:ma1129nm:20181022141643p:plain

このログはGoogle Analyticsデバッグ用jsを読み込むことで吐き出すことができます。

開発段階でのみ使用することを推奨されており、かなり便利なもの。

デバッグ  |  ウェブ向けアナリティクス(analytics.js)  |  Google Developers

このように、analytics.jsをanalytics_debug.jsとするだけでデバッグモードになるのでぜひ利用してみてくださいね。

Gmailで送信済みメールの色が紫色になる原因はこいつだった

仕事ではGmailを使ってやりとりをすることが多いのですが、最近結構返信メールが長くなって送信済みメールを見るとなにやら署名の部分が紫色に…

相手側には黒色で見えている、との口コミもありましたがどうやら相手側にも紫色で見えてしまっているよう...

「これはまずい」ということで検証してみたところ、原因はこいつでした。

f:id:ma1129nm:20181019163816p:plain

Gmailの設定にある「スレッド表示」です。

スレッド表示をONにしていると、返信メールなどを一つにまとめてくれて便利です。

しかし、こいつをOFFにすることで紫問題から逃れることができました...

スレッド表示をONにしたままでもユーザースタイルシートを使うことで色を変えることはできるようですがプラグイン入れるのもなあ...と思ったので今回はこのように対処しました。

同じ現象の方はお試しあれ!

なぜだ…Cookieが上手く操作できない!!domainやpathを指定した時詰まったこと

こんにちは、今回はCookieJavaScriptで扱った際の備忘録です。

Cookieはサーバーから付与される「key」と「value」を持ったデータのことで、Sessionとは違い「ブラウザ側」に保存されるものです。

そのため、フロントエンドであるJavaScriptでも扱うことができるんですね。

そして今回初めてCookieを扱ってオプトアウトに取り組んだのですが、これがなかなかつまづいてしまいまして...

簡単にではありますが、詰まったところと対処法をお伝えしようと思います!

 

Cookieとは

Cookieとは、サーバーから付与される「key」と...(以下省略)
と、そんなことはさておきまして、Cookiはブラウザ側に保存され、サーバーサイドでももちろん、そしてJavaScriptでも扱うことができるもの。
そして今回取り組んだのはオプトアウト、というcookieなどによるトラッキングをかけないようにするといった内容でした。
私は当初cookieではなく、「WebStorage」を利用しようとしていたんですね。
WebStorageの種類は二つあり、sessionStorageとlocalStorageの二つ。
sessionStorageはブラウザを閉じると消えますが、localStorageはブラウザを閉じても消えることはありません。
ここまでは有効期限を指定したcookieと同じですよね。
ただ、localStorageにはcookieには絶対にある有効期限がないんです!
つまり消さない限りずっと残っているということに...
操作の仕方も簡単だったので、「これ使ってみよう!」と思いポチポチ進めていたのですが、重大なことに気がつきます。
それがlocalStorageは「シングルドメイン限定」である、ということ。
つまりクロスドメインで利用することができないんですね。
今回のオプトアウトはクロスドメインだったので、「あ、もうダメだ」と。
ということで、一度は捨てたCookieに舞い戻ってきたわけです。
少々Cookieとは違う内容が入ってしまいましたが、今回詰まったとこをご紹介していきましょう!

なぜだ…サブドメインCookieが渡されてない!

はい、ということでサブドメインCookieが渡されていなかったんですね。
これはちょっと調べると出てきたのですが、↓のようにするといいとのこと。

document.cookie = 'trFlag = 1; domain = .domain.com; max-age = ${maxAge}';

そう、domain指定のところで「.」をメインドメインの前に付けるということです。
しかし私の方ではこれがあまり上手くいかず…
ということで、pathも指定してみました。

document.cookie = 'trFlag = 1; domain = .domain.com; path = /; max-age = ${maxAge}';

私の方ではこのようにすることでCookieの引き渡しが上手くいったのですが、なんかモヤモヤしてます笑
なんか上手くいかなかった方は試してみてください!

なぜだ…Cookieが削除できない!

こちらはセットしたCookieが削除できない、というお悩みでした。
jQueryプラグインを利用するとdeleteメソッドがあるようですが、今回はネイティブなJavaScriptで作業をしていたので、基本の削除方法「上書き」で削除を行なっておりました。
ここで私の適当さが出てしまったんです...
当初書いていたコードは次のようなコードです。

if(document.cookie.indexOf('trFlag') < 0){
    document.cookie = `trFlag = 1; domain = .domain.com; path = / ;max-age = ${maxAge}`;
  } else {
    document.cookie = 'trFlag = 1; max-age = 0';
  }

とりあえずmax-ageを0にすれば削除できるだろう、そう思っていました。
しかし、何度やっても削除できず。
pathとかdomain指定してると削除できない!という記事も見つけて「まじかよ」となっていた矢先、全部書かなきゃダメじゃね?となり、書いたのがこちら。

if(document.cookie.indexOf('trFlag') < 0){
    document.cookie = `trFlag = 1; domain = .domain.com; path = / ;max-age = ${maxAge}`;
  } else {
    document.cookie = 'trFlag = 1; domain = .creadorz.com; path = /;max-age = 0';
  }

これで上手く削除できるようになりました。
面倒くさがらず、全て指定してあげるべきでしたね...
以上、今回詰まったCookieについてでした!

人気ライブラリ「TweenMax」と「ScrollMagic」で簡単にスクロールアニメーションを実装!

さて、今回はアニメーションライブラリを使ってみよう!というお話です。

そして今回ご紹介するのは「TweenMax」と「ScrollMagic」、TweenMaxは日本でそこまで知名度があるわけではないですがアメリカではかなり人気のライブラリのようですね。

ただアニメーションの実装をするだけなら「TweenMax」だけで済みますが、やはり最近流行っているのは「スクロールして要素とぶつかったらアニメーション」というパターンでしょう。

ということで、よしなにスクロール時のイベントを設定できるScrollMagicについてもお話していこうと思います。

人気ライブラリ「TweenMax」と「ScrollMagic」の基本を解説!

TweenMaxの基本

最近取り組んでいる案件がアニメーションを実装してほしいとのことだったのですが、実際簡単なものならcssのanimationで出来てしまいます。

でもスクロールして要素とぶつかったらアニメーションを追加したりクラスを追加したり…って割とめんどくさいなあと思いましてね。(何よりコーディング期間が短いんですよね汗)

ということで使ってみようと思ったのがまずTweenMaxです。

TweenMaxはcssプロパティやアニメーションの設定をすることで、簡単にアニメーションを作ることができるライブラリ。

とりあえずサンプルを見てみましょう!
codepen.io

これは要素を消したり出したり、という簡単なサンプルです。

TweenMaxを使えるようにするには、↓からダウンロードするかCDNで読み込むか、またnpmでinstallするか、という方法がありますがオススメはnpmですね。

さて、コードを見ていくと非常にシンプルになっています。

使い方を解説すると、

TweenMax.アニメーション方向("ターゲット",アニメーションにかける時間,{cssプロパティ});

という感じですね。

もともとjQueryプラグインなのでターゲットの書き方もjQueryのように書けるのがお手軽感マックスです。

まず、TweenMaxには大まかにわけて二つのアニメーション方向がある、と言っていいでしょう。

それが「to」と「from」の二つ。

toは指定したcssプロパティ「へ」向かっていくようなアニメーションになりますが、fromはtoの逆で指定したcssプロパティ「から」元の形や位置に戻っていきます。

そのため、上記の例で指定しているcssプロパティは同じですがアニメーションの動きは逆になるんですね。

これさえ分かれば、ちょっとしたアニメーションならささっとできるようになるでしょう。

TweenMaxについてもっと詳しくお話していきたいのですが、種類がありすぎて解説しきれないのでこの辺でTweenMaxについてはやめておこうかと...

公式はドキュメントやデモが充実しているのでご興味のある方はご覧になって見てください。


greensock.com
greensock.com

「ScrollMagic」の基本

ScrollMagicはスクロール中に指定した要素を監視してくれるライブラリです。

ライブラリを使わなくても書けるっちゃ書けるのですが、やはり楽...いや便利なんですよね。

ということでこちらもサンプルから見ていきたいと思います。
codepen.io

こちらは#targetが出てくるときに、#targetをピン止めするという処理です。

まず、ScrollMagicを使う上で押さえたいポイントはコントローラーとシーンですね。

コントローラーはシーンを管理する大元、シーンはどこをターゲットにするか、などというような細かい設定を書くものと押さえておきましょう。

コントローラーは一回インスタンスを作れば、どんどんシーンを追加していけるので基本的にはコントローラの宣言は一回だけで良さそう。

そして肝心のシーンですが、基本構文はこんな感じです。

var 変数名 = new ScrollMagic.Scene({ 
triggerElement: "監視対象",
duration: 数値,
 })
.処理
.addTo(コントローラー名);

triggerElementに指定するのは、監視対象です。
つまりこのtriggerElementに指定した要素までスクロールすると、下に書いた処理が実行されます。
処理は「.」で繋げて書くことができ、最終的に「.addTo(コントローラー名);」することがお決まり。
最後にコントローラに追加しないといけないので注意しておきましょう。
こちらも公式のドキュメントが豊富なので詳しいことは↓から...
scrollmagic.io

TweenMaxとScrollMagicを組み合わせよう!

さて、それぞれを簡単に解説していきましたがこれらをどのように組み合わせれば良いのでしょうか?
まあScrollMagicの処理の所にTweenMaxの処理を書けば良さそうですよね笑
ということで、完成したのがこちらの処理です。
codepen.io
ScrollMagicで監視対象を指定して、要素とぶつかったらsetTweenというメソッドを使って、変数に格納しておいたTweenアニメーションを作動させています。
ちなみにsetTweenは「animation.gsap.js」というファイルを読み込まないと使えないので注意してくださいね。
また、このように「addIndicators」を記述すると簡単にどこからアニメーションが始まるのかをデバッグすることができるので使った方がより作業が捗ると思います。
codepen.io
どのようなタイミングでアニメーションが動いているのかをこれまたお手軽に確認することができるので、開発時には以下を書いておくといいでしょう。

.addIndicators( {name:"インジケータの名前"} )

シーンごとに名前をつけて管理できるのもいいですよね。
こちらも利用するには別で「debug.addIndicators.js」を読み込む必要があるので注意してください。
では最後にnpmでこれらを利用する際の手順を書いて終わりにします!

npmでTweenMaxとScrollMagicを使おう!

①npmでgsapとscrollmagicをインストール

npm install gsap scrollmagic

②jsファイルでimport ※import-loaderを使わないと上手く行かないので注意!

import {TweenMax,TimelineMax} from "gsap";
import ScrollMagic from "scrollmagic";
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';

③スタート!
結構簡単に使えますね!
ただimportでエラーが起きたりと最初につまづいてしまったので、時間が結構かかりました...
スクロールアニメーションを使ってみたい!という方の参考になると嬉しいです^^

タブレット・スマホのデザインに768pxが多い理由とは

久しぶりの投稿ですね…

わりと沖縄へ行ったり熱海へ行ったりと最近は忙しめでした(笑)

さて、今回はデザインファイルを触るときによく見かける「768px」という数値についてお話しようと思います。

正直「半端やな…770pxでもええやんけ…」とずっと思っていたのですが最近お話を聞いて納得したので備忘録的に残しておこうと思います。

なぜ768pxがデザインの幅として多いのか?

この理由は意外と単純明快なものでした。

結論から言うと「768px」がタブレット最小幅だからです。

「え、それより幅が狭いタブレットあるくない?」と思いますが、実は基準としているのは「iOS製品」なんです。

f:id:ma1129nm:20180927173001j:plain

こちらはSafariで「レスポンシブデザインモード」にしたときの画面ですが、たしかに一番タブレットで小さいのは「iPad mini」でその画面幅は「768px」となっています。

そして、逆に一番大きいサイズは「iPad Pro」で「1024px」ですね。

「なるほど」とここで合点がいったのですが、わりとCSSでブレイクポイントを指定する際に「1024px」までをタブレットデザインとする表記が多いのはこういうことかと…

つまり1024px以上のタブレットが現在提供されていないので、それ以上は「PCデザインでいいっしょ!」ということですね。

少し話がそれましたが、タブレットスマホデザインとして768pxが多いのはこのような単純な理由からのようです。

でもたまに「828px」のタブレットスマホデザインも見かけますよね。

これはどういうことなのでしょうか?

デザイン幅が828pxはの理由は?

デザイン幅が828pxである場合も、やはりiOS製品に関係があるよう。

そしてこちらの数値はタブレットデザインというより、スマホデザインに比較的見られる数値かもしれませんね。

先ほどのレスポンシブデザインモードをまた見てみてください。

スマホで一番大きい画面幅の機種はどれですか?

そう、「iPhone 8 Plus」ですよね。

そしてこの幅は「414px」となっています。

ここで忘れてはいけないのが「Retina ディスプレイ」でしょう。

 

Retinaディスプレイって?~

Retinaディスプレイは「高精細」なディスプレイです。

このRetinaディスプレイがなぜ高精細なのかと言うと、「ppipixel per inch)」というディスプレイの解像度を示す単位が大きいためです。

このppi1インチにどれだけピクセルが入るか、という単位。

つまりこの数値が大きいほど1インチ当たりのピクセル数が多くなるので高精細になる、というわけですね。

Retinaディスプレイが搭載されたのはiPhone4からですが、このiPhone4が発売されるより前のApple製品のppiは「100~200ppi」ほどでした。

しかし、Retinaディスプレイを搭載したiPhone4のppiは「326ppi」。

そして先ほどのiPhone8Plusでは「401ppi」となっています。

つまり従来の解像度の二倍の解像度になっているんですね。

これがRetinaディスプレイが高精細なディスプレイたる理由です。

 

さて、Retinaディスプレイに関する話をしてみましたが従来の製品より解像度が二倍になっていることが分かりました。

つまり?

そうなんです、デザインを作る際には「Retinaディスプレイに対応するために二倍のデザイン幅でデザインを作らないとRetinaディスプレイに対応する解像度にならない」んです。

そして、現在提供されているiPhoneで一番大きい画面幅なのが「iPhone8 Plus」の「414px」、そしてその二倍の数値が「828px」なのでスマホデザインにおいては「828px」のデザインが多くなっているのでしょう。

スマホタブレットデザインのデザイン幅に関してはこれくらいですかね…

PCのデザイン幅は基準とするものが結構難しいようですが、一般的には「1280px」が多いようです。

しかし、画面幅いっぱいのコンテンツがデザインにあった場合、どのあたりで画面幅いっぱいのコンテンツをやめるか、対処するかを決めておかないととんでもないことになってしまうので気を付ける必要がありますね。

最近デザインを作ったりもしているので、今回聞いたお話はかなり貴重でした…

もしかしたら知っている方が多い話だったかもしれませんが、私にとってはインパクトが強かったので書いてみました。

今度はデザインの話ができればいいな…頑張ります~~

【Atom】atom-beautifyでPHPが整形できない…設定を変更しよう!

今回は私が愛用しているエディター「Atom」についての備忘録です。

今回の問題はAtomのコード整形パッケージ「atom-beautify」でPHPの整形がうまく行かない、ということについて。

エラーが出るわけではないのですが、注意書きで次のようなポップアップが出てきます。
f:id:ma1129nm:20180907153911p:plain
何やら内容としては、「PHP_CS_Fixerのパス設定が非推奨になってるので、変えてください」ということのよう。
PHP_CS_FixerはPHPのコードを整形するためのツールで、こちらはatom-beautifyを利用する際に確かダウンロードしてきたような気が…
まあ何はともあれ、このツールを使ってatom-beatuifyは整形をかけるのでもちろん正しくパスが通っていないと整形してくれないわけです。
ということでatom-beautifyのsettingsを見てみると、確かにPHPのところの「PHP-CS-Fixer Path」にパスが記載されています。
ただ、この「PHP-CS-Fixer Path」でパスを指定する方法がもうダメみたいですね。
そのため、まずはここにパスを記載している方は消しちゃってください。
そして新しく推奨されているのがatom-beautifyのsettings配下にある「Executables」内の「PHP」と「PHP_Fixer」にパスを通す、というもの。
PHPには「PHPのバイナリファイルがあるところまでの絶対パス」、「PHP_Fixer」は「ダウンロードしたphp-cs-fixer.pharがあるところまでの絶対パス」を書いてあげます。
f:id:ma1129nm:20180907155049p:plain
これでもう一度atom-beautifyを「opt+Ctrl+B」で実行するとできるようになるはずです。
ちなみに、phpファイルの中に記載されているHTMLは整形してくれないみたいですね...残念...