こんにちは、JS2IIUです。
本記事では、Webアプリケーションの開発に便利なPythonライブラリ「Streamlit」と、プレゼンテーション共有サービス「Speaker Deck」を連携させ、Speaker DeckにアップロードしたスライドをStreamlitアプリ内に埋め込む具体的な方法を説明します。今回もよろしくお願いします。
1. StreamlitとSpeaker Deckの基本
Streamlitとは？
Streamlitは、Pythonでわずかなコード量から対話型のWebアプリケーションを簡単に作成できるオープンソースのフレームワークです。データサイエンスや機械学習のモデル結果を手早く視覚化するために広く用いられています。
特徴：
- 直感的なAPIで開発が素早い
- 自動でUIが生成される
- インタラクティブなウィジェットとリアルタイム更新
- Python環境があればすぐ始められる
Speaker Deckとは？
Speaker Deckは、プレゼンテーションスライドをアップロードしてWeb上で共有できる無料サービスです。PDF形式でスライドをアップロードすると見やすい形で表示され、URLを通じて簡単に共有できるのが特徴です。
特徴：
- シンプルなインターフェースでスライド共有が容易
- 埋め込み用iframeコードを生成できる
- Twitterやブログなどにもシームレスに転載可能
2. Streamlitの概要
Streamlitを使うとPythonコードからすぐにWebアプリが作れます。以下の特徴が特に注目されます。
- 余計なHTMLやJavaScriptの知識が不要
- コードを書いて保存するだけでブラウザに即反映
- 高度なインタラクティブ性を簡単に追加可能
- データの可視化やUI構築が素早くできる
Streamlitインストール方法
pip install streamlit簡単なアプリの例
import streamlit as st
st.title("こんにちは、Streamlit!")
st.write("これはシンプルなStreamlitアプリの例です。")実行はターミナルで
streamlit run ファイル名.pyとするだけです。
3. Speaker Deckの概要
Speaker Deckは主にプレゼンテーションの共有に使用されます。PDFスライドをアップロードするだけで、高品質なブラウザビューアが作成され、聴衆や読者と簡単に共有可能です。
- スライドのアップロードや管理が簡単
- URL発行で他者に見せやすい
- ブログやWebページにiframeで埋め込める
4. Speaker Deckの共有リンクの取得方法
ここからは、Speaker Deckのスライド共有用リンク・iframeコードを取得する具体的なステップをご案内します。
ステップ1: アカウント登録とログイン
- https://speakerdeck.com にアクセスします。
- 新規アカウントを作成し、ログインします。
ステップ2: PDFスライドのアップロード
- ページ右上の「Upload」ボタンを押します。
- 自分のプレゼン資料（PDFファイル）を選択しアップロード。
- タイトルや説明などの情報を入力して公開します。
ステップ3: スライドページのURL取得
- アップロード後、自分のスライドページにリダイレクトされます。
- ブラウザのアドレスバーに表示されているURLをコピーします。
例：
https://speakerdeck.com/tammyeverts/performance-is-good-for-brains-we-love-speed-2024ステップ4: 埋め込み用iframeコードの取得
- スライドのページ右下に「Embed」ボタンがあります（ない場合はURLだけでも大丈夫です）。
- クリックするとiframeのコードが表示されます。
- そこから
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で埋め込む例です。
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)実行方法
- コードを
app.pyなどのファイル名で保存。 - ターミナルで
streamlit run app.py- ブラウザでアプリを表示し、スライドがきちんと埋め込まれているのを確認してください。
6. カスタマイズオプションと表示設定の調整方法
iframeの見た目は以下の属性で調整できます。
| 属性名 | 説明 |
|---|---|
width | 埋め込み領域の横幅 |
height | 埋め込み領域の高さ |
frameborder | 枠線の表示（0で非表示） |
scrolling | スクロールバーの表示（yes/no/auto） |
allowfullscreen | フルスクリーン表示の許可 |
例: 縦長の画面に合わせて高さを800pxに変える、また幅を100%にしてレスポンシブにすることも可能です。
<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: スライドが表示されない
- Speaker DeckのURLに誤りがないか確認してください。
- 公開設定が正しくされているか確認。
iframeのsrcには必ず/embedを付けましょう。例：https://speakerdeck.com/ユーザー/embed
Q2: iframeのサイズが合わない
widthとheightを適宜変更してください。- Streamlitの
components.html()の引数heightも忘れずに。
Q3: モバイル画面で表示が崩れる
- 幅を
100%に設定しレスポンシブ対応に。 - CSSや追加のラッパーを使う高度な対応も考えられます。
8. 埋め込みの活用事例
- 技術ブログにおける資料共有
Streamlitブログ形式のサイトで、自分の発表スライドを直接埋め込み解説を加える。 - オンライン研修・講義の補助資料
学習アプリに埋め込み、スライドを参照しながらインタラクティブなクイズやコード実行を配置。 - プロジェクトの進捗報告用Webツール
社内の報告用にSpeaker Deckの資料を埋め込み、コメントやフィードバックフォームと連携。
9. まとめ
今回は、PythonのStreamlitアプリ内にSpeaker Deckのスライドを簡単に埋め込む方法を、基礎からステップバイステップで解説しました。iframeを使った埋め込みは一度覚えれば多くのWebサービスに応用可能です。
この技術を活用して、より見やすく共有しやすいプレゼン資料配信の仕組みづくりに役立ててください。ご覧いただきありがとうございました。
参考リンク
最後まで読んでいただきありがとうございます。
コメント