Kamo の自動ズームのしくみ

Kamo の録画では、クリックのひとつひとつが、まるで誰かがカメラを操作しているようなズームになります。AI は使っていません。シンプルなルールがいくつかと、ちょっとした物理だけです。そのレシピを全部お見せします。

1. クリックとして数えるもの

録画中、Kamo はマウスの動き、クリック、スクロールを、動画と同じ時計でファイルに書き込みます。プロジェクトを最初に開いたとき、Kamo はそのイベントを読み込み、録画範囲の中での左ボタンの押下だけを見ます。

• 右クリックと中クリックではズームしません。
• スクロールや、ただ動かしただけではズームは生まれません。
• 録画しているウィンドウや範囲の外のクリックは無視します。

2. クリックをショットにまとめる

クリックのたびに別々のズームが入ったら、フォームに入力するだけで、手持ちのスマホで撮ったようにカメラが揺れてしまいます。そこで Kamo はクリックをショットにまとめます。次の 2 つの条件を両方満たすと、そのクリックは今のショットに加わります。

• 直前のクリックを離してから 1.5 秒未満 であること。
• ショットの最初のクリックから、画面の対角線の 4 分の 1 以内に収まっていること（1080p の画面で約 550 px）。

最後のクリックではなく、最初のクリックから測るのがポイントです。そうしないと、小さなステップが続くうちに、ショットが画面の端から端まで歩いて行ってしまいかねません。

3. タイミング

各ショットは最初のクリックの 0.3 秒前 に始まるので、クリックした瞬間には、見ている人の視線はもう正しい場所にあります。そして最後にボタンを離してから 1 秒後 まで続きます。ショットは最低 0.6 秒。2 つのショットが重なりそうなときは、ひとつにまとめます。

カメラは初期設定で 2× にズームし、ショット内のクリックの平均位置に向けられます。端では内側に少し寄せるので、動画の外側が映ることはありません。ズームの間、カメラはカーソルをゆるやかに追いかけ、少し遅れてついていきます。

4. バネ

ズームに直線的なイージングは使いません。カメラは減衰するバネ（剛性 170、減衰 26）で、出来のいいスマホのアニメーションで感じるのと同じ種類の動きです：すばやく動き出し、なめらかに減速して、揺れずにぴたりと止まります。

自然に感じられる理由は、細かい工夫が 2 つあるからです。

• バネは 1 ステップずつシミュレーションするのではなく、閉じた式で厳密に解いています。どのフレームレートでも同じ曲線になるので、プレビューと 60fps の書き出しが一致します。
• バネが到着するまでには約 0.6 秒かかるので、カメラはクリックより前に動き出し、1 フレーム以内にクリックの位置に着地します。連続するズームは、間でズームアウトせず、ひとつの目標から次の目標へまっすぐ移ります。

5. カーソルも同じバネに乗る

Kamo は Windows のカーソル抜きで画面を録画し、マウスの軌跡から自前のカーソルを描きます。X 軸と Y 軸のそれぞれに、同じバネを使います。軌跡全体があらかじめわかっているので、カーソルは約 150 ms 先を見ることができ、手の動きに遅れずにすべるように動きます。クリックのたびに残った誤差を消していくので、クリックしたフレームでは、カーソルがぴったりクリックした位置に乗ります。

6. 最後に決めるのは、いつもあなた

ズームはすべて、タイムライン上のブロックとして表示されます。ドラッグする、伸ばす、倍率を変える、削除する、ダブルクリックで自分のズームを足す。触ったブロックはすべて手動になり、「ズームを再生成」 が置き換えるのは自動のズームだけです。

全体は決定論的（同じ録画なら同じズーム）で、しかも高速です：10 分の録画のズームが 1 秒もかからずに生成されます。

読んでみたい人のために、コードはオープンソースで公開しています。今すぐブラウザーでズームを試すこともできます。