.htaccessのリダイレクトでハマったのでメモを残しておきます。 .htaccessでリダイレクトの除外する場合 mod_rewriteが使用可能な環境な場合 コード RewriteEngine on RewriteBase / <IfModule mod_rewrite.c> # ディレクトリ配下でリダイレクトの指定 RewriteCond %{REQUEST_URI} !^</ifmodule>…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

すみませんッ！ブログさぼってました。 今回も大した内容ではないですが、メモです。 もう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 …

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

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

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

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

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

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

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

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

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

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

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

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

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