序

ここ最近社内向けのプレゼン資料を作る機会が多くて、処理フローや構成図を書くときに、ちょっとしたファイルアイコンが作れるといいなと思ってました。

先月以下のLTイベントを視聴して、HonoやCloudflare Workers面白そうだなと思ったので、このスタックで作ってみました。

このスタックが今回のユースケースのための技術選定としてベターかどうかはまた別のお話

作った物

Live Editor

生成したSVGファイルについては自由に使っていただいて構いませんが、Workersの使用回数が嵩むと困るので、一度作ったら保存して使ってもらえると嬉しいです。

~~環境設計がまずいのでは~~

リポジトリ

作れる物

こんな感じのファイルアイコンがSVGで作れます。

ポイント

ぶっちゃけゴリゴリSVGをコーディングしただけで、大したプログラミング的ポイントはないです。
でもSVGでお絵描き、思ったより楽しいです。

エンドポイントは１つしかなくて、クエリ文字列で装飾していくようにしています。

あとあとオプション追加したときに既存のURLが壊れにくいようにしたかった

app.get("/api", async (c) => {
  const {
    text = "File",
    color = "2563eb",
    font = "Menlo,Consolas",
    badge = "none",
    type = "text",
  } = c.req.query();
  c.status(200);
  c.header("Content-Type", "image/svg+xml");
  const body = (
    <SvgBase>
      {getFileImage(type as FileType)}
      <FileTypeBadge text={text} badgeColor={`#${color}`} font={font} />
      {getBadge(badge.toLowerCase() as BadgeType)}
    </SvgBase>
  ).toString();

  return c.body(body);
});

Content-Typeをimage/svg+xmlにして、bodyにはJSX.ElementをtoString()した物を突っ込んだらいけました。

今後

必要に応じてファイルタイプの追加とかをしようかなと思ってます。
エラーハンドリングとか、Live Editorをもうちょっとちゃんとアプリ化して、一度作ったものは静的にホストされるようにするような改修も追々。

Live EditorはReactをCDNからインポートして構築したものにnew.cssを当てて、html一枚でそれっぽく動くようにしました
- 突貫工事もいいとこなので、マジでなんとかしたい

終わりに

HonoとCloudFlareを使った開発体験はすごく良かったし、もっといろんなことをやってみたいと思えるスタックでした。
pnpm create honoからnpm run deployまでのフローで詰まるところが一切なく、完全に実装に集中できました。
wranglerを使ったローカルでの動作確認もサクサクです。

現在、Remixを使って何か作りたいなぁと画策しており、CloudFlareはデプロイ先の良い選択肢になりそうです。

その他

情報処理技術者試験の非公式バッジを作る、類似のAPIを以前作りましたので、ついでに載せておきます。