テキストがおしゃれスライドになるTalkie.jsを超簡単に使う方法 ＆ Jupyterにスライドを埋め込む方法

5624 ワード
Talkie.js Python スライド Jupyter-notebook Jupyter Python テキストリンク

背景

Talkie.jsとは、マークダウンやhtmlで書いたちょっとしたテキストが、
簡単におしゃれなスライドになるツールです。

以下のURLを見ていただくと良いと思います。
* Talkie.jsの製作者さまの紹介スライド
* Qiita上で紹介されていた先輩記事

社内のちょっとした勉強会や、コードハイライトしたスライドをすぐ作りたい時、
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表現をJupyterに埋め込む
#以下の記法により、HTMLタグを表示することができる
from IPython.display import HTML
HTML(r'<h1>Hello HTML</h1>')

※ なお、jupyternotebookのセルの形式をMarkdownにすれば直接HTMLも書けますが、
　その方法だとiframeタグは上手く動作せず、以降のyoutubeやTalkie.jsの埋め込みには不適切です。

次に、Youtubeの動画を埋め込む方法

再生ボタンで直接再生できます。

YoutubeをJupyterに埋め込む
#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.jsのスライドををJupyterに埋め込む
# 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にも組み込んでみると、活用の幅がさらに広がるでしょう！

以上。