header source
my icon
esplo.net
ぷるぷるした直方体
Cover Image for OG Card Generator - 静的サイト用カード型リンク生成アプリ

OG Card Generator - 静的サイト用カード型リンク生成アプリ

だいたい1分で読めます

紹介動画

https://www.youtube.com/watch?v=k6avQD1RerY

概要

はてなブログやMediumなどでは、外部ページのリンクを挿入するとカード形式で表示され、なかなかカッコいいです。

静的サイトでは、ビルド時に内容を確定する必要があり、外部サイトのOGPを利用する一般的なカード状のリンクを作ることは難しいです。
そこで、対象ページのURLを与えるとHTML/CSS形式でカード状のリンクを出力するアプリを作成し、この問題に対処しました。

要は↓です。

og card
OG Card

なお、今回はAngularDartを利用しました。
詳細はこちらの記事に記載しています。

https://www.esplo.net/posts/2018/10/angular-dart-for-small-app/

利用方法

現在Demoサイトの公開は停止しているため、必要な方はGitHubのコードをご確認ください。

https://github.com/esplo/og-card-generator

現在はArchiveしています。

Share