YahooニュースをキーワードでフィルタリングするChrome拡張機能のY!News Excluderのクロスブラウザ対応をついに実行いたしました。 Chrome以外のブラウザの対応は前々から要望があり、いつかやらなければならない課題としてあったものでしたが、SafariはiOSでも拡張機能が使用できるという事を知り、実現できないとほぼ諦めていたスマホ対応ができるという事で、最優先で対応する事になりました。 という事で、iOSはSafari、AndroidはKiwi Browserを使用する事で、スマホでもY!News Excluderを使用する事ができるようになりました。 対応ブラウザ 現在 […]
WEBの仕事
Y!News Excluder が好評なようです
YahooニュースからNGワードでフィルタリングして見たくない記事を除外するChromeの拡張機能「Y!News Excluder」が、先日20,000ダウンロードを突破しました。たまに改善要望の声が届きますが、基本的に好評なレビューが多く、本当に作って良かったなと感じております。 10月の下旬から急にダウンロード数が伸び始めたんですが、どうやらYahooニュースにゆたぼんさんの記事が異常に増えた事がきっかけのようです。きっかけになったキーワードが何であれ、ニュースサイトとして載せる記事の選定に偏りがあるというのはやはり良くない事かと思いますので、この拡張機能が少しでも影響を与えて、結果的にY […]
Yahooニュースからキーワードを指定して見たくない記事を非表示にするChrome拡張機能のソースコードをGitHubに公開しました。
昨年の2月頃に、Yahooニュースの一覧から特定のキーワードを指定して見たくない記事を非表示にするChromeの拡張機能を作ってみた。という記事を公開し、その作成した拡張機能を実際にChromeウェブストアに登録しました。 勉強のためにChromeの拡張機能を試しに作ってみる事自体が目的だったため、恥ずかしい話ですが、多くの人がこの拡張機能を使用する事はあまり想像しておらず、現時点で1,000以上もダウンロードされている事に若干ビビっているという状況です。 初めてChromeの拡張機能という「無料で配布するプログラム」を作ってみて、色々と知った事、思った事を、そりゃそうだろというような事も含め […]
Yahooニュースの一覧から特定のキーワードを指定して見たくない記事を非表示にするChromeの拡張機能を作ってみた。
Yahoo!ニュースのとある記事のコメント欄を読んでいたところ、「なんでこんなニュースばかり載せるんだ」「この話題もういい」「見たくないなら見なければいいんだけど、そもそも一覧に載せないでほしい」「加藤紗里というワードをブロックする機能が欲しい」というコメントをみかけました。 なるほど、そんな機能ならもしかしたら割と簡単に作れるかもしれないと思い、初めてChrome拡張機能を作ってみました。 拡張機能を作るにあたり、下記のサイトを参考にさせていただきました。ありがとうございました。 Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介！【サンプルあり】 Chrome拡張の作り […]
【CSS】文字サイズを画面サイズに合わせて改行位置を保つ方法
スマホの場合は特に、画面のサイズによってテキストの折返しの位置が変わるので、段落以外ではあまり恣意的に改行を入れないのがベターですが、見出し等でデザイン的にどうしても改行位置を保ちたい場面があったりします。 その場合は、文字サイズの指定に、pxやemや%では無く、画面幅を基準に指定できるvwという単位を使うと、改行位置をほぼほぼ保つ事ができます。 サンプルページ 他にも、vminやvmaxといった似たような単位がありますが、基本的にはvwで充分ではないかと思っています。 このvwに指定する数値ですが、上のサンプルページ（GIF画像）の場合、上のvw指定の文字は6.4vw、下のpx指定の文字は2 […]
BracketsのCSSのコードヒント（自動補完）から邪魔な”widows”を消す方法（拡張機能を自作してみた）
自由に好きな拡張機能を入れられたりして大変便利なテキストエディタAdobe Brackets。
その大変便利な機能の中に、CSSのプロパティのコードヒント（自動補完）機能があります。
これがあると無いとで作業スピードが断然違ってくるという程に頼り切っている機能なんですが、
どうしても前々からひっかかっている事がありました。
普段全く使わないwidowsプロパティの存在です。
謎のwidowsプロパティとは真逆で、相当な頻度で使うプロパティの１つにwidthがありますが、
このwidthを記述しようと思い、「wi」と打つと、コードヒントの一番上にwidowsが出てきて邪魔をするわけです。
こちらとしては、「w、i、エンター」でwidthを出したいという希望があるのです。
何故そういう希望があるかというと、元々Codaを使っていたからだと思います。
Codaのコードヒントにはwidowsがそもそも出てこないんですよ。
Coda時代の「w、i、エンター」でwidthを出す動作に慣れてしまっているため、どうしてもこのwidowsを消し去りたいわけです。
少数派かもしれませんが、同じような悩みを抱えている人はいるんじゃないかと予想しています。
このwidows問題、実は解決方法がいくつかあります。
【JavaScript】スムーススクロールをjQueryを使わずにシンプルに実装する【Vanilla JS】
以前「ページ内リンクのスムーススクロールのベスト（2017年9月現在）な実装を考える」という記事を書いたのですが、
この記事の中では当たり前のようにjQueryを使用していました。
アニメーションさせるならjQueryを使った方が楽、という思い込みから、jQueryを使わないという事を検討すらしていませんでした。
しかし改めて考えてみると、徐々に古いIEに対応しなくて良くなってきた昨今、最近のJavaScriptの便利なメソッドも使えるようになってきているので、実はプレーンなJavaScriptでもシンプルに実装できるんじゃないかと思い、色々と試してみました。
やはりjQueryは便利に作られているなと実感しつつも、機能を絞ればプレーンなJavaScriptでもまあまあシンプルに書ける事がわかりましたので、紹介したいと思います。
IE10以下の動作確認はしていません。
【JavaScript・CSS】スクロールしたらフワッと要素を表示させるスクリプトの使い勝手を良くしてみる
画面をスクロールして、要素が画面内に入ったらフワッと表示させるという、制作者側からしたら見飽きたけどクライアント側からは依然人気の高い例のアレ。
実は簡単に実装できるので、今まではその都度、状況に合わせてCSSとJSを書いていたのですが、
最近になって大体の要望や状況のパターンが掴めてきたので、汎用的なスクリプトを用意して毎回コピペで何とかできないものかと考えてみました。
色々試した所、今まで面倒くさがってjQueryで書いていたんですが、実は普通にJavaScriptで書いた方が簡単という事を知りました。
ですので、プレーンなJavaScript、CSS、HTMLのコードで紹介していきたいと思います。
【WordPress】ユーザー毎にテーマを切り替えてテスト用テーマを確認したりする方法【プラグイン無し】
ログインユーザーに別のテーマを適用させる方法と言えば、「Theme Test Drive」というプラグインを使用するのが良く知られてるかと思います。
このプラグインを使用すると、ユーザーの権限毎にテーマを切り替える事が可能になります。
しかし、「権限毎じゃなく、ユーザー毎にテーマを切り替えたい」と思う場面にたまに遭遇します。
例えば、クライアント側が管理者権限のあるアカウントを使用していて、
テストテーマをまずはこちら側だけで確認したい、なんて時があります。
その場合「Theme Test Drive」では思ったようにできません。
今回もその必要が出てきたので、プラグインに頼らず何とか自分でできないものかと思いました。
「Theme Test Drive」の中身を覗いてヒントを貰い、
意外と簡単に実装できましたので、ここに書いておきたいと思います。
ネットワーク環境やブラウザによって画像が勝手に圧縮される現象に遭遇して焦る【IE・Chrome等】
何の変哲もない普通の静的ページをコーディングして、クライアントの環境のIEとChromeで開いた時のみ、ページ内で使用している画像が何故か圧縮されるという現象が起こり、全く経験した事のない現象だったので、大変パニクりました。 最終的な対処法は、.htaccessに一文加えるだけの簡単な作業だったのですが、 とにかく同じ事例を検索するのが難しく、原因を見つけるのに苦労しました。 結果的に、完全な原因はわかっていません。 色々検索すると、Chromeはどうやらデータセーバーというものが関係してそうなしてなさそうな雰囲気なんですが、 IEで画像が圧縮されるという事例が見つからず、 という事はブラウザ […]