2024-11-03
HPにスライドを埋め込む方法を習得したので残しておく。
スライドを埋め込んだページはこちら。
なぜスライドを埋め込みたいのか
- プレゼンテーションの内容をHPに残しておきたい。流用したい。
- ホームページが縦に長くなるのを防ぎたい。
- 括弧いい。アニメーションを入れられる。
直接リンクを張るのではだめ？
- リンク先に飛ばないと内容が見れない。
- 読み終わった後にもどるのが面倒。
Reveal.jsを使ってスライドを作る。
Quartoを使うと簡単にReveal.jsのスライドを作れる。
slide.qmdというファイルをstaticというディレクトリの中に作り、以下のように書く。 controls: trueを指定することで、埋め込んだときにスライドのページ移動がマウス操作でできるようになるのでおすすめ。
---
title: "Habits"
author: "John Doe"
format:
revealjs:
controls: true
---
## Getting up
- Turn off alarm
- Get out of bed
## Going to sleep
- Get in bed
- Count sheepcd /path/to/staticして、 quarto render slide.qmdを実行すると、slide.htmlが生成される。 このリンクを別のページに埋め込むことで、スライドを表示できる。
スライドを埋め込む
LLMに聞いたらこんな感じでHTMLを書くことで埋め込めると教えてくれた。
<!DOCTYPE html>
<html>
<head>
<style>
.presentation-container {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.responsive-iframe {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 アスペクト比 */
height: 0;
overflow: hidden;
background: #f5f5f5;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.responsive-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.presentation-title {
font-size: 24px;
margin-bottom: 16px;
color: #333;
}
</style>
</head>
<body>
<div class="presentation-container">
<div class="responsive-iframe">
<iframe src="/path/to/static/slide.html" allowfullscreen></iframe>
</div>
</div>
</body>
</html>/path/to/static/slide.htmlの部分を生成されたslide.htmlのパスに変更することで、スライドを埋め込むことができる。
GitHub Actionsで自動ビルド
他のHTMLをビルドする前に、quarto-cliをインストールしてsilde.htmlを生成しておくようにworkflowを設定する。
- name: get quarto-cli via pipx
run: |
sudo apt-get update -y
sudo apt-get install -y pipx pandoc
pipx install quarto-cli
- name: render by quarto
run: |
cd /path/to/static
quarto render slide.qmd
cd -/path/to/static/slide_filesにReveal.jsの様々なファイルが生成されてこれをgitで差分管理するのは嫌なので、.gitignoreに追加しておく。
# Reveal.js
slide_files/おしまい