メインコンテンツまでスキップ

Make Demo GIF / MP4 にズーム機能を追加しました

· 約3分
hiroaki
hiroaki
Individual Developer
このサイトがお役に立ったら🌟で応援お願いします🙏
Star on GitHub

先日リリースした Make Demo GIF / MP4 にズーム機能を追加しました。画面録画の特定の操作に注目させたいとき、GIFやMP4をそのまま貼るだけでは伝わりにくい場面があります。重要なボタン操作や入力フィールドを自然にズームアップして強調できるオプション機能として実装しています。

追加した機能​

ズームは「ズームイン → キープ → ズームアウト」の3フェーズで構成されます。画面を3×3のグリッドで9つのエリアに分割し、どのエリアを拡大するかをトグルボタンで選択します。最大倍率（1.1倍〜5.0倍）と各フェーズの継続時間を指定することで、なめらかな拡大・縮小アニメーションが生成されます。

複数のズームポイントを設定することもできます。「＋ Zoomイベント追加」ボタンで任意の数だけ追加でき、時間が重複する設定をした場合は実行前にエラーで通知されます。

開始位置の記録​

ズーム設定で一番手間がかかるのは、強調したいシーンの秒数を調べて手入力する作業です。これを解消するために、セル内のプレビュー動画と「📍 この開始位置を記録」ボタンを組み合わせた仕組みを用意しました。

プレビュー動画を任意の位置で止めてボタンを押すと、その再生位置がドロップダウンで選択中のイベントの開始時刻に直接反映されます。秒数をメモして入力し直す作業がなくなります。

使い方の流れ​

既存のワークフローに対してセル⑦での操作が加わるだけです。ズームを使わない場合は「ズームを追加する」にチェックを入れなければ、これまでと同じ手順で変換できます。

  1. ⑤でプレビューを生成する
  2. ⑦のプレビュー動画でズームしたい場面を見つけて一時停止
  3. 「📍 この開始位置を記録」ボタンを押して開始時刻を反映
  4. ズームエリア・倍率・各フェーズの時間を設定
  5. ⑧で最終出力を生成する

使い始める​

環境構築は不要です。以下のColabリンクを開き、セルを上から順に実行してください。

フィードバックやPull Requestはいずれも歓迎します。

このサイトがお役に立ったら🌟で応援お願いします🙏
Star on GitHub