プロクラシスト

今日の寄り道 明日の近道

【Day-5】Jupyterでできる!イケてるプレゼンスライドの作り方


スポンサーリンク

f:id:imslotter:20171205031053p:plain

こんにちは、ほけきよです。

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!!

PROCRASIST