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

#個人開発 #PWA #Mitelop

2021-02-19

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

ツール

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

Widget makeing tool | Mitelop

https://mitelop.anozon.me/

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

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

技術的な話

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

React Color

https://casesandberg.github.io/react-color/

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

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

elzup/mitelop: Widget makeing tool

https://github.com/elzup/mitelop

#個人開発 #PWA #Mitelop

この記事を共有する