reveal.jsの使い方・HTMLでのスライドの作り方とサンプル

JavaScriptプログラミング言語において、reveal.jsの使い方・HTMLでのスライドの作り方とサンプルのプログラムについて紹介します。

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_58a28e8f-46ec-41e6-b579-e7ca5060ea38.gif

reveal.jsについては以下。

hakimel/reveal.js: The HTML Presentation Framework

reveal.jsの簡単なインストール

git clone https://github.com/hakimel/reveal.js.git ; cd reveal.js ; npm install ;
npm start -- --port=8001

これで、gitでクローンしてきたreveal.jsのディレクトリのなかにindex.htmlとかがあるので、それをブラウザで見てみると動くのが確認できるかと思います。で、そのディレクトリに同じく、english.htmlといったようにファイルを置いて、以下HTMLを貼り付けてやればオリジナル単語帳の出来上がりです。

デモを用意しました。

単語帳.JS - reveal.js – The HTML Presentation Framework Framework

以下のサンプルHTMLに基づいて単語を書いていけば上記のような単語帳が作れちゃいます。

サンプルHTML

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">

        <title>単語帳.JS - reveal.js – The HTML Presentation Framework Framework</title>

        <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
        <meta name="author" content="Hakim El Hattab">

        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/reveal.css">
        <link rel="stylesheet" href="css/theme/black.css" id="theme">

        <!-- Theme used for syntax highlighting of code -->
        <link rel="stylesheet" href="lib/css/monokai.css">

        <!-- Printing and PDF exports -->
        <script>
            var link = document.createElement( 'link' );
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
            document.getElementsByTagName( 'head' )[0].appendChild( link );
        </script>

    <script src='https://code.responsivevoice.org/responsivevoice.js'></script>



        <!--[if lt IE 9]>
        <script src="lib/js/html5shiv.js"></script>
        <![endif]-->
    </head>

    <body>

        <div class="reveal">

            <!-- Any section element inside of this container is displayed as a slide -->
            <div class="slides">
                <section>
                    <h1>単語帳.js</h1>
                    <h3>Reveal.js - The HTML Presentation </h3>
                    <p>
                        <small>Created by <a href="http://hakim.se">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small>
                    </p>
                </section>

        <section>
                <section id="fragments">
                    <h2>wrongly</h2>
                    <p class="fragment fade-down">[副]不法に</p>
            <input onclick="responsiveVoice.speak('wrongly');" type='button' value='🔊 Play' />
                </section>
                <section id="">
            <ul>
              <li>                <a href='https://eow.alc.co.jp/search?q=wrongly'>Search with eow.alc.co.jp</a>              </li>
              <li>                <a href='https://dictionary.cambridge.org/dictionary/english/wrongly'>Search with dictionary.cambridge.org</a>              </li>
            </ul>
                </section>
                </section>

        <section>
                <section id="fragments">
                    <h2>voltage</h2>
                    <p class="fragment fade-down">[名]電圧</p>
            <input onclick="responsiveVoice.speak('voltage');" type='button' value='🔊 Play' />
                </section>
                <section id="">
            <ul>
              <li>                <a href='https://eow.alc.co.jp/search?q=voltage'>Search with eow.alc.co.jp</a>              </li>
              <li>                <a href='https://dictionary.cambridge.org/dictionary/english/voltage'>Search with dictionary.cambridge.org</a>              </li>
            </ul>
                </section>
                </section>

        <section>
                <section id="fragments">
                    <h2>woolen</h2>
                    <p class="fragment fade-down">[形]羊毛の  </p>
            <input onclick="responsiveVoice.speak('woolen');" type='button' value='🔊 Play' />
                </section>
                <section id="">
            <ul>
              <li>                <a href='https://eow.alc.co.jp/search?q=woolen'>Search with eow.alc.co.jp</a>              </li>
              <li>                <a href='https://dictionary.cambridge.org/dictionary/english/woolen'>Search with dictionary.cambridge.org</a>              </li>
            </ul>
                </section>
                </section>


            </div>

        </div>

        <script src="js/reveal.js"></script>

        <script>

            // More info https://github.com/hakimel/reveal.js#configuration
            Reveal.initialize({
                controls: true,
                progress: true,
                center: true,
                hash: true,

                transition: 'slide', // none/fade/slide/convex/concave/zoom

                // More info https://github.com/hakimel/reveal.js#dependencies
                dependencies: [
                    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/highlight/highlight.js', async: true },
                    { src: 'plugin/search/search.js', async: true },
                    { src: 'plugin/zoom-js/zoom.js', async: true },
                    { src: 'plugin/notes/notes.js', async: true }
                ]
            });

        </script>

    </body>
</html>

以下の部分が単語を繰り返している部分です。自分のものに変えたい場合は以下を変更すればおｋ


        <section>
                <section id="fragments">
                    <h2>wrongly</h2>
                    <p class="fragment fade-down">[副]不法に</p>
            <input onclick="responsiveVoice.speak('wrongly');" type='button' value='🔊 Play' />
                </section>
                <section id="">
            <ul>
              <li>                <a href='https://eow.alc.co.jp/search?q=wrongly'>Search with eow.alc.co.jp</a>              </li>
              <li>                <a href='https://dictionary.cambridge.org/dictionary/english/wrongly'>Search with dictionary.cambridge.org</a>              </li>
            </ul>
                </section>
                </section>

        <section>
                <section id="fragments">
                    <h2>voltage</h2>
                    <p class="fragment fade-down">[名]電圧</p>
            <input onclick="responsiveVoice.speak('voltage');" type='button' value='🔊 Play' />
                </section>
                <section id="">
            <ul>
              <li>                <a href='https://eow.alc.co.jp/search?q=voltage'>Search with eow.alc.co.jp</a>              </li>
              <li>                <a href='https://dictionary.cambridge.org/dictionary/english/voltage'>Search with dictionary.cambridge.org</a>              </li>
            </ul>
                </section>
                </section>

        <section>
                <section id="fragments">
                    <h2>woolen</h2>
                    <p class="fragment fade-down">[形]羊毛の  </p>
            <input onclick="responsiveVoice.speak('woolen');" type='button' value='🔊 Play' />
                </section>
                <section id="">
            <ul>
              <li>                <a href='https://eow.alc.co.jp/search?q=woolen'>Search with eow.alc.co.jp</a>              </li>
              <li>                <a href='https://dictionary.cambridge.org/dictionary/english/woolen'>Search with dictionary.cambridge.org</a>              </li>
            </ul>
                </section>
                </section>

おまけ

僕が実用している英単語一覧からURL公開までをバッチ処理する簡単なbashスクリプトを参考程度においておきます。一部未解説のところがありますがそこはコードから察してください。

Handlebars.jsでHTMLの繰り返しの部分を生成して、それをHTMLに加えて、rsyncでデプロイしてます。 data-english-vocabコマンドは複雑なことをしているので - 500行くらい - 紹介できませんが、簡単に言うとノートファイル - 僕はノートやメモをいくつかのファイルにて一元管理しています - のなかの英単語が書いてある部分をスクレイピングしています。スクレイピングする英単語の型は[英単語] [意味]です。空白二文字 or tab区切りです。 e.g. english 英語 これを一行として、これが今の所5000行弱あり、このうちの100行を抜き取って英単語帳のHTMLとしてデプロイするわけですね。

正直僕以外の人において使い所ないですがバッチ処理の参考として。


vocabshare02(){

  : <<<'
  # note

  cd /home/data/_tmp/20190524000727/reveal.js && npm start -- --port=8081

  http://:8081/english.html#/
  '

cd=$PWD

cd /mnt/c/pg/node

> /mnt/c/pg/node/tmp.js

cat << 'EOT' >> /mnt/c/pg/node/tmp.js

Handlebars = require('handlebars');

var source = `

{{test node}}

`;

Handlebars.registerHelper('test', function(data) {

  var str ;
  var array = ["layer one","layer two","layer three"] ;
  for (var i = 0; i < data.length; i++ ) {

    str += `
    <section>
      <section id="fragments">
        <h2>${data[i]["term"]}</h2>
        <p class="fragment fade-down">${data[i]["meaning"]}</p>
        <input onclick="responsiveVoice.speak('${data[i]["term"]}');" type='button' value='🔊 Play' />
      </section>
      <section id="">
        <ul>
          <li>                <a href='https://eow.alc.co.jp/search?q=${data[i]["term"]}'>Search with eow.alc.co.jp</a>              </li>
          <li>                <a href='https://dictionary.cambridge.org/dictionary/english/${data[i]["term"]}'>Search with dictionary.cambridge.org</a>              </li>
        </ul>
      </section>
    </section>
    `;

  };

  return new Handlebars.SafeString (str);
});

var template = Handlebars.compile(source);

var data = {

  node: [

EOT

# 主にここを変更
# data-english-vocab  | head -200 | awk '/.+\s\s.*/' | sed -Ee 's/(.+?)\s\s(.*)/{ term: "\1", meaning: "\2" } ,/g' >> /mnt/c/pg/node/tmp.js
  # issue:: .*? not work
  # data-english-vocab  | tail -200 | awk '/.+(\s\s|\t).*/' | sed -Ee 's/(.*)(\s\s|\t)(.*)/{ term: "\1", meaning: "\3" } ,/g' >> /mnt/c/pg/node/tmp.js
    data-english-vocab | awk '/.+(\s\s|\t).*/' | head -100 | sed -Ee 's/(.*)(\s\s|\t)(.*)/{ term: "\1", meaning: "\3" } ,/g' >> /mnt/c/pg/node/tmp.js

cat << 'EOT' >> /mnt/c/pg/node/tmp.js

    // e.g.
    // { term: "insult", meaning: "侮辱" } ,
    // { term: "cruel", meaning: "残酷な" } ,
    // { term: "disturb", meaning: "妨害する" } ,

  ] ,

};

var result = template(data);

console.log(result) ;

const fs = require('fs');
fs.writeFile("./tmp.txt", result , function(err) {
    if(err) {
        return console.log(err);
    }
});

EOT

# var="$( nodejs /mnt/c/pg/node/tmp.js | sed -Ee 's/undefined//' )"
nodejs /mnt/c/pg/node/tmp.js | sed -Ee 's/undefined//' > ~/tmp.txt

tmpdird

> tmp.txt

cat << 'EOT' >> tmp.txt

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">

        <title>単語帳.JS - reveal.js – The HTML Presentation Framework Framework</title>

        <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
        <meta name="author" content="Hakim El Hattab">

        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/reveal.css">
        <link rel="stylesheet" href="css/theme/black.css" id="theme">

        <!-- Theme used for syntax highlighting of code -->
        <link rel="stylesheet" href="lib/css/monokai.css">

        <!-- Printing and PDF exports -->
        <script>
            var link = document.createElement( 'link' );
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
            document.getElementsByTagName( 'head' )[0].appendChild( link );
        </script>

    <script src='https://code.responsivevoice.org/responsivevoice.js'></script>



        <!--[if lt IE 9]>
        <script src="lib/js/html5shiv.js"></script>
        <![endif]-->
    </head>

    <body>

        <div class="reveal">

            <!-- Any section element inside of this container is displayed as a slide -->
            <div class="slides">
                <section>
                    <h1>単語帳.js</h1>
                    <h3>Reveal.js - The HTML Presentation </h3>

                        <small>Created by <a href="http://hakim.se">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small>

                </section>

        <!-- e.g.

        <section>
                <section id="fragments">
                    <h2>woolen</h2>
                    <p class="fragment fade-down">[形]羊毛の  </p>
            <input onclick="responsiveVoice.speak('woolen');" type='button' value='🔊 Play' />
                </section>
                <section id="">
            <ul>
              <li>                <a href='https://eow.alc.co.jp/search?q=woolen'>Search with eow.alc.co.jp</a>              </li>
              <li>                <a href='https://dictionary.cambridge.org/dictionary/english/woolen'>Search with dictionary.cambridge.org</a>              </li>
            </ul>
                </section>
                </section>

        -->

EOT

# echo $var >> tmp.txt
cat ~/tmp.txt >> tmp.txt

cat << 'EOT' >> tmp.txt

            </div>

        </div>

        <script src="js/reveal.js"></script>

        <script>

            // More info https://github.com/hakimel/reveal.js#configuration
            Reveal.initialize({
                controls: true,
                progress: true,
                center: true,
                hash: true,

                transition: 'slide', // none/fade/slide/convex/concave/zoom

                // More info https://github.com/hakimel/reveal.js#dependencies
                dependencies: [
                    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/highlight/highlight.js', async: true },
                    { src: 'plugin/search/search.js', async: true },
                    { src: 'plugin/zoom-js/zoom.js', async: true },
                    { src: 'plugin/notes/notes.js', async: true }
                ]
            });

        </script>

    </body>
</html>

EOT

rsync -e 'ssh' -r "tmp.txt" yuis@192.168.0.167:"/home/data/_tmp/20190524000727/reveal.js/english.html"

cd $cd

}

まとめ

この記事では、JavaScriptプログラミング言語を使用して、reveal.jsを使ってスライドを作成する方法について詳しく説明しています。以下は記事の要点とサンプルプログラムの概要です：

reveal.jsについて:
- reveal.jsは、HTMLプレゼンテーションフレームワークで、美しいプレゼンテーションをHTMLを使用して簡単に作成できます。
- ソースコードと詳細な情報はGitHubで提供されています。
簡単なインストール:
- reveal.jsの簡単なインストール手順が提供されており、gitを使用してクローンし、npmを使用して依存関係をインストールします。
- インストールが成功すると、ローカルでプレゼンテーションを閲覧できます。
スライドの作成:
- スライドを作成するには、HTMLの<section>要素を使用します。各<section>がスライドとして表示されます。
- 各スライドにタイトルと内容を追加します。また、ボタンを使用して音声再生もサポートされています。
バッチ処理のおまけ:
- このセクションでは、英単語を自動的にプレゼンテーション用のHTMLに変換するバッチ処理のスクリプトが示されています。
- スクリプトは、英単語とその意味が記述されたテキストファイルを読み込み、それをプレゼンテーションのスライドに変換します。
- このスクリプトを使用することで、大量の単語やコンテンツを自動的にプレゼンテーションに追加できます。

これにより、reveal.jsを使用してプレゼンテーションスライドを簡単に作成し、英単語帳をオンラインで共有する方法が詳しく説明されています。バッチ処理スクリプトを使用すれば、コンテンツの自動化が可能で、大規模なデータセットを効率的に処理できます。