Tinkerfont開発からのメモ

Tinkerfont開発からのメモ 2026年6月29日 私はジェネラリストです。デザインもコーディングも行い、タイポグラフィが重要だが、それが本業ではないような多くの状況に陥ります。クライアントのステージングサイトを確認したり、自分が書かなかったコードベースにオンボーディングしたり、ページが別のフォントフェイスでより読みやすくなるのではないかと考えたりします。よく出てくる質問は、「実際にここで何が使われていて、他のものではどう見えるだろうか？」ということです。 DevToolsは部分的には役立ちますが、ライブページでフォントを試してすぐに次に進むための簡単な方法がありませんでした。そのため、Tinkerfontは、そのギャップを埋めるための小さなツールとして始まりました。 Tinkerfontの機能 Tinkerfontは、ライブウェブサイト上のフォントを検査、置換、テストするためのブラウザ拡張機能です。 検査：テキストを右クリックすると、ファミリー、ウェイト、サイズ、色、コントラストが表示されます。必要なものをコピーできます。 検出：パネルを開くと、ページ上のすべてのフォントファミリーとそのカウントが表示されます。 置換：Bunny Fontsの1,900以上のフォントを検索するか、独自の.woff2、.woff、.ttf、または.otfファイルをアップロードします。ワンクリックで適用できます。 スコープ：ナビゲーション、ヒーローセクション、またはページ上の任意の領域に置換を限定できます。 永続化：ルールはホスト名ごとに保存されます。セットアップをJSONとしてエクスポートおよびインポートできます。 ChromeとFirefoxで無料です。アカウントは不要です。すべてはデバイスのローカルストレージに保存されます。 アイデアの成長 最初のバージョンは、本当にフォントの置換だけでした――ページ上にあるフォントを選択し、候補を試して、スクロールして、決定します。それだけでも、ステージングやクライアントワークで私が続けていたことのほとんどをカバーできました。会議の前に素早く直感的なチェックをしたり、共有用のスクリーンショットを撮ったり、ブランチを作成したりCSSを編集したりする必要はありませんでした。 インスペクターは後から追加されました。私は長年Fontanelloを使用していて、そのフローを組み込みたいと思っていました――右クリックして内訳を表示し、値をコピーする。そこでインスピレーションを与えてくれたLarsとFredrikに多大な感謝を捧げます。 Chrome版が安定したと感じた後、Firefox版も続きました――同じパネル、同じルール、同じローカルファーストモデル。 ウェブサイト（mighil.com/tinkerfont）は、小さなランダーとドキュメントサイトです。インストールリンク、開始ガイド、プライバシーポリシー、サポートフォームがあります。 開発ノート 内部的には特に複雑なことはありません。Chromeでは拡張機能Manifest V3を使用しています――サービスワーカーバックエンド、<all_urls>に対するコンテンツスクリプト、iframeとして注入されるフローティングパネルです。大まかには以下のようになります。 Piece Job content.js フォントを検出し、置換ルールを適用し、スコープ付き領域を処理し、DOMを監視します。 bunny-font-loader.js Bunny Font CSSを取得し、フェイスをデータURLとしてインライン化して、厳格なCSPサイトでも置換が機能するようにします。 font-inspect.js 右クリックコンテキストメニュー――カーソルの下のライブタイポグラフィ。 storage.js ホスト名ごとのルール、領域、テーマ、カスタムフォントメタデータ――すべてchrome.storage.localに保存します。 popup.js + panel.html UI――検索、適用、エクスポート/インポート。 ページが変更されたとき（SPA、遅延ロードコンテンツ）、ミューテーションオブザーバーがアクティブなルールを再適用するため、ナビゲーション後に置換が消えることはありません。カスタムアップロードはローカルに保存されます。 BunnyカタログはバンドルされたJSONファイルで、Bunnyがファミリーを追加するたびに小さなNodeスクリプトで更新されます。 Firefoxビルドは、ほぼ同じコードを共有しています――薄いブラウザシム、Firefox固有のマニフェスト（AMOのGecko ID、データ収集宣言）、およびパネルレイアウトが異なるいくつかのCSS調整です。 /tinkerfont ウェブサイト Next.jsで、Cloudflare上にOpenNext経由でデプロイされています。静的な内部ページと、Turnstileを使用したサポートフォームがあります。ランディングページには、インタラクティブな拡張機能プレビュー（HTML iframe）、モバイル用の遅延ロードポスター付きデモビデオ、そして両ブラウザの通常のインストールCTAが含まれています。 試してみてください Chrome: Chrome Web Store Firefox: Firefox Add-ons 仕事でこれを使用した場合、何が壊れているか、または何が欠けているかを聞かせていただけると嬉しいです。 タグ：tech