Iframely自動変換を利用するには？

Kurocoでは<oembed>のタグをIframelyで自動変換して、iframeのコードに自動変換する機能を持っています。
通常、Wysiwyg(CKEditor)で付与される<oembed>のタグはフロントエンド側で適切なiframeタグに変換するよう実装する必要がありますが、こちらを利用することでWysiwygのInsert Mediaで挿入した外部メディアを容易に表示させることができます。

利用方法

Kurocoの設定

設定したいコンテンツ定義の編集画面にて、WYSIWYGの項目設定を開きます。
下記、「設定」ボタンをクリックしてください。

項目設定が開きますので、「API出力時にiframelyを利用するコードに自動変換」にチェックをいれて、保存・更新ください。

ヒント

コンテンツ定義編集画面への遷移方法、WYSIWYGの項目設定方法については、以下のドキュメントを参照ください。
コンテンツ定義
コンテンツ定義で利用できる拡張項目一覧（WYSIWYG）

フロントエンドの設定

利用するページで以下のScriptを読み込んでください。
<script async charset="utf-8" src="https://iframely.kuroco-front.app/embed.js?cancel=0" ></script>

Nuxt.jsの場合は以下のコードで表示の確認が可能です。

<template>
  <div v-if="response">
    <h1 class="title">{{ response.details.subject }}</h1>
    <!-- eslint-disable-next-line vue/no-v-html -->
    <div class="post" v-html="response.details.ext_01"></div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios, params }) {
    return {
      response: await $axios.$get(
        `/rcms-api/26/test/253`
      ),
    }
  },
  data() {
    return {
      response: null,
    }
  },
  head() {
    return {
      script: [
        {
          async: true,
          charset: 'utf-8',
          src: 'https://iframely.kuroco-front.app/embed.js?cancel=0',
        },
      ],
    }
  },
}
</script>

<style>
.post figure.media {
  display: block;
}
</style>

注意

/rcms-api/26/test/253の部分はご自身のエンドポイントのURLに変更してください。
スタイル部分はご自身の環境に合わせて調整ください。

利用料金

https://iframely.kuroco-front.app/api/iframeへのリクエスト毎にキャッシュされたAPIリクエスト(44円/10,000hit)と同等の課金がされます。
ただし、Kuroco管理画面からのリクエストについては課金されません。