August 14, 2019

ブログに外部コンテンツを良い感じに埋め込むならIframelyがオススメ!

こんにちは。mono(@mono7555e)です。

今回はこのブログでも利用しているIframelyをご紹介します。

Iframelyとは

Iframelyは、埋め込みコードの生成をまとめて引き受けてくれるサービスです。
URLを入力するだけで埋め込み用のコードを生成してくれます。

YouTubeやTwitterなど独自に埋め込み用のコードを用意しているサービスもありますが、取得の仕方がバラバラで結構めんどくさかったりします。IframelyならURLだけ用意すればOKなのでかなり便利です。
しかもoEmbedやOGPタグにも対応しているので埋め込み用のコードが用意されていないサービスでも、ほぼこれ1つで外部コンテンツの埋め込みはまかなえます。

簡単な使い方

Iframelyにアクセスして埋め込みたいコンテンツのURLを入力し、CHECK ITボタンをクリックすると以下のようなコードとプレビューが表示されます。

<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>

あとはコピーしたコードを貼り付ければ、これだけで外部コンテンツが表示されるようになります。

Iframelyの実例

YouTube

YouTubeの場合は独自の埋め込みコードがあるのでそれベースに変換されます。

https://youtu.be/tXnGnp7IuiE

<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/tXnGnp7IuiE?rel=0" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen scrolling="no" allow="encrypted-media; accelerometer; gyroscope; picture-in-picture"></iframe></div>

Twitter

Twitterも独自の埋め込みコードがあるのでそれベースになります。

https://twitter.com/mono7555e/status/1155780439153369089

PS Plus値上げかー
と思ったら12ヶ月プランは据え置きなので問題なかった! pic.twitter.com/tphFN5JwTF

— mono (@mono7555e) July 29, 2019
<blockquote class="twitter-tweet" data-dnt="true" align="center"><p lang="ja" dir="ltr">PS Plus値上げかー<br />と思ったら12ヶ月プランは据え置きなので問題なかった! <a href="https://t.co/tphFN5JwTF">pic.twitter.com/tphFN5JwTF</a></p>&mdash; mono (@mono7555e) <a href="https://twitter.com/mono7555e/status/1155780439153369089?ref_src=twsrc%5Etfw">July 29, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

oEmbedに対応していない場合(例えばこのブログ)

iframelyが吸収してくれています。
出ている内容はOGPタグで設定しているものを使ってくれるみたいです。

https://www.mono7555e.com/gatsbyjs-and-netlify/

<div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://www.mono7555e.com/gatsbyjs-and-netlify/" data-iframely-url="//cdn.iframe.ly/6hRxH8N?iframe=card-small"></a></div></div><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>

Gatsbyで使う場合の注意点

Gatsbyでも使うことはできますがコードの追加とコピーした埋め込みコードの一部変更が必要です。
以下の変更を行わない場合、gatsby developでの開発中に埋め込んだ内容が表示されません。

埋め込みコードの変更

埋め込みコードに含まれているscriptタグを削除します。

最初のコードを例にすると以下のように変更する必要があります。

<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タグをreact-helmetを使って読み込むようにします。

import React from 'react'
import Helmet from 'react-helmet'

function Iframely() {
  useEffect(() => {
    if (window.iframely) {
      window.iframely.load()
    }
    // ツイート内容を埋め込みたい場合
    if (window.twttr) {
      window.twttr.widgets.load()
    }
    // その他必要に応じて追加
  }, [])
  return (
    <Helmet>
      <script async src="https://cdn.iframe.ly/embed.js" />
      <script async src="https://platform.twitter.com/widgets.js" /> {/* ツイート内容を埋め込みたい場合 */}
      {/* その他必要に応じて追加 */}
    </Helmet>
  )
}
export default Iframely

もし元のコードにasyncが指定されていない場合は指定しましょう。

まとめ

ということで簡単にですがIframelyのご紹介でした。

今回ご紹介した内容は会員登録なしで出来ることです。
会員登録した場合はAPIが使えたりデザインをカスタマイズできたりしますので細かな調整をしたい場合は会員登録の上、利用して頂ければと思います。

参考

このブログに導入する際に参考にさせて頂きました。

この投稿を書いた人

mono

ゲーム実況やったりVLOG撮ったりしているガジェット好きIT系の人です