2017-12-16

TAC2017►その他

[TAC:16] スライドショーをremarkで作る

はじめに

この記事はtaniho Advent Calendar 2017の16日目の記事です．

今日はスライド作成の手段として，PowerPoint(やlibreoffice impress)以外の方法もあるということを紹介したいと思います．具体的には，htmlベースのremarkの紹介です．非常にざっくりとした紹介ですが，雰囲気を知っていただければ嬉しいです．

remarkとは

まずはこちらのデモを見てください．

remark

“h”キーを押すとヘルプが出るので，興味のある人は押してみてください．発表者モード，複数画面モードなどが完備されています．

remarkはjavascriptで書かれたスライドショーツールです．ブラウザで動かすため，環境に依存しないスライドを作ることが出来ます．また，スライドの中身はMarkdown形式で書くことができるため，慣れている人はすぐにスライドを作り始めることが出来ます．

remarkを始める

まずはgithubからリポジトリをクローンしてきてください．

gnab/remark

remarkは3種類の動作方法があります．

boilerplate-local.html
すべてのファイルをローカルからロードします．htmlサーバを立ち上げることで利用できます．インターネットが利用できない可能性がある場合は，これを使えばいいと思います．
boilerplate-remote.html
jsファイルを外部(remote公式サーバ)からロードするようになっています．インターネットが使える環境の場合に利用できます．htmlサーバが不要なので(このファイルをブラウザで開くだけで利用できる)お手軽です．
boilerplate-single.html
jsファイル諸々が1つのファイルに埋め込まれています．このファイルを1つ持ち運ぶだけでどこでもプレゼンテーションができます．

僕はboilerplate-local.htmlを使い，Python3のhttp.serverを使ってプレビューを行っていました．次のコマンドを打つと，起動したディレクトリをルートとしたサーバが8000番ポートに立ち上がります．

1	python -m http.server 8000

ブラウザからhttp://localhost:8000/boilerplate-local.htmlを参照すれば，スライドが見られるはずです．

スライドを作る

さて，テンプレートのスライドが見られたところで，中身を作っていきます．Markdownでスライドを作れると言いましたが，htmlファイルとMarkdownファイルは分離したいと思うので，設定を行います．
以降はboilerplate-local.htmlをコピーしたslide.htmlを編集していくものとします．

slide.htmlの後ろの方を書き換え，同じディレクトリにあるスライドの中身.mdファイルを参照するようにします．

1
2
3

<script type="text/javascript">
  var slideshow = remark.create({sourceUrl: 'スライドの中身.md'});
</script>

Markdownの書き方はremark wikiを見ながら頑張っていきます．よく使うのは次の記法です．

# タイトル

## サブタイトル

???
発表用メモ

---
改ページ

![画像キャプション](img.jpg)

<img src="img2.jpg" width=350>
htmlタグも貼り付けられる

1. 箇条書きも
2. できる

.left-column[
こんな感じで(左)
]
.right-column[
デザインを使う(右)
]

デザインを改良する

htmlなので，cssを書き換えることでレイアウトや色合いなどを自由に変更できます．
デフォルトの設定はcssファイルにまとめてありますが，slide.html内で上書きすることが出来ます．ファイルを開き，上部の方に設定を書くことで上書きすることが出来ます．

<style type="text/css">
  /* Two-column layout */
  .left-column {
    color: #777;
    width: 20%;
    height: 92%;
    float: left;
  }
  .left-column h2:last-of-type, .left-column h3:last-child {
    color: #000;
  }
  .right-column {
    width: 75%;
    float: right;
    padding-top: 1em;
  }
</style>

……僕はこのあたり苦手なので，cssに強い人に聞いてください．上記の例では，2段組の幅と文字色を変更しています．

スライドを作った

ということでスライドを作ることが出来ました．初めて作った資料を公開してみますが，内容については当てにしないでください．

STM32で始めるマウス製作

まとめ

導入は少し力を入れる必要がありますが，慣れればサクサクスライドが作れるようになると思います．あとはデザインができる人頑張ってくれ！！

明日のtaniho Advent Calendar 2017は，金町駅周辺のごはん処を紹介しようと思います．

taniho's blog