2025年12月時点・Mac + Chrome・Qiita 上で検証した結果です
TL;DR
Qiita に Speaker Deck のスライドを埋め込もうとしたところ、
iframe を貼っても「何も表示されない」という現象に遭遇。
公式ドキュメントどおりに試しても改善せず。
Scriptタグで埋め込んだらうまくいった。
1. Qiita に Speaker Deck が表示されない
Qiita 記事に Speaker Deck の埋め込みコード(iframe形式)を貼ると、見た目は真っ白・エラーも表示されない。
- リンクの変更や URL の組み替えでも変化なし
- 再読み込みしても同じ
Qiita 側で何らかの制限がかかっているのか、Speaker Deck との相性なのか、原因がすぐにわからず困惑。
2. 最初に試したこと:iframe ではなぜか動かない
まずは公式ドキュメントどおり iframe を使い、以下を確認:
✔ 公式の iframe コードをそのまま貼ってみる
→ 動くけど、Speaker Deckで提供されているiframeとURLの構成が異なる
✔ URL を変更してみる
→ 動かない(URLの構成が違うから貼ってもいみない)
✔ 他の Qiita 記事の embed 例を参考にする
→ 探し方が悪いのかヒットせず
✔ Qiita のガイドライン
を確認
違う形式のURLなら行けそう。どこから得られるんだその形式のURLは。
3. 解決の転機:Script タグを使ったら一発で埋め込めた
embedはiframeタグだけでなくJSのコードも用意されている。
とりあえず試してみる。
🟢 普通に動いた。こっちかーーい!!!
iframe がまったく動かない状態だったのに、
Script タグを貼ったら問題なく表示された。
どういうこと。
まぁとりあえず動けばOK
4. Qiita で Speaker Deck を表示する埋め込み
Speaker Deck のページで「Embed」→「Script」を選び、そのまま貼ればOKです。
<script defer class="speakerdeck-embed" data-slide="1" data-id="521498b003f74b4b946f817aa898a84f" data-ratio="1.7777777777777777" src="//speakerdeck.com/assets/embed.js"></script>
data-id にはスライドIDが入るってことなのかな。
5. 今回の学び
なんでも試してみるのが大事
🎉 まとめ
- Qiita で Speaker Deck が iframe だと表示されないのは仕様上の相性?
- Script タグ方式を使えば一発で動く
おまけ
私が貼りたかったスライドはこちら。
