タイトルの通りであります。普段からシミュレーションのプラットフォームとしてNotebookを使っている身としては、できるだけこの中で話を終わらせたい。数式をまたちまちま打っていくのは耐えられない。よってIPython Notebookの拡張機能であるlive_revealを使ってスライドを作成する。研究室のボスのお許しも得たので、ドヤ顔で発表したい。
インストール方法や簡単な使い方は各自調べて見てください。Qiitaにもいくつかあるはずです。
今回は実際に使っていて解決しなければならなくなった事案に関して、その解決法をまとめたものとなっています。
立ちはだかる問題
プレゼン資料を作るのは割とすぐできる。今まで書き進めてきたものをうまく切り貼りしてまとめて、セルの中に放り込んでいくだけです。ただ、これだけだと当然問題が生じてしまいます。
文字が小さい
これは多分みなさん感じるでしょう。自分のブラウザ上で表示する分には綺麗に表示できているのに、いざプロジェクターに映してみると、いろんな人から「字が小さくて見えない」と指摘を受けます。ブラウザの機能で拡大表示すると、今度は図も大きくなってしまったりして、うまく行きません。
これは比較的簡単に解決できます。
~/.ipython/nbextensions/livereveal/main.cssの14行目辺りを
.reveal .slides {
text-align: left;
font-size: 190%; //160%
//width: 100% !important; //960px, 1366px
}
のように編集します。widthの項は無視してください。font-sizeが160%だったものを、190%に変更しています。このようにすることで、大体ブラウザ上で125%に拡大した時と同じ大きさの文字サイズに変更することができ、しかも文字以外のオブジェクトのサイズはそのままにできます。
図が中心に表示されない
通常のNotebookのモードでは、何もしなくても綺麗に中心に表示されていますが、スライドモードにすると左寄せになってしまいます。また、画像の幅の設定にも気をつかう必要があります。簡単な解決法は
<div align="center">
<img src=download1.png width=70% />
図1. なんたらかんたらのグラフ</div>
のようにしてしまう方法。こうすれば中心に表示されるようになります・・・と言いたいところですが、実際には少し右にずれてしまいます。
これにだいぶ悩まされました。この原因は、それぞれのセルの実行番号("In [3]:"みたいなやつ)を表示する領域が左に取られているためです。したがって、この領域を消してやる必要があります。ちょっとググると
のような情報が見つかります。上の例では、nbconvertでスライドにする際にインプットセルと、プロンプト領域を消す方法が載っています。このスクリプトを試しにそのまま(<script>タグは当然外して)~/.ipython/nbextensions/main.jsの中に書き込んで再読み込みすると、確かにインプットセルとプロンプト領域が表示されなくなります。しかし、これだと編集の際や、他の普通の使い方をしたいときに困るので、スライドショーの表示をするときだけ有効にしたいと考えます。
IPythonではプロファイルといって、設定ファイル群を指定して起動することができるので、その1つに、今回のようなスライド用の設定を作ってしまえばいいことが分かります。
ipython profile create slide
などとすれば、~/.ipython以下に"profile_slide"という新しいプロファイルができていることが確認できるかと思います。
そこで~/.ipython/profile_slide/static/custom/custom.jsの中身を以下のように編集します。
$([IPython.events]).on('app_initialized.NotebookApp', function(){
require(['nbextensions/livereveal/main'],function(livereveal){
// livereveal.parameters('theme', 'transition', 'fontsize', static_prefix);
// * theme can be: simple, sky, beige, serif, solarized
// (you will need aditional css for default, night, moon themes).
// * transition can be: linear, zoom, fade, none
livereveal.parameters('simple', 'fade');
console.log('Live reveal extension loaded correctly');
// http://hannes-brt.github.io/blog/2013/08/11/ipython-slideshows-will-change-the-way-you-work/
function hideElements(elements, start) {
for(var i = 0, length = elements.length; i < length;i++) {
if(i >= start) {
elements[i].style.display = "none";
}
}
}
var input_elements = document.getElementsByClassName('input');
hideElements(input_elements, 0);
var prompt_elements = document.getElementsByClassName('prompt');
hideElements(prompt_elements, 0);
});
});
このように編集してページをリロードすると、先程試してみたときのように、インプットセルとプロンプト領域が表示されなくなっていることが分かるかと思います。
これでやっとタイトルの文字を中央揃えにすることができます...
「左の二つのボタンって消せないんですか?」
そうですよね、邪魔ですよね。
強引に消すやり方は、これらを定義している箇所、~/.ipython/nbextensions/livereveal/main.jsの305行目辺りのbuttonExitの定義のなかで$('.reveal').after(help_button);となっている行を"//"でコメントアウトすればと良いです。同じようにその後に定義されているbuttonExitの中の同様の部分をコメントアウトすれば、毎回これらのボタンを表示しないようにすることができます。
また、プロファイルによって表示させたり表示させなかったりしたい場合には、一つ前の例のように、プロファイルのcustom.jsの中に
var buttonHelp_elements = document.getElementsByClassName('buttonHelp');
hideElements(buttonHelp_elements, 0);
var buttonExit_elements = document.getElementsByClassName('buttonExit');
hideElements(buttonExit_elements, 0);
のように、表示しないものとして追加してしまえば良いです。このようにすれば、特定のプロファイル(本番用)ではこれらのボタンを表示しないようにすることができます。
こちらも参考になるかもしれません。
pdfエクスポートがうまくいかないんじゃ!!
既知の問題として、スライドをpdfにするのはうまく行きません。以下の動画で、どうしてそうなったのか、開発者の方が質問に答えています。
Firefoxで"印刷"で"pdfエクスポート"にすると、下の領域を含んだ形でpdf化しようとしてくれちゃいます。Chromeではどうかというと、そこまでひどくはないですが、図のインポートを行うと、拡大して表示されて欲しい位置に、小さい図がいくつも詰められているような残念なpdfがエクスポートされます。
この問題を解決する1つの方法として考えられるのは、nbconvertで一旦slideにしてからそれをブラウザ上でpdfにする方法です。しかし、筆者はこのnbconvertで割と躓いてしまったので、結局すべてスクリーンショットに撮って、それをconvertで1つのpdfにまとめるという暴挙に出ました(←こちらも参考に『IPython Notebookのスライドを(無理やり)pdf化する方法』)。このときに注意するポイントとしては、実際にプレゼンで使うであろうプロジェクターの画面サイズに自分のPCを合わせておいてからスクリーンショットを撮ることです。こうしないと、あとでpdfにまとめたときにワイドなスライドができたり、余白の大きすぎるスライドが量産されることとなります。後学のために、実際に使ったコマンド、ツール類を記録しておきます。
スクリーンショットはlinuxのshutterというアプリケーションで、選択範囲のスクリーンショットを撮りました。これを1つのディレクトリ内にスライドの番号の若いものがファイル名の数字の小さいものになるように注意しながら1枚ずつ保存していきます。すべてのスライドが保存し終わったら、そのディレクトリ内で
convert -page 1024x768 -gravity Center *.jpg out.pdf
と実行します。これによって横1024px, 縦768px(←研究室のプロジェクターの解像度)で、すべてのjpg画像ファイルが数字の順番に並べられ、中心に揃えられたout.pdfが作成されます。すべて画像として扱っているのでファイルサイズが大きくなるのはご愛嬌。文字が微妙にぼやけているのもご愛嬌。印刷して小さくなれば目立たないはずなんや! ただし、予備として準備するスライドはこれではよくない気がする。予備のpdfファイルは、おとなしくPowerPoint使って一から作った方がいいのかもしれないですね。そしてこうなってくると最初からPowerPointで良かったのでは、という囁きが・・・
今後の課題
卒論の内容に関してはここでは関係ないので書かないですが、変更があったときに簡単に作り直せる、というのは大事な点です。したがって、同じスクリーショットを撮ってpdfにするというのでも、自動化できればそれを使うに越したことはありません。そんな暇があるか、というのもまた別の問題です。まだ開発途上の拡張機能なので、バグも多くありますが、この機能に惚れ込んでNotebook使ってる身としては、これからもガシガシ使い続けていくつもりです。絶対流行らせてやるんだ!(*´ω｀*)