あのぞんブログ

単色パネル表示するだけのツール作った

2021-02-19

たまにモニターの焼け付きが気になって、グレイ色の背景のウィンドウを用意して確認することがあります。
そんなときに単色のページ探すがだるいので Web ツール化しました。 真っ黒や真っ白なウィンドウも作ることができます。

ツール

Mitelop という自分が作ってたツール群のサイトに置きました。

Mitelop カラーパネル作成 Mitelop ポップアップ画像

PWA で Mitelop をインストールして作成すると上のようなウィンドウを作れます。

技術的な話

単色背景については誰でもできるそのまんまの実装です。
作成画面のカラーピッカーは

というコンポーネントを使っています。

import Head from 'next/head'

const ColorPage: NextPage = () => {
  // 省略
  return (
    <Layout title="Color" reset>
      <Head>
        <meta name="theme-color" content={color} />
        <title>Color-{color}</title>
      </Head>
    </Layout>
  )
}

export default ClockPage

<meta name="theme-color" /> を指定することで PWA ウィンドウヘッダーの色を変えられます。 Next.js で実装しているアプリなので、next/head を使うことで動的に変更しています。

GitHub


© 2021 あのぞんびより All Rights Reserved