概要

プレゼンするのに reveal.js を使ってみてよかったんですが、プレゼンの構成として、chapter があって、それに各スライドが所属している、って形にしたくて、やっつけで chapter 機能をつけてみた、という話です。

ここでいうところの chapter 機能

次の動画における、左上ににゅるっと出てくる「麦・大豆＆野菜」とか「生物多様性」とかの部分。各スライドは chapter に所属していて、複数個の chapter でプレゼン資料が成り立っている、という構成です。

実装方針

水呑百姓がきれいなコードを書いている暇はないのでやっつけ
- reveal.js に手は入れない
- とりあえず動けばよくて、プラグインとして整備したりしない
- プレゼン資料を作るごとにコードに手を入れるのも持さない
出先でのプレゼンなのでローカル WEB サーバは動かさない前提で

コード

javascript

ほんと、やっつけです。きれいに書き直し、自由に使ってください。
グローバル汚染上等。ES6 って何？　おいしいの？

chapter.js

const Chapterion = {
  current: {
    c: 0
  },
  chapters: [],
};

Chapterion.Chapter = function(section, idx, elm) {
  this.section = section;
  section.dataset.chapterIndex = idx;
  this.elm = elm;
  elm.dataset.chapterIndex = idx;
  this.index = idx;
  let text = section.dataset.chapter;
  if (text) {
    elm.innerHTML = text;
    this.activity = true;
  } else {
    this.activity = false;
  }
};

Chapterion.init = function() {
  const self = this;
  const header = document.querySelector("header");

  document.querySelectorAll("div.reveal section").forEach(function(section, i) \
{
    let elm = document.createElement("div");
    self.chapters.push(new Chapterion.Chapter(section, i, elm));
    header.appendChild(elm);
  });
};

Chapterion.flip = function(event) {
  let newChapterIndex = event.currentSlide.dataset.chapterIndex;
  if (! newChapterIndex) {
    newChapterIndex = event.currentSlide.offsetParent.dataset.chapterIndex;
  }
  if (newChapterIndex == this.current.c) return;
  this.chapters.forEach(function(chapter) {
    const section = chapter.section;
    if (chapter.activity && chapter.index == newChapterIndex) {
      console.log('ADD', newChapterIndex, chapter.index);
      chapter.elm.classList.add('shown');
    } else {
      console.log('REM', newChapterIndex, chapter.index);
      chapter.elm.classList.remove('shown');
    }
  });
  this.current.c = newChapterIndex;
};

スタイルシート

スタイルはこんな感じで。チャプターは HTML 的には header 要素です。

chapter.css

header {
  clear: both;

  position: absolute;
  top: 5px;
  left: 5px;

  z-index: 20;
}

header div {
  text-align: center;

  color: #fff;

  transition: all 300ms 0s ease-in;

  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: uppercase;
  text-shadow: none;

  word-wrap: break-word;

  display: block;

  font-size: 0em;
}

header div.shown {
  font-size: 2.5em;

  margin: 0 auto;
  padding: 10px;

  box-shadow: 1px 2px 3px #000;
  border-radius: 15px;
  background-color: rgba(0, 255, 0, 0.3);
}

Markup/Markdown

プレゼンの html はこんな感じで。
chapter にしたい文字列を section の data-chapter 属性として書いときます。
この section 内では Markdown で複数のスライドを書きます。

index.html


    <section data-chapter="麦・大豆＆野菜"
             data-markdown
             data-separator="^\n---\n$"
             data-separator-vertical="^\n>>>\n$">

あ、上記 css をリンクして、上記 js を読み込んでおくのは、もちろん忘れずに。
Chapterion.init(); で初期化して、あとは slidechagenged イベントを拾って Chapterion.flip() を呼ぶだけです。