【技術ブログ】TikTokの埋め込み仕様が変更に！Procomの対応方法まとめ

プロコム開発チーム

Contents

1 ✅ はじめに
2 🌀 起こっていた問題
3 🧠 原因：TikTokの仕様変更
4 🔧 Procom側での対応内容（Next.js / React）
5 🧪 動作確認結果
6 🔐 セキュリティ面について
7 ✏️ まとめ
8 🔗 おわりに

✅ はじめに

こんにちは、Procom開発チームです。
今回はTikTokの埋め込み仕様が変更された件について、
実際にProcomで発生した表示不具合と、その対応方法について詳しく解説します。

「TikTokの動画が急に埋め込めなくなった」「変なアンケートっぽいUIが出るようになった」
そんな現象に悩まされている開発者の方に向けた記事です。

🌀 起こっていた問題

Procomでは、ユーザーが最大3件までTikTok動画のURLを登録でき、
それをプロフィールページに埋め込んで表示する仕様になっています。

しかし、ある日を境に次のような現象が発生しました：

動画が表示されず「TikTok Embeds」という説明カードのようなものが出現
<iframe src="https://www.tiktok.com/embed/動画ID">で埋め込んでいた箇所がすべて置き換えられてしまう
表示はされていても、動画が再生できない・UIが壊れているなど

🧠 原因：TikTokの仕様変更

調査の結果、TikTok側が**iframeによる直接埋め込みを非推奨化し、
現在は以下のような「<blockquote> + embed.js」形式を公式に推奨**していることが判明しました。

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@user/video/xxxxxxxxxx" data-video-id="xxxxxxxxxx">
  <section>Loading...</section>
</blockquote>
<script async src="https://www.tiktok.com/embed.js"></script>

つまり、従来の iframe URL を使った埋め込みでは、
TikTokがコンテンツを正しく返してくれなくなったというのが本質的な原因です。

🔧 Procom側での対応内容（Next.js / React）

🛑 従来のコード（iframe埋め込み）

<iframe
  src={`https://www.tiktok.com/embed/${videoId}`}
  width="325"
  height="570"
  allow="autoplay; encrypted-media"
  allowFullScreen
/>

→ これはもう使えません。表示されても不安定・壊れる可能性が高いです。

✅ 修正後のコード（blockquote埋め込み）

<div
  key={i}
  className="tiktok-wrapper"
  dangerouslySetInnerHTML={{
    __html: `
      <blockquote class="tiktok-embed"
        cite="${url}"
        data-video-id="${videoId}"
        style="max-width: 325px; min-width: 325px;">
        <section>Loading...</section>
      </blockquote>
    `,
  }}
/>

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://www.tiktok.com/embed.js';
  script.async = true;
  document.body.appendChild(script);
  return () => {
    document.body.removeChild(script);
  };
}, []);

🔍 解説：

dangerouslySetInnerHTML：Reactで外部HTMLを安全に埋め込むための仕組み
<blockquote>：TikTokが提供する埋め込み専用タグ
embed.js：TikTokのウィジェットが動作するために必要なスクリプト

🧪 動作確認結果

すべてのTikTok動画が正常に表示・再生可能に
スマホ対応もバッチリ（サイズ調整はCSSでOK）
最大3件までURL登録・保存→埋め込みも問題なし

🔐 セキュリティ面について

dangerouslySetInnerHTML はその名の通りリスクもある機能ですが、
信頼できるサービス（TikTokなど）からのHTMLのみを挿入するなら問題ありません。

※ユーザーが任意のHTMLを直接入力できるような構成にはしないこと。

✏️ まとめ

項目	内容
原因	TikTokが`iframe`形式を非推奨に
対応	`blockquote` + `embed.js`の形式に変更
注意点	スクリプト読み込みと安全なHTML埋め込みを組み合わせる
成果	ProcomでのTikTok埋め込みが完全復旧！