ネットワーク環境やブラウザによって画像が勝手に圧縮される現象に遭遇して焦る【IE・Chrome等】

何の変哲もない普通の静的ページをコーディングして、クライアントの環境のIEとChromeで開いた時のみ、ページ内で使用している画像が何故か圧縮されるという現象が起こり、全く経験した事のない現象だったので、大変パニクりました。 最終的な対処法は、.htaccessに一文加えるだけの簡単な作業だったのですが、 とにかく同じ事例を検索するのが難しく、原因を見つけるのに苦労しました。 結果的に、完全な原因はわかっていません。 色々検索すると、Chromeはどうやらデータセーバーというものが関係してそうなしてなさそうな雰囲気なんですが、 IEで画像が圧縮されるという事例が見つからず、 という事はブラウザ […]

続きを読む

【Gulp・Emmet】gulp-sugar-srcsetでimg要素のsrcset属性を楽に書く。さらにEmmetで楽に書く。

HTMLコーディングをしていて、常々面倒だなと思っているのが、画像のRetina対応です。

画像の書き出しについては、Photoshopのアセット機能とOVENという便利なプラグインを使用すれば楽に書き出し作業ができるようになりましたが、
コーディングでimgタグを書く時のsrcsetの記述が非常に面倒に感じていました。

何とか楽に書く方法は無いものかと思い、まずEmmetで探してみた所、img:s と書いて展開すれば、さくっと<img srcset=”” src=”” alt=””> という状態になるという事はわかりました。

ただ、面倒くさいのはその先の作業で、src属性とsrcset属性にそれぞれパスを書かなければならないのを何とかしたいわけです。

こういうのはGulpのようなタスクランナーが得意だろうと思い探してみた所、良さそうなものを発見しました。

gulp-sugar-srcsetという何とも甘い香りのするプラグインで、srcsetの苦みを軽減できればと思います。

続きを読む

【WordPress】RSSからのアクセスをアナリティクスで判別できるようにする方法【カスタムキャンペーン機能を少し利用】

最近ブログを積極的に更新し始めたのですが、
記事が増えるとやはり見てくれる人も多くなるという事がわかり、少し驚いています。

と言っても、1日に2桁人数ぐらいの話なので、まだまだ低次元の世界観でやっています。

アナリティクスを見てみると、リファラーが(direct)になっているのがわりと多く、
検索以外でどこから人々が来ているのかが分からない状況です。
このブログ用のTwitterアカウントも先日作ったのですが、実質のフォロワーさんはまだ1人もいないような状態で、
Twitterでエゴサーチをしてみても、このブログのURLがツイートされてる感じもありません。

社内の共有ツールやチャットで共有されたりとか、可能性はいくらでもあると思いますので、考えてもきりがないのですが、
1つの可能性として、RSSリーダーからのアクセスというのもあるはずです。

このブログの場合だとRSSの可能性はかなり低いと思うのですが、とりあえずRSSからかどうかを判別できないか調べてみた所、
WordPressの場合、プラグインを使う方法を紹介しているブログが見つかったりしました。

そんな方法もあるのかと思いつつ、でもRSSに載るパーマリンクにパラメータを付ければいいだけでは?と思ったので、
この記事では、functions.phpを編集するやり方で紹介したいと思います。

プラグインでやる方法の方が便利な機能もあるかもしれませんので、場合によってはそちらの方が良いかもしれません。

functions.phpにさくっとコピペして、アナリティクスで単純に見分ける方法でよければ、この記事を参考にしてみてください。

前置きが長くなり、大変申し訳ございませんでした。

続きを読む

スクロールすると奥に進むページを作る【IE完全無視】

先日、某案件でスクロールして奥に進むというページを作成しました。

IEを無視すれば意外とさくっと作れるものなのだという事を知ったので、忘れないように記事にしたいと思います。

ちなみに、今回使用するCSSのperspectiveプロパティは、まだ草案段階のプロパティですので、
今後変更がある可能性もある事をご了承いただきたいです。

続きを読む

【JS・jQuery】ページ内リンクのスムーススクロールのベスト(2017年9月現在)な実装を考える

2018/1/27追記:「スムーススクロールをjQueryを使わずにシンプルに実装する」という記事を書きました。
jQueryを使わないスムーススクロールのコードを紹介していますので、もしよければ参考にしてみてください。

サイト制作時に、必ずと言っていいほど使用しているスクリプトがあります。

ページ内リンク(アンカーリンク)のスムーススクロールです。

これはもう本当に毎回使用するので、手元のデフォルトのJSファイルには当たり前のように用意してあります。

しかし、先日書いた記事「【JavaScript】Chromeの最新版(61)から画面スクロール量を取得する要素がdocument.bodyじゃなくてdocument.documentElementに変わっていた事を知った。」にあるように、
Chromeの最新版(61)から、画面のスクロール位置を取得したりする要素が変わり、
今まで使用していたスムーススクロールが、Chromeでは動かなくなってしまいました。

これは簡単に修正する事ができましたが、少しひっかかる点があり、
今現在ベストな実装方法はどのようなものだろうと思い、考えてみました。

あくまでも、個人的なベストですので、ご了承下さい。

続きを読む

【JavaScript】スクロールしていくとフッターで止まる「ページトップに戻る」ボタンをCSSとjQueryでシンプルに実装する

画面をスクロールしたら「ページトップへ戻る」ボタンがフワッと現れ、
下までスクロールしていくとフッター辺りでピタッと止まるという例のあれ。

ちょっとした機能のわりにはまあまあ面倒くさい作業の一つです。

何故面倒くさいかと言うと、
サイトのデザインによって、コンテンツやフッターとの位置関係が様々なため、
毎回同じスクリプトを微妙に使えなかったりするからです。
レスポンシブだったりするとさらに面倒くささが増します。

これだけの事に時間を使いたくないので、
ボタンの位置やフワッとするアニメーション等はCSSに完全にまかせる形にして、
表示、非表示、止める、の切り替えは、jQueryのコードをポンと貼り付けるだけで実現できないかと思い、考えました。

DOMを弄る場合、やはりjQueryが楽です。

続きを読む

【JavaScript】スクロールして各要素が現れたりした時に何らかの処理をするスクリプトを良い感じに書きたい。

画面をスクロールした時に、下から要素が現れたり、
その要素が画面の上部にたどり着いた時に何らかの処理をする、
という事をする時がたまにあります。

この処理をカッコ良く書くにはどのように書けばいいだろうかと思い、
色々と試してみました。

もっと正解はあるかとは思いますが、
僕のレベルとしては割りとシュッとしたコードが書けたんじゃないかなと思っています。

目標としては、

  • 汎用性のあるコード
  • 管理しやすいコード
  • グローバル変数をできるだけ少なく
  • メモリ消費を少なく、処理をできるだけ軽く

こんな感じの目標を立てて考えてみました。

続きを読む

【JavaScript】Chromeの最新版(61)から画面スクロール量を取得する要素がdocument.bodyじゃなくてdocument.documentElementに変わっていた事を知った。

タイトルが長くてすいません。 概要を全て詰め込みました。 タイトル通り、Chromeの最新版(61)から、JavaScriptで画面スクロール量(画面スクロールの位置)を取得できる要素が、 document.bodyじゃなくてdocument.documentElementに変わっていた事を知りました。 あるサイトの公開日に、クライアントのChromeは最新版、自分のChromeは最新版じゃない状態で、 自分の環境では問題なく動くのにクライアントの環境では全く動かないという事態が起こり、ものすごく焦りました。 ユーザーエージェントでスクロール量を取得する要素を判別している場合、この悲劇が起こり […]

続きを読む

さくらとかロリポップでGitを設定して更新する方法のメモ

さくらやロリポップのスタンダードプランとかでもSSH接続とか出来ることを恥ずかしながら最近になって知った人間です。

今まであまりGitとか積極的に使おうとしていなかったのですが、
仕事環境の変化とかもあり、今後頻繁にGitを活用していく事になりそうなので、
共用レンサバにGitを設定する手順を覚えておくための、割りと個人的なメモを記します。

ローカル環境はMac。GitクライアントはSourceTreeを使用しています。

続きを読む