こんにちは、ほけきよです。
MSのツールの中でも、パワポだけは優れたツールだと思っているんですよ。 けれど、せっかく技術者ならば、そこら辺も新しいツールを使ってみたいものです。
最近エンジニア界隈では、reveal.jsを使ってHTMLでプレゼン資料を作っているのをチラホラと見かけます。 あれ、かっこよい。。。
なので、今回は、Jupyterでプレゼン資料を作る方法`をまとめておきます。
jupyterをスライドにする(利用編)
RISEをつかう。
インストールと設定
コマンド側はたったこれだけ。簡単、超簡単
pip install RISE jupyter-nbextension install rise --py --sys-prefix jupyter-nbextension enable rise --py --sys-prefix
Jupyterを起動して、 赤枠で囲んだ箇所が現れていれば成功
使い方
view->Cell Toolbar->slideshowを選択。スライドショー用の設定画面になる。
下図のように、プルダウンメニューが出ていればOK、
| メニュー | 用途 |
|---|---|
| Slide | スライドで新しいページに切り替える |
| Subslide | サブスライドを作る(→のページ送りじゃなくて↓のページ送り) |
| Flagment | 同一スライドで、Enterを押してからスライド表示 |
| Skip | スライドに反映しない |
| Note | スピーカーノート |
また、そのままではダサいので、体裁を整えたい。 %%HTML<style></style>とかでcssをべた書きがめんどくさいけど一番シンプル。その際は、図のように.rise-enabled .revealをつけておくと、スライドにのみ反映となる。つけないと、jupyter編集画面まで変わってしまう。
実行
実際にRISEでプレゼンするとこんな感じになる。題材は昨日のアドベントカレンダー
出力
htmlに出力 下記コマンドを入力すると、スライドの形式を保ったまま、htmlファイルが出来上がる
jupyter nbconvert "day5-jupyter-slide.ipynb" --to slides --reveal-prefix "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.1.0"
出力されたhtmlファイルは、デフォルトのスライドデザインなので、jupyterの冒頭に書いたcssをコピーして、htmlのスライドが始まる直前の<style></style>の間にはめ込んでやる(はじめのスライドのタイトルなどで検索すると見つかりやすい)
その際に、enable-riseのセレクタは消去する。.revealは残す
アップロード
github.ioでは、htmlのスライドも見られるようにできる。
参考記事を見ながら、github pagesにあげてみる
以下参考記事から抜粋した手順
- reveal.jsを自分のgithubページにforkして、適当な名前に変更(settingで変更、そのままでもOK)
- ローカルにforkしたreveal.jsページをcloneする
- gh-pagesブランチを削除
git branch -rd origin/gh-pages git push origin --delete gh-pages
- 自分で新しく
gh-pagesブランチを作成
git checkout -b gh-pages
index.htmlというhtmlファイルを先ほど出力した自分のスライドに差し替える- 上記で作ったブランチにpush
git push origin gh-pages
ごり押しではあるが、スライドが作られている (demo page )
ブログ等htmlで埋め込む
最後、github.ioのページを何とかしてhtmlで埋め込みたい。
こういうときは<iframe>タグを使う。
<center> <iframe allowfullscreen="true" allowtransparency="true" frameborder="0" height="596" mozallowfullscreen="true" src="https://hokekiyoo.github.io/jupyter-slide-demo/#" style="border:0; padding:0; margin:0; background:transparent;" webkitallowfullscreen="true" width="800"></iframe> </center>
出力はこんな感じ
まとめ
いかがでしたか？ Jupyter使いはぜひ使ってみてはいかがでしょうか
試行錯誤を繰り返しながら色々と作ってみたので、改善点があれば教えていただければ幸いです。
明日はJupyterネタがだいぶブログ内でまとまってきているので、それを踏まえてJupyterの総ざらいをします。ではでは！
明日はjupyter！！
