コーダー、これがあなたが好きになるJavaScriptプレゼンテーションツールです

私の仕事での私の仕事の1つは、技術的なプレゼンテーションを開発して維持することです。過去に、私はこれらのプレゼンテーションをAppleの基調講演形式でGoogleドライブに保存しました。Keynoteは、多くのオフィススイートアプリケーションと同様に、ファイルを大きくて太いバイナリブロブとして保存します。複数の人がプレゼンテーションを変更して更新しようとすると、問題が発生します。人々は静かにお互いの変化を覆い隠します。

この煩わしさはKeynoteに限ったことではありません。PowerPointやその他の形式でも同じ問題が発生します。PowerPointには理論的にはXMLベースのファイルがありますが、Zipでラップされているため、ファイルレベルで変更をマージする実用的な方法はありません。

Keynoteのもう1つの問題は、スライドマスターがありますが、スライドに貼り付けるものは慎重にフォーマットする必要があることです。WYSIWIGは素晴らしいと同時にひどいです。スライドに貼り付けるものは、愛情を込めてフォーマットする必要があります。これは通常、マスターが一貫している一方で、コンテンツの形式が異なることが多いことを意味します。間隔が少しずれ、フォントの選択がブランドから外れ、色が乱暴になります。

理想的な世界では、プレゼンテーションをコードとまったく同じようにGitHubに保存し、スタイルを知らなくてもMarkdownのような単純化された形式でプレゼンテーションを記述します。UI /ブランドの男やギャルは、箇条書きの散文で哲学を練りながら、CSSですべての「きれいなこと」を前もって行うことができます。

それこそが、オープンソースのブラウザー内スライドショーツールRemark.jsでできることです。 

注目に値する技術プレゼンテーション

Remark.jsを使用すると、1つのHTMLファイルと多数のCSSファイルがありますが、プレゼンテーションはMarkdownのフレーバーで分離されています。すべてをGitHubに保存できます。聴衆があなたの素晴らしいビジュアルを見ている間、あなたがあなたのメモを見ることができるプレゼンターモードさえあります。

名前が示すように、Remark.jsはJavaScriptライブラリです。他のJavaScriptライブラリと同様に、50の代替実装があります。私にとって視覚的に最も印象的なのはReveal.jsです。

Remark.jsを使用すると、HTMLまたは拡張機能を散りばめたMarkdownで完全に記述できますが、Reveal.jsを使用すると、実際にHTMLを学習できます。私は90年代から履歴書でHTMLを知っていると言ってきましたが、それは絵筆の使い方を知っているのとまったく同じです。私は両方で醜いものを作ります。そのため、Remark.jsを使用することを好みます。

これが私のプレゼンテーションの1つからの実際のスライドのマークダウンとスライドテキストです:

-

class: left, top

# Fusion Concepts: Collection

* Contains documents

* Associated with actual indexed data and schema

* Associated with a named configuration in Zookeeper

* Logical index that can be spread across multiple servers

* Routing strategy that defines how documents get assigned to shards replica placement strategy that defines how many copies to keep of each document in the collections

* A collection as it exists on an instance of Solr is called a “Core”

???

Script: In short a collection is a logical index that is tied to a whole lot of configuration and process management in the cluster, including how it is configured, replicated, and routed.

-

これが私の電話でどのように見えるかです(ちなみにChromecastも可能です):

アンドリューC.オリバー

これがプレゼンターモードです!スライドを設定できるので、画面をプロンプターのように読むことができます(実際には、そうするのが面倒なので、実際には読みません):

アンドリューC.オリバー

プレゼンテーションのクローンを作成すると、プレゼンターモードに入った場合でも、ブラウザーウィンドウが同期されます。視聴者には、最初のスクリーンショットのビューが表示されます。2番目にビューが表示されます。

悪いもの

Remark.jsは完璧にはほど遠いです。技術的なプレゼンテーションを行う技術者にとっては素晴らしいことですが、営業チームにそれを課すことはしません。GitHubアカウントをお持ちの場合は、PowerPointやKeynoteの気まぐれなWYSIWYGエディターよりもMarkdownの方がおそらく快適です。Outlookで電子メールを進んで読んだ場合、おそらく気に入らないでしょう。

これを使用するには、PythonSimpleHTTPServerのようなローカルWebサーバーが必要です。Chromeを使うこともお勧めします。クリックするとFirefoxが同期しなくなりました。プレゼンタービューは便利ですが、スライド間を頻繁に行き来する人のためのサムネイルビューはありません。

プレゼンテーションを個別のファイルとして整理する場合は、それぞれのプレゼンテーションモードを再クローン化して再入力する必要があります。画像とタイトルスライドを正しく表示するには、CSSを微調整する必要がある場合があります。`` `backticsでエスケープしないコードは、マングルされます(特に正規表現)。また、CSSを微調整して、PDFへの印刷を正しく並べる必要があります。

一度コツをつかんでCSSを完成させると、Remark.J / Markdownで「もう1つ」のプレゼンテーションを作成するための比較作業はPowerPointやKeynoteよりも低くなります。GitHubでバージョンを管理する方がはるかに優れており、携帯電話やタブレットから提示できることを知っていると嬉しくなります。次回会議を開き、資料がすべて以前のバージョンに戻ったことに気付いたときは、Remark.jsについて考えてみてください。