はじめに
以前の記事で紹介した「ブログに使えるカード風のリンクジェネレーター」をリニューアルしましたので、紹介します。
ツール紹介
概要
新しいバージョンの「リンクカード生成サービス」は、デザインと使いやすさの向上を目指しました。以下のURLからアクセスできます。
Blog Card Maker | ブログを彩る美しいリンクカード
link-card-generator-v2.vercel.app
主な特徴
旧バージョンと同じようにURLを入力するだけで、リンクカードを生成します。
今回はカードのレスポンシブ対応にも力を入れました。
また生成されたHTMLとCSSは、コピーボタンをクリックしていただければ、そのままペーストして利用可能です。
技術スタック
前回のバージョンと同様に、Next.jsをベースとして開発しています。
サイトのコンポーネントには、扱いやすいshadcn/uiを採用しました。またグリッドパターンの背景を導入したくてMagic UIも使用しています。
実は新バージョンを作るきっかけになったのは、Amazonと楽天市場のカード生成がうまくいかなかったためです。
そこで、OGP情報を取得するためロジックを見直し、パッケージの変更を以下のとおりに行いました。
- OGP情報取得：jsdom
- HTMLパーサー：html-react-parser
これにより、amazonと楽天市場をはじめとして、より多くのサイトに対応できるようになりました。カード生成のスピードも向上したと思います。
ソースコードは下記のとおりです。
poko8nada/link-card-generator-v2
github.com
おわりに
今後は「カラーテーマ」や「デザインテンプレート」などを増やせればいいなと思っています。
ぜひ新しいバージョンを試していただき、ご意見やフィードバックをいただければ幸いです。
ではまた。