Scepter914 Website
Table of contents

このページは

スライド作成をwikiに噛ましたい

  • パワポで一々開いて「あのスライドどこだっけー」ってやりたくない
    • 検索性がアレ
  • wikiの中にスライドの情報を突っ込みたい
    • wikiに噛ませれば検索性が上がるだろう
  • そもそもMarkdownでスライド作れるツールを使うとハッピーなのでは
    • Markdownでスライドさっと作成できれば便利だし
  • Markdownファイルとしてwikiでページをつくって，それをスライドに変換する流れにすればいいじゃん

reveal.js

  • Markdown記法でスライドを作成できる神ツール
  • 詳しくは色々とggってください
  • 公式 https://revealjs.com/#/

pandoc

  • reveal.jsはhtmlファイルの中にMarkdown記法で書いていくスタイル
  • Markdown別ファイルにするにはローカルサーバーを立てる必要がある
  • ぶっちゃけめんどくさい
  • そこでpandocを使う
  • pandoc
    • 文書を別の形式に変える神ツール
    • 詳しくはggってください
    • 今回はfrom markdown to revealjsを使います

環境構築

wiki/
　└ reveal.js/
　　├ css
　　├ js
　　├ lib
　　└ pic
  • .gitignoreに/reveal.jsを追加する
  • 自分の設定ファイル https://github.com/scepter914/gollum_configのslide_default.htmlをダウンロード
    • 適当な場所に置く(自分は$HOME/wiki/uploads/code/pandoc_template/slide_default.htmlに置いている)
  • slide.shを作成する
    • ファイル場所は適宜
var=`grep -ic '# ' $1`
echo "スライド数"$var  
cp $1 ~/wiki/reveal.js/index.md
cp -r ./pic ~/wiki/reveal.js/
cd ~/wiki/reveal.js/
pandoc -f markdown index.md -t revealjs -V theme:black --template=$HOME/wiki/uploads/code/pandoc_template/slide_default.html --highlight-style=espresso --slide-level=2 -o index.html
google-chrome index.html
  • .bashrc等に
    • alias slide="$HOME/wiki/uploads/code/slide.sh"
    • を追加

スライド作成

  1. wiki内でスライド用のディレクトリを作成する
    • 階層構造は以下の通り
slide/
　├ hoge.md
　└ pic/
　　├ image.jpg
　　└ image2.jpg
  1. mdファイルを作成する(hoge.mdとする)
% タイトル
% 名前
% 日付
スライド

### ページ1-1(###で大きさが決まる)

- リスト
- リスト
- リスト

---

#### サブページ1-2はスライドが下側にできる

1. 番号付き項目
1. 番号付き項目
1. 番号付き項目

---

### ページ2
ベタ書き <br>
ベタ書き2 <br>
空行を入れたい時はスペースを2こ入れる  
<b><!-- --></b>  
前方になんらかの文字が必要なのでコメントを入れる  

---

#### サブページ2-1

- 上下に空行がないと左寄せになる
![キャプション1横並び](pic/image.jpg){width=320px}
![キャプション2横並び](pic/image2.jpg){width=320px}

- 上下に空行があると中央そろえになる

![キャプション1中央縦並び](pic/image.jpg){width=320px}

![キャプション2中央縦並び](pic/image2.jpg){width=320px}

- video
<video data-autoplay src="pic/video.mp4"></video>
    1. slide.sh hoge.md で起動するはず

reveal.jsのTips

  • /picでなく/uploadsに画像等を纏めたい場合
    • uploads/image.jpeg
    • revealjs内に，uploads全てをコピーする
    • slide.shを適宜書き換えてください
  • よく使う操作
    • s 時間やスライドの表示
  • 凝ったスライド作りたい時
    • 凝るにはhtmlのtemplateを頑張ればおーけー
    • というかcss頑張ってください
    • というかパワポ使え感
  • 表題で大文字化を無効
    • theme の css で表題のスタイルに text-transform: uppercase; を無効にする
<style type="text/css">
  .reveal h1,
  .reveal h2,
  .reveal h3,
  .reveal h4,
  .reveal h5,
  .reveal h6 {
    text-transform: none;
  }
</style>
  • PDF印刷
    • URLの最後に?print-pdfと書き加えるとPDF用のレイアウトになる
    • ブラウザの印刷機能でPDFに変換
    • なんか白くて変な場合は 背景のグラフィック にチェックを入れる(Chromeの場合?)
    • 画像だけが分かれちゃった場合は画像のサイズを小さくする。