ホーム自己紹介ブログ
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をおすすめします。

ジブンノート

終わりに

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

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

-

読者になる

|

シェアする

|

silverbirders

silverbirder

Webソフトウェアエンジニア

ブログを応援する

この記事がよかったら、お布施という形で応援してもらえるとうれしいです。

おふせぼたん

※ ログイン不要で投稿できます。

※ 同じブラウザから投稿を削除できます。

0

読み込み中...

次の記事へ前の記事へ

関連する記事

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

写経テストコードを全部消した

以下で書いた通り、プロダクトコードを写経したテストコードを削除しました。 "こぶりー" ( https://kobliy.vercel.app/ ) という個人ブログを読むアプリのコードです。 https://silverbirder.gi

2026年06月08日

AI
フロントエンド
テスト
念の為に、手動確認をしよう

最近のお悩みは、Webのソフトウェア開発におけるテストコードが爆増したことにより、 テスト成功による過度な安心感 によって手動確認するのが減っているのかもと思ったりしています。 例えば、Webのフォーム画面に小さな改修があったとして、その修

2026年06月03日

AI
フロントエンド
モバイルアプリからPWAアプリへ切り替え

以下で書いた個人ブログを読むアプリ(個人ブログライブラリ、略して "こぶりー" )をモバイルアプリで開発していました。 https://silverbirder.github.io/blog/contents/20260419/ 審査関連で

2026年05月11日

フロントエンド

タグ「ブラウザ」の記事

『Webブラウザエンジニアリング』第1~3章を読みました。

以下の書籍を1から3章まで読みました。 https://www.oreilly.co.jp/books/9784814401574/ 全部で16章もあるので、こまめに感想を残しておこうと思います。 Webの歴史 Web が成り立つ経緯につい

2026年03月20日

書籍レビュー
ブラウザ
iframeの難しさ

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

2026年02月18日

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

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

2025年09月17日

開発ツール
ブラウザ

タグ「成果物」の記事

個人ブログを読むアプリ、こぶりーをリリースしました!

個人ブログ好きの皆さんに朗報です! "個人ブログを、見つけて、読んで、シェアする" アプリ、こぶりーをリリースしました!🎉 こぶりー アプリのURLは、以下の通りです。 こぶりー - kobliy.vercel.app こちらから、個人ブ

2026年05月23日

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

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

2026年02月20日

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

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

2026年01月29日

成果物
振り返り
← ブログ一覧へ