発表しながら簡単なDEMOをする

もう10月です。はやい...。

先日、発表をする機会がありまして、
前日まで資料に手を付けず、あたふたしておりました。
会社のPCにはOfficeあるけど、プライベートのPCにはOfficeもなく、
グーグルドライブを使うか…どうするかと考えたわけです。

結局、reveal.jsを使って資料をささっと作ってみました。

何ができるの?

HTMLと、Markdownを使ってかっこいいスライドが簡単に作れます。
非常に便利できました。

資料中にコードを書きたいときにも、<pre><code></code></pre>で囲ってやれば、
それなりに見えますし、Markdownならば、```で囲えばなんのもっと楽に書くことができます。

コードの実行結果

SlideShareなんかを見ていても、技術系のスライドには、
コードが書かれていることが比較的多いと思います。

大体、実行結果とかのキャプチャが貼り付けてあるか、
別でDEMOとして見せるかの2択ですよね。

発表しつつ、ページの移動なく、その場で実行結果をDEMOできたら…

こんなことをふと思ったわけです。
既出かとは思いますが…。

さて、reveal.jsはあくまで、revael.jsを<script>で読み込んで、
HTMLとかで書いていくことになります。

今回の発表はD3.jsの発表をしたのですが、
ここでreveal.jsと一緒に<script src='d3.min.js'></script>をしたら、
簡単なDEMOしながら、資料書けるんじゃ?

やってみよう！

できました。

方法

Markdownで書いている時には上手くいかず...。
かなり面倒な書き方で実現してますが、何かもっと良い方法があるかもです。

<section>
<pre>
  <code class='javascript'>
    var svg = d3.select('#demo').append('svg')
      .attr({ width: 200, height: 100 });
    // 見せたいコードを書いておく
  </code>
</pre>
<div id='demo'></div>

<script>
var svg, circle;
// 実行するコードを書いておく
svg = d3.select('#demo').append('svg')
  .attr({ width: 200, height: 100 });

circle = svg.append('circle').attr({
  cx: 50,
  cy: 50,
  r: 10,
  fill: 'orange'
});
</script>
</section>

見せたいコードと同じことを、scriptで書いておけば良いです。

HTMLなので、<button id='transition'>Start</button>みたいに、ボタンを作っておいて、 ↑と同じ感じで、

// 例えば作った円を移動させる
d3.select('#transition').on('click', function () {
  circle.transition().duration(1000)
    .attr({
      cx: 100,
      fill: 'steelblue'
    });
});

とかしておけば、ボタン押下で動作なんてことも。

気づき

気づけば、ああそうか！確かに！
となりましたが、reveal.jsでささっと資料作る時、
さらにjs系の発表なら、使えるテクニックかなぁと思ってます。

特に、簡単なサンプルを〜となると、初心者向けだとか、
基礎的なところとかを説明するのにはなかなか使えるのではないでしょうか。