Figma API + Cloudflare + Hono で
画像共有

ToKyoto.js #02
2024/01/12
@hush_in

自己紹介

  • はっしゅ (Ryo KUROIWA)
  • 長野 → 京都 → 埼玉
  • 前職で 10 年ほど e コマースのフロントエンド開発
  • 株式会社エス・エム・エス
  • 最近個人サイト zatsuni.dev のドメイン取った
    • Cloudflare の設定の簡単さに感動して放置

X: @hush_in, Github: hushin

Figma

  • https://figma.com/
  • デザインツール
  • 無料
  • ホワイトボードの FigJam もある
    • ラフな図を描くのに便利

アイデア

Figma/FigJam で書いた図をブログ等に埋め込みたい

Share から フレーム単位で iframe のコードをコピーできる


とはいえ画像のほうがなにかと取り回ししやすい

そこで Figma REST API

https://www.figma.com/developers/api#get-images-endpoint

GET image
Renders images from a file.

$ curl -H 'X-FIGMA-TOKEN: figd_xxx' \
'https://api.figma.com/v1/images/geJ0w0WA0LtyW6vxaaDnQK?ids=120-3'

{
  "err": null,
  "images": {
    "120:3": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/5161d8e2-a8e1-4334-9a3f-b7c7bc6258dd"
  }
}

生成された画像

しかし

The image assets will expire after 30 days.

30 日で期限が切れる

そこで 自分が以前から気になっていた Cloudflare Workers と組み合わせてみた

Cloudflare Workers

  • サーバーレスアプリケーションの構築ができる
  • JavaScript が動く
  • 無料枠あり
  • 開発フレームワークは人気がある Hono を使ってみた

Demo

https://try-figma-cloudflare.hushin.workers.dev/my/

(Basic 認証あり)

  • 画像一覧
  • アップロード
  • 元の Figma URL に飛ぶ

src https://github.com/hushin-sandbox/try-figma-cloudflare

アップロード

ダウンロード

参考

管理ページ

開発はまりポイント

  • Node.js すべての機能が使えるわけではない
  • JSX は使えるが SSR されるのでクライアントでリッチなことしようとすると大変
    • htmx 使いこなせたらもっと簡単に書ける？
    • 複雑だったら Cloudflare Workers は API 利用に留め Web アプリは別にするのがいいと感じた
  • サーバサイドの設計自信ない。個人制作なので雑でもいいやの精神

感想

  • 今までフロントエンド開発が中心で、
    バックエンドはあまり書いてこなかったが…
    • 馴染んだ TypeScript で書けるので楽しい！
    • 無料でいろいろ使えてサーバレスなのが嬉しい
  • Wrangler(Cloudflare Workers の開発環境) と Hono の開発者体験が良い
  • 今後も触っていきたい

没スライド

振り返り

  • このスライドの画像は今回作ったものを埋め込んでいます
  • もともと同じ URL で画像が再編集可能だと便利そうと思って作ったが、キャッシュと相性悪くて断念
  • 勉強になったのでヨシ

iframe のメリデメ

  • メリット
    • 公式が提供してる方法なので簡単
    • 編集した内容がすぐに反映される
    • 拡大しても綺麗
  • デメリット
    • Figma ファイルを誰でもアクセス可にしておく必要あり
    • 画像のほうがなにかと取り回ししやすい
      • ブラウザ以外での表示
      • レンダリングが早い