😀

IframelyAPIを使ってカスタム埋め込みコードを作ってみる

2023/08/10に公開

React

埋め込み

iframely

tech

zenn.devにブログリンクができますし、こんな機能を自分でも作れたら良いなぁと思って調査してみました。

https://iframely.com

一からできる訳でもないので、まずはIframelyというサービス、その提供APIを利用してラッパー埋め込みコードを作ってみようと考えています。

埋め込みコード作ることによって、いちいちiframely開いて埋め込みコードを生成しなくても良い手順ができるのではなかろうかとおもっています。

はじめに

Iframelyを使って、zenn.devの埋め込みコードを出力してみると下記のようになる

<div class="iframely-embed">
  <div class="iframely-responsive" style="height: 170px; padding-bottom: 0;">     <a href="https://zenn.dev" data-iframely-url="//cdn.iframe.ly/api/iframe?url=https%3A%2F%2Fzenn.dev&key=357f9f1e039532f9c360ff62f2ca7747"></a>
  </div>
</div>
<script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>

最後のスクリプトタグは読み込み時に読んでいるスクリプトなので消しても埋め込みコードから下記のように表示されるでしょう。

準備

iframely

API叩くのにIframelyのAPIKEYが必要なのでアカウント作成してみる
テストで任意のURLでフェッチして返却されるデータを確認してみる。下記である。
htmlパラメータを埋め込めば良いことを確認する

返却されているデータ
ex. https://www.yahoo.co.jp

{
  "url": "https://www.yahoo.co.jp/",
  "type": "rich",
  "version": "1.0",
  "title": "Yahoo! JAPAN",
  "provider_name": "Yahoo! JAPAN",
  "description": "あなたの毎日をアップデートする情報ポータル。検索、ニュース、天気、スポーツ、メール、ショッピング、オークションなど便利なサービスを展開しています。",
  "thumbnail_url": "https://s.yimg.jp/images/top/ogp/fb_y_1500px.png",
  "thumbnail_width": 1500,
  "thumbnail_height": 1500,
  "html": "<div class="iframely-embed"><div class="iframely-responsive" style="padding-bottom: 53.5714%; padding-top: 120px;"><a href="https://www.yahoo.co.jp/" data-iframely-url="//cdn.iframe.ly/api/iframe?url=https%3A%2F%2Fwww.yahoo.co.jp&key=357f9f1e039532f9c360ff62f2ca7747"></a></div></div><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>",
  "cache_age": 86400
}

Svelte + Vite

筆者の過去記事から

プロジェクト作成

ドキュメント通りなのでプロジェクト作成は今回は割愛させていただく
svelte (javascript) を選択している

設定

App.svelte

<script>
  /**
   * プロパティ
   */
  export let embedCode;

</script>
<div>
  {#if embedCode}
    <script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>
    <div bind:innerHTML={embedCode} contenteditable="true" ></div>
  {/if}
</div>

<style>
</style>

main.js

import App from './App.svelte'
import axios from 'axios';

let embedApp;

const target = document.getElementById('app');
const embedUrl = target.dataset.embedUrl;
const fetcher = axios.create({
  baseURL: 'https://iframe.ly/api/oembed',
});

const setup = async () => {
  const res = await fetcher.get(`?url=${embedUrl}&api_key=${提供されているAPIKEYを代入}`);
  const data = await res.data;
  const app = new App({
    target,
    props: {
      embedCode: data.html,
    }
  });
  embedApp = app;
}
setup();


export default embedApp;

target.dataset.embedUrl で指定のhtmlの独自属性と紐付けさせておく

index.html

    <div id="app" data-embed-url="https://www.yahoo.co.jp"></div>
    <script type="module" src="/src/main.js"></script>

npm run dev ローカルで下記のように確認できる

所感

今回はIframelyAPIからhtmlパラメータを使ってそのまま埋め込みコードとしてラッピングしました。返却されるその他をデータをみるとhtmlパラメータを使わずとも独自の好みの記事リンクも作れることも可能でしょう。

作成したものをビルドすると、distディレクト内に main.xxxxx.js などでビルド生成されるので、適当なファイル名に変更にして適当なサーバに放り込むことによって実際に埋め込みコードとして使えるのではないでしょうか。

ex. hogehoge.html

<div id="app" data-embed-url="https://www.yahoo.co.jp"></div>
 <script type="module" src="https://hogehoge.com/main.xxxxx.js"></script>

APIのオプションやテーマも変えられるのでフェッチする段階でオプション追加で素敵なサイズに変更も可能になります。

最後にこちらは検証不足でありますがマークダウンでブログ記事を書いている人もいると思いますが、React関連ならHelmetライブラリで括って埋め込みコードを記載すればそのままこれも使えるのではないかと思っております。

はじめに

準備

iframely

Svelte + Vite

所感

Discussion