Kodowg

期間

2024/3 - 2025/5

キーワード

  • Cloudflare Pages
  • Playwright
  • pnpm
  • Svelte
  • Tailwind CSS
  • TypeScript

日常のちょっとしたタスクに便利なツールを提供したいと思って作りました。ミニマルな機能と見た目にしています。

次のURLからアクセスできます。

https://kodowg.kskwtnk.com

2025年5月現在、以下の機能を提供しています。

  • 文字数カウント
  • QRコードジェネレーター
  • ランダム並び替え
  • ルーレット
  • タイマー

作った経緯

Web上には既に様々なツールがありますが、広告が多かったり、画面がごちゃごちゃっとしていることが多いです。

先人の作ったものを悪く言いたいわけではないのですが、もう少しミニマルなサイトがあっても良いのに……と思っていました。

探してみたのですがなかなか見つからなかったので、自分で作ることにしました。

最低限の機能と操作

できるだけ不要な機能や操作をなくすように心がけました。

例えば、以下は文字数カウントのスクリーンショットです。

よくあるツールだと「文字数をカウントする」というボタンがあり、それをクリックすることでカウントが実行されます。

しかし、わざわざクリックをせずともリアルタイムにカウントされれば(大抵の)ユースケースでは問題無いと考えました。

また、スペースをカウントするか、改行をカウントするか、など細かなオプションがついていることも多いです。

そんなに厳密にカウントしたいときにWeb上のツールを使うこともないでしょう。 1つのカウント方式(スペースはカウントする、改行はしない)だけの表示としました。

逆に、サロゲートペアや異字体セレクタがあっても見た目通りに数えたいはずです。 というわけでstring.lengthではなくIntl.Segmenterを使用しました。

最低限にするといっても、すべてを簡単に済ませるのではなく、最低限に見えるように気を遣っている箇所もあります。

はじめてのSvelte

これまでWebアプリケーションを作るときはReactしか使っていなかったのですが、今回はじめてSvelteを使ってみました。

本業では一部の事業にてSvelteを使用しているのですが、私自身がこれまで触ったことがありませんでした。 デザイナー組織の部長をしている以上、技術の評価も責任範囲です。 そんな中、分からないものを分からないまま評価するのは誠実ではないと考えて選んでみました。

他の技術との差を語れるほどの習熟度には至っていませんが、どれくらいのレベルだとどんなことができるか、なんとなくは分かったような気がします。 とは言えまだまだ浅いので、このサイトをプレイグラウンドとしてもう少し触ってみようと思います。

サイトマップ作成

Sveltekitにはデフォルトでサイトマップを生成してくれる機構が無いようで、追加しました。

ライブラリはありましたが、あまり依存関係を増やすのが好きではないのと、ごく簡単な処理で済みそうだったので自作しました。

Tailwind CSS v4の使用

Tailwind CSS v4がリリースされたのが2025年1月22日で、Kodowgでは2025年1月30日にv4対応を完了させています。

とりたててv4だからこその機能を使っているわけでもありませんが、設定ファイルがCSSファーストなのは自分としては理解しやすかったため、早めに上げました。

少し話はそれますが、Kodowgを含めTailwind CSS v4対応を同時期に実施していたため、そこで得た知見を記事にもしています。

https://qiita.com/kskwtnk/items/5409078e5baec9c9d8af

Playwrightによるテスト

恥ずかしながら、これまで個人開発ではほぼまったくテストを書いていませんでした。

今回、簡単な機能とは言えアプリケーションとしての体裁で提供するので、書かないわけにもいかないと思い取り組みました。

実施してみて、テストまで見据えた機能開発ができていないことを自覚しました。 具体的には、機能を作り終わった上でテストを書き、要素を取得しようとした段階でアクセシビリティロールがないことに気が付く、などです。

普段からアクセシビリティは意識しているつもりではいましたが、テストを書いてみてはじめて漏れに気づいた箇所は多かったです。 まだまだ修行が足りないと改めて認識しました。

Cloudflare Pagesでのデプロイ

これまでVercelを使うことが多かったのですが、何か違うものが使ってみたいと思いCloudflare Pagesを使ってみました。

軽くしか使っていないのでそう大した情報もありませんが、特別な設定無しにデプロイまでできて好印象です。

kskwtnk.comはCloudflare Registrarで取得したドメインなのですが、サブドメインの設定含めてかなり簡単にできて良い感触です。

GitHub Sponsorsへのリンク

自分自身「広告が嫌だな」という気持ちで作ったこのサイトですが、ドメイン代くらいは稼ぎたいなとも思います。

というわけでGitHub Sponsorsへのリンクを載せています。

「広告が嫌だ」という人は多いですが、そのうちどれだけの人が寄付ならするのか、調べてみたいという気持ちもあります。

PVが全然無いので今は実験にも至りませんが、いずれ増えたらちゃんと見てみたいと思っています。