2021/3/11追記：Qiita公式でiframeによるスライド埋め込みに対応した模様です。詳細はリリースノートをご参照ください
リリースノート - 記事に埋め込み可能なスクリプトを追加しました

Qiitaの小ネタメモ。

勉強会の資料まとめ記事などで、Speaker DeckやSlideShareの埋め込みを行いたい時があるのだが、QiitaはスライドのEmbedコードに対応していない。

↓こういうやつ貼り付けても出ない。

<script async class="speakerdeck-embed" data-id="22fe7ad589e24a3ab058e41337ff2573" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>

残念。

仕方ないのでサムネ付きリンクを貼って、それっぽくしてみた。

というわけで、やり方を紹介します。

スライドのURLと画像URLを取得

まずは対象スライドのページをブラウザで開き、ChromeのデベロッパーツールやSafariのWebインスペクタ等で、スライドのサムネイルに使う画像URLを取得します。

Speaker Deckのスライドの場合

例えばこちらのスライドでは…
Web API 完全に理解した 〜黎明編〜 / Web API Completely Understood -Dawn- - Speaker Deck

スライド1枚目の画像URLはこんな感じ。
https://speakerd.s3.amazonaws.com/presentations/22fe7ad589e24a3ab058e41337ff2573/slide_0.jpg

SlideShareのスライドの場合

例えばこちらのスライドでは…
RESTfulとは - SlideShare

スライド1枚目の画像URLはこんな感じです。
https://image.slidesharecdn.com/restful-140324211655-phpapp02/95/restful-1-638.jpg

この画像URLとスライドのURLをコピーして控えておきます。

埋め込みコード

コピーした画像URLとスライドURLを、以下のコードにハメ込みましょう。

[![thumbnail](画像URL)](スライドURL)

先程のSpeaker DeckとSlideShareのURLをハメ込むと、それぞれこんな感じになります。

[![thumbnail](https://speakerd.s3.amazonaws.com/presentations/22fe7ad589e24a3ab058e41337ff2573/slide_0.jpg)](https://speakerdeck.com/unsoluble_sugar/web-api-completely-understood-dawn)

[![thumbnail](https://image.slidesharecdn.com/restful-140324211655-phpapp02/95/restful-1-638.jpg)](https://www.slideshare.net/unsolublesugar/res-tful)

あとはこのコードをQiita記事に埋め込むだけ。

実際の様子

実際にコードを埋め込むと、サムネイル画像がクリックできるようになっており、クリックすると対象スライドに飛べます。

Speaker Deckのスライド

Web API 完全に理解した 〜黎明編〜 / Web API Completely Understood -Dawn- - Speaker Deck

SlideShareのスライド

RESTfulとは - SlideShare

画像の直下にテキストリンクも添えておくと、より親切ですね。

Qiitaの「スライドモード」を知ってるかい？

ちなみにQiitaには「スライドモード」という機能があります（2016年リリース）。

実際利用してる方も最近はあまり見かけないですが、初耳だった人は一度触ってみると良いかもしれません。

QiitaやMarkdownに慣れてて「わざわざパワポやKeynote使うほどでもないがシェアしたい的な資料」はサクッと作れます。

ただ、GoogleスライドやStackEditで済むことも多いので、残念ながら使用率は低いのかなぁと思いました（小並感）

でもこういうプロダクトをサクッとリリース出来ちゃう環境って、純粋に羨ましいですよね。
スライドモードをリリースしました - Qiita Blog