ブラウザ拡張機能(PC用)

色めがね

色めがね(フィルター)を使用すると、ページを、金・銀・銅・青銅に近い色で表示します。普段と異なる見た目を求める方に。
(※白く塗りつぶされている部分(#FFF)は、変わりません)

image
How to use

使い方

step01
ページを表示する

色眼鏡を通したいページにアクセスします。
※全てのページに対応しているわけではありません。

step02
好きなパターンを選ぶ

機能拡張をクリックすると、カラーリストが表示されるので、好きな色を選んでください。

step03
完了

ページが色眼鏡を通して確認できます。

Precautions

注意事項

この機能を使う前にご確認ください

禁止事項

「利用者自身が著作権を持っていない」コンテンツに対し、「本機能拡張を適用した状態」の「スクリーンショットや、画面の一部が映り込んだ状態」の画像や動画を、公開・配布・放映することを禁止します。 (例:「他人の作品に色付けた状態が含まれているスクショ・動画」の公開禁止。自分のだったらOK)

※このページは、色めがね適用した状態でスクショOKです

対応できない不具合について
  • 適用後のページが、意図しない表示(動作)をすることがあります。これはcss filterの仕様なので、ご理解・ご了承ください(例えばYahooのスクロール追従メニューの挙動がおかしくなったり、twitterのポップアップが出てこなくなったり)。
  • 上記の現象は、適用する前の状態に、デベロッパーツールでbodyタグに「 filter: blur(2px); 」を付与すると、再現できます。
免責事項
  • 本機能の利用による、いかなる損失や損害、賠償要求に対しても、その責任を一切負わないものとします。
  • 本機能は、予告なく仕様を変更することがあります。
Use extensions

機能拡張を使う

PCのみでしか使用できませんが、機能的に変わりはありません。好きなブラウザを選んでください。

Firefox

Firefoxは申請した当日に承認していただきました。ありがとう!素晴らしいブラウザです!

Firefox向け拡張機能
Microsoft Edge

Edgeは申請してから2日後に承認していただきました。ありがとう!

Microsoft Edge Addons
Google Chrome

永らくお待たせしました。chromeでもお使い頂けるようになりました!

chrome ウェブストア

Supplementary information

補足事項

グラデーションマップを使っています。より具体的には、CSSのSVG filterをgradientmaps.jsで追加しています。
この拡張機能は「表示しているページに対して、グラデーションマップをかける」ためです。SVGフィルタを動的にHTMLに書き加えた後、指定箇所のCSSを編集するため、この許可が必要になります。なお、色をチョイスする・ペイントボタンを押すまでは、ページへ何も行わないようになりました。
画像によりますが、基本的に白の個所は白いままです。このため、グレースケールで構成されている画像に適していて、影絵などには適していません。また、最初からカラーで塗られている画像には ほぼ逆効果です。
この機能拡張の仕組み上、不可能です。ON/OFF以外は諦めてください。
注意事項にも記載していますが、CSS filterの仕様です。この機能拡張は、機能拡張をクリックした時に表示される画面の「ポップアップ側の機能」と、 表示中のページに対して働きかける「コンテンツ側の機能」の2つに分れているのですが、主に下記の処理を行っています。

(1)ポップアップ側の機能
・グラデーションを選び、画面への反映
・グラデーションマップの解除
・任意のグラデーション(1種類)の画面への反映、編集・リセット・保存

(2)コンテンツ側の機能(表示しているページに対しての処理)
・(1)で指定されたカラーを、グラデーションマップで適用または解除する
image

  • パレットアイコンをクリックすることで、グラデーション編集機能に変わる
  • 色を適用(ローラーアイコンをクリックするか、プリセットの色をクリック)するまでは、グラデーションを編集しても反映しない
  • 適用した後は、(ポップアップを閉じるまで)リアルタイムに反映するようになる
  • 消しゴムアイコンは、グラデーションマップの解除
  • ゴミ箱アイコンは、編集したグラデーションマップを初期状態に戻す(保存してあった場合、グラデーションマップ情報も消す)
  • 1色のみ保存可能
  • 保存するまでは、保存しない。
  • ポップアップを閉じると、保存していないグラデーション情報は失われる。
  • 保存アイコンのボタン色が緑になった時は、保存しているグラデーションと違うグラデーションになっている。保存の押し忘れに注意
  • 保存したグラデーションは、プリセットの一番右下に表示されるようになる。
  • 保存したグラデーションは、ポップアップを開きなおすと、編集画面に反映される。
  • プリセットを選ぶと、プリセットのカラー情報がエディタに反映される(反映されるだけで、保存を押すまで保存されない)
※ちなみに、すみません。firefoxは現状 編集画面では、グラデーションの比率を変更できても、グラデーションの色を編集することは出来ないようです。
編集ファイルをお持ちの場合、編集ファイルで直接グラデーションマップを適用していただいたほうが、綺麗な結果が得られるかと思います。
この機能拡張は主に「1つのグラデーションマップで それっぽく見せる」のが目的なので、特定の箇所の色を変更するのは難しいですが、ご自身で選択範囲を指定いただいて、その個所にグラデーションマップをかけることで、素敵な作品に出来上がることでしょう。

殆どの制作アプリケーションは、グラデーションマップ機能に対応しています。
Adobe Photoshop, CLIP STUDIO, procreate, ibisPaint, MediBang Paint, etc...
私も使いたいです・・・。
モバイルは拡張機能入れられないので、ブックマークレットくらいしかアプローチ出来ないっぽいんです。
試作品で、1色のみで、かつ当てたらリロードするまで消せないっていう中途半端な状態ですが、一部のブラウザで使えるので、一応こっそり共有しておきますね

ブックマークレット:[ 色めがね(簡易版) - test 3 ] - update 2021.03.15

<使い方>
safari(iPad)
このページを端末のSafariで開いて、上記ブックマークレットをブックマークにドラッグ&ドロップ(タッチ操作だと何ていうんですかね?これ)。適用したいページを開いて、追加したブックマークをタップ
また、safariの場合、ショートカットにコレを登録して共有から「グラデーションマップを適用」呼び出すと、画面のリサイズイベントが発生しません。

chrome(iPad)
PCでこのページを開いて、PCのブックマークレットとして登録。その後、iPadのchromeでアカウント(ブックマーク)同期。適用したいページを開いて、追加したブックマークをタップ


Androidは、今のところ手がありません・・・。上記リンクをクリックすると動作するのですが、ブックマークレットにすると動作しなくなってしまう。