---
title: Iframely自動変換を利用するには？
description: Kurocoでは<oembed>のタグをIframelyで自動変換して、iframeのコードに自動変換する機能を持っています。
category: howto
---

import StructuredDataFaqs from '@site/src/components/StructuredDataFaqs';

<StructuredDataFaqs faqs={[
    { question: "Iframely自動変換を利用するには？", answer: "Kurocoでは<oembed>のタグをIframelyで自動変換して、iframeのコードに自動変換する機能を持っています。" }
]} />

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

## 利用方法
### Kurocoの設定
設定したい[コンテンツ定義](/ja/docs/management/content-structure-topics-group/)の編集画面にて、WYSIWYGの項目設定を開きます。  
下記、「設定」ボタンをクリックしてください。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/7352c0a2a2a1ab978cde2c8fc76479b8.png)

項目設定が開きますので、「API出力時にiframelyを利用するコードに自動変換」にチェックをいれて、保存・更新ください。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/79d96012485cb4dd512f5053519928b8.png)

:::tip
コンテンツ定義編集画面への遷移方法、WYSIWYGの項目設定方法については、以下のドキュメントを参照ください。  
[コンテンツ定義](/ja/docs/management/content-structure-topics-group/#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E5%AE%9A%E7%BE%A9%E7%B7%A8%E9%9B%86)  
[コンテンツ定義で利用できる拡張項目一覧（WYSIWYG）](/ja/docs/reference/list-of-extra-column-available-on-content/#wysiwyg)
:::

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

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

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

```

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

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