SvelteでスクショをオシャレにできるWEBアプリ(Smiiily)を作った話
作ったアプリ
👇のような画像をが作れます。
👇のようなオシャレなツイートする時に使えます。
なぜ作ろうと思ったか
ここ最近X(Twitter)で投稿頻度が増えていて、せっかく投稿するのだから、見やすい形の物がいいでしょうということで毎回figmaに貼り付けて画像を書き出して投稿するのがひと手間だったのでサクッとこういうのを作れるものはないかなと思って色々調べたら、pika.style というのがありましたが、もはやそんな事は僕の作りたいよくを抑える事ができなかった 😆
なぜSvelteなのか
最近仕事でもReactずっと使っているのですが、凄く簡単なことを遠回りしてやっているような時が多々あるのと、サイドエフェクトや依存関係に凄く苦しみられる時が多く、そういうストレスから開放されたフレームワークも試してみたかったのが主な理由です。
苦労したこと
- Svelteに慣れていないので、ライフサイクルが完全に把握しきれていなく、DOMの更新が一歩遅れるという問題に直面し、沼にはまりました、結局👇の存在を気付き、解決できました。
- SafariではClipboard API等を使う場合にユーザーアクションで発火された関数内では外部の非同期処理をしてしまうと👇のエラーがでます。
NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
これを解決するために、元々考えていた仕様を変える必要がありました、ユーザーが設定を変える度に非同期で画像を生成しておくようにしました。
感想
自分の体感的にReactのようなサイドエフェクトの考慮や関数のキャッシュやレンダリング制御をほとんど意識する必要はなく開発する事ができました。
ただ、ReactのJSXのような強い型の絞りがまだしっかりできずに、ちょっとだけもやっとする時がありました、（propsの型がいまいちだったり等）
Vueもそうですが、svelteはファイルベースのコンポーネントになるので、Reactのように一つのtsxファイルに複数のコンポーネントの定義ができずに、細かいファイルを切り出す必要がありました。
技術スタック
- SvelteKit
一つのページしかないのでVite+Svelteでも良かったが、今後の事も考えてSveltekitを選びました。 - Typescript
これはもはや必須 - TailwindCSS
賛否両論はありました、cslxとtwMerge`を使えば大体の場合は困らないし、慣れているのもあって採用しました。 - Vercel
デプロイがめちゃくちゃやりやすくていいですよね。 - Cloudflare
主にdomainを管理しています、今後vercelから離脱もできます。 - dom-to-image
DOM要素から画像生成してくれるライブラリーです、コアな部分はほぼこのライブラリーに頼っています。
今後追加で作ってみようと思っている機能
-
OG画像が作れるAPI
ブログ記事や動的に変わるサイト向けに予めデザインを用意しておいて、用意しておいたplaceholderにAPIコールで文字を埋めれて画像を生成できるようなものを作ってみたいな思いました -
動画も対応する
PR動画に使えそうだなと思いました。でもかなり大変そうな予感がしています。 -
コードブロックのスクショが作れる
スクショ貼らずに好きなコードをペーストして好きシンタックスハイライトを選んで画像を生成できる機能があればいいなと
Discussion