cosense-iconでGoogleフォントが使えるようにした
前々回→Scrapboxのアイコンをいい感じにサッと作るWebアプリをCloudflare Workersで作る
前回→cosense-iconでランダムで「いい感じ」に色を変える機能を追加した
https://icon.soui.devとアップデートをしてきたが，ここでふと，Googleフォント，使いたいなぁという気持ちになったので，実装してみた．
これの難しい点として
- Googleフォントの文字のPathをSVGでどのように作る？
- Cloudflare Workersの無料枠でやれるか？
ここまでの実装だと，フォントはユーザのブラウザ内蔵のフォントを使う形をとっていて，ただ文字を埋め込んでいただけだけど，Googleフォントのようなものはそもそもユーザの環境にはないものなので，インストールしてもらう必要がある．
だけど，このサービスはただSVGを返すだけなので，普通のWebサイトのようにフォントをインストールさせるようなことができない．
なので，対策をシンプルに考えれば，これまでと同じURLでアクセスするAPIを提供しつつ，バックエンドのWorkersでGoogleフォントを取得して，フォントのPathになるSVG生成して返せばよさそうなんだけど， Cloudflareの無料プランでは処理時間が足りなさそう（10ms/1リクエスト制限）
なので，Pathの生成をクライアントでやらせようという作戦をとっています．
つまり，エディタ側で作成した時にブラウザ側で
- Googleフォントを非同期で取得
- フォントからPathのSVGを生成
- 生成したPath情報をR2に保存する
こんな戦略になっています
ただし，これだとBotとかに無制限に攻撃されて僕のR2がえらいことになってしまいますので，Turnstileを使って不正アクセスを防止しています．
今までのようにURLだけからパッと使えるわけではありませんが，エディタ側でSVGを生成すれば気軽に使えるのでおすすめです．
もちろん今までの機能は引き続き使えます．