1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Speaker DeckのスライドをQiitaの記事に埋めこめない

1
Posted at

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のコードも用意されている。

スクリーンショット 2025-12-06 16.16.00.png

とりあえず試してみる。


🟢 普通に動いた。こっちかーーい!!!


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 タグ方式を使えば一発で動く

おまけ

私が貼りたかったスライドはこちら。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?