JavaScriptでソースコードを動画に変換する「Glorious Demo」が面白い！

2019/01/20

JavaScriptのライブラリでソースコードをアニメーション動画に変換してくれる「Glorious Demo」というものがあります。

WordPress上で実現するのは若干手間なので動画にしました。

[ad#top-1]

公式サイトはこちらです。

glorious.codes

Glorious Demo

The easiest way to show your code in action.

まずGlorious Demoの本体であるcssファイルとjsファイルを読み込みます。

<link rel="stylesheet" href="https://unpkg.com/@glorious/demo/dist/gdemo.min.css">
<script src="https://unpkg.com/@glorious/demo/dist/gdemo.min.js"></script>

次にHTMLのbody要素内にボタンとdiv要素を設置します。ボタンを押すことでアニメーションが現れるようにします。

<button id="btn">実行</button>
<div id="container" style="margin-top: 100px;padding: 30px;"></div>

で、こちらがJavascriptコードです。

const gdemo = new GDemo('#container');
const btn = document.getElementById('btn');

btn.addEventListener('click', () =&gt; {
  //表示するソースコード
  const mycode = "const text = 'Hello World';\nconsole.log(text);\n";
  //アニメーション実行
  gdemo
    .openApp('editor')
    .write(mycode)
    .end();
  })

ソースコード全文はこちらです。

[ad#ad-1]

- HTML/JavaScript