（※↑ はただの記事用のサムネイル画像です）
\n記事の中に URL を書くだけで oEmbed 準拠のコンテンツを埋め込めるようにしました。
\noEmbed を聞いたことない方はまずデモを見てみてください。
oEmbed は結構身近なサービスたちも対応している便利で面白い仕様なのですが、あまり有名ではない（日本語の情報も少ない）ようです。
\n記事に活用できそうな面白いものだったので、デモを交えつつ紹介します。
なおこの記事では oEmbed のデモと紹介をメインに記載します。ソースは公開してありますが Gatsby の remark プラグインの作り方解説的なのはこの記事では割愛します。
\n国内のサービスだと、はてなブログの記事が有名だと思います。
\n記事の URL を markdown に書くと以下のような表示になります。
\n（自分がはてなブログの記事をもってないので最近読んだ記事で失礼します）。
markdown（以後省略）:
\nhttps://mizchi.hatenablog.com/entry/2018/10/23/221446ビルド結果:\n
\n他に有名なものだと Speaker Deck なども oEmbed に対応しています。
\n\n\n他には npm の DL 数の遷移を複数パッケージで比較できる npmcharts や、
\n\nNode.js のコードが実行できるプロトタイピングツール runkit などがあります。
\n\n他には Twitter や Flickr、Instagram なども oEmbed に対応してるんですが、iframe 大量に埋め込んでも表示が遅くなるだけなので割愛します。
\nって感じのことができる Gatsby プラグイン「gatsby-remark-discoverable-oembed」を作りました。
\nhttps://github.com/Leko/WEB-EGG/blob/master/plugins/gatsby-remark-discoverable-oembed/index.js
\nまだ納得できる使用感になってないので、とりあえずローカルプラグインとしてブログと同じリポジトリにおいてあります。
\n何記事か書いてみて使用感をもんで、設定やパフォーマンスも問題ないと判断したら publish して Gatsby プラグインの仲間入りさせる予定です。
ざっくり中身を紹介すると、markdown の AST を探索してホワイトリストで許可したパターンにマッチする URL を抽出し、oEmbed の表示用データを入手し展開後の HTML を markdown に挿入するプラグインになっています。\nこのプラグインの作成に関しては Gatsby と remark の固有知識が多大に含まれるので、別途記事を書きます。
\n以降の内容は、oEmbed の紹介になります。
\nそもそも oEmbed とは、2008 年に Slack の中の人Cal Henderson氏によって提案されたコンテンツ埋め込みのためのオープンな規格です。公式サイトはこちら。
\n\n\n— oEmbed
\n
2008 年当時のお披露目の記事がこちら。
\n\n\n— Announcing OEmbed - An Open Standard for Embedded Content - Leah Culver’s Blog
\n
Wordpress に oEmbed に関連するプラグインがあるらしく、日本では主に Wordpress 界隈の情報が多く見つかります。\nドキュメントは全部英語ですが短いのでサラッと読めると思います。
\n仕様の中から抜粋して紹介したいのが、Discoveryという仕様です。
\n<link\n rel=\"alternate\"\n type=\"application/json+oembed\"\n href=\"http://flickr.com/services/oembed?url=http%3A%2F%2Fflickr.com%2Fphotos%2Fbees%2F2362225867%2F&format=json\"\n title=\"Bacon Lollys oEmbed Profile\"\n/>\n<link\n rel=\"alternate\"\n type=\"text/xml+oembed\"\n href=\"http://flickr.com/services/oembed?url=http%3A%2F%2Fflickr.com%2Fphotos%2Fbees%2F2362225867%2F&format=xml\"\n title=\"Bacon Lollys oEmbed Profile\"\n/>以下のような HTML をレスポンスに含めておくことで、oEmbed をサポートしていることを明示できます。
\nHTML をパースし、書いてある URL に対してリクエストをすることで、埋め込み用のデータを入手できます。例えば上記の HTML の JSON の方の URL にリクエストするとこんな JSON が手に入ります。
{\n \"type\": \"photo\",\n \"flickr_type\": \"photo\",\n \"title\": \"Bacon Lollys\",\n \"author_name\": \"bees\",\n \"author_url\": \"https://www.flickr.com/photos/bees/\",\n \"width\": \"1024\",\n \"height\": \"768\",\n \"url\": \"https://farm4.staticflickr.com/3040/2362225867_4a87ab8baf_b.jpg\",\n \"web_page\": \"https://www.flickr.com/photos/bees/2362225867/\",\n \"thumbnail_url\": \"https://farm4.staticflickr.com/3040/2362225867_4a87ab8baf_q.jpg\",\n \"thumbnail_width\": 150,\n \"thumbnail_height\": 150,\n \"web_page_short_url\": \"https://flic.kr/p/4AK2sc\",\n \"license\": \"All Rights Reserved\",\n \"license_id\": 0,\n \"html\": \"<a data-flickr-embed=\\\"true\\\" href=\\\"https://www.flickr.com/photos/bees/2362225867/\\\" title=\\\"Bacon Lollys by bees, on Flickr\\\"><img src=\\\"https://farm4.staticflickr.com/3040/2362225867_4a87ab8baf_b.jpg\\\" width=\\\"1024\\\" height=\\\"768\\\" alt=\\\"Bacon Lollys\\\"></a><script async src=\\\"https://embedr.flickr.com/assets/client-code.js\\\" charset=\\\"utf-8\\\"></script>\",\n \"version\": \"1.0\",\n \"cache_age\": 3600,\n \"provider_name\": \"Flickr\",\n \"provider_url\": \"https://www.flickr.com/\"\n}本来的にはサービス提供者は oEmbed の仕様に沿った API を実装しiamcal/oembedに PR を送り oEmbed API のメタ情報を登録しておき、埋め込みしたい oEmbed API 利用者側はそのメタ定義に応じてリクエストして埋め込み用のメタデータを得るという仕様です。しかしサービス提供者と provider のメンテナ（＝仕様策定者）が異なるため「Provider にメタデータの定義はないが oEmbed Discovery に対応したサービス」が存在します。
\n先程のデモで言うとはてなブログと runkit、npmcharts がこれに該当します。
\nSpeaker Deck や Flickr などはメタデータの定義もあるし、HTML でも Discover できることを明示してあります。
\n一方 Twitter や YouTube などはメタデータの定義だけ存在し、Discover できません。
Discover 用の HTML を追加するとレスポンスサイズが多少なり増えるので、1byte でも多く削りたいってレベルのパフォーマンスを追求すると Discover 用の HTML は削減対象になる得るのかなと思います。
\nすべての URL を問答無用で埋め込むようにしてしまうと、埋め込んだ側のサイトに対してサービス提供者が（JavaScript でできることの限りだけど）任意のコードを実行できるようになってしまいます。
\n\n\n\n
\n\n\n
oEmbed の利用者は、信頼できるサイトだけを明示的にホワイトリストで許可すると良いと思います。
\nとかとか、oEmbed の埋め込みを活用できれば記事でできることの幅が広がりそうです。
\niframe が大量に読み込まれることでロードが重くなる問題に関しては遅延ロードなどを検討中です。。。
Gatsby のように自由度の高いビルドツールを使っているならこの記事のように自前で仕組みが作れます。
\nMedium では記事や URL のプレビューにEmbedlyを介して oEmbed をりようしているようです。Embedly というサービスも oEmbed の仕様に対応しています。
oEmbed に対応した面白いサービスを見つけたらぜひ Twitter 等でご連絡いただければと思います。
","timeToRead":7,"frontmatter":{"title":"Gatsbyの記事にoEmbed準拠のコンテンツを埋め込めるようにした","tags":["JavaScript","Gatsby","oEmbed","AST","remark"],"date":"January 10, 2019","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='202'%20viewBox='0%200%20400%20202'%20preserveAspectRatio='none'%3e%3cpath%20d='M357%20145v10h16l17-1c2%200%202-2%202-10v-9h-35v10M20%20162c-2%200-1%209%201%209%207%203%2011-2%208-8-1-2-6-3-9-1m33%2016v5c0%203%201%204%206%204h5v-9l-5-1-6%201m14%2015v5c0%203%201%204%206%204h5v-9l-5-1-6%201'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.9880952380952381,"src":"/static/e5fd5f0d1c0b43905519a63730f60aa0/7d603/featured-image.png","srcSet":"/static/e5fd5f0d1c0b43905519a63730f60aa0/1ec58/featured-image.png 334w,\n/static/e5fd5f0d1c0b43905519a63730f60aa0/ccb4a/featured-image.png 668w,\n/static/e5fd5f0d1c0b43905519a63730f60aa0/7d603/featured-image.png 992w","srcWebp":"/static/e5fd5f0d1c0b43905519a63730f60aa0/34d2b/featured-image.webp","srcSetWebp":"/static/e5fd5f0d1c0b43905519a63730f60aa0/cd98f/featured-image.webp 334w,\n/static/e5fd5f0d1c0b43905519a63730f60aa0/7535d/featured-image.webp 668w,\n/static/e5fd5f0d1c0b43905519a63730f60aa0/34d2b/featured-image.webp 992w","sizes":"(max-width: 992px) 100vw, 992px"}}}}}},"pageContext":{"slug":"/gatsby-remark-discoverable-oembed/","previous":{"fields":{"slug":"/nodejs-is-now-supported-brotli-compression/"},"frontmatter":{"title":"Node.jsの11.7.0からzlibモジュールでBrotli圧縮が使えるようになりました","tags":["Node.js"]}},"next":{"fields":{"slug":"/benchmark-of-lazy-frame-loading/"},"frontmatter":{"title":"ChromeのBlink LazyLoadを有効にしたらページのロード時間が約10倍早くなった","tags":["JavaScript","Google Chrome"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}