💻
Markdownでスライドが作れるRemarkをテンプレート機構でちょっと便利に
Remarkとは
以下の記事などをご参照ください。
問題点
スライドを作るごとにHTMLおよびCSSを丸ごと複製しなければいけないのがちょっとなー。
できればベースのテンプレートに対してMarkdownファイルを追加するだけで新しいスライドを作りたいし、何ならCSSのテーマとかも複数管理して手軽に切り替えられるようにしたい。
そういうの作った
http://ttskch.github.io/remarkbase/ (GitHub)
使い方
インストール
-$ git clone git@github.com:qckanemoto/remarkbase.git
+$ git clone git@github.com:ttskch/remarkbase.git
$ cd remarkbase
$ npm install --global gulp # もう入ってる人は不要
$ npm install
$ gulp serve # ブラウザにサンプルスライドが表示される
スライドを書く
$ vi slides/some-new-slide.md # Markdownでスライドを書く
$ gulp slide --target slides/some-new-slide.md # スライドをリンクする
$ gulp serve
gulp serve 中は監視タスクも実行されてファイルの変更を保存すると自動でブラウザの更新まで実行されるので、実際には以下のような手順になると思います。
$ touch slides/some-new-slide.md
$ gulp slide --target slides/some-new-slide.md
$ gulp serve
# -> お好きなエディタでsome-new-slide.mdを編集
スライドの中身の書き方は 公式のWiki 参照。
テーマを自作する
$ mkdir themes/your-own-theme
$ touch themes/your-own-theme/style.css
$ gulp theme -t themes/your-own-theme # テーマをリンクする
$ gulp serve
# -> お好きなエディタでstyle.cssを編集
テーマディレクトリ内の .css（または .scss）および .js ファイルが自動で認識されます。
具体的な中身は デフォルトテーマのCSS を参考にしてください。
プレゼンテーションするときの操作
gulp serve- ブラウザ上で
cキー押下（スライド画面を複製） - 複製した方をプロジェクタ側のディスプレイへ移動
- プロジェクタ側の画面で
fキー押下（フルスクリーン表示） - 手元の画面で
pキー押下（プレゼンテーションモード表示）
これで、手元で スライドノート や経過時間を見ながらプレゼンテーションができます。（複製した画面はちゃんとページ移動が同期されます）
| 手元の画面 | プロジェクタ側の画面 |
|---|---|
 |
 |
Discussion