1 - 40 件 / 42件
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
JAMスタックのNetlify、Denoを採用したサーバレス環境「Netlify Edge Functions」ベータ公開。Deno Deployの分散エッジでNext.js/Nuxt/SvelteKit/Remixなど実行 Webホスティングサービスを提供するNetlifyは、Denoを採用した新しいサーバレス環境「Netlify Edge Functions」をパブリックベータとして公開しました。 We know some of you have been on the edge of your seats for this one, but the wait is over because Edge Functions is here! Learn more about how you can leverage our edge network to deliver faster s
新年あけましておめでとうございます。 昨年はあっという間に過ぎ去ってしまったので、2023年はたくさん開発していきたいです。 はじめに はじめまして、kosei28という者です。 普段は大学に通いながら個人開発している19歳です。 この度、Chatockという掲示板のようなWebアプリを開発したので、紹介させてください。 つくったもの スレッドを作って、その中に投稿することができます。 スレッドにはタグをつけることができて、タグによってスレッドを検索することができます。 いいねをすることもでき、いいねしたスレッドや投稿は自分のライブラリページから見返すことができます。 背景 さて、皆さんはSvelteKitを知っていますか? SvelteKitとは、SvelteのWebアプリを開発するためのフレームワークで、ReactにおけるNext.jsのようなものです。 ルーティングやSSRなどができ
こんにちは!ラクス1年目のkoki_matsuraです。 今回は掲示板アプリ作成を通して、SvelteKitの基礎的な部分をご紹介させていただきます。 目次は下記のようになっています。 はじめに Svelteとは SvelteKitとは 掲示板アプリ作成 アプリの概要 環境構築 SvelteKit データベース Prisma テーブル作成 ルーティング作成 新規登録画面 ログイン画面 スレッド投稿画面 スレッド一覧画面 スレッド詳細画面 ログアウト機能 エラー画面 終わりに はじめに Svelteとは WebアプリケーションやUIを構築するためのJavaScriptフレームワークです。有名なものでは「React」や「Vue」が挙げられます。 Svelteにはこれらのフレームワークと比べて下記のような特徴があります。 仮想DOMを用いない こちらが最も大きな特徴となります。 まず、仮想DOM
After two years in development, SvelteKit has finally reached 1.0. As of today, it’s the recommended way to build Svelte apps of all shapes and sizes. We’re so excited to share this release with you. It’s the culmination of thousands of hours of work, both from the Svelte core team and the wider community, and we think it’s the most enjoyable way to build production-grade websites, whether you’re
Webアプリケーションフレームワーク「SvelteKit 1.0」正式リリース。SSR/SSG/SPAなど対応 Webアプリケーションフレームワーク「SvelteKit 1.0」が正式リリースとなりました。 SvelteKitは、Web UIフレームワークの「Svelte」と、ビルドツールの「Vite」を基盤としたWebアプリケーションフレームワークです。 It's here.https://t.co/mP8vD5zcta — Svelte (@sveltejs) December 14, 2022 Svelteは、読みやすく簡潔なコードでWebアプリケーションのユーザーインターフェイスを構成できるフレームワークです。 仮想DOMを使わず、コンパイル時に状態が変化する箇所を特定し、その変更のためのJavaScriptを生成することで実行時の高速な状態変更を実現することも大きな特徴です。 J
「開発環境」「プロダクション環境」などごとにファビコンを変えておくと、パッと見てわかりやすい 絵文字をファビコンに設定できる Next.js, Vue3, SvelteKit, Astro での実例を紹介した そもそもFavicon(ファビコン)って? ウェブページのアイコンです。ブラウザでページを開いたときに、タブなどに表示されていたりします: Favicon - Wikipedia File:Wikipedia favicon in Firefox on KDE (2023).png - Wikipedia ファビコンの設定方法 pngなどの画像や、SVGファイルを用意して、それをHTMLのhead内で指定します。 bissyさんによる↓の記事が大変参考になります! ずぼらな私の2023年のファビコン事情(SVGでダークモード対応) 一般的なウェブサイトでは、SVGでファビコンを作れば
Vontigoはコンテンツの自動生成も可能な、SvelteKitで構築されたオープンソースのAI搭載CMSです。MITライセンスの元でソースコードが公開されています。 ChatGPTの機能が統合されており、コンテンツの生成を自動化する事で他のタスクにリソースを割くことが可能で、更にチャットボットやSNS管理、予測分析などの機能も利用可能となっています。 CMSとAIの統合は、例えば世界的に高いシェア率を誇るWordPressでもAI powerなどといったChatGPTとの統合プラグインも既に公開されていますが、今後もこういったAI統合のソフトウェアは増えていくことが予想されますが、出来れば他のLLMの選択も可能になると良いですね。 Vontigo
If you attended Svelte Summit last month you may have seen my talk, Futuristic Web Development, in which I finally tackled one of the most frequently asked questions about Svelte: when will Sapper reach version 1.0? The answer: never. This was slightly tongue-in-cheek — as the talk explains, it’s really more of a rewrite of Sapper coupled with a rebrand — but it raised a lot of new questions from
フロントエンドの技術選定 によって Svelte と SvelteKit を使って管理画面を作ることに決めました。Unicorn Cloud ID Manager (以下UCIDM) の管理画面を SvelteKit を使って開発しています。 UCIDM のフロントエンドのアーキテクチャBFF (Backend For Frontend) サーバーに Node.js を配置し、サーバーサイドレンダリングを採用したフロントエンドを提供しています。マイクロサービスでは一般的なアーキテクチャだと思います。 エンドユーザー (ブラウザ) は BFF サーバーに対して認証を行い、BFF サーバーが UCIDM API サーバーと認証します。エンドユーザーは透過的に UCIDM API サーバーが返す情報を参照できますが、直接 UCIDM API とは通信できません。これはセキュリティを担保する上での
SvelteKit で最近さまざまな案件ができていて嬉しい限りである。 さて、SvelteKit のドキュメントにしばしば登場する Progressive Enhancement という概念がある。 この概念に自分は全く明るくなかったので調べてみた。 この記事ではまず、Progressive Enhancement とは何かを説明する。 次に、Sveltekit においてこの概念がよく表れている Form の扱いについて触れる。 最後に、SvelteKit における型安全について触れ、この型安全を強化する Superforms というライブラリを紹介する。 この記事は Rich Harris 氏の先日の講演の影響を多分に受けている。 Progressive Enhancement これらの記事が詳しいが、簡単に解説する。 Progressive Enhancement とは、任意の環境で全
西田@CX事業本部です 今回は1.0が発表された(SvelteKit 1.0 発表) SvelteKit を Cloudflare Workers で動かしてみたいと思います SvelteKit は Svelte と Vite を使用しており、最低限のコンフィグで開発が始められるWEBアプリケーションフレームワークです SPA, MPA, SSR, SSG 全てに対応しており、アダプタと呼ばれる機能でCloudflare、Vercel などの多くのサービスに簡単にデプロイすることができます Svelte について Svelte の特徴の一つには純粋なコンパイラであることが挙げられます。 React や Vue と違い、Vitural DOMを実行時に構築せずに、あらかじめvanila JS(ピュアなJS)とCSS にコンパイルしておき、これらをデプロイし実行します SvelteKit につ
記事を書いてから1年半ほど経過した現在(2022年11月)でも稀にいいねをいただきます。ありがたい限りですが、sveltekit は v1 のリリースがまだであり、本記事に書いてあることは変更される可能性があります。(実際にもうすでに動かない構文もたくさん含まれています) そのため、正確な情報が得たい場合には sveltekit のドキュメント を参照するようお願いします。 追記(2022年12月15日) sveltekit v1 リリースされました!🎉 はじめに こんにちは、久しぶりに Zenn に記事を書くので手が震えてます。 うそです、ZennZenn 緊張してません。 最近、個人ブログ を Sveltekit で作り直しました。 ※(注記)自分用メモとしての側面が強いかもしれません。 ということで Svelte と Sveltekit についてまとめていきます。 Svelte とは Sv
こんにちは。エイチームライフデザインでハナユメという結婚式場情報サイトの開発を行っている大江です。 ハナユメは長い間、PHP/Symfonyを用いて開発・運用されてきました。しかし、プロダクトの成長と機能の複雑化に伴い、技術的負債が蓄積してきました。そこで、数年前からこの課題を解消するために、フロントエンドをSvelte/SvelteKitで置き換えるプロジェクトを始めました。現在では、検索ページ、式場詳細ページの一部、リングページなどいくつかのページをSvelte/SvelteKitでリリースしています。 今回は、Svelte/SvelteKitを選んだ理由や、実際に導入してみて感じたことについてお伝えします。 Svelte/SvelteKitを選んだ理由と実際に開発して良かったこと コード量が少なく書ける 以下は、ReactとSvelteで入力内容を同期してテキストを表示するコンポーネ
普段から Svelte / SvelteKit を使っているので、その地味に好きなところを紹介します。 また、微妙なところも最後に紹介します。 Who are you? ryoppippi Frontend は Svelte メインで書いている React も書くが、少なめ Astro は書いている Solid でも簡単なものを作ったことがある Vue3 はほぼ触ったことがない Svelte の好きなところ👍 直感的に書けるところ Svelte は直感的に書けるところが好き。 見た目も html に近い。 エディタの支援もしっかりしているので、書いていてストレスがない。 速い、軽い、うまい 結構適当に作っても、speedInsight でいい点数を取りやすい。 また、ビルド後のファイルサイズも小さいので、デプロイもしやすい(特に Cloudflare Pages との相性がいい)。 型安
GitHub - sveltejs/kit: A monorepo for SvelteKit and friends SvelteKitは、Svelteでハイパフォーマンスなアプリを作ることができるフレームワーク。 `v1.0`を目指しているところで、いま時点での進捗は37%というところらしい。 つまり、世界的に知見もたまってないし、めちゃめちゃ頻繁にアップデートされるし、この記事で書いた内容もすぐに陳腐化する可能性があるということ・・・。 という感じのものをここ数日ずっと触ってて、それでもまあ色々わかったこともあるので、その整理を兼ねてメモっておこうかと。 ドキュメントはこちら。 Docs • SvelteKit `/routes` Nextとかと一緒で、ファイルベースのルーティング `.svelte`を置くと、それがクライアントで表示できるページになる `.(js|ts)`を置くと、
Migrating to SvelteKit v2 • Docs • SvelteKit JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン ECMAScript proposal updates @ 2023-11 | ECMAScript Daily ecmascript-daily.github.io/ecmascript/2023/12/10/ecmascript-proposal-update ECMAScript proposal news
気になるサイトジェネレータやフレームワークがあるとブログで試してみることが多く、この個人ブログも実は今までいろいろな構成を試してきました。構成だけ変わって肝心の記事は増えないのもよくないので今回は移行した記録を記事として残しておきます。 今回はSvelteKitというフレームワークを採用し、記事はローカルのマークダウンファイルで管理する方法にしました。まずはSvelteについて紹介し、SvelteKitでどのようにマークダウンファイルから記事を生成しているか解説したいと思います。 なおこのブログは公開レポジトリに置いているので、実際のコードもぜひ見てみてください。今後構成が変わるかもしれないので、移行後につけたタグへのリンクになっています。 honai/honai.me at svelte-kit Svelteとは SvelteはReactやVueのようなWebフロントエンドUIのためのラ
Introductory Remarks and Self-Introduction My name is Ikeda, and I'm in charge of front-end development at KINTO Technologies. Recently, I've been involved in the development and operation of KINTO ONE and the launch of new services and projects. Introductory Remarks Recently, various JS frameworks are emerging, such as React, Vue.js, AngularJS, Preact and Ember. Svelte and Solid are two that have
始めに Cloudflare Meet-up や、Workers Tech Talks が開催されたり、Birthday Week での発表で Cloudflare 界隈は盛り上がっていますね。 特に Cloudflare Vectorize が気になっています。 hono をバックエンドの API サーバ として使用し、sveltekit をフロントエンドとして開発を行っています。 hono は cloud run にて動かし、sveltekit を cloudflare pages 上で動かして、バックエンド API のレスポンスをキャッシュとして workers kv に格納するという構成です。 それぞれ別のリポジトリとして開発を行っていましたが、それをモノレポに移した際、hono の prc モードを試したらすごく開発体験が向上したのでその話をします。 hono prc モードとは
go mod init sample npm init svelte@next frontend // Choice "Svelte app template" is "Skelton Project". // Choice "Use TypeScript" is No. // Choice "ESLint" is No. // Choice "Prettier" is No. cd frontend npm install npm i -D @sveltejs/adapter-static@next // +build !release package main import ( "log" "net/http" "net/http/httputil" "net/url" ) func init() { u, err := url.Parse("http://localhost:3000
こんにちはkubotakです。 弊社M&Aクラウドでは先日、Nuxt(v2系)のアプリケーションをSvelteKitへ移行を完了しました。 ※(注記)一部ページは諸事情によりNuxtのままですが9割以上が移行済み。 本記事ではSveltekitへの移行した理由や移行方法について紹介したいと思います。 Vue2系がEOLを迎える Vue.jsは現在3系となり、Vueをベースとして作られているWebフレームワークであるNuxtも現在3系が最新となります。 また、Vue.jsの2系は2023年12月31日*1に、Nuxtについても2系は2024年6月30日*2にサポート対象外になることが発表されています。 それに伴い弊社でもNuxtの2系の対応について検討がされました。 NuxtからSveltekitへ まずはNuxt2から3への以降に際してどのようなマイグレーションが必要なのかを調査しました。 弊社の
WEB開発環境Tier1を組もうぜ? 大学からの友人に「俺は起業をするぞ!多少なら出すからWEBサイト作れん?」と言われたので あらゆる自由 を条件に(ほぼ)無償で引き受けた案件という名の趣味制作で「ぼくのかんがえた最強のWEBサイト」を目指してみました。保守運用の汎用性は犠牲となったのだ 今年もアドベントカレンダーに投稿する機会を得たので、環境構築過程とAPI接続ができるまでをご紹介します。(他の方々の記事もぜひ読んでください) 作業メモも兼ねているため中々な長さかつ読みづらいかと思いますが、必要な部分を掻い摘んで読んでいただければ幸いです。 自己紹介 '97年製 実務歴: Angular 1年、React 4年 見ての通りフロントエンド単色染め使いなので今回人生で初めてSQLだのDBだの真面目に勉強しました。ORM使ってるけどSQLライクな記法なので勉強したと言わせてください、元々SE
JSer.info #623 - Vite 4.0がリリースされました。 Vite 4.0 is out! | Vite SWCをサポートする@vitejs/plugin-react-swcを追加、デフォルトでES2020形式で出力するように変更、CSSを文字列としてインポートする方法の変更などの変更が含まれています。 SvelteベースのフレームワークであるSvelteKit 1.0がリリースされました。 Announcing SvelteKit 1.0 α版からの変更点は次のマイグレーションガイドにまとめられています。 Migration guide · Discussion #5774 · sveltejs/kit Node v19.3.0がリリースされました。 Node v19.3.0 (Current) | Node.js Node v19.3.0では、npm 9系となるnpm
ウェブアプリケーションフレームワークとして最近注目度が少しずつ上がっているのがSvelteです。以前、Svelteをちょびっとサンプルを触ってみた感じ、コードの雰囲気は<script setup> 版のVue 3っぽいなー、という感じです。あとはプロパティ入力のあるコンポーネントでHTMLを生成するという基本構成はReactもAngularもみんなそうなので、今時のウェブフロントエンドのフレームワークを触ったことがあれば難しくはない気がします。 1コンポーネントでおさまる範囲ではちょっと前にかんたんなアプリの試作をしてみました(毎週何回も使ってるので手間の割に活躍してます)が、じゃあ、一本分のアプリを作るときはどうなんだ、ということでSvelteKitでプロジェクトを新規で作ってみたけど、いろいろな未知の要素がでてきて、これはどうなんだ? というのをドキュメントから探す、という学び方もまあ
SvelteKit の remote functions を使用することで、コンポーネント内で直接非同期にデータを取得したり、サーバーにデータを書き込むことができます。これにより、コンポーネントごとに必要なデータを個別に取得できるようになり、コードの責任の分離が容易になります。remote functions は SvelteKit v2.27 以降で利用可能です。 昨今の Web フロントエンド開発においてはサーバーとクライアントが統合されたアーキテクチャが主流となりつつあります。例えば React の Server Components はサーバーサイドもしくはビルド時にコンポーネントを事前にレンダリングし、クライアントに静的な HTML を配信することで、初期表示の高速化や SEO の向上を図ることができます。 Server Components 以前よりも Next.js や Sv
JSer.info #531 - Safari Technology Preview 122がリリースされました。 Release Notes for Safari Technology Preview 122 | WebKit Safari Technology Preview 122では色々な機能が実装されています。 実験フラグ付きでCSS :focus-visibleとCSS Color 5のcolor-mix()/color-contrast()/Relative color syntaxが実装されています。 ES Proposal Stage 3のPrivate method、Static private methods、Top-Level await、RegExp Match Indicesのサポート。 Web WorkerとService Workerでtype: modul
以下のまえがきは深夜テンションで書いたものです 翌日見直したら滑りすぎててボツにしようとしたのですが深夜テンションなりに頑張って書いたので残しておきました。時間を無駄にしたい人は読んでみてください 前書き 皆さんはUIフレームワーク、何を使っていますか? どうせReactでしょうね。だってReactみんな使ってますもんね。私もです。仕事でもReactです Next.js、便利ですもんね。すごくわかります。 私も「駆け出し園児ニア」の頃Next.jsを触ったときにpagesフォルダ配下のファイルパスの構造がそのままurlのpathになるのに感動したものです。 ただ最近、特にNext.js v13から出現してきたApp Routerが発表された後の諸々の新規機能の発表があったりしてからキャッチアップしていくのがしんどくなって来てしまいました。具体的には React Server Compone
JSer.info #513 - Socket.IO 3.0.0がリリースされています。 Release 3.0.0 · socketio/socket.io-client Socket.IO 3 Release | Socket.IOのリリース記事では、 現在ではWebSocketsのfallbackとしてのSocket.IOの機能はそこまで重要ではありませんが、auto-reconnectionような機能などには引き続き価値があるという話が書かれています。 2.xから3.0.0への変更点やマイグレーションについては次のページにまとめられています。 Migrating from 2.x to 3.0 | Socket.IO Engine.IO 4へのアップデートも含まれています。 破壊的な変更として、maxHttpBufferSizeが100MBから1MBに変更、CORSの設定方法の変更
SvelteKit は Svelte と Vite で構築たフレームワークです。SvelteKit は Web アプリケーションを開発するために必要な機能を提供します。この記事では、SvelteKit を使用して記事投稿サイトを作成するチュートリアルを紹介します。記事投稿サイトは、記事の一覧表示、記事の詳細表示、記事の投稿、記事の削除の機能を持つシンプルな Web アプリケーションです。 SvelteKit は、Svelte と Vite で構築されたフレームワークです。SvelteKit と Svelte の関係は、Next.js と React、Nuxt.js と Vue.js の関係に似ています。SvelteKit は Web アプリケーションを開発するために必要な以下の機能を提供します。 ルーティング 柔軟なレンダリング方式(SSR, prerendering, ISR...) ビ
待望のSvelteKit 1.0がリリースされましたね! https://svelte.dev/blog/announcing-sveltekit-1.0 早速、microCMSとの連携を試してみたいと思います。 Svelteとはビューを生成するライブラリです。 ReactやVueと異なる点は、ライブラリのコードをほとんど含まないVanilla JSに近い形でコンパイルされるという点です。 そのためコンパイル後のJSファイルのサイズが小さく、高いパフォーマンスが期待できます。 「ライブラリのコードをほとんど含まない」ことを実現するために、SvelteではVirtual DOMを敢えて採用せず、代わりにコンポーネントを非常に効率的な命令型コードに変換して、DOMをピンポイントに更新します。 SvelteKitとはSvelteと組み合わせて使うアプリケーションフレームワークです。 NextやN
はじめに フロントエンドに触れる機会が多いのですが、SSR/SSGに詳しくなりたい(ならねばならない)という焦燥に駆られたので、勉強も兼ねて触りたいと思います。手を動かすのであれば、何かものづくりしたいなと思ったので、話題の SvelteKit で SSR/SSG のプロト構築をしてみようと思います。 最終的には、↓のプロトタイプを完成させます。素早く。 SSR / SSG とは SSR は Server Side Rendering、SSG は Static Site Generator の略です。文字通りどちらもサーバ側でレンダリングや静的サイトを作成するもので、CSR(Client Side Rendering) と対比して考えられます。世間を賑わせている React, Vue, Angular によって普及した SPA(Single Page Application) は、CSR
こんにちは、こんばんは、kubotakです。(@kubotak_public) 今回の記事は、M&Aクラウドの新しいプロジェクトのフロントエンドにSvelteKitを採用したよ!という内容です。 なぜSvelteKitを採用したのか、他のフレームワークと検討してなぜ採用に至ったのかなどを紹介したいと思います。 SvelteKitってなに?SvelteKit気になってる!な方はぜひお付き合いください。 SvelteKitってなに? 数年前からReact、Vue.jsに次ぐUIフレームワークとして人気が出ているSvelteをベースにしたSSRやSSGが実現できるフレームワークです。 Svelteは日本では名前を聞いたことがある程度で詳しく知らない。という方が多いと思いますが、StateOfJSでは2019年から人気のあるフロントエンドフレームワークです。 また、SvelteKitは2021年で
はじめに 先日プレビュー版としてリリースされた Firebase Hostingを使ったCloud Runの動的コンテンツの配信 をSvelteKitを使って実践した記録です。 ※(注記) Cloud SDKの設定は完了して gcloud コマンドが使える前提です ※(注記) SvelteKitの作成部分は割愛しています -> こちらを利用しています https://kit.svelte.jp/docs/creating-a-project やってみてどうだったか? Cloud SQLなど使ったCloud Runで構築したサイトを気軽にカスタムドメインとCDNを使って配信できるようになる 今までなら、Cloud Load Balancerを経由してやらないとできなかった点ができるようになった Cloud Run自体のドメインマッピングもあるが、これはGAになるのだろうか。 コスト的な面でも、Firebas
It’s time. After five months and hundreds of commits, you’re finally invited to try out the SvelteKit beta. It’s not finished — there are a few known bugs and several missing features — but we’re really happy with how it’s shaping up and can’t wait for you to try it. Starting a new project is easy: # create the project mkdir my-app cd my-app npm init svelte@next # install dependencies npm install
SvelteKit is a frontend framework that enables you to build Svelte applications with modern techniques, such as Server-Side Rendering, automatic code splitting, and advanced routing. You can deploy your SvelteKit projects to Vercel with zero configuration, enabling you to use Preview Deployments, Web Analytics, Vercel functions, and more. To get started with SvelteKit on Vercel: If you already hav
お待たせしました。5か月という期間、何百ものコミットを経て、ついにSvelteKitのベータ版をお試し頂けるようになりました。まだ完成はしていません — いくつか既知のバグや、不足している機能がありますが — 私たちは出来栄えにとても満足しており、皆様に試して頂くのが待ちきれません。 新しいプロジェクトの開始は簡単です: # プロジェクト作成 mkdir my-app cd my-app npm init svelte@next # 依存関係をインストール npm install # 開発サーバを開始してブラウザタブを開く npm run dev -- --open ドキュメントは svelte.dev/docs/kit にあります。もし Sapper アプリをSvelteKitに移行したい場合は、svelte.dev/docs/kit/migrating に解説がございます。 ソースコー
SvelteKitを業務で使って半年以上になるので私が気に入っているところを紹介したいと思います。 Svelte/SvelteKitいいじゃん!使ってみたい!って思ってもらえると嬉しいです。 対象読者はNext.jsやNuxt、それらに類するフレームワークを知っている、扱ったことがある程度の方です。 そもそもSvelteってなに? 一応知らない方にも説明しておきます。 SvelteはReactやVue.jsに代表されるようなWebフロントエンドにおけるUIライブラリです。 Svelte自体は知ってる、聞いたことあるという方も多いのではないでしょうか? この記事ではReactやVue.jsとの違いなどには触れませんので興味のある方は調べてみて下さい。 SvelteKitとは SvelteKitはNext.jsやNuxtのようなWebアプリケーションを作成するフレームワークです。 こちらに関し
OGP 画像とは、Twitter などの SNS などでシェアされる際に表示されるサムネイル画像のことです。例えば、ブログなどの場合には以下のようにタイトルを画像として表示しているのを見かけたことがあるのではないでしょうか? このような OGP 画像を表示したい場合、記事ごとに対応する OGP 画像が必要になるわけで、新しい記事を投稿するたびに新たな画像を生成しなければいけません。都度画像を生成する手間は取れないわけで、この OGP 画像を生成する工程を自動化する仕組みが必要となります。 Satori はこのように記事のタイトルなどをもとに動的に OGP 画像を生成するユースケースのために使用できます。OGP 画像を生成する場合、画像を生成する API を用意していおいてクエリパラメータでタイトルなどを指定して動的に生成する方法がよく上げられています。 例えば、Vercel の提供する O
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く