サイトアイコン アマチュア無線局JS2IIU

【Streamlit】Speaker Deckのスライドを埋め込む

JS2IIU

こんにちは、JS2IIUです。
本記事では、Webアプリケーションの開発に便利なPythonライブラリ「Streamlit」と、プレゼンテーション共有サービス「Speaker Deck」を連携させ、Speaker DeckにアップロードしたスライドをStreamlitアプリ内に埋め込む具体的な方法を説明します。今回もよろしくお願いします。

1. StreamlitとSpeaker Deckの基本

Streamlitとは？

Streamlitは、Pythonでわずかなコード量から対話型のWebアプリケーションを簡単に作成できるオープンソースのフレームワークです。データサイエンスや機械学習のモデル結果を手早く視覚化するために広く用いられています。

特徴：

Speaker Deckとは？

Speaker Deckは、プレゼンテーションスライドをアップロードしてWeb上で共有できる無料サービスです。PDF形式でスライドをアップロードすると見やすい形で表示され、URLを通じて簡単に共有できるのが特徴です。

特徴：

Share Presentations without the Mess
Speaker Deck is the best way to share presentations online. Simply upload your slides as a PDF, and we’ll turn them into a beautiful online experience...
speakerdeck.com

2. Streamlitの概要

Streamlitを使うとPythonコードからすぐにWebアプリが作れます。以下の特徴が特に注目されます。

Streamlitインストール方法

Bash
pip install streamlit

簡単なアプリの例

Python
import streamlit as st

st.title("こんにちは、Streamlit!")
st.write("これはシンプルなStreamlitアプリの例です。")

実行はターミナルで

Bash
streamlit run ファイル名.py

とするだけです。

3. Speaker Deckの概要

Speaker Deckは主にプレゼンテーションの共有に使用されます。PDFスライドをアップロードするだけで、高品質なブラウザビューアが作成され、聴衆や読者と簡単に共有可能です。

4. Speaker Deckの共有リンクの取得方法

ここからは、Speaker Deckのスライド共有用リンク・iframeコードを取得する具体的なステップをご案内します。

ステップ1: アカウント登録とログイン

  1. https://speakerdeck.com にアクセスします。
  2. 新規アカウントを作成し、ログインします。

ステップ2: PDFスライドのアップロード

  1. ページ右上の「Upload」ボタンを押します。
  2. 自分のプレゼン資料（PDFファイル）を選択しアップロード。
  3. タイトルや説明などの情報を入力して公開します。

ステップ3: スライドページのURL取得

  1. アップロード後、自分のスライドページにリダイレクトされます。
  2. ブラウザのアドレスバーに表示されているURLをコピーします。

例：

Plaintext
https://speakerdeck.com/tammyeverts/performance-is-good-for-brains-we-love-speed-2024

ステップ4: 埋め込み用iframeコードの取得

  1. スライドのページ右下に「Embed」ボタンがあります（ない場合はURLだけでも大丈夫です）。
  2. クリックするとiframeのコードが表示されます。
  3. そこからsrc属性のURLを使うことができます。

5. StreamlitでSpeaker Deckを埋め込む方法

これが本記事の核心です。取得したSpeaker Deckの共有URLをStreamlitアプリ内で表示するにはHTMLのiframeを使います。

iframeとは？

iframeはWebページ内に別のWebページを埋め込めるHTMLタグです。今回はSpeaker Deckのスライドビューアをiframeで挿入します。

ステップ1: Streamlitにiframeを埋め込む準備

Streamlitではst.components.v1.html()関数で自由なHTMLを挿入できます。

Speaker Deckのスライド画面で、右下の共有ボタンから、Embedを選択して、Copy iframe embed codeをクリックします。これを、下のサンプルのiframe_code_embedに格納します。

ステップ2: コード例

以下のコードはSpeaker DeckのURLをiframeで埋め込む例です。

Python
import streamlit as st
import streamlit.components.v1 as components

# iframe用のHTMLコードを作成
iframe_code_embed = f"""
<iframe class="speakerdeck-iframe" frameborder="0" src="https://speakerdeck.com/player/2da2cfd4ec3a4973b6b61fa8b3b8f953" title="Performance Is Good for Brains [We Love Speed 2024]" allowfullscreen="true" style="border: 0px; background: padding-box rgba(0, 0, 0, 0.1); margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 100%; height: auto; aspect-ratio: 560 / 314;" data-ratio="1.78343949044586"></iframe>
"""

st.title("Speaker Deckスライドの埋め込みサンプル")
st.write("以下はSpeaker Deckにアップロードしたスライドの埋め込み表示です。")

# iframeをStreamlit内に埋め込み
components.html(iframe_code_embed, height=620)

実行方法

  1. コードをapp.pyなどのファイル名で保存。
  2. ターミナルで
Bash
streamlit run app.py
  1. ブラウザでアプリを表示し、スライドがきちんと埋め込まれているのを確認してください。

6. カスタマイズオプションと表示設定の調整方法

iframeの見た目は以下の属性で調整できます。

属性名説明
width埋め込み領域の横幅
height埋め込み領域の高さ
frameborder枠線の表示（0で非表示）
scrollingスクロールバーの表示（yes/no/auto）
allowfullscreenフルスクリーン表示の許可

例: 縦長の画面に合わせて高さを800pxに変える、また幅を100%にしてレスポンシブにすることも可能です。

HTML
<iframe
    class="speakerdeck-iframe"
    frameborder="0"
    src="https://speakerdeck.com/player/2da2cfd4ec3a4973b6b61fa8b3b8f953"
    title="Performance Is Good for Brains [We Love Speed 2024]"
    allowfullscreen="true"
    style="border: 0px; background: padding-box rgba(0, 0, 0, 0.1); margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 100%; height: auto; aspect-ratio: 560 / 314;"
    data-ratio="1.78343949044586">
</iframe>

Streamlitのcomponents.html()でheightパラメータは必ず合わせて指定しましょう。指定しない場合、表示が切れてしまうことがあります。

7. よくある問題とその解決策

Q1: スライドが表示されない

Q2: iframeのサイズが合わない

Q3: モバイル画面で表示が崩れる

8. 埋め込みの活用事例

9. まとめ

今回は、PythonのStreamlitアプリ内にSpeaker Deckのスライドを簡単に埋め込む方法を、基礎からステップバイステップで解説しました。iframeを使った埋め込みは一度覚えれば多くのWebサービスに応用可能です。

この技術を活用して、より見やすく共有しやすいプレゼン資料配信の仕組みづくりに役立ててください。ご覧いただきありがとうございました。

参考リンク

最後まで読んでいただきありがとうございます。

モバイルバージョンを終了