Fly higher! Sky is the limit!

webの現場で働く人のブログ

【Web業界】新卒入社1年目の思い出と今思う11のこと。

初心に返るためこの業界に入ったときの思い出や今感じていることを述べたいと思う。 これからWeb業界で働きたい方や就活生の参考になればと。 11のことって多いけど、とりあえず駄文をダラダラと連ねてみる。 【その1】横文字やカタカナが多すぎ問題。 Web業…

'npx' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。

webpackを使用したら少しハマったので備忘録。 各バージョン・環境 Windows 10 - node : 8.9.0 - npm : 5.8.0 ※ nodeのバージョン管理に「nodist」を使用。 実行した手順。 ①実行したいプロジェクトのディレクトリに移動し、以下のコマンドを叩く。 npm init…

【JavaScript】2回目に訪れたユーザーに何かしたいとき。

データーベースで制御することも可能ですが、フロント側だけでやるのであれば、Cookieで制御するのがよいかと思います。 cookieで制御してみる - サンプルソース //Cookie取得 var checkCookie = document.cookie; //Cookie内に【XXX】という文字列があるか…

【CSS3】ふわっと始まりふわっと終わる。

お久しぶりです。 すっかりCSS3のアニメーションは当たり前のように使われる時代になりました。 少し意識した組み方をすることで、グッとよくなったりします。 以下のサンプルをご確認ください。 ふわっと現れ、パッと消える - パターン1 DEMO https://codep…

【JavaScript】jQueryのthisを生のJSで表現してみる。

jQueryのthisって便利だよね。 これに対するこれって感じでめっちゃ便利だけど、生のJSで実装する場合、 どうしたらよいんだろうかということで、書いてみた。 知人がつくったALT FRIENDSというページを基に書き換えてみる。 ALT FRIENDSは、画像に対して右…

Smooth Scroll (スムーススクロール)、Androidで重い問題。

あけましておめでとうございます! 一発目の記事です。 ということで本記事のタイトル通り、【Smooth Scroll(スムーススクロール)、 Androidで重い問題】についてみていきたいと思います。 よろしくお願いします。 以下のサイトのソースを基にみていきたいと…

2017年を振り返って。

PCの前で瞬きをしていたら、あっという間に2017年が終わってしまいました。 皆様いかがお過ごしでしょうか。 今年もざっくりこの1年間を振り返ってみたいと思います。 2017年のできごと。 組織の変更によりフロント側の人間へ。 今までは制作メインだったけ…

もうclassの付与とか剥奪ならこんなに短くかけるのか。

すみませんッ!ブログさぼってました。 今回も大した内容ではないですが、メモです。 もうclassの付与とか剥奪だけならこんなに短くかけるのか ということでソースとDEMOです。 ソース let btn = document.querySelector('.btn'); btn.addEventListener('cli…

最近見つけた超カオスなユーザーエージェント

最近みつけた超カオスなユーザーエージェントがある。 それがこれだ。 カオスなユーザーエージェント mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; touch; .net4.0c; .net4.0e; .net clr 2.0.50727; .net clr 3.0.30729; .net clr 3.5.30729; tablet …

[Chrome]セキュリティ警告を出すようになるらしい。

Googleからこんな通達が届いた。 2017 年 10 月より、ユーザーが Chrome(バージョン 62)で HTTP ページのフォームにテキストを入力すると、「保護されていません」という警告が表示されるようになります。 非SSL環境だと安全でないと判断されるようになるよ…

好きなツイートを自分で選択してグリッド形式でWebサイト上に表示する方法(Tweet Gridの使い方)

「Tweet Grid」が発表になったのは2015年でかなり今更感あるけどあんまり日本語記事が出てこないので備忘録としてまとめておきやす。 「Tweet Grid」とは? 好きなツイートを自分で選択してグリッド形式でWebサイト上に表示する方法。 カスタマイズ可能で見…

node.jsのアップデートとかnpmとか

手順1:nodistのインストーラー https://github.com/marcelklehr/nodist/releases/ 環境変数の設定とかすべてやってくれるので最新版をインストールすればOK。 めっちゃ楽だ。 nodistとは Windowsでnode.jsのバージョン管理をするのに便利なやーつ。 コマン…

【脱jQuery】YouTubeから取得したプレイリスト(JSON)をVue.jsで表示してみた。

「昔作ったサイトをVue.jsで書き換えています。」的な記事をチラホラみかけるので私も勉強がてらに実装してみました。 ※ 本記事では、YouTubeからプレイリスト(JSON)を取得するところの説明は省いております。 (ググれば優秀な記事がたくさん出てくるので…

フリック操作時のエラー(Firefox)

本日はフリック操作時のエラーについてです。 過去にも何度かうまくいかず原因を解明しては、忘れてしまっていた内容なので備忘録として残しておきます。 エラーになる記述 e.changedTouches[0].pageX event.changedTouches[0].pageX エラー内容 e.changedTo…

[ネタ?]コピペでOK!JavaScriptでなんちゃって認証をつくる。

htaccessを用意できないなんて時に気休めくらいに使って頂ければと思います。 「なんちゃってでもいいから、とりあえず認証かけておこう!!」みたいな時にオススメです。 今回使用するJavaScriptソース document.body.style.display = "none"; var inputTex…

【SVG】ホバーで円アニメーション

メモです。 IEは動きません。 See the Pen bqGdjy by paradox_tm (@takumaro-web) on CodePen. ソースはコードペンを参照ください。

JavaScriptで複数ワード検索 品質向上を目指す。

Webサイトを構築する上で必ずルールが存在します。 そのルールの1つが表記。 納品前の成果物に対して「表記揺れ」や「禁止ワード」を効率よく確認できないものかと思いJavaScriptで実装してみました。 イメージ的にはChromeの拡張機能 「goodbye “Zenkaku” -…

[jQuery不要][OAuth認証不要]自分のWebサイトにツイートを取得し表示する方法

2017年12月28日更新 仕様変更によりこちらのソースは利用できなくなっておりました。。 Twitterから投稿を取得して自分のWebサイトに表示させるのにAccess Tokenを取得したりOAuth認証させたりで色々手間なんですがそんな手間を省いてくれるありがたいライブ…

2016年を振り返って。

もう今年も残りわずかですが、いかがお過ごしでしょうか。 今年ラストの更新になります。 毎年、新しい年の始まりに「今年はやってやるぜ!!」と意気込んで色々目標を立てるのですが本記事はその振り返りになります。 ※ 実際に所属している組織とは関係あり…

【GA計測にも使える!】押された要素が何番目なのかを調べる方法。

押された要素が何番目か調べる方法は、いくつかありますが個人的によく使うものをご紹介します。 ※ jQueryを使用しています。 パターン1:リストで何番目を押されたかを調べる。 HTML <ul id="list"> <li>ああああああああ</li> <li>いいいいいいいい</li> <li>うううううううう</li> <li>ええええええええ</li> <li></li></ul>…

[GA][Googleアナリティクス]iPhone7(iOS 10)safariで クリックイベント計測がうまくいかない時の対処方法。

2016年9月13日にiOS 10が配信されました。 さっそくアップデートしましたが今までの仕様に慣れていたので起動時や目覚ましタイマーを止める際に、一度ホームボタンを押さないといけない新しい仕様が若干煩わしいです。 ※ ちなみに自分のiPhoneはiPhone 6です…

[JavaScript]日本語を数値に変換 / 日本語を数値に変換

JS

クイズの回答との照合やパスワードのチェックなどに使えるメソッド。 charCodeAt() メソッド 与えられたインデックスに位置する文字の Unicode コードポイントを10進数値で返す。 (例)"あいうえお"という文字列の場合、"あ" が charCodeAt(0)にあたる。 ⇒ …

[JQuery]たった9行でInstagram(インスタグラム)の写真一覧をWebサイトに表示する。

準備するもの Instagramのアカウント Instagram APIの登録 アクセストークンの取得 jQuery 参考サイト InstagramのAPIを使用して自分の投稿した写真をWEBサイトに出力する instagram api 事始め access_tokenを取得する - Qiita Instagram APIを取得してWeb…

TweenMaxを使ってオープニングアニメーションをつくる。

JS

TweenMaxを使ってオープニングアニメーションをつくる。 日本でもTweenMax(トゥイーンライブラリ)を使用しているリッチサイトが大分増えてきた気がますねー。 大体、動きがかっくいいサイトのソースを覗くと「TweenMax」の文字が見受けられます! 本記事は…

facebookのOGPキャッシュをボタン1つで消せるBookmarkletを作製しました。

ページ公開直後のコンテンツに対してシェアボタンを押してもOGP情報をうまく取得できずシェアされない場合がありますよねー。 これは公開前のURLにfacebookのクローラがアクセスしてしまうことによって、facebook側にキャッシュが残ってしまいそちらを参照し…

【canvas】画像を回転させながら落とす

最近、インタラクティブな実装に興味を持ち始めました。 覚え書きとして、canvasで画像を用いて回転させながら落ちるアニメーションの実装方法を記しておきます。 DEMO 補足 - 画像を複数個使用することを想定して、配列を用いています。 JavaScriptコード $…

配列の宣言で警告。

JSHintで警告が出ていた。 the array literal notation [] is preferable 日本語訳 :“配列リテラルの表記が好ましいっすね。” 配列の初期化宣言にリテラルを使った方がよいらしい。 x = new Array (); ↓ x = []; 以上、覚書でした。 リテラルとは、プログラ…

最近よく使う、CSSプロパティ 3選(vw/vh,calc(),flex) - #レスポンシブwebデザイン

ここ最近よく使うなーと思うCSSプロパティの紹介。 Viewport units: vw, vh, vmin, vmax ビューポートの縦・横に対する割合の単位ですが、 めっちゃ使えるなぁーと思う今日この頃です。 記事紹介 coliss.com dev.classmethod.jp Can I use 状況 Can I use...…

【自分メモ】cookieの値を取得する。

特定のcookieの値をだけを取得したい場合。 var getCookieValue = function(key) { var val = document.cookie.match(new RegExp('(^|\\s)'+key+'=([^;]+)')); return !!val && unescape(val[2]); }; alert(getCookieValue("COOKIE名")); 参考URL blog.manat…

[jQuery]スクロールバーのデザインと実装方法と注意点 - 超軽量スクリプト Perfect Scrollbar

一昔前だとスクロールバーのデザインモックを見ただけで吐きそうになっていましたが、 今では便利なプラグインとCSS3といった技術を用いて比較的容易に実装できるようになりました。 本記事では、超軽量スクリプト Perfect Scrollbarを用いたデザイン性に富…