コードとしてのプレゼンテーション、または Powerpoint を使用しなくなった理由

IT のキャリアの中で、同僚や顧客に対してプレゼンテーションを行ったり、人前で講演したりしたことは数十回あると思います。 長年にわたり、PowerPoint はスライド作成ツールとして私にとって自然で信頼できる選択肢でした。 しかし今年は状況が質的に変わった。 XNUMX月からXNUMX月にかけてXNUMXつの学会で講演する機会があり、報告用のスライドは短時間で、しかも質の高いものを作成する必要がありました。 スライドの視覚的なデザインに関する作業の部分を他の人に委任することについて疑問が生じました。 以前、デザイナーと協力して .pptx ファイルをメールで送信しようとしたことがありましたが、作業は混乱に陥りました。どのバージョンのスライドが「最新」であるか誰もわからず、パワーポイントの違いによりレイアウトが「動いて」しまいました。私たちのマシン上のバージョンとフォント。 そして、何か新しいことを試してみることにしました。 私はそれを試してみましたが、それ以来、PowerPoint に戻ろうとは考えていません。

私達は何が欲しいのか

約 XNUMX 年半前、当社は同じ問題に直面したため、プロジェクト ドキュメントの作成に Word を使用するのをやめました。Word は小さなドキュメントを入力するのには適していますが、量が増えると、コラボレーションや高品質のドキュメントの入手が困難になります。統一されたデザイン。 私たちの選択は当たった アスキードクター、そして私たちはこの選択に喜びをやめることはありませんが、これは別の記事のトピックです。 同じ頃、私たちは DevOps 原則の XNUMX つである「すべてをコードとして」の有効性を学びました。そのため、プレゼンテーション スライドを作成するための新しいテクノロジの要件の選択は非常に明白でした。

1. プレゼンテーションはマークアップ言語のプレーン テキスト ファイルである必要があります。
2. 私たちのスライドは開発プロジェクトに関するものであるため、外部システムに頼らずにマークアップを簡単に挿入できるようにする必要があります。
   • 構文を強調表示したコードフラグメント、
   • 矢印で結ばれた幾何学的形状の単純な図、
   • UML 図、フローチャートなど。
3. プレゼンテーションのドラフトはバージョン管理システムに保存する必要があります。
4. 完成したスライドの検証と組み立ては CI システムで行う必要があります。

現在、マークアップ言語でスライドを作成するには XNUMX つの基本的なオプションがあります。 パッケージ プロジェクター LaTeX または HTML/CSS を使用してスライドを作成するためのフレームワークの XNUMX つ (RevealJS, 発言, デッキ.js 他にもたくさんあります）。

私の魂は LaTeX にありますが、私の心の中では、私だけが使用するのではなく、より多くの人々に馴染みのあるソリューションを選択する必要があると考えました。 誰もが LaTeX を知っているわけではありません。また、日常業務が科学論文の執筆に関係していない場合、このシステムの巨大で複雑な世界に没頭する時間はおそらくありません。

ただし、HTML/CSS を習得することは必ずしも広く普及しているスキルではありません。たとえば、私は HTML/CSS に完全に習熟しているとは言えません。 幸いなことに、すでにおなじみの AsciiDoctor が役に立ちます。コンバーターです。 asciidoctor-revealjs AsciiDoctor マークアップを使用して RevealJS スライドを作成できます。 そして、学びやすく、誰でもアクセスできます。

スライドのコーディング方法

AsciiDoctor でのスライドのコーディングの本質を理解するには、具体的な例を示すのが最も簡単な方法です。 これらはすべて、今年の学会プレゼンテーション用に私が作成した実際のスライドからのものです。

タイトルとアイテムのリストが次々に開くスライド:

== Зачем нам Streams API?

[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабирование

結果

構文を強調表示したヘッダーとソース コード スニペット:

== Kafka Streams API: общая структура KStreams-приложения

[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции

Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----

結果

講演の準備として、コード デモは改訂と改善を繰り返します。そのため、「生のコード」をすばやくコピーしてスライドに直接貼り付ける機能は非常に貴重であり、構文の強調表示を気にせずにデモを最新の状態に保つことができます。

タイトル、イラスト、テキスト（スライド上のレイアウトはセル内で行われます） AsciiDoctor テーブル):

== Kafka Streams in Action

[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===

結果

タイトルが必要ない場合もありますが、要点を説明するには全画面画像だけが必要です。

[%notitle]
== Жить в легаси нелегко

image::swampman.jpg[canvas, size=cover]

結果

多くの場合、アイデアは「矢印で結ばれた四角形」の形の単純な図によって裏付けられる必要があります。 幸いなことに、AsciiDoctor はシステムに統合されています グラフビズ — 頂点と頂点間の接続の記述に基づいてグラフ図を記述できる言語。 Graphviz は学習に時間がかかりますが、提供されている例に基づくと、非常に簡単に実行できます。 これは次のようになります。

== Пишем “Bet Totalling App”

Какова сумма выплат по сделанным ставкам, если сыграет исход?

[graphviz, "counting-topology.png"]
-----
digraph G {
graph [ dpi = 150 ];
rankdir="LR";
node [fontsize=18; shape="circle"; fixedsize="true"; width="1.1"];
Store [shape="cylinder"; label="Local Store"; fixedsize="true"; width="1.5"]
Source -> MapVal -> Sum -> Sink
Sum -> Store [dir=both; label=" n "]
{rank = same; Store; Sum;}
}
-----

結果

図のキャプションを編集したり、矢印の方向を変更したりする必要がある場合、図をどこかに再描画してスライドに再挿入する代わりに、プレゼンテーション コード内で直接行うことができます。 これにより、スライドでの作業速度が大幅に向上します。

より複雑な例:

== Невоспроизводимая сборка
[graphviz, "unstable-update.png"]
-----
digraph G {
  rankdir="LR";
  graph [ dpi = 150 ];
  u -> r0;
  u[shape=plaintext; label="linter updaten+ 13 warnings"]
  r0[shape=point, width = 0]
  r1 -> r0[ arrowhead = none, label="master branch" ];
  r0-> r2 [];   b1 -> b4;  r1->b1
  r1[label="150nwarnings"]
  b1[label="± 0nwarnings"]
  b4[label="± 0nwarnings"]
  b4->r2
  r2[label="163nwarnings", color="red", xlabel=<<font color="red">merge blocked</font>>]
  {rank = same; u; r0; b4;}
}
-----

結果

ちなみに、Graphviz を試したり、ページ上の画像をデバッグしたりするのに便利です グラフビズオンライン.

最後に、フローチャート、クラス図、またはその他の標準化された図をスライドに挿入する必要がある場合は、AsciiDoctor と統合された別のシステムが役に立ちます。 プラントUML。 私の同僚のニコライ・ポタシニコフが、PlantUML の広範な機能について書きました。 別ポスト.

プレゼンテーション プロジェクトをバージョン管理システムに保存されたコードに変換すると、プレゼンテーションに関する共同作業を組織し、まずコンテンツ作成とデザインのタスクを分離することができます。 RevealJS のスライドのデザイン（フォント、背景、インデント）は CSS を使用して記述されます。 CSS に関する私の個人的なスキルを最もよく伝えるのは、 このGIF - でも、私よりもずっと器用に早く CSS を扱える人がいれば、怖いものではありません。 その結果、プレゼンテーションの締め切りが迫る中、Git を介してさまざまなファイルを同時に作業でき、メールで .pptx ファイルを送信する場合には不可能なコラボレーション速度を実現できることがわかりました。

スライドを含む HTML ページの構築

プレーン テキスト ソースは素晴らしいですが、それをプレゼンテーション自体にどのようにコンパイルしますか?

AsciiDoctor は Ruby で書かれたプロジェクトであり、それを実行するにはいくつかの方法があります。 まず、Ruby 言語をインストールして asciidoctor を直接実行できます。これはおそらく、Ruby 開発者にとって最も近い方法です。

Ruby のインストールに手間をかけたくない場合は、docker イメージを使用できます。 asciidoctor/docker-asciidoctorを起動すると、VOLUME を介してフォルダーをプロジェクト ソースに接続し、指定された場所で結果を取得できます。

私が選択したオプションはやや予想外に思えるかもしれませんが、Java 開発者としてはこれが最も便利です。 Ruby や Docker のインストールは必要ありませんが、Maven スクリプトを使用してスライドを生成できます。

ポイントとなるのは、このプロジェクトが JRuby - Ruby 言語の Java 実装は非常に優れているため、Ruby 用に作成されたほぼすべてのものを Java マシンで実行できます。また、AsciiDoctor の実行は JRuby の最も一般的な用途の XNUMX つです。

可用性 asciidoctor-maven-プラグイン Java プロジェクト (私たちが積極的に使用している) の一部である AsciiDoctor ドキュメントを収集できます。 同時に、AsciiDoctor と JRuby は Maven によって自動的にダウンロードされ、AsciiDoctor は JRuby 環境で実行されます。マシンに何もインストールする必要はありません。 (パッケージを除く) graphvizこれは、GraphViz または PlantUML グラフィックスを使用する場合に必要です。) .adoc ファイルをフォルダーに配置するだけです。 src/main/asciidoc/。 ここに ポムニクの例図付きのスライドを収集します。

スライドを PDF に変換する

スライドの HTML バージョンは十分に十分ですが、スライドの PDF バージョンが必要です。 まず、講演者に自分のラップトップを接続する機会が与えられない一部のカンファレンスでは、スライドが HTML 形式であることを期待せずに、「厳密に pptx または pdf 形式」で要求されることがあります。 次に、会議資料でファイルを公開するために、レポートで表示されたスライドの未編集バージョンを PDF 形式で主催者に送信するのが良い方法です。

幸いなことに、Node.js ユーティリティがこのタスクを処理します。 デッキテープ、に基づいて構築されています 人形 — Chrome ブラウザを管理するための自動化システム。 次のコマンドを使用して RevealJS プレゼンテーションを PDF に変換できます。

node decktape.js -s 3200x1800 --slides 1-500 
  reveal "file:///index.html?fragments=true" slides.pdf  

デッキテープを立ち上げる際に試行錯誤して見つけたXNUMXつのコツ。

• パラメータによる解像度 -s XNUMX 倍のマージンを持って指定する必要があります。そうしないと、変換結果に問題が発生する可能性があります。

• プレゼンテーションの HTML バージョンの URL ではパラメータを渡す必要があります ?fragments=true, これにより、スライドの中間状態ごとに個別の PDF ページが作成されます (たとえば、箇条書きが次々に表示される場合は、XNUMX つの箇条書きに対して XNUMX ページ)。 これにより、そのような PDF をレポート中のプレゼンテーションとして単独で使用できるようになります。

自動組み立てとWeb上での公開

バージョン管理システムに変更が加えられたときにスライドが自動的にコンパイルされると便利ですが、自動でコンパイルされたスライドがインターネット上に公開されて公開されるとさらに便利です。 インターネットからのスライドは、インターネットに接続された任意のマシンとプロジェクターから聴衆の前で簡単に「再生」できます。

仕事で GitHub を使用しているため、CI システムの自然な選択は次のとおりです。 トラビスCI、および既製のプレゼンテーションをホストするために - github.io。 github.io の背後にある考え方は、静的コンテンツはすべてブランチに投稿されるということです。 gh-pages GitHub 上のプロジェクトは、次の場所で利用可能になります。 <ваше имя>.gihub.io/<ваш проект>.

Maven を使用したページの HTML バージョンのコンパイル、デッキテープを使用した PDF への変換、結果のスレッドへのアップロードなど、完全な TravisCI 構成ファイル gh-pages github.io で公開する場合は次のようになります そう.

TravisCI 側でこのようなプロジェクトをビルドするには、環境変数を設定する必要があります。

• GH_REF — github.com/inponomarev/csa-hb のような値
• GH_TOKEN — GitHub アクセス トークン。 GitHub のプロファイル設定、[開発者設定] -> [個人アクセス トークン] から取得できます。 プレゼンテーションをパブリック リポジトリにアップロードする場合、このトークンにはアクセス レベル「パブリック リポジトリへのアクセス」のみを指定するだけで十分です。
• GH_USER_EMAIL / GH_USER_NAME — スレッドへのプッシュが実行される名前と電子メールのペア gh-pages.

したがって、GitHub でプレゼンテーション コードをコミットするたびに、スライドが HTML および PDF 形式で自動的に再構築され、github.io に再アップロードされます。 (もちろん、最終的に公開したいプレゼンテーションのみを github.io にアップロードする必要があります。)

プロジェクトの例

最後に、カスタマイズされた Maven スクリプトと Travis-CI の CI 構成を含むプレゼンテーション プロジェクトの例へのリンクをいくつか示します。これらは、独自のプレゼンテーション プロジェクトを作成するときに複製して使用できます。

• https://github.com/inponomarev/kstreams-examples (JPoint 2019 での私の講演)

• https://github.com/inponomarev/csa-hb (ハイゼンバグ2019のレポート)

さよならパワーポイント！ 技術的なプレゼンテーションにあなたを必要とすることはないと思います:)

出所： habr.com