ホーム自己紹介ブログ
NO.77
DATE2022. 04. 11

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

ogp-me

Markdownで執筆するなら、WebComponentsが使えるSSG、Rocketがオススメ!
Markdownでブログやドキュメントを書いていますか?執筆活動に集中したいのに、Markdownだけだとかゆいところに手が届かないもどかしさ、感じたことありませんか?そんな方に、MarkdownとWebComponentsがシームレスに統合できる静的サイトジェネレータ(以降、SSGと呼ぶ)、Rocketをおすすめします。
silverbirder.github.io

終わりに

自分のブログは、Rocket という Markdown と Web Components をシームレスに使える SSG を使っています。 そのため、めっちゃ楽に、自分で公開した Web Components を組み込むことができました。 いや〜、満足です。

フロントエンド
ブラウザ
成果物

-

コメント

0

読み込み中...

シェアする

フォローする

購読する

次のページ

iframeでTwitterの埋め込みコンテンツの描画後に、画面表示する方法

前のページ

WebComponentsでoEmbedのコンポーネントを開発して、学んだこと

関連する記事

タグ「フロントエンド」の記事

AIの書いたコードの手直しを減らすお作法

AI にコードを書かせた後、余計なコードを見つけて消す作業があります。 不毛なことなので、それらの作業を減らすためのお作法を紹介します。 未使用コードを消す 以下でも書きましたが、未使用コードの検査に knip を使うことが多いです。 ht

2026年02月25日

AI
フロントエンド
iframeの難しさ

最近、iframeを使っています。 クライアントサイドで埋め込む想定で、iframeを使おうとしています。 色々と苦労したことがあったので、書いて残しておこうと思います。 レスポンスヘッダー 前提として、ウェブアプリケーションをプロダクショ

2026年02月18日

フロントエンド
ブラウザ
SVGを書くと数学の知識が必要だった

紙を積んだイラストをSVGで書こうとしていました。 (当たり前ですが)図形を表現するためには数学の知識が必要で、学生の頃の記憶を思い出したので疲れました。 所感について、諸々書こうと思います。 成果物 実際に完成したのは、以下の画像ができま

2026年02月17日

フロントエンド

タグ「ブラウザ」の記事

iframeの難しさ

最近、iframeを使っています。 クライアントサイドで埋め込む想定で、iframeを使おうとしています。 色々と苦労したことがあったので、書いて残しておこうと思います。 レスポンスヘッダー 前提として、ウェブアプリケーションをプロダクショ

2026年02月18日

フロントエンド
ブラウザ
DuckDB WASMとOPFSでGoogleマイアクティビティをブラウザ完結で可視化してみた

DuckDB WASMとOrigin Private File System (OPFS) を組み合わせ、Google マイアクティビティの履歴をブラウザ内に閉じたまま扱えるようにしたときの設計と学びを整理しました。

2025年09月17日

開発ツール
ブラウザ
マイクロコピー、マイクロインタラクション、そしてリンク

こんにちは、@silverbirderです。最近、湖県に移住してWebフロントエンドのお仕事をしています。お仕事をしていると、ユーザー体験を良くするためには、大きな改善をせずとも小さな改善だけでも十分な効果があると思い始めました。本記事では、その小さな改善となる、3つのことについて書きたいと思います。

2025年08月27日

フロントエンド
ブラウザ

タグ「成果物」の記事

記事投稿 連続100回以上している 私専用執筆環境Webアプリ

個人サイトリニューアルを機に、記事を書く執筆環境Webアプリを用意しました。 https://silverbirder.github.io/blog/contents/20260128/ どのようなものか簡単に紹介します。 入力とプレビュー

2026年02月20日

成果物
個人サイトリニューアルの振り返り

個人サイト(ジブンノート)をリニューアルしました。本記事では、個人サイトをリニューアルした際にあった出来事などを振り返りたいと思います。ちなみに、個人サイトは以下のページです。ノート風デザインで、ブログ記事が読めるようになりました!🎉

2026年01月29日

成果物
振り返り
個人サイトをリニューアルしました!

個人サイトをリニューアルしました!🎉 https://silverbirder.github.io リニューアルは、今回で6回目です。制作期間は、去年の12月27日から今年の1月28日までの約1ヶ月間です。個人的には最速の開発期間でした。AIの力は偉大ですね。本記事では、個人サイトのリニューアルでこだわったポイントについて紹介します。

2026年01月28日

成果物
← ブログ一覧へ