目次
- 目次
- はじめに
- reveal.js
- Jupyterにおけるプレゼンテーションスライド作成
- nbviewerを使ってプレゼン資料を公開する
- ブラウザでGUIを使ってプレゼン資料を作る
- 参考資料
- MyEnigma Supporters
はじめに
先日、
Pythonのブラウザインターフェイス、
Jupyter (iPython) を使って
技術ノートを作る方法を紹介しましたが、
実は、Jupyterのデフォルト機能を使うと、
マークダウンで書かれたノートブックを元に、
シンプルなプレゼンテーションスライドを
簡単に作ることができます。
今回は、
このJupyterでプレゼン資料を作る方法について
説明したいと思います。
reveal.js
Jupyterでは、
reveal.jsというライブラリを使って
プレゼンスライドを作成することができます。
reveal.jsは、
Markdownで書かれた資料を元に、
ブラウザ上でスライドを作成する
HTMLフレームワークです。
HTMLフレームなので、
PowerPointが不要で、
マルチプラットフォーム(Windows,Linux,Mac,iOS)で動きますし、
インターネットでのスライド公開も簡単です。
また、テキストベースなので、
gitなどでのバージョン管理もし易いという特徴があります。
また、PowerPointのように、
スライドが一方向だけでなく、
横と縦方向にスライドを移動させることができるのも特徴です。
また、reveal.jsは
基本はHTMLでスライドの中身を作成しますが、
Markdownで書かれた文書もスライド化できます。
reveal.jsで作成されたプレゼンスライドの
サンプルは下記のようなものがあります。
https://page.duyetdev.com/why-docker/#/page.duyetdev.com
reveal.jsでのプレゼンスライド操作
下記にまとめておきます。
キー | 操作内容 |
---|---|
矢印 | スライド移動(上下左右) |
ESC | スライド一覧 |
Alt + マウスクリック | ズームアップ |
.(ピリオド) | スライドをブラックアウト |
f | フルスクリーンモード (ESCで終了) |
hjkl(Vimストローク) | スライド移動 |
vimストロークがいいですね笑
Jupyterにおけるプレゼンテーションスライド作成
まず、デフォルトのJupyterの機能のみを使って、
スライドを作成する方法について説明したいと思います。
1.スライド用のJupyterノートブックを作成する
マークダウンやPythonコードなどで、
各セルにプレゼンの中身を書いておきます。
2.スライドの設定
左上のView->Cell Toolbar-> Slideshowを選ぶと、
各セルにスライドの設定メニューが表示されるので、
スライドの設定を実施します。
各設定の意味は下記の通りです。
Slide: 通常の横方向のスライド
Sub-slide:縦方向のスライド
Fragment: 初めは非表示で、Enterを押すと表示される
skip: スライドに表示しない
Note: スピーカーノート
3.スライドをブラウザに表示する
一通り、プレゼンの資料ができたら、
端末から下記のコマンドを入力すると、
自動的にreveal.jsを使ったスライドが
ブラウザに表示されます。
ipython nbconvert --to slides ./slide.ipynb --post serve
あとは、fを押すとフルスクリーンモードになるので、
そのままプレゼンを実施することができます。
ちなみに一度ブラウザで表示された状態で、
元のノードブックを編集しても、
スライド側には反映されません。
自分の環境の場合、
上記のコマンドをCtrl+Cで止め、
再度上記のコマンド入力する必要がありました。
また、以前紹介した方法で記述した
Tex形式の数式もちゃんと表示されますし、
Drag&Dropして挿入した画像も
ちゃんとスライド上で表示されます。
Jupyterにおける数式の入力方法や、
画像のDrag&Drop挿入に関しては、
下記の記事を参照下さい。
注意点
一つのセル内に書いた内容でも、
大きさがオーバした場合は
勝手に次のスライドになってしまう時があるので注意が必要です。
凝ったデザインのスライドを作る場合は、
やはりPower Pointのようなソフトを使った方が良いですが、
Jupyterノートブックの内容を
簡単に説明したい場合は便利ですね。
nbviewerを使ってプレゼン資料を公開する
Jupyterには、
ノートをGithubやgist上で公開すると、
それをHTMLでブラウザ上で読みやすくする
nbviewerというサービスがあります。
このnbviewerにはスライド表示機能があり、
github上にスライドを公開しておけば、
どの端末からでもプレゼンスライドを表示させることができます。
使い方
まずはじめにスライドのJupyterのファイルを
Github上に公開します。
事前に前述方法でスライド設定をしておきましょう。
続いて、nbviewerのページに行き、
自分のGitHubのアカウントや、
リポジトリ名を入力します。
すると、
リポジトリのファイルリストが出てくるので、
*.ipynbファイルを選びましょう。
すると、ブラウザ上で
Jupyterのノートブックが表示されるので、
右上のプレゼントボックス(?)のマークを押すと、
プレゼンテーションモードになります。
これでどの端末からでも、
このURLにアクセスすれば、
プレゼン資料を利用することができるので便利ですね。
下記は自分が作ったサンプルスライドのリンクです。
もちろんURLにアクセスすれば、
iPadやiPhoneからでもプレゼン資料を閲覧できます。
nbviewerのプレゼン資料が更新されない場合
githubのデータを更新(push)しても、
nbviewerは約10分に一回データを更新するので、
nbviewer側の資料がすぐに更新されない場合があります。
そんな時は、
下記の記事にある通り、
URLの末尾に
?flush_cache=true
を追加することで、強制的にnbviewer側のデータを更新することができます。
ブラウザでGUIを使ってプレゼン資料を作る
ちなみに、Jupyterとは関係ありませんが、
reveal.jsを使ったプレゼンスライドを
GUIチックに作成するSlidesという
Webサービスがあります。
(reveal.jsを作った人が作った会社のサービスのようです)
下記のようにブラウザ上のGUIで
reveal.jsベースのスライドを作ることができます。
参考資料
MyEnigma Supporters
もしこの記事が参考になり、
ブログをサポートしたいと思われた方は、
こちらからよろしくお願いします。