JavaScriptでソースコードやコマンド操作をアニメーション動画に変換できるライブラリ「Glorious Demo」を使ってみた！

■「Glorious Demo」の使い方

それでは、最初に「Glorious Demo」を使えるように導入準備をしていきましょう！

方法は2種類ありまして、1つ目はnpmからインストールして使う方法です。

npm install @glorious/demo --save

2つ目は、CDNを経由してcss / jsファイルをHTMLに直接記述して使う方法です。

https://unpkg.com/@glorious/demo/dist/gdemo.min.css

https://unpkg.com/@glorious/demo/dist/gdemo.min.js

どちらの方法でも同じことができるので、自分の環境に合わせて導入してみてください。（本記事では2つ目のCDNを経由した方法で行っています）

また、HTML内に次のような記述をしておきましょう！

<textareaid="mycode"rows="6"cols="30"></textarea><br><buttonid="btn">実行</button><divid="container"></div>

「textareaタグ」にコードを貼り付けて、実行ボタンをクリックするとdivタグ内にアニメーションが表示されるようにしたいと思います！

ここまでのソースコードを以下のリンクから閲覧できるので、ぜひ参考にしてみてください！

【 Glorious Demo基本サンプル ｜ GitHub】

■コードをアニメーションに変換してみよう！

それでは、いよいよ「Glorious Demo」を使ってコードをアニメーションに変換してみましょう！

最初にやることは、以下のようにインスタンスを作成することです。

const gdemo = new GDemo('#container');

「GDemo()」の引数に指定しているのは、先ほどHTMLに記述した「divタグ」のid属性値になります。

次に、ボタンをクリックしたらアニメーションが表示されるようにしたいので、クリックイベント処理を次のように記述します。

const btn = document.getElementById('btn');

btn.addEventListener('click', () => {//ここに処理を記述する})

このイベント処理内に、Glorious Demoを使ったコードを記述していくわけですね。

処理の流れとしては、テキストエリアに貼り付けられたコードを取得してアニメーションに変換することになります。

そこで、最小限の記述で構成すると以下のようになります！

btn.addEventListener('click', () => {const mycode = document.getElementById('mycode');
       
        // Glorious Demoによるアニメーション処理
       gdemo
         .openApp('editor')
         .write(mycode.value)
         .end();

})

Glorious Demoの処理に注目してください！

「openApp()」メソッドの引数に「editor」を指定することで、背景をエディタ画面にできます。

「write()」メソッドの引数にコードを指定することで、エディタ上にコードが自動的にアニメーション表示されるのです。

「end()」メソッドを実行することでアニメーションが終了します。

このプログラムを実行すると以下のようになります！

ちなみに、背景のエディタはサイズの調整やファイル名の表示などをオプションで自由に設定することも可能です！

gdemo
  .openApp('editor', {minHeight: '350px', windowTitle: 'demo.js'})

このように記述すると、エディタの高さが350pxでタイトルバーのファイル名が「demo.js」に変わります。

ここまでのソースコードは以下のURLから閲覧できます。

【 Glorious Demoの基本サンプルコード ｜ GitHub】

■「エディタ」と「ターミナル」を切り替えてみよう！

「Glorious Demo」は、通常のエディタだけでなくターミナルからのコマンド操作もアニメーションにすることができます。

背景をエディタからターミナルに変えるには、「openApp()」メソッドの引数を「terminal」に変えるだけです。

ただし、先ほどと違う点としてコードをアニメーションに変換するには「command()」メソッドを利用します。

gdemo
   .openApp('terminal')
   .command(mycode.value, {onCompleteDelay: 1000})
   .respond('Hello Glorious')
   .end();

「command()」のオプションとして「onCompleteDelay」プロパティに待ち時間を設定することで、レスポンスが出力されるまでの時間を調整できます。

レスポンスの出力は「respond()」メソッドに文字列を指定すればOKです！

実行すると以下のように表示されます。

さらに、「エディタ」と「ターミナル」はシームレスに連結してアニメーションにすることも可能です！

gdemo
   .openApp('editor')
   .write(mycode.value, {onCompleteDelay: 1000})
   .openApp('terminal', {promptString: '$'})
   .command('node demo.js', {onCompleteDelay: 1500})
   .respond('Hello Glorious')
   .end();

このように「openApp()」メソッドを続けて実行することで、エディタからターミナルへ簡単に切り替えることが可能です！

実行すると以下のようになります！

ここまでのソースコードは以下のURLから閲覧できます。

【 エディタとターミナルの切り替えサンプルコード ｜ GitHub】

■シンタックスハイライトを使ってみよう！

「Glorious Demo」でアニメーションに変換されたソースコードは、シンタックスハイライトによるカラーリングを行うことも可能です。

方法としてはいくつかあるのですが、「Prism」という優秀なハイライト機能を組み込めるJavaScriptライブラリがあるのでこれを組み込んでみましょう！

使い方は簡単で以下のURLを使ってcss / jsファイルをHTMLに組み込みます。

https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css

https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js

そして、ソースコードを簡単にハイライト表示できる関数を作っておきましょう。

function highlight(value) {return Prism.highlight(
     value,
     Prism.languages.javascript,
     'javascript'
   );

}

「Prism.highlight()」の引数にハイライト表示するコードと、何の言語を使うかを設定するだけです。

このhighlight()関数を使ってアニメーションにするには次のように記述します！

gdemo
 .openApp('editor')
 .write(highlight(mycode.value), {onCompleteDelay: 500})
 .end();

このように、「write()」メソッド内でアニメーションにするソースコードをhighlight()関数の引数に指定するわけです。

実行すると以下のように表示されます！

Prismはさまざまな言語のシンタックスハイライトに対応しているので、JavaScriptに限らず他の言語で書かれたコードも綺麗に表示できるので便利です。

ぜひ、みなさんもソースコードをアニメーションに変換して学習資料やプレゼンなどで活用してみてください！

ここまでのソースコードは以下のリンクから閲覧できます。

【 シンタックスハイライトのサンプルコード ｜ GitHub】