暇な時はWeb APIやChrome APIを読むようになった、よ〜んです。

Webブラウザだけで完結する便利ツールを5つ作ってみたのでご紹介します。

Descriptio生成くん(Summarizer APIが使用できるChromeのみ対応)

記事のデスクリプションを自動で作りたくて作ったツール。

本文を貼り付けると、ChromeのSummarizer APIで要約して100文字以内にトリミングしたDescriptionを返すツール。

Chrome 138以降のみ対応。

OGP画像作るくん

OGP画像を統一されたデザインで作成したくて作った。

Canvasで1200x630の画像を描画し、グラデーション背景・装飾の円・薄いグリッドを重ねてタイトルを中央配置する。タイトルは自動で折り返し＆縮小し、最後にPNGとしてダウンロードできる。

UUID v7生成くん

画像を埋め込むときのファイル名をUUID v7にリネームしたくて作った。

crypto.getRandomValues と Date.now() を使ってv7の構造に合わせたUUIDを生成し、ワンクリックでコピーできる。完全にブラウザ内で完結するので、ちょっとした作業の時に便利。

サクッとPython REPLくん

せっかくなのでPyodide(PythonのWASM)を使って何か作りたかったので作成。

CDNからPyodideを読み込み、ブラウザ内でPythonコードを実行できるミニREPLにした。標準出力とエラーを同じ欄に出し、手軽に試せるようにしている。

活動みえる化くん

GitHubのコントリビューショングラフ的な見える化をやってみたかったので作った。

/index.xml のブログ投稿と /data/output.jsonl の活動ログを読み込み、日付ごとに集計してヒートマップを描画する。複数タイプが重なる日はグラデーション表示、ホバーで内訳をツールチップで出す。

まとめ(？)

触ってみてフィードバックとかあれば、Xまでお願いします。

ブラウザだけでまだまだ遊べますね、PWAで何か作ったりもしてみようかなと思いました。

ではでは