OEmbedとOGPのWebComponentsを作ったので、自分のブログサイトに使う
次の 2 つの Web Components を作成しました。
- https://www.webcomponents.org/element/Silver-birder/o-embed
- https://www.webcomponents.org/element/Silver-birder/ogp-me
背景
自分のブログで、埋め込みコンテンツを表示したいな〜って思ってました。 iframely というサービスを使っていましたが、自前で作りたいなというモチベーションが生まれました。 そこで、OEmbed と OGP の表示ができるように、Web Components を独自に作成しました。
o-embed
https://twitter.com/silverbirder/status/1475262255818473473
ogp-me
https://silverbirder.github.io/blog/contents/intro_rocket/
終わりに
自分のブログは、Rocket という Markdown と Web Components をシームレスに使える SSG を使っています。 そのため、めっちゃ楽に、自分で公開した Web Components を組み込むことができました。 いや〜、満足です。
シェアしよう
関連するタグ
- 手軽に安い食材を見つけられるアプリ「ぼちぼち」を開発
- Qwikでブログページを刷新して学んだこと
- ライティングの効率化ツール:AI Ghostwriterの紹介
- Stable Diffusion API 開発
- Micro Frontendsで組成するフラグメントをWeb Componentsで定義してModule Federationで共有する
- Chrome拡張機能(Manifest V3)の開発で知ったこと
- Markdownで執筆するなら、WebComponentsが使えるSSG、Rocketがオススメ!
- silverbirderのポートフォリオページ刷新(v2)
- Googleアカウント画像を返却するだけのAPIを作った
- TikTokスクレイプ基盤をGCP上で構築してハマったこと
- クライアントサイド(ES Module)でMicro Frontends
- Zalando tailor で Micro Frontends with ( LitElement & etcetera)
- Ara-Framework で Micro Frontends with SSR
- ZoomのMeetingを自動生成するGASライブラリ zoom-meeting-creator を作った
- アカウント画像一括更新ツールを作ったので、紹介と学びについて
- TwitterにあるLinkを収集するツール Cotlin で、世界中のプレゼンテーション資料を知ろう
- GMailをGCalendarに登録するサービス rMinc を作ってみた
- 1コマ漫画検索サービスTiqav2 (Algolia + Cloudinary + Google Cloud Vision API) 作ってみた