背景
Talkie.jsとは、マークダウンやhtmlで書いたちょっとしたテキストが、
簡単におしゃれなスライドになるツールです。
以下のURLを見ていただくと良いと思います。
社内のちょっとした勉強会や、コードハイライトしたスライドをすぐ作りたい時、
Web上にスライドを公開したい場合などに最適だと思われます。
本投稿の内容
1. Talkie.jsを簡単に利用できるテンプレートセットの紹介
Talkie.js を使うことで、スライド作成の生産性/見栄えを大幅に向上出来るのですが、
活用までに若干敷居が高いところがあります。
そこでまず、本投稿では、その敷居を大きく下げる以下のテンプレートセットを紹介します。
html2png2pdf&Talkieテンプレートセット
（ https://www.vector.co.jp/soft/winnt/writing/se517303.html ）
- npmや、コマンドラインを一切触らずに、ダウンロードだけで初心者でも容易に使える
- PDF化ツールや、良く使うTipsや画像がセットでパッケージされている
これは上記サイトからダウンロードすれば終わり、という話です。
ぜひ一度ダウンロードしてTalkie.jsの、簡単さ、便利さ、綺麗さをご確認ください。
2. 応用例： Jupyter Notebook にスライドを埋め込む方法の紹介
Jupyter Notebookは、pythonや機械学習のコードを作成/共有するために良く使われています。
Jupyter Notebook上で、デモを行いながらそのままプレゼンすることも多々見かけます。
しかし、プレゼンツールとしては、Webページを読んでいるような印象があり、
少々不格好な印象を受けることもあります。
そこで、このTalkie.jsを、htmlとしてJupyter内に組み込めることにより、
スマートに、プレゼンとデモコードの行き来が出来る方法を紹介します。
Jupyter Notebook にHTMLやyoutube動画を埋め込む方法
まずは、JpyterNotebookに通常のHTMLを埋め込む方法
#以下の記法により、HTMLタグを表示することができる
from IPython.display import HTML
HTML(r'<h1>Hello HTML</h1>')
※ なお、jupyternotebookのセルの形式をMarkdownにすれば直接HTMLも書けますが、
その方法だとiframeタグは上手く動作せず、以降のyoutubeやTalkie.jsの埋め込みには不適切です。
次に、Youtubeの動画を埋め込む方法
再生ボタンで直接再生できます。
#youtube で埋め込みたい動画を表示することもできる。
#youtube側で「共有」⇒「埋め込む」で表示されるURLを事前にコピーしておく。
HTML(r'<iframe width="560" height="315" src="https://www.youtube.com/embed/0E00Zuayv9Q" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>')
Jupyter上で見ると、以下のような形で表示されます。
[応用例] Jupyter Notebook にTalkie.jsスライドを埋め込む方法
テンプレートでは、「F」ボタンを押すと全画面切り替えができますが、
この埋め込みにおいても「F」ボタンを押すと、全画面スライドとJupyterを行き来できます。
以下はJupyterのipynbファイルと同じ階層にテンプレートのフォルダを配置した例：
# Talkieテンプレートセットと組み合わせる
# https://www.vector.co.jp/soft/winnt/writing/se517303.html
HTML(r'<iframe width="800" height="500" src="./TalkieJsTemplate_YW/index_template.html" frameborder="0" allowfullscreen></iframe>')
Jupyter上で見ると、以下のような形で表示されます。
右下の ＜ ＞ でスライドをめくれます！
Talkie.js も Jupyter Notebookも便利！ 組み合わせでさらに楽しく！
Talkie.jsのテンプレートにも、コードのハイライト機能があり、
社内の勉強会や、ちょっとしたライトニングトークなどには大変便利です。
とはいえ、やはりコードを動かして見せたいこともあり、Jupyterとの組み合わせは有効です。
Jupyter Notebookは、作業や開発を進めるには大変便利です。
一方で、その内容を人に発表するにはちょっと表現力が不足しています。
パワーポイントなどと行ったり来たりするか、
Jupyter上のマークダウンだけでは見た目がイマイチになりがちです。
スクロールが縦に長く長くなっていくのもイマイチでしょう。
今回の手法によって、Jupyterとスライドをシームレスに繋ぐことができます。
改めての紹介になります。まずは、Talkie.jsのテンプレートを入手し、試してみてください。
html2png2pdf&Talkieテンプレートセット
（ https://www.vector.co.jp/soft/winnt/writing/se517303.html ）
そして、それをJupyterにも組み込んでみると、活用の幅がさらに広がるでしょう！
以上。