Fly higher! Sky is the limit!

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

Webの現場で使えるテクニック集まとめ(完全メモ帳)

Webの現場でたまに使うけど忘れてしまい、またググるみたいな記事やこれだけは読んどけ的な記事を載せていきます。 完全メモ帳なので、随時更新していきます。 CSS系 天地中央 .hoge{ position: relative; top: 50%; transform: translateY(-50%); } https:/…

jQueryを使用しない現在地表示(ES6:JavaScript)

お久しぶりです。 もうES2015(ES6)を使用すれば、大分楽な時代になりました。 なんとなくjQueryを使用しない現在地表示のJavaScriptを記述したのでご自由にお使いください。 想定されるhtml <ul class="element"> <li><a href="/aaa/">りんく1</a></li> <li><a href="/bbb/">りんく2</a></li> <li><a href="/ccc/">りんく3</a></li> </ul> JavaScript const dir = location…

【JavaScript】現在のURLを取得し、パラメータは除外する

コード let url = window.location.href; url = url.replace(location.search , '');

JSONジェネレータを作る(Vue.jsとかJavaScriptとか)

!!!いきなり完成品!!!! See the Pen JSON GENERATOR by paradox_tm (@takumaro-web) on CodePen. 作成手順 1. JSONを用意して、HTML上に表示する。 { "name": "安室奈美恵", "sex": "女性", "age": "41" } 私が今回利用したサイトはこちら(というか…

平成も終わろうとしているのにjQueryにヤラレル

事象 Google ChromeやFirefoxのコンソールからJavaScriptを実行するとエラーが起きないのにサーバーにそのJavaScriptをアップすると謎のエラーが起きる。 エラー内容 <Google Chrome> Cannot read property 'replace' of undefined <Firefox> TypeError:…

WordPress(ワードプレス)の投稿内でJavaScriptを実行するTips

この記事は以下の現象の人におススメの記事です。 JavaScriptを記述したのになぜかpタグに書き換えられてしまう。 複数人で更新しているため、できれば自分の投稿(固定)ページのみに適応させたい。 事情によりサイト共通部分(php)は弄れない。 など Word…

無料画像編集ソフト「Pixlr Editor」の広告が邪魔だから、消すブックマークレットつくった。

普段、Photoshopを使用しているので私は必要はないんですが、作ってくれと頼まれたのでつくった。 以下のブックマークレットをブックマークに登録し、「Pixlr Editor」のページを開いた状態でポチっと押せば消える。 ソースコード javascript:(function(){!f…

【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…