リアルな部分も多いけど、少しでも参考になればと思います。※本記事の意見や見解は、個人の立場において記したものであり、所属組織等を代表するものではありません。16:43【Web業界】新卒入社1年目の思い出と今思う11のこと。ファイルとして認識されていません。webpackを使用したら少しハマったので備忘録。nodeのバージョン管理に「nodist」を使用。1実行したいプロジェクトのディレクトリに移動し、以下のコマンドを叩く。-yよし、package.jsonが生成された!!2続いて、webpackを実行するために本体をインストールする。package-lock.jsonやらが生成されたぞ。3エントリーポイントをビルドしてみる。ファイルとして認識されていません。ゲェ~~~ン!え?なんで?と思い、ググる。“Node.jsをバージョン8.2.0以降、npxはnpmにバンドルされているため、npxの個別インストールは不要”ん...?なのになぜ動かぬ。npx改めてコマンドを叩く。webpackシャキ~ンッ!無事にコンパイルされました。ファイルとして認識されていません。Tweet広告を非表示にするコメントを書くもっと読む2018-04-24【JavaScript】2回目に訪れたユーザーに何かしたいとき。データーベースで制御することも可能ですが、フロント側だけでやるのであれば、Cookieで制御するのがよいかと思います。document.cookie;//Cookie内に【XXX】という文字列があるかないか判定。console.log("2回目ですね。console.log("1回目ですね。}Cookieを取得しその中に1回目に訪れた時のCookieがあるかないかを判定して、無ければ初回の訪問、あれば2回目の訪問として処理を行う。上記のソースの場合、cookieの有効期限は、セッション限り(ブラウザを閉じるまで)になっている。13:05【JavaScript】2回目に訪れたユーザーに何かしたいとき。Tweet広告を非表示にするコメントを書くもっと読む2018-04-19【CSS3】ふわっと始まりふわっと終わる。CSS3のアニメーションは当たり前のように使われる時代になりました。意識した組み方をすることで、グッとよくなったりします。以下のサンプルをご確認ください。パターン1DEMOhttps://codepen.io/takumaro-web/full/ooQeaw/cssにてdisplay:noneを使用しているものになります。切り替わっているので少し目に優しくないのと違和感を感じます。visible;でアニメーションをしているもになります。パターン1より、違和感を感じずスムーズな見え方になります。hidden;の使い分け。display:noneの場合、要素自体なくなってしまうので、アニメーションをさせるのは難しいです。hidden;を使って要素はあるけど見えない状態をつくることでアニメーションが可能になります。【少しの記述で表現は変わる。15:13【CSS3】ふわっと始まりふわっと終わる。Tweet広告を非表示にするコメントを書くもっと読む2018-02-26【JavaScript】jQueryのthisを生のJSで表現してみる。jQueryのthisって便利だよね。これに対するこれって感じでめっちゃ便利だけど、生のJSで実装する場合、どうしたらよいんだろうかということで、書いてみた。FRIENDSというページを基に書き換えてみる。FRIENDSは、画像に対して右クリックを押すとaltが表示されるという、画期的なページです。これはjQueryで実装されているので生のJSに書き換えてみる。定義し、バインドさせ該当の画像の上で右クリックをしたら、alt値を取得しアラートを出す。thisってやっぱり便利ですね。これを書き換えていきます。}});jQueryのthisは、生のJSでは使用できないのでまず、親要素を指定しています。親要素内で右クリックを押して、もしalt値があれば(=画像)でalt値を取得しアラートを出す。CodePen.これくらいの処理であれば、重いjQueryを読み込むよりもクッソ処理は高速になるかなーと思います。17:30【JavaScript】jQueryのthisを生のJSで表現してみる。(スムーススクロール)、Androidで重い問題。あけましておめでとうございます!一発目の記事です。Androidで重い問題】についてみていきたいと思います。以下のサイトのソースを基にみていきたいと思います。});});このままだと一部、Androidでスムーズに動かないことがあります。(iPhoneは比較的スムーズ)例えば、画像リンク→ページ内遷移(スムーススクロール)→ページ下部へみたいな動きのときはもっさり感が半端ない。イベントを使ってるから!前も言ったかもしれませんが(言ってないかもしれません)モバイルブラウザにおけるclickイベントってかなり重いです。理由は、Touchイベント,Mouseイベント,Keyboardイベントなど、これらのイベントをすべてclickイベントでは、網羅してしまっているからです。結果、処理に時間がかかってしまうんですねー。逆にアクセシビリティ対応をするのであれば、clickってかなり便利だったりするけど...。タッチムーブが発生したら、フラグを消す。タッチエンド時にフラグがあれば、タップと判定する。touchendをそれぞれバインドさせ、タッチスタート=タッチエンドの時をユーザーがタップしたと判定させ動かしています。昔から使っている手法だけど、改めて共有ということで...。PCに対応させたいときは、UA判定で分けてもいいかもですね。(スムーススクロール)、Androidで重い問題。Tweet広告を非表示にするコメントを書くもっと読む2017-12-282017年を振り返って。PCの前で瞬きをしていたら、あっという間に2017年が終わってしまいました。皆様いかがお過ごしでしょうか。今年もざっくりこの1年間を振り返ってみたいと思います。2017年のできごと。組織の変更によりフロント側の人間へ。今までは制作メインだったけど組織の変更があり、フロントに立つ事が多かった1年だった。ディレクション...最初の頃は色々苦悩があったなぁ..。自分の意見を言っていいのかどうなのかと自問自答したり、進行管理がうまくできなくて悩んだり..制作もディレクションも両方できるにこしたことがないし、今後もその能力については高めていきたいと思う。某コミュニティのリニューアルに0から携われたり、大分有効な時間を過ごした気がする。去年のブログから...目標を確認をしてみよう...。家にBARをつくる:×LINEスタンプの作成:×なるほど。そんなことを考えていたのか自分は。英語についてやっぱり、外国人とコミュニケーションをとりたい!という理由だけだとモチベーションが持続しないなぁ~。環境のせいにしたくないけど、英語しか使わない環境にいっそのこと足を踏み言えれて自分を追い込みたい気分ではある。ハワイに行く機会があり現地の人に自分がつくったステッカーをあげたり、SNSで友達になれたのはよかった。自分のポートフォリオサイトの開設これやるやる言っててできてないやつ。不覚にも気付いたら、終わっていたという。別プロジェクトで忙しかったのでしょうがない。オリジナルのステッカーをつくるこれは実現した!来年は、もっとつくっていきたいし、いろんな人にプレゼントしたいなぁー。家にBARをつくるあ~これもできてないなー。自分のポートフォリオサイトの開設ブログを12ヵ月分ちゃんと書く!セミナー・勉強会の主催・実施!オリジナルのステッカーをつくる!LINEスタンプの作成!他業種への技術支援!個人の活動の充実!コネクション強化!アドベントカレンダーの参加!技術力向上・マネジメント力の向上!おかげ様で購読者も5人→11人へとなりました。今後とも宜しくお願い致します。17:222017年を振り返って。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。