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>

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


        <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

}