この記事はKMCアドベントカレンダー19日目の記事です。 昨日の記事はikubaku君(KMC ID: polaris)のUnity 2018.3 の新機能でした。 この内容、先日の例会講座で聞いたやつですね。
理想のスライドツールは次の3つの要素を記述したファイルをHTML/CSS形式に変換し、JavaScriptで実装されたプレゼンテーションツールを用いてブラウザ上に描画する。- スライドの内容となる文章
- 文章の配置を決める座標指定
- スライドの雰囲気を決める配色
KMC 6回生のhatsusatoです。 みなさんはスライドを作りますか？ KMCでは、例会講座のためにスライドを作ったり、勉強会・各種プロジェクトにおいて他の部員に対して何某かを説明するスライドを作ったりと、 日常的に頻繁にスライド作りが行われています。 そのうちのいくつかはSlideShareなどのサービスを用いて公開1されており、またKMCのサーバ上には非公開のスライドも多く保存されています。
みなさんはお使いのスライドツールに満足していますか。 私は満足していません。 今までにいくつかのツールを使ってきましたが、どのツールにも満足することはできず、やがて他のツールを探して乗り換えるということを繰り返してきました。 この記事では、これまでに使ったことのあるツールに対する不満をつらつらと述べようと思います。 そして、それらの不満を解決する理想のスライドツールについて少し語ってみようと思います。
まずは、私がこれまでに使ってきたスライドツールの不満をぶつけてみようと思います。
KMCで初めてのスライドはLibreOffice Impressを使って作りました。 ImpressはWindowsで言うところのPowerPoint、Macで言うところのKeynoteにあたるソフトです。 最初のうちは特に問題なく使っていたのですが、gitを学んでバージョン管理をするようになると、不満を感じるようになりました。 それは、スライドファイルが
- テキストでなくバイナリであるためにバージョン管理に向かない
という点です。
また、その頃には端末(CLI)にも慣れて、タッチパッドなどを用いずにキーボードのみで入力を行うことの快適さを感じていたので、
- マウス等を用いてオブジェクトを配置しなければならない
という制限が煩わしく思うようになっていきました。
そこでBeamerを始めました。 BeamerはLaTeXでスライドを作るためのパッケージです。 そのスライドファイルはLaTeXソースすなわちテキストなので、 容易にgit管理 できます。 テキストエディタを用いて作成できる ので、スライド作成のたびにタッチパッドで指紋を削る必要はなくなりました。 Impressの問題点は解決されたように思われますが、今度はこれまでとは別の問題点に悩まされることになります。
最大の問題点は、
- レイアウトがあまり柔軟でない
という点です。 LaTeXは、文章の構造をコマンドを用いて表現するだけで、いい感じに読みやすいレイアウトの組版を行ってくれます。 これにより、文章のレイアウトにそれほど注意を払う必要がなくなり文章の内容に集中できるので、とても便利な機能です。 その反面、LaTeXはレイアウトの調整が得意ではなく、思い通りのレイアウトにするには骨の折れるオプション指定が必要となります。 スライドにおいては細かいレイアウトの調整がほしい場面も多いため、この特徴が足枷となってしまいます。
実際に表示されるスライドの内容に比べて
- マークアップのための記述量が多い
のもBeamerの面倒くさいところです。
Beamerのソースファイルには大量の \begin, \end が溢れ、コンテンツの大半をマークアップが占めることになります。
そもそも根本的に、Beamerが
- プレゼンテーションツールではない
ことも問題です。 BeamerはあくまでLaTeXのソースファイルをスライド風のPDFに変換できるだけで、プレゼンテーションはPDFビューワに任せきりです。 PowerPointなどのツールにあるような、異なるディスプレイに同期した内容を表示したりメモを表示したりするなどの、 リッチなプレゼンテーション環境を利用できないのは不便です。
結局、現在はremarkというツールを利用しています。 remarkは拡張Markdownで記述したスライド内容をJavaScriptを用いてHTML/CSS形式のスライドに変換するツールです。
remarkにはスライドの内容中に好きなclass名を指定した <div> タグや <span> タグを挿入する機能があります。
これを用いることで、スライド中の任意の文章に任意のスタイルを適用できるので、remarkは CSSと同程度に柔軟 であると言えます。
remarkの マークアップが軽量 であるので、レイアウトの指定もあまり煩雑でなく、コンテンツに集中することができます。
例えば、ページの区切りは --- のみからなる行を挿入することで表現されるなど、非常に簡単です。
remarkにはシンプルな プレゼンテーション機能が実装 されています。 矢印キーなどによるページ遷移や全画面表示はもちろんのこと、 メモやストップウォッチを表示するプレゼンテーションモードや、スライドの複数画面表示機能なども備えています。
これだけ揃えばBeamerの不満点はすべて解消されます。 使い始めた当初はCSSにあまり慣れていないせいもあり、見た目の寂しいスライドになりがちでしたが、 現在ではCSSをコツコツ書き溜めた甲斐あって見やすいスライドをより早く作れるようになりました。
しかし、最近またかゆいところに手が届かなくて不満を感じるようになりました。 remarkでは、図や画像などの挿入自体は簡単に記述できるのですが、それを
- スライド中の狙った位置に挿入するのが難しい
という問題です。
狙った位置に挿入するには position プロパティを使うことになると思いますが、その際に top, left などの数値を指定する必要があります。
座標指定の数値は他のオブジェクトの位置関係やサイズに依存するので、計算がとても大変です。
そもそもHTMLは、どのブラウジング環境においても程よい見た目を提供できることに主眼をおいて作られています[要出典]。 しかし、スライドのサイズはほぼ一定です。 大抵4:3か16:9の2択で、縦長のスライドを作る人はいません。 このスライド特有の特徴を活かせば、オブジェクトの配置を容易にするマークアップも可能ではないかと思うのです。
これまでの経験を踏まえて、私の考える理想のスライドツールについてすこし語ってみようと思います。
まず、スライド作成をgit管理できるようにするため、スライドのソースファイルはテキストベースで記述され、それを何らかの方法で変換して視覚化するという構造が基本になります。 変換されたあとのスライドがHTML/CSS/JavaScriptで構成されるのは揺るぎようがないように思います。 なぜなら、CSSは柔軟だし、ブラウザはどこにでもあって便利だからです。 ブラウザのレンダリングエンジンに立ち向かって、代替を考えるのは無謀だと思います。
従って、問題は変換元のソースファイルはどのようにしてスライドを表現するのかということになります。 私は、次の3つの要素を統合することでスライドを構成するのがよいのではないかという考えに至りました。
- コンテンツ
スライド中の文章です。 各ページの内容を何らかのマークアップで区切って記述します。 スライド全体のテーマを先頭に記述し、各ページのレイアウトをページごとに指定します。 見出し、2段組みコンテンツの左側・右側といった、レイアウト指定の異なるまとまりごとにマークアップで区切ります。 文字の強調などの指定は文章中にマークアップし、配色などの強調の方法は、先頭に記述したテーマで指定します。 軽量なマークアップ言語の採用によって、コンテンツに集中できるようにします。
- レイアウト
コンテンツの配置の方法です。 見出し、2段組みコンテンツの左側・右側といった要素ごとの配置場所を指定します。 タイトルページ用、見出し+1段組みコンテンツ用、見出し+2段組みコンテンツ用、というように、スライドレイアウトの種類の数だけ用意します。 図などの表示位置もここで指定するので、レイアウトの継承機能もあると便利だと思います。 例えば、タイトルページレイアウトを継承して、隅にロゴ画像を表示するレイアウトを追加するなど。
- テーマ
スライド全体の雰囲気を指定します。 スライドの背景やコンテンツの文字色・強調色などを一体感のある配色になるように調整します。 テーマの差し替えが簡単にできると、いいですね。
従来のスライドツールはこれらの3要素がないまぜになっているように思います。 これらの3要素は役割が全く異なるので、別々の形式で記述されるべきでしょう。 特にレイアウトとテーマは、デザイン・配色に詳しい人に作ってもらったものを、プリセットとしてたくさん搭載してくれると助かりそうです。 テキストベースであれば、それらのプリセットを元にアレンジするのも容易です。
こんなスライドツールがあったらいいな、という理想は語りましたが、実装する予定はありません。 いや、暇があったらやりたいんですけどね。 そんな暇ないくらいに忙しいんですよ。 なので、アイデアだけ書いて丸投げです。 誰か実装してくれたら嬉しいな。 その時は利用者第1号としてデバッグに励ませていただきます。
あるいは、「それと同じこと、このツールでできるよ！」みたいなことがあれば、教えてください。 remarkから乗り換えます。
KMCアドベントカレンダーの明日の記事はtron君の記事の予定です。 今年のKMCアドベントカレンダーは遅刻が相次いでいて不穏2ですが、tron君ならきっと間に合わせてくれるんじゃないかな。
1 実際にはみんな面倒臭がってあまり公開されていない。
2 そう言っているそばから遅刻した。