この記事は、主にスマホでYahoo!ニュースを見ている人達向けの記事になります。

PCのブラウザでYahooを開いた時に特定のキーワードがタイトルに含まれる記事を非表示にする拡張機能を数年前にリリースし、多くの方に好評をいただきました。
Yahoo!ニュースの見たくない記事を除外する機能というものがとても需要がある事がわかり、スマホでも使えるようにしなければならないと常々考えていたのですが、
先日ついに、その拡張機能をiOSのSafari用に作り替えたものをリリースしました。
この記事ではその拡張機能「Y!News Excluder」「Y!News Excluder for Safari」の使用方法を紹介したいと思います。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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