どうも、まさとらん（@0310lan）です！
今回は、数行のJavaScriptを記述するだけでソースコードやターミナルからのコマンド操作をアニメーション動画に変換できるライブラリをご紹介します！
非常にシンプルな記述で誰でもすぐに試すことが可能なうえ、HTMLファイル1つだけあれば実行できるのでWebサイトやブログなどにも公開できるスグレモノです。
なお、JavaScriptはpaizaラーニングの「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内に次のような記述をしておきましょう！
<textarea id="mycode" rows="6" cols="30"></textarea><br> <button id="btn">実行</button> <div id="container"></div>
「textareaタグ」にコードを貼り付けて、実行ボタンをクリックするとdivタグ内にアニメーションが表示されるようにしたいと思います！
ここまでのソースコードを以下のリンクから閲覧できるので、ぜひ参考にしてみてください！
■コードをアニメーションに変換してみよう！
それでは、いよいよ「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」は、通常のエディタだけでなくターミナルからのコマンド操作もアニメーションにすることができます。
背景をエディタからターミナルに変えるには、「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から閲覧できます。
■シンタックスハイライトを使ってみよう！
「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に限らず他の言語で書かれたコードも綺麗に表示できるので便利です。
ぜひ、みなさんもソースコードをアニメーションに変換して学習資料やプレゼンなどで活用してみてください！
ここまでのソースコードは以下のリンクから閲覧できます。
■動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
■まとめ
今回は、ソースコードをアニメーション動画に変換することができるJavaScriptライブラリをご紹介してみました！
非常にシンプルな記述で誰でも簡単に動くソースコードとして表示することができるので、教材に活用したりSNSやブログなどで他の人に見せるような使い方ができるので便利です。
ソースコードの新しい活用方法として、ぜひみなさんも試してみてはいかがでしょうか。
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
