Qiitaの記事にSpeaker DeckやSlideShareのサムネ付きリンクを貼る方法

**2021/3/11追記：Qiita公式でiframeによるスライド埋め込みに対応した模様です。詳細はリリースノートをご参照ください**
[リリースノート - 記事に埋め込み可能なスクリプトを追加しました](https://qiita.com/release-notes#2021-03-11)



Qiitaの小ネタメモ。

勉強会の[資料まとめ記事](https://qiita.com/unsoluble_sugar/items/0e516f09d0733a0819f2)などで、[Speaker Deck](https://speakerdeck.com/)や[SlideShare](https://www.slideshare.net/)の埋め込みを行いたい時があるのだが、QiitaはスライドのEmbedコードに対応していない。

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

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

仕方ないのでサムネ付きリンクを貼って、それっぽくしてみた。
[![thumbnail](https://speakerd.s3.amazonaws.com/presentations/22fe7ad589e24a3ab058e41337ff2573/slide_0.jpg)](https://speakerdeck.com/unsoluble_sugar/web-api-completely-understood-dawn)
というわけで、やり方を紹介します。

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


## Speaker Deckのスライドの場合
例えばこちらのスライドでは…
[Web API 完全に理解した 〜黎明編〜 / Web API Completely Understood -Dawn- - Speaker Deck](https://speakerdeck.com/unsoluble_sugar/web-api-completely-understood-dawn)
<img width="693" alt="2020-02-26_00h34_02.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/66059a04-54f1-eee6-17bd-0dd4251ff304.jpeg">

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


## SlideShareのスライドの場合
例えばこちらのスライドでは…
[RESTfulとは - SlideShare](https://www.slideshare.net/unsolublesugar/res-tful)
<img width="697" alt="2020-02-26_00h29_57.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/f9825fd7-7306-6242-7068-1f3acd1e2ad0.jpeg">
スライド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をハメ込むと、それぞれこんな感じになります。

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

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

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

## 実際の様子

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

### Speaker Deckのスライド
[![thumbnail](https://speakerd.s3.amazonaws.com/presentations/22fe7ad589e24a3ab058e41337ff2573/slide_0.jpg)](https://speakerdeck.com/unsoluble_sugar/web-api-completely-understood-dawn)
[Web API 完全に理解した 〜黎明編〜 / Web API Completely Understood -Dawn- - Speaker Deck](https://speakerdeck.com/unsoluble_sugar/web-api-completely-understood-dawn)

### SlideShareのスライド
[![thumbnail](https://image.slidesharecdn.com/restful-140324211655-phpapp02/95/restful-1-638.jpg)](https://www.slideshare.net/unsolublesugar/res-tful)
[RESTfulとは - SlideShare](https://www.slideshare.net/unsolublesugar/res-tful)

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

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

ちなみにQiitaには「[スライドモード](https://qiita.com/Qiita/items/4ff5873776992f0511d6)」という機能があります（2016年リリース）。
<img width="417" alt="2020-02-26_00h49_14.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/57352e22-0244-4535-ade5-28421d6a2a7d.jpeg">
実際利用してる方も最近はあまり見かけないですが、初耳だった人は一度触ってみると良いかもしれません。

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

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

でもこういうプロダクトをサクッとリリース出来ちゃう環境って、純粋に羨ましいですよね。
[スライドモードをリリースしました - Qiita Blog](https://blog.qiita.com/146195241579-2/)