読者です 読者をやめる 読者になる 読者になる

MyEnigma

とあるエンジニアのブログです。#Robotics #Programing #C++ #Python #MATLAB #Vim #Mathematics #Book #Movie #Traveling #Mac #iPhone

Jupyter (iPython) Notebookを使ってプレゼンテーション資料を作る方法

Programming Python javascript

プレゼンテーションZEN 第2版

プレゼンテーションZEN 第2版

目次

はじめに

先日、

Pythonのブラウザインターフェイス、

Jupyter (iPython) を使って

技術ノートを作る方法を紹介しましたが、

myenigma.hatenablog.com

 

実は、Jupyterのデフォルト機能を使うと、

マークダウンで書かれたノートブックを元に、

シンプルなプレゼンテーションスライドを

簡単に作ることができます。

 

今回は、

このJupyterでプレゼン資料を作る方法について

説明したいと思います。

 

reveal.js

Jupyterでは、

reveal.jsというライブラリを使って

プレゼンスライドを作成することができます。

github.com

slides.com

qiita.com

qiita.com

 

reveal.jsは、

Markdownで書かれた資料を元に、

ブラウザ上でスライドを作成する

HTMLフレームワークです。

 

HTMLフレームなので、

PowerPointが不要で、

マルチプラットフォーム(Windows,Linux,Mac,iOS)で動きますし、

インターネットでのスライド公開も簡単です。

また、テキストベースなので、

gitなどでのバージョン管理もし易いという特徴があります。

 

また、PowerPointのように、

スライドが一方向だけでなく、

横と縦方向にスライドを移動させることができるのも特徴です。

 

また、reveal.jsは

基本はHTMLでスライドの中身を作成しますが、

Markdownで書かれた文書もスライド化できます。

  

reveal.jsで作成されたプレゼンスライドの

サンプルは下記のようなものがあります。

flatbird.github.io

lab.hakim.se

page.duyetdev.com

第32回CATTOMフォーラム

 

reveal.jsでのプレゼンスライド操作

下記にまとめておきます。

キー 操作内容
矢印 スライド移動(上下左右)
ESC スライド一覧
Alt + マウスクリック ズームアップ
.(ピリオド) スライドをブラックアウト
f フルスクリーンモード (ESCで終了)
hjkl(Vimストローク) スライド移動

vimストロークがいいですね笑

qiita.com

 

Jupyterにおけるプレゼンテーションスライド作成

まず、デフォルトのJupyterの機能のみを使って、

スライドを作成する方法について説明したいと思います。

 

1.スライド用のJupyterノートブックを作成する

マークダウンやPythonコードなどで、

各セルにプレゼンの中身を書いておきます。

 

2.スライドの設定

左上のView->Cell Toolbar-> Slideshowを選ぶと、

f:id:meison_amsl:20160522150346p:plain

各セルにスライドの設定メニューが表示されるので、

スライドの設定を実施します。

f:id:meison_amsl:20160522150516p:plain

 

各設定の意味は下記の通りです。

  • Slide: 通常の横方向のスライド

  • Sub-slide:縦方向のスライド

  • Fragment: 初めは非表示で、Enterを押すと表示される

  • skip: スライドに表示しない

  • Note: スピーカーノート

 

3.スライドをブラウザに表示する

一通り、プレゼンの資料ができたら、

端末から下記のコマンドを入力すると、

自動的にreveal.jsを使ったスライドが

ブラウザに表示されます。

ipython nbconvert --to slides ./slide.ipynb --post serve

 

あとは、fを押すとフルスクリーンモードになるので、

そのままプレゼンを実施することができます。

f:id:meison_amsl:20160522152218p:plain

 

ちなみに一度ブラウザで表示された状態で、

元のノードブックを編集しても、

スライド側には反映されません。

自分の環境の場合、

上記のコマンドをCtrl+Cで止め、

再度上記のコマンド入力する必要がありました。

 

また、以前紹介した方法で記述した

Tex形式の数式もちゃんと表示されますし、

f:id:meison_amsl:20160522152705p:plain

Drag&Dropして挿入した画像も

ちゃんとスライド上で表示されます。

f:id:meison_amsl:20160522152807p:plain

Jupyterにおける数式の入力方法や、

画像のDrag&Drop挿入に関しては、

下記の記事を参照下さい。

myenigma.hatenablog.com

 

注意点

一つのセル内に書いた内容でも、

大きさがオーバした場合は

勝手に次のスライドになってしまう時があるので注意が必要です。

 

凝ったデザインのスライドを作る場合は、

やはりPower Pointのようなソフトを使った方が良いですが、

Jupyterノートブックの内容を

簡単に説明したい場合は便利ですね。

 

nbviewerを使ってプレゼン資料を公開する

Jupyterには、

ノートをGithubやgist上で公開すると、

それをHTMLでブラウザ上で読みやすくする

nbviewerというサービスがあります。

 

このnbviewerにはスライド表示機能があり、

github上にスライドを公開しておけば、

どの端末からでもプレゼンスライドを表示させることができます。

 

使い方

まずはじめにスライドのJupyterのファイルを

Github上に公開します。

事前に前述方法でスライド設定をしておきましょう。

 

続いて、nbviewerのページに行き、

自分のGitHubのアカウントや、

リポジトリ名を入力します。

f:id:meison_amsl:20160522104314p:plain

 

すると、

リポジトリのファイルリストが出てくるので、

*.ipynbファイルを選びましょう。

f:id:meison_amsl:20160522105650p:plain

 

すると、ブラウザ上で

Jupyterのノートブックが表示されるので、

右上のプレゼントボックス(?)のマークを押すと、

f:id:meison_amsl:20160522110925p:plain

プレゼンテーションモードになります。

 

これでどの端末からでも、

このURLにアクセスすれば、

プレゼン資料を利用することができるので便利ですね。

下記は自分が作ったサンプルスライドのリンクです。

Jupyter Notebook Viewer

 

もちろんURLにアクセスすれば、

iPadやiPhoneからでもプレゼン資料を閲覧できます。

f:id:meison_amsl:20160522111611j:plain

 

nbviewerのプレゼン資料が更新されない場合

githubのデータを更新(push)しても、

nbviewerは約10分に一回データを更新するので、

nbviewer側の資料がすぐに更新されない場合があります。

そんな時は、

下記の記事にある通り、

URLの末尾に

?flush_cache=true

を追加することで、強制的にnbviewer側のデータを更新することができます。

stackoverflow.com

 

ブラウザでGUIを使ってプレゼン資料を作る

ちなみに、Jupyterとは関係ありませんが、

reveal.jsを使ったプレゼンスライドを

GUIチックに作成するSlidesという

Webサービスがあります。

slides.com

(reveal.jsを作った人が作った会社のサービスのようです)

 

下記のようにブラウザ上のGUIで

reveal.jsベースのスライドを作ることができます。

f:id:meison_amsl:20160522145443p:plain

 

参考資料

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

プレゼンテーションZEN 第2版

プレゼンテーションZEN 第2版