14
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

リモートワーク中、家族に画面を覗かれて変な空気になったので、Chrome拡張機能を開発している

Last updated at Posted at 2020-12-17

DMMアドベントカレンダー18 日目の記事です。
昨日は、@matsuda-hiroki さんの「なにもしてないのにEC2インスタンスが壊れた」でした。

奥さん「何見てるの?」

こんにちは。DMM.com の@tmitsuoka0423 です。

今年 4 月に電子書籍事業部にジョインし、ずっと自宅でリモートワークをしています。
電子書籍事業部では、一般向け電子書籍サービスであるDMM電子書籍と、成人向け電子書籍サービスFANZA電子書籍の両方の開発を行っています。

そんなある日、悲劇は突然起こりました。

アダルトコミック画面の機能を開発していた夕方のこと。
奥さんが仕事から帰ってくるなり、私のディスプレイを見て言いました。「何見てるの?」

リモートワーク中はディスプレイの覗き込みに注意

私は真剣に仕事をしていただけですが、家族から見るとそうは見えないみたいです。
(仕事内容は事前に伝えているのに)。
お子さんのいる方・二世帯住宅にお住まいの方はもっと注意が必要になるのではないでしょうか。

Chrome拡張機能「tile」を開発中

そんなリモートワーカーのために、Chrome 拡張機能を開発しています。

スクリーンショット_2020_12_15_12_52.png
HTML 上の画像にぼかしを入れてくれます。

完成次第、公開します!

使い方イメージ

(1)インストール後、Chrome 右上のパズルマークをクリック、tile をクリックします。

2020-12-12_15h28_31.png

(2)ぼかすを選択します。

2020-12-12_15h31_30.png

(3)ページに表示されている画像にぼかしが入ります。

スクリーンショット_2020_12_15_12_52.png

内部処理の概要

内部で行っていることはとてもシンプルです。
全てのimgタグを取得し、CSS 関数のblurを利用してぼかしをかけています。

const imgList = document.getElementsByTagName("img");
for (let i = 0; i < imgList.length; i++) {
  imgList[i].style.cssText = "filter: blur(8px);";
}

上記のコードを利用して、拡張機能をインストールせずに、Chrome DevToolsConsoleタブから実行することも可能です。

スクリーンショット_2020_12_15_12_59.png

まとめ

開発中の Chrome 拡張機能「tile」の紹介しました。
リモートワークをより働きやすくするためのアプリを今後も開発していきます。

14
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?