はじめに
以前の記事で、当ブログでは「ブログカード」や「カードリンク」的な機能がなかったため、自前でそういった機能を作成したことを書きました。
その流れで、より一般的に使えるwebツールがあっても良いなと思いたち、作成しましたので紹介します。
ツール紹介
概要
そういった便利なwebサービスが、すでに複数あることはもちろん承知しています。
ですので、カードデザインなど自分なりに少しだけ独自性を出しました。
ブログカード風のリンクジェネレーター
cardlink-generator-v1.vercel.app
使い方
- URLを入力すると、自動的にリンクを生成します(失敗することもあります)。
- カードデザインは4種類です。お好みのデザインの「Code」タブをクリックすると、htmlコードが表示されます。
- コード右上の
マークをクリックすれば、htmlコードがクリップボードにコピーされます。 - そのままご自由にペーストしてご利用ください。
カスタマイズ
そのままでも利用できますが、ヘッダーのボタンで、カードカラーのテーマを白(light)とグレー(dark)に切り替えることができます。
またトグルボタンで、それぞれのテーマでボーダーの有無を変更できます。
htmlコードもそれに合わせて書き換わりますので、カスタマイズした後に改めてコピーしてください。
タイトルやファビコンなどの文字列データもありますので、あわせて活用いただければと思います。
技術スタック
簡単に紹介します。
next.jsをベースとして基本方針として追加するパッケージは最小限にとどめました。
ソースコードは下記のとおりです。
poko8nada/cardlink-generator-v1
github.com
openGraphScraper
このツールの根幹として、URLからOGPを取得するため、openGraphScraperを使っています。
HeroUI(ex. NextUI)
UIコンポーネントにはHeroUIを使っています。
学習コストも低く、デザインもある程度いい感じにサイトができあがるので良いです。
tw-to-css
htmlコードにTailwindCSSをインラインCSSに展開するため、tw-to-cssを利用しました。
おわりに
実は、OGPがうまく取得できないサイトがまだちょこちょこあります。正直、完成度としては「まあまあ使えるかな」程度です。
このあたりもアップデートできればなと思います。
ではまた。