Information
このツールは、CSS・JavaScriptのコードをタイピングしているように再生し、その画面を動画として撮影するためのツールです。
実際にいつも動画を撮影するときに使用しているツールで、動画の撮影はPCに搭載されている画面録画機能を使っています。
本ツールは、
- タイピング再生
- プレビュー表示
- 画面レイアウトの調整
までを担当し、
録画・書き出しはOS標準の画面録画に任せる設計 になっています。
主な機能
- CSS / JavaScript のタイピング再生表示
- HTML / CSS / JS のリアルタイムプレビュー
- 縦(9:16)・正方形(1:1)・横(16:9)の画面比率切り替え
- シンタックスハイライト付きコード表示
- UIエリアの高さ・位置調整
- タイトルテキストの表示・位置・サイズ・色変更
- CSS / JavaScript の再生切り替え
- JavaScript モジュール(type="module")対応
使い方
- HTML / CSS / JavaScript を入力
- タイピング再生したいコードを設定
- 画面比率やUIレイアウトを調整
- 再生ボタンでタイピング再生
- PCの画面録画機能でそのまま撮影
このツールは
「動画編集ソフト」ではなく「撮影環境」 として使います。
注意点(重要)
- 本ツール単体では 動画の作成・書き出しはできません
- あくまで 動画を撮影するための画面を用意するツール です
- 録画には PCに搭載されている画面録画機能 を使用してください
- 長時間の再生ではブラウザ負荷に注意してください