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

新米フロントエンジニアの備忘録です。ふんばり温泉タオル欲しい...

2018-01-01から1年間の記事一覧

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

最近Webpackが流行っていますが、やっぱ馴染み慣れたgulpを使ってしまう私がいます…今回はたまに出くわしていた「TypeError: args.cb is not a function」というエラーの対処法について一つ。こちら、実際にエラーが出ていても動くものなんですがなんか怖い…

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

こんにちは〜〜今回はGoogle Analyticsでオプトアウトするときの設定をご紹介します。Google Analyticsは今や多くのWebサイトで活用されているアクセス解析ツールです。そしてオプトアウト、というのはGoogla Analyticsにサイト閲覧者の情報を送らないように…

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

仕事ではGmailを使ってやりとりをすることが多いのですが、最近結構返信メールが長くなって送信済みメールを見るとなにやら署名の部分が紫色に… 相手側には黒色で見えている、との口コミもありましたがどうやら相手側にも紫色で見えてしまっているよう... 「…

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

こんにちは、今回はCookieをJavaScriptで扱った際の備忘録です。Cookieはサーバーから付与される「key」と「value」を持ったデータのことで、Sessionとは違い「ブラウザ側」に保存されるものです。そのため、フロントエンドであるJavaScriptでも扱うことがで…

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

さて、今回はアニメーションライブラリを使ってみよう!というお話です。そして今回ご紹介するのは「TweenMax」と「ScrollMagic」、TweenMaxは日本でそこまで知名度があるわけではないですがアメリカではかなり人気のライブラリのようですね。ただアニメーシ…

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

久しぶりの投稿ですね… わりと沖縄へ行ったり熱海へ行ったりと最近は忙しめでした(笑) さて、今回はデザインファイルを触るときによく見かける「768px」という数値についてお話しようと思います。 正直「半端やな…770pxでもええやんけ…」とずっと思っていた…

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

今回は私が愛用しているエディター「Atom」についての備忘録です。今回の問題はAtomのコード整形パッケージ「atom-beautify」でPHPの整形がうまく行かない、ということについて。エラーが出るわけではないのですが、注意書きで次のようなポップアップが出て…

Dockerコンテナ内でComposerコマンドを使えるようにするメモ

Dockerのコンテナ内でComposerを使おうとした時のメモです。 まず、何も考えずに「curl -sS https://getcomposer.org/installer | php」でComposerをインストールするとカレントディレクトリにcomposer.pharが置かれます。 もちろんこのままではcomposerコマ…

JavaScriptでアプリを作る!React Nativeの環境を作ってみよう

「ちょっとReactでアプリ作れるっぽいんだけど触ってみてくんない?」というお言葉から、本日はReact Nativeをかるーく触ってみました! 以前Reactを触ってみたお話しをしましたが、React Nativeはアプリケーションを作るためのものという認識なので触れてな…

Seleniumでブラウザテストを自動化!Javaでブラウザを動かそう!

今回はブラウザテストについてお話ししようと思います。 以前記事で書いた「診断コンテンツ」がありましたが、結局これはReactを使ってもっとボリュームのあるものを現在開発しています。 hubarifront.hatenablog.com ただ、診断コンテンツのように選択肢に…

イラレの個人的注意点をまとめてみた

さて、しばらくコードの話をしていたので今回はイラレについてお話しようと思います! 私は業務でデザイナーさんから送っていただくデザインを元にコーディングすることが多いのですが、その場合フォトショかイラレかのどちらかをいただきます。 その中でも…

React.jsの環境をnpmで作ろう!APIからデータを取得する方法も実践!

今回は先延ばしにしていたReact.jsを使うための環境構築、そしてAPIからデータを取得して利用する方法についてご紹介していきたいと思います。いや〜propsの理解についても苦労しましたが、何と言っても環境構築が一番手間取りましたね...最近ではDockerなど…

個人的難敵「props」とは?stateとの関連も含めてオレオレ解説

さて前回はReactの概要的なところから最終的にはstateを使ったカウントアッププログラムまでを説明しました。前回のような単純なプログラムであればstateだけでも確かにいけるのですが、それではまだReactの恩恵に預かっているとは言えないよう。今回ご紹介…

「初心者と学ぶReact.js!」入門チックなことを書いてみよう

今回は何かと話題のFacebook謹製jsライブラリ「React.js」について学習した記録を書き綴ろうと思います。 Angular、Vue、Reactの御三家みたいなところはありますが、なんとなく名前がかっこいいのとFacebook製というところに惹かれ一週間前からちびちび学習…

診断コンテンツ作成するには?作るためのメソッドを紹介!

本日業務で診断コンテンツを作成することがありましたのでそれの備忘録をご紹介しようと思います。 本日作成したのは以下のような診断コンテンツです。 結果は最終的に4つのタイプに分かれる 二択の質問に回答して結果に導く 問題数は全部で5個 まあシンプル…

canvas続編!「Three.js」を使ってみたらさらに楽しすぎたお話。

さて、この前はHTML5の新要素「canvas」についていかに楽しいか、ということについて熱弁(そうでもない)しました。 しかし私、まだ「canvas」の楽しさの真髄に気づいていなかったんです。 ということでそんな楽しさの真髄を教えてくれた「Three.js」につい…

今更ながらcanvas使ってみたら楽しすぎて一日があっという間に過ぎた話

ふんばりフロントエンジニアの私ですが、やはりなぜフロントエンジニアが良かったかと言えば「目に見える!」からだと思っております。 実を言うと新卒で入った会社はゴリゴリのバックエンドで、研修の最中でも「見た目のことなんか二の次じゃ」感はあったん…

FireTVスティックを紛失…アプリでなんとか対応した話

今回はプログラミングとは関係なく、自宅で利用しているFireTVの話を備忘録として… 私はAmazonのプライム会員なので、休日などはFireTVを頻繁に利用しているのですがなんと最近FireTVの操作をするために「FireTVスティック」を紛失してしまったんです… 結局…

【css】git でコンフリクト起こした時に考えるべきこと

こんにちは、今回はバージョン管理ツール「git」についてのお話です。 gitって業界では知らない方、というか使っていない方がいないほど有名なツール。 ただgit初心者にとっては困ることも少し… それが「コンフリクト」ですよね。 最初私がコンフリクトのメ…

displayにtransition効かないんだけどどうすんだよ…【対処法】

cssで最近「なるほど!」って思ったことを一つ。 transitionプロパティって便利ですよね。 知った当初は何にでもtransitionつけて「カッケエ...」とか思ってましたが、もちろん万能ではありません。 特に「display+heightでheightにtransitionつけたらいい感…