Gatsby サイトに iframely を使ってコンテンツを埋め込む

September 26, 2020[Gatsby]

いろんな人のブログ記事で、 Twitter や YouTube のコンテンツがいい感じに表示されていて、いいなぁと思っていたのでやり方を調べてみました。
iframely というサービスを使うとお手軽にできるようなのでメモ。

やり方

といっても参考にさせてもらった記事のまんまです。
手順としては以下のようになりました。

iframely を読み込むコンポーネントを作る
作ったコンポーネントを配置
iframely から取得した埋め込みコードを記事に貼り付け

iframely を読み込むためのコンポーネントは以下のような感じで作りました。

import React, { useEffect } from 'react';
import { Helmet } from 'react-helmet';

const IFramely = () => {
  useEffect(() => {
    if (window && window.iframely) {
      window.iframely.load()
    }
  }, []);

  return (
    <Helmet>
      <script type="text/javascript" src="https://cdn.iframe.ly/embed.js" />
    </Helmet>
  )
};

export default IFramely;

次にこのコンポーネントを配置します。
このサイトは gatsby-blog-mdx を使って作成しています。
gatsby-blog-mdx では、 src/components/Posts/PostTemplate/index.js を編集します。

    return (
      <Layout showTitle={true} isPostTemplate>
        <IFramely />        <SEO title={post.frontmatter.title} description={post.excerpt} />
        <div
          className="switch-container"
          style={{ textAlign: "end", margin: "0 1.1rem" }}
        >

そして md ファイルの埋め込みたいところに iframely から取得した埋め込みコードを貼り付けます。
埋め込みコードには embed.js というファイルを読み込む記述がありますが、それは先ほど作成したコンポーネントで行なっているので貼り付ける時に削除してしまいます。

（↓ 実際は 1 行です）

<div class="iframely-embed">
  <div class="iframely-responsive" style="height: 140px; padding-bottom: 0;">
    <a href="https://iframely.com/" data-iframely-url="//cdn.iframe.ly/KGpjY3"></a>
  </div>
</div>
<script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script> <!-- この行を削除 -->

埋め込みコード取得の手間を減らしたい

埋め込みコードを取得するには、

埋め込みたいページの URL をコピー
https://iframely.com/embed を開いて貼り付け
埋め込みコードをコピー
記事に貼り付けて embed.js を読み込む記述を削除

という手順が必要になりちょっと面倒です。
なので上記の 1, 2 を行うブックマークレットを作ってみました。(Chrome のみで確認)

javascript:open(`https://iframely.com/embed/${encodeURIComponent(document.location)}`, "")

埋め込みたいページでこのブックマークレットを実行すると、そのページが指定された状態で iframely が開けます。

もう１つ、生成された埋め込みコードから script タグを削除して alert するブックマークレット。
でもこれ、普通に script タグを選択せずにコピーすればいいだけやった・・・

javascript:(()=>{const c=document.querySelector("code").textContent.replace(/<script .+<\/script>/, "");alert(c)})()

まとめ

なにか埋め込みたいものがあって調べたわけではないけど、これで埋め込みたいものがあっても埋め込める！
今後、記事が増える（はず）なのでその際には役に立ってくれることでしょう。

🙏 参考 URL

コンテンツの埋め込み

使ったサービス

iframely
https://iframely.com/

ブックマークレット