How to embed presentation slides created by reveal.js and org-mode (org-reveal) in web page.

reveal.jsとorg-modeで作成したプレゼン用スライドをウェブページに埋め込む（ 2020年6月28日追加あり ）

Last updated on 2 min read
Molly Malone statue, Dublin

前回までの2回でプレゼンテーション用スライドをorg-revealを介してreveal.jsで作成する方法を説明してきた．今回は，作成したスライドをwebで公開したり，web pageにそのスライドを埋め込む方法を紹介する．

Table of Contents

References

この2つのサイトを読めば，ここはもう読まなくても良いような．．．

How to publish a web page on GitHub

前々回の記事（How to create presentation slides by reveal.js and org-mode (org-reveal)）でlive demoを作成したが，その際の手順を将来の自分のためにまとめておく．

  1. localでwebページを作る．

    ここでは，以下のようにdirectoryを作って行うこととする．

    $ cd /Users/taipapa/Data/
$ mkdir Slides

    そして，このSlides directoryの中でweb pageを作成する．作成方法は，前々回の記事（How to create presentation slides by reveal.js and org-mode (org-reveal)）を参照．このdirectoryの中にreveal.jsをgit cloneしてnpm installも行っておく．プラグインなどもインストールするが，後で不要なファイルを削除し必要最小限に減らしてからGitHub pageにアップすれば良い．

  2. GitHub pageに新しいrepositoryを作成する．

    自分のGitHub pageに行き， Repositories tagをクリックして， Repositories ページに移動すると下図のようになるので，右端の New をクリックする．

    New をクリックすると下図のようになるので，適当な名前を Repository name に 入力して新しいrepositoryを作成する．名前はなんでも良いが，ここではMySlidesにした．名前を入力したら，一番下の Create repository をクリックして作成する．

  3. 作成したGitHub pageのrepositoryをlocalにクローンする．

    ターミナルで以下のように行った．

    $ cd /Users/taipapa/Data/Slides
$ git clone https://github.com/ユーザー名/リポジトリ名.git
# 今回の場合だと以下のようになる
$ git clone https://github.com/taipapamotohus/MySlides.git
# クローンしたrepositoryのdirectoryに移動する
$ cd MySlides
$ pwd
/Users/taipapa/Data/Slides/MySlides

  4. localで作成したウェブページをこのMySlides directoryにコピーする．

    この時に，reveal.jsの中身などを全てコピーする必要はなく，ウェブページができる最小限にすれば容量が節約できる．cssとか画像とか動画など必要なものは全てコピーする．今回は以下のような内容とした．そうそう，作成したhtmlファイルの名前を index.html に直すことを忘れないように注意する．

    $ pwd
$ /Users/taipapa/Data/Slides/MySlides
$ tree -L 3
.
├── Movies
│   └── Knight-33990.mp4
├── custom_oer.css
├── figures
│   ├── hoge_fuga.jpg
│   └── hoge_fuga.meta
├── index.html
└── reveal.js
    ├── bower_components
    │   ├── reveal.js-menu
    │   └── reveal.js-plugins
    ├── css
    │   ├── print
    │   ├── reset.css
    │   ├── reveal.css
    │   ├── reveal.scss
    │   └── theme
    ├── js
    │   └── reveal.js
    ├── lib
    │   ├── css
    │   ├── font
    │   └── js
    └── plugin
        ├── highlight
        ├── markdown
        ├── math
        ├── multiplex
        ├── notes
        ├── notes-server
        ├── print-pdf
        ├── search
        └── zoom-js

  5. もう一つ大事なことは，index.htmlの中に記載されている絶対パスを相対パスに直すことである．例えば，

    <script src="file:///Users/taipapa/Data/Slides/reveal.js/js/reveal.js"></script>

------->

<script src="reveal.js/js/reveal.js"></script>

    と言うふうに修正する．このように修正しておかないと，GitHubに置いた時に動かなくなってしまう．私はこれにハマった．（ 2020年6月28日追加 ）

  6. gitで，add, commit, push

    必要なファイルがMySlides directoryにコピーできたら以下のようにする．

    $ cd /Users/taipapa/Slides/MySlides
$ git add .
$ git commit -m "first commit"
# pushしてGitHub pageのrepositoryに反映させる
$ git push origin master

  7. GitHub pageを確認

    https://github.com/taipapamotohus/MySlides に行くとこんな感じになる．

    私の下手な説明を読むよりも，このページをgit cloneするかzipを落として．内容を見て貰えば，一番わかりやすいかもしれない．

  8. 上の画像の右端の Settings をクリックしてSettingsに移動する．下の方までスクリールして GitHub Pages に移動する．ここで下図のように， Source を master branch にセットする．

    GitHubのmasterブランチをWebページとして公開する手順（GitHub Pages）によれば，以前は，gh-pagesという別ブランチを作成して、そこにソースコードをプッシュする必要があったが，2016年8月18日以降は，master branchのみでweb pageを公開できるようになったとのことである．もちろん，不要なデータを公開したくない場合は，gh-pages branchを使用すれば良い（ブランチ上の一部のデータのみをGitHub Pagesで公開する）．

    これで完成である．https://taipapamotohus.com/MySlides/ をクリックして，ちゃんとスライドが見られることを確認する．

How to embed presentation slides in web page

次の課題は，作成したウェブページを別のウェブページに埋め込むことである．私の場合はHugoで作成したブログにreveal.jsで作成したスライドを埋め込むということになる．前々回の記事（How to create presentation slides by reveal.js and org-mode (org-reveal)）では埋め込みについてはさらっと書いているだけだが，実は一番苦労したのはこの埋め込みであった． iframe を使えば良いのであろうということはなんとなく分かったのだが，どう使えば良いのかでかなり試行錯誤した．結局，HugoのForumで shortcodes を使えば良いという記事（How to use iframe content correctly in a yaml file）を見つけてなんとかなった．とは言え，紆余曲折を経てのことなので，以下にその過程を失敗も含めてまとめてみた．

  1. shortcode templateをHugoのroot directoryに作成する．具体的には/Users/taipapa/Data/MyBlog/Taipapablog/layouts/shortcodes/SlideInclusion.htmlとして作成する． SlideInclusion.html の中身は以下の通りである．

    <iframe src="{{.Get 0}}" width="1000" height="600" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe>

  2. 投稿記事の内部でこのshortcodeを呼ぶ．

    投稿記事の内部で，埋め込みたい場所に以下のように記述すれば良い．

    ｛{< SlideInclusion "https://taipapamotohus.github.io/MySlides/" >}}

    （最初の "{" はescapeできないので全角の "｛" にしていることに注意）

  3. 上記の書き込みにより，以下のように作成したウェブページが埋め込まれる．

    私の場合は，org-modeのパッケージであるox-hugoを使用して書いているのだが，上記のコードをそのまま書いても埋め込まれることは埋め込まれる．


    というわけでうまく埋め込まれ．．．ていない！この記事自体が埋め込まれてしまっている．これはこれで面白いが（笑）

  4. iframeを，ox-hugoの中に直接書き込む．

    shortcodeをox-hugoから呼ぶとうまく行かないので，以下のように，直接 iframe のコードをox-hugoのファイルに書き込むことにした．

    #+BEGIN_EXPORT html
<iframe src="https://taipapamotohus.github.io/MySlides/" width="1000" height="600" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe>
#+END_EXPORT

    このコードをox-hugoで書いた記事に入力すれば，下のように，スライドが埋め込まれる．

    前々回の記事（[How to create presentation slides by reveal.js and org-mode (org-reveal)](../how-to-create-presentation-slides-by-reveal-dot-js-and-org-mode-org-re-reveal)）も今回の内容に合わせて修正しておいた．

    reveal.jsに関しては，まだ色々と面白そうなことがある．D3.jsとの組みわせとか．．．いずれまとめることができたらと考えている．

reveal js org-reveal emacs org-mode presentation slide javascript github
Avatar
taipapa
本人ではありません　(^^)

Related

Next
Previous
comments powered by Disqus