リモートワークスタイルに関する質問に答えることで、リモートワーク比重・文化がどういった具合かを確認・共有できるサービスを作った。
remote-work-style-check.mugi.dev
こんな感じ↓の質問にぽちぽち答えるだけで良いので、すぐ終わる。簡単。
全部答えると↓のような全てをまとめたいい感じの1枚画像を表示してくれる。
もし忙しくなければチェックをやった上で、結果ページから結果をツイートして拡散してもらえるととても嬉しい。
チェック結果の画像も誰でも自由に使ってOK。
サービス内での項目は以前公開した "リモートワークスタイルチェック" の内容に沿っている。
🔗 リモートワークスタイルチェック · GitHub
🔗 "リモートワーク"の認識ズレ解消のためにリモートワークスタイルチェックを作ってみた - memo_md
チェックに答えた結果を表示するだけではあるので、サービスというと少し大げさかもしれない。
作ったモチベーション
リモートワークスタイルチェック自体は、"リモートワーク" という言葉に関しての認識の齟齬を減らしたいという気持ちがあって作った。
本当にありがたいことに、実際に一部の企業さまがこれを利用してチェック結果をブログなどで公開していただいた。嬉しい。
永和システムマネジメントさん
blog.agile.esm.co.jp
Arentさん
note.com
チェックを通じて、個人・企業の双方で「リモートワークも色々あるんだな」という気づきを一人でも多くの人に与えたいというのが根底にあるので、似たような形でより多くの人にチェック結果をアウトプットして欲しいな〜と思っている。
しかし、実際チェック項目は12個ほどあり、ちゃんと内容を読み込むと結構めんどくさいし、それをさらにアウトプットしろと言われるともっと手間ですよね、というのはわかる。
そこで、カジュアルに誰でも簡単にチェックしつつ、かつ結果を共有できる仕組みが必要だな〜と思い、このサイトを作った。
みんなのリモートワークをより良いものにするためにぜひ使ってみて。
技術的な話
特徴的なところでは次のようなものを使ってる
- サイト自体
- Remix
- Vercel
- OGP画像生成
- Playwright
- petite-vue
チェック自体はさほど難しくないReactアプリをRemix上に構築している。Remixを使わないといけない理由は皆無であり、使いたかっただけである。
OGP画像生成
結果ページやSNS共有のために利用するOGP画像については、チェック結果内容に応じて動的に生成している。
これは、画像を見た目となる要素をHTMLで構築し、それをPlaywrightから参照したうえで、要素のスクリーンショットを撮影することで生成している。Remixの一部ルーティングを画像用に用意しており、そこにアクセスするとPlaywrightが起動して結果を返すようになっている。PlaywrightではローカルのHTMLも開けるので、その際にクエリパラメータを付与し、それをスクリプトから参照することで値を切り替える。
ただ、さほど要素の多くない画像用のHTMLとはいえ、さすがにDOM構築を手でやるのは面倒。専用にビルド環境を構築しても良かったが、せっかくなので触ったことのない petite-vue で作ってみた。 petite-vue は Vue.js の超軽量サブセットで、ビルドなどを必要とせずにすぐにVue.jsの基本的な機能を導入できるものと思ってもらえればよい。
感想としては、まさにこういう用途のためのものだなという感じだった。雑に突っ込めば即Vue.jsが動くので手っ取り早い。余計なファイルも増えない。ただできることもかなり限定的なので、少しでも複雑なことをするとあっという間に破綻しそうなので、使い所は慎重に。
デザイン的なところ
TailwindCSSで気合いで構築した。
猫の画像については、DOTOWN の画像を利用させていただいた。
素敵なかわいいドット絵がクレジットなしで利用させていただける。神である。
そういうわけで、どの程度流行るかはわからないけど、もし暇なら試してみて貰えると嬉しい。
