愛知県一宮市でHTML・CSSコーディング講座を開いてみようかと思いますがいかがでしょうか

とある案件で、ほぼほぼ素人の方にHTMLとCSSのコーディングを教えながら一緒に作業を進めなければならない事になり、 やはり敷居の低いHTMLコーディングの仕事といえど、基礎知識があまり無い人にはそう安々とこなせる仕事じゃないんだなと痛感しながら仕事をしていました。 実際に仕事として作業を進めなければならなかったので、基礎的な部分をすっ飛ばして教えていました。 そうすると、当然ですがやはり理解度が低いわけです。 この人には後日時間を設けてゆっくり基礎から教えてあげたいなと考えていたんですが、 時間も労力も相当使う事になるので、どうせなら他の人も呼んで講座でも開いてみてはどうかという案が浮上しま […]

続きを読む

BracketsのCSSのコードヒント(自動補完)から邪魔な”widows”を消す方法(拡張機能を自作してみた)

自由に好きな拡張機能を入れられたりして大変便利なテキストエディタAdobe Brackets。
その大変便利な機能の中に、CSSのプロパティのコードヒント(自動補完)機能があります。

これがあると無いとで作業スピードが断然違ってくるという程に頼り切っている機能なんですが、
どうしても前々からひっかかっている事がありました。

普段全く使わないwidowsプロパティの存在です。

謎のwidowsプロパティとは真逆で、相当な頻度で使うプロパティの1つにwidthがありますが、
このwidthを記述しようと思い、「wi」と打つと、コードヒントの一番上にwidowsが出てきて邪魔をするわけです。
こちらとしては、「w、i、エンター」でwidthを出したいという希望があるのです。

何故そういう希望があるかというと、元々Codaを使っていたからだと思います。
Codaのコードヒントにはwidowsがそもそも出てこないんですよ。
Coda時代の「w、i、エンター」でwidthを出す動作に慣れてしまっているため、どうしてもこのwidowsを消し去りたいわけです。

少数派かもしれませんが、同じような悩みを抱えている人はいるんじゃないかと予想しています。

このwidows問題、実は解決方法がいくつかあります。

 

続きを読む

M-1グランプリ2017の「笑神籤(えみくじ)」の必要性を考える

2017年のM-1グランプリでは、ネタ順をその都度抽選で発表する「笑神籤(えみくじ)」という仕組みが導入された。 この笑神籤を導入した一番大きな理由として、必ずネタ順が最後になっていた敗者復活組の有利を無くし、極力平等にしたいという思いがあったのではないかと思う。 敗者復活組が有利になるという不平等さは今まで感じていたし、放送後のネット上の声を見ても、笑神籤に対する批判はあまり目にしないので、この試みはある程度成功だったのではないかと思う。 では、何故今まで敗者復活組を一番最後のネタ順にしていたのだろうか。 ドラマチックな演出にしたいというのも当然あるだろうが、 本来敗者復活組が最後になるとい […]

続きを読む

【JavaScript】スムーススクロールをjQueryを使わずにシンプルに実装する【Vanilla JS】

以前「ページ内リンクのスムーススクロールのベスト(2017年9月現在)な実装を考える」という記事を書いたのですが、
この記事の中では当たり前のようにjQueryを使用していました。

アニメーションさせるならjQueryを使った方が楽、という思い込みから、jQueryを使わないという事を検討すらしていませんでした。

しかし改めて考えてみると、徐々に古いIEに対応しなくて良くなってきた昨今、最近のJavaScriptの便利なメソッドも使えるようになってきているので、実はプレーンなJavaScriptでもシンプルに実装できるんじゃないかと思い、色々と試してみました。

やはりjQueryは便利に作られているなと実感しつつも、機能を絞ればプレーンなJavaScriptでもまあまあシンプルに書ける事がわかりましたので、紹介したいと思います。

IE10以下の動作確認はしていません。

続きを読む

【JavaScript・CSS】スクロールしたらフワッと要素を表示させるスクリプトの使い勝手を良くしてみる

画面をスクロールして、要素が画面内に入ったらフワッと表示させるという、制作者側からしたら見飽きたけどクライアント側からは依然人気の高い例のアレ。

実は簡単に実装できるので、今まではその都度、状況に合わせてCSSとJSを書いていたのですが、
最近になって大体の要望や状況のパターンが掴めてきたので、汎用的なスクリプトを用意して毎回コピペで何とかできないものかと考えてみました。

色々試した所、今まで面倒くさがってjQueryで書いていたんですが、実は普通にJavaScriptで書いた方が簡単という事を知りました。

ですので、プレーンなJavaScript、CSS、HTMLのコードで紹介していきたいと思います。

続きを読む

NexusシリーズからHUAWEI Mate 10 Proに替えて思わぬ落とし穴にハマる

名前も忘れた日本製のスマホ → Nexus 5 → Nexus 5X と、約2年ごとにスマホを買い替えてきたのですが、 日本製のスマホからNexus 5に買い替えた時の感動が大きすぎて、もう一生Nexusシリーズで良いと思っていました。 無駄なものが入りまくりで、不具合が多かった日本製のスマホにストレスを感じまくっていた私にとって、オフィシャルでプレーンで常に最新OSが使えて見た目もシンプルで素敵なNexusシリーズは最高のスマホでした。 しかし、Nexusシリーズが終了し、期待のPixelシリーズも一向に日本で発売されないという悲劇に見舞われ、ついにGoogle公式スマホから卒業しなければい […]

続きを読む

【WordPress】ユーザー毎にテーマを切り替えてテスト用テーマを確認したりする方法【プラグイン無し】

ログインユーザーに別のテーマを適用させる方法と言えば、「Theme Test Drive」というプラグインを使用するのが良く知られてるかと思います。
このプラグインを使用すると、ユーザーの権限毎にテーマを切り替える事が可能になります。

しかし、「権限毎じゃなく、ユーザー毎にテーマを切り替えたい」と思う場面にたまに遭遇します。

例えば、クライアント側が管理者権限のあるアカウントを使用していて、
テストテーマをまずはこちら側だけで確認したい、なんて時があります。
その場合「Theme Test Drive」では思ったようにできません。

今回もその必要が出てきたので、プラグインに頼らず何とか自分でできないものかと思いました。
「Theme Test Drive」の中身を覗いてヒントを貰い、
意外と簡単に実装できましたので、ここに書いておきたいと思います。

続きを読む

ネットワーク環境やブラウザによって画像が勝手に圧縮される現象に遭遇して焦る【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にさくっとコピペして、アナリティクスで単純に見分ける方法でよければ、この記事を参考にしてみてください。

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

続きを読む