非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

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

   

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

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

 

広告

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

 

まず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();
  })
 

 

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

 

ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - HTML/JavaScript