Slide 1
Slide 1 text
プレゼン？それもSphinxで出来るよ
-ドキュメントツールSphinxのちょっと変わった利用法-
Date: 2021/1/24
Author:
Event:
Hashtag:
Kazuya Takei
July Tech Festa 2021 winter
#JTF2021w_d
Slide 2
Slide 2 text
イントロ
🟦 >
🟦 >
🟦
Slide 3
Slide 3 text
CfPより
推しテク=Sphinx 枠です
ドキュメンテーション作成や技術書執筆
にも使えるドキュメンテーションツー
ル、Sphinx。 単純なHTML生成としてだ
けではなく、プレゼンテーションにも使
ってみませんか？
Sphinxにおけるプレゼンテーションの事
例を追いつつ、自作ライブラリの紹介な
どを行いたいと思います。
Slide 4
Slide 4 text
自己紹介
Kazuya Takei
NIJIBOX Co., Ltd
サーバーサイドエンジニア
アーキテクト
@attakei as 雑食系エンジニア
and more
Twitter
GitHub
Slide 5
Slide 5 text
自己紹介
July Tech Festa
2018: WebUSBによって広がる、
NFCを取り扱う世界
2020: Web制作において、プレビ
ューにあえてCloudRun(と
Firebase)を使う
2021w: プレゼン？それもSphinx
で出来るよ (New!)
Slide 6
Slide 6 text
注意事項
1. 今回は、個人エンジニアとしての推しテク紹介です。
この推しテクは自身が社内用にも使ってたりします
が、自分しか使ってません。
2. スライド書いてたら、ほとんどコードが出てきません
でした。
Slide 7
Slide 7 text
主に話すこと
ゴール:「Sphinxでプレゼンテーションができる」
Sphinxと普段の役割
Sphinxとプレゼンテーション
SphinxとReveal.js
Slide 8
Slide 8 text
Sphinxと普段の役割
➡ >
🟦 >
🟦
Slide 9
Slide 9 text
Sphinx
3行で
複数の出力形式に対応した
拡張性の高い
Python製ドキュメンテーションビルダー
Slide 10
Slide 10 text
ドキュメンテーションビルダー
ドキュメントのソースから
ドキュメント間の相互参照
階層構造の構築
ソースコードハイライト
etc
を行い、ドキュメント全体を組み立てる
SOURCES Sphinx DOCUMENT
A
TION
Slide 11
Slide 11 text
Sphinxが取り扱うソース
reStructuredText
Markdown
(etc)
.rst
.md
Sphinx DOCUMENT
A
TION
Slide 12
Slide 12 text
Sphinxが取り扱うビルド先
HTML
ePub
PDF(LaTex)
man
(etc)
SOURCES(.md , .rst) Sphinx HTML,EPUB
PDF
Slide 13
Slide 13 text
Sphinxを使ったサイト
いっぱいある
... Python本体
... Python製Webアプリケーションフレームワーク
... Python製の数値計算ライブラリ
...その他、Pythonパッケージいっぱい
Python documentation
Django documentation
NumPy Manual
Slide 14
Slide 14 text
Sphinxを使ったサイト
まだまだある
... Python製の構成管理ツール
... Python製のインスタンス初期設定ツール
... PHP製のデータベース操作Webアプリ
Ansible documentation
cloud-init Documentation
phpMyAdmin documentation
Slide 15
Slide 15 text
Sphinxを使ったサイト
まだまだある
... 電子書籍管理ツール
... Linux向けアプリケーションパッケージャー
... 名前の通り
calibre User Manual
Flatpak
Ubuntu packaging guide
Slide 16
Slide 16 text
Sphinxを使った書籍
(書籍執筆のどこかの工程でSphinxを使っているもの)
Go言語による並行処理
Pythonプロフェッショナルプログラミング第3版
独学プログラマー
エキスパートPythonプログラミング改訂2版
仕事ではじめる機械学習
Slide 17
Slide 17 text
-> NEXT ->
Slide 18
Slide 18 text
Sphinxとプレゼンテーショ
ン
☑ >
➡ >
🟦
… 対象者：プレゼン系ソフトウェアを使いたがらない方 /
プレゼン資料もGit管理してみたい方
Slide 19
Slide 19 text
プレゼン系ソフトウェアって？
いわゆるこの辺を指します
Microsoft PowerPoint
Keynote
Google スライド
Slide 20
Slide 20 text
「プレゼン系ソフト」を使わずにプレ
ゼンをする
HTMLでプレゼン
PDFでプレゼン
Unityでプレゼン
ターミナルでTelnet接続したらプレゼン
Slide 21
Slide 21 text
HTMLでプレゼンすると何がいいか
主なメリット
OSを選ばない
ファイルをGit管理しやすい
（デメリット）
公開・共有にひと手間かかる
ブラウザは選ぶ
Slide 22
Slide 22 text
HTMLでプレゼンすると何がいいか
1:OSを選ばない
ブラウザベースの表示なので、端末も選ばない
PC
タブレット
スマホ
ただしブラウザ依存の実装した場合は要注意
Chromeは新しすぎ
IEは忘れる
Slide 23
Slide 23 text
HTMLでプレゼンすると何がいいか
2:ファイルをGit管理しやすい
リソースが分離した状態なので、差し替えなどが比較
的容易
差分がわかりやすい(別テキストからHTMLを生成する
場合に顕著)
CI/CDしやすい(GitHub Pagesなど)
Slide 24
Slide 24 text
Sphinxが取り扱うビルド先(再掲)
HTML
ePub
PDF
man
(etc)
Slide 25
Slide 25 text
Sphinxが取り扱うビルド先(再掲)
HTML <= こっち
ePub
PDF
man
(etc)
Slide 26
Slide 26 text
「SphinxでHTMLプレゼンテーショ
ン」を実現するには
基本的には、
なにかしらのHTMLプレゼン用ライブラリを準備して
HTML+JSを出力するテーマ・拡張を用意する
Slide 27
Slide 27 text
HTMLプレゼンテーション用ライブラ
リ
Google I/O 2012 slide
Go talks
Impress.js
Reveal.js
Remark
(more...)
Slide 28
Slide 28 text
HTMLプレゼンを使うためのSphinx拡
張集
hieroglyph
sphinxjp.themes.gopher
sphinxjp.themes.impressjs
sphinxjp.themes.reveajs
sphinxjp.themes.s6
sphinx-revealjs
Slide 29
Slide 29 text
-> NEXT ->
ここからのメインは sphinx-revealjs
Slide 30
Slide 30 text
SphinxとReveal.js
☑ > ☑ >
➡
Slide 31
Slide 31 text
Reveal.js
多機能な、HTMLプレゼンテーション用のフレームワーク
http://revealjs.com/
Slide 32
Slide 32 text
こんなことができる
縦横遷移による、ネストされたセクションの表現
様々なページ遷移アニメーション
PDFエクスポート機能
プラグインによる拡張
数式サポート
シンタックスハイライト
スピーカーノート
Markdownソースの直接変換
Slide 33
Slide 33 text
HTMLプレゼンを使うためのSphinx拡
張集(再掲)
hieroglyph
sphinxjp.themes.gopher
sphinxjp.themes.impressjs
sphinxjp.themes.reveajs
sphinxjp.themes.s6
sphinx-revealjs <= 作った
Slide 34
Slide 34 text
sphinx-revealjs
作りました（最近、ver1.0に）
Markdownプラグインに近い感覚で、RSTをReveal.js
プレゼンにする拡張
基本機能は揃ってる...はず
階層によるネストされたセクション
テーマの切り替え
プラグインの呼び出し
Reveal.jsと競合しない範囲で、既存のSphinx拡張を使
い回せる
https://github.com/attakei/sphinx-revealjs
Slide 35
Slide 35 text
sphinx-revealjs
このスライド1枚目のサンプル(ソース)
================================
プレゼン？それもSphinxで出来るよ
================================
-ドキュメントツールSphinxのちょっと変わった利用法-
:Date: 2021/1/24
:Author: `Kazuya Takei `_
:Event: `July Tech Festa 2021 winter `_
:Hashtag: `#jtf2021w_d `_
.. include:: _sections/introduction.rst
Slide 37
Slide 37 text
sphinx-revealjs
デモをどうぞ
=> https://attakei.github.io/sphinx-revealjs
Slide 38
Slide 38 text
sphinx-revealjs
デモから一部抜粋
===============
sphinx-revealjs
===============
:Based version: 1.0.0
:Released: 2020-12-27
Overview
========
What is this?
-------------
Sphinx extension to build Revealjs presenta
Features
--------
Slide 39
Slide 39 text
もう一歩変わった使い方
「ドキュメンテーション」と「プレゼンテーション」
をまとめて作成
Qiita記事のスライドモード的な使い方
https://github.com/attakei-sandbox/sphinx-
revealjs-demo
Slide 40
Slide 40 text
モチベーションの話
欲しかったけど、軽く探して見つからなかった
プラグイン開発
コア部分は基本的にSphinxに任せてる
「Reveal.jsとしてHTML出力させる」ためのこと
だけ実装すれば良い
ドッグフーディングの素材
自分のLTのお供に
Pythonパッケージングの素体に
Slide 41
Slide 41 text
発表してみた
ある程度まともに動いたところで、SphinxCon JPに飛び込
んでLTしてみました
Slide 42
Slide 42 text
発表してみた
これ以降、細かい改良を進めつつ、自分の発表のベースと
して積極的に利用しています
PyCon JP 2019
July Tech Festa 2020
Pycon JP 2020
July Tech Festa 2021 winter
=> 世界が広がっていく感じする
Slide 43
Slide 43 text
嬉しいこと
地味にスターが増えてる
海外のイベントで使われてた（最近だと国内でも）
Issue/PRをもらえてて、英語の勉強になってる
おまけ：これがきっかけで、Sphinxハッカソンに積極
参加するように
=> 他の人の世界も少し広がっていく感じする
Slide 44
Slide 44 text
まとめ
☑ > ☑ > ☑
Slide 45
Slide 45 text
プレゼンはSphinxで出来ます
Sphinxはドキュメンテーションビルダーだからこそ、
プレゼンテーションもできます
推しテクで色々やってたら、ちょっと自分の世界が広
がりました
他の人の世界もちょっと広がったみたいです
sphinx-revealjsに興味がある方は、お試しとフィード
バックお願いします
🙇
Slide 46
Slide 46 text
参考情報集
Sphinx関連
Sphinx サイト
Sphinx 日本ユーザー会
Sphinx テーマ集
Slide 47
Slide 47 text
参考情報集
sphinx-revealjs関連
GitHubリポジトリ
ドキュメント
プレゼンテーションデモ
変換サンプル
Slide 48
Slide 48 text
参考情報集
その他
ソースだけでなく、CI/CDのサンプルにどうぞ
このスライドのソース
NIJIBOX Co., Ltd