概要
AIにニコニコ動画みたいな感じのコメントをさせてみる
開発環境
GAS(Google Apps Script)
Gemini API
仕様
動画を再生
適当に時間を空けながらGeminiにコメントの指示を出す
コメントを画面に流す
実装
API準備
Google AI StudioでAPIキーを作成（アカウントで2段階認証の適用が必要らしい）
他人にキーを知られないようにするため、GASプロジェクトのスクリプトプロパティに保存して必要に応じて呼び出すことにする（ハードコーディングは避けた）
メイン処理
中央に動画を表示し、時間を空けて表示内容を画像で取得、コメント指示のプロンプトと合わせてGeminiに送信する
video要素の内容を取得する専用にcanvasを追加し、画像変換させる
画面取得処理のループを別に設定することで、リクエスト時だけでなく直近数十秒分の画像を送り、コメント内容が重複しすぎないようにした
リクエスト毎のモデルは数種類からランダムで選択、急激なレート制限（応答不可状態）を避ける
API処理のタイミングでコメント内容にどうしてもタイムラグが生じてしまうので、あらかじめ再生している少し先のフレーム画像を送信することでズレを少なくした
（これにより、毎再生開始時に10秒ほど待ち時間が発生…）
コメント表示
Geminiからコメントが返って来次第、内容をspan要素に書いて画面上を流す
1秒あたりに動く距離からコメント位置(Y座標)が重なってしまう時間を逆算し、重なっていれば下へ避けさせる
応答で複数コメントを返させて、それぞれに指定されたスタイルを適応し分散表示している
使い方
APIキーを持っていなくても使える（デフォルトは筆者のキー）が、作成している人は画面上部のメニューから「設定」→「APIキー」で入力することをおすすめする
※再生中に変更可
動画操作
MP4ファイルを読み込むと操作が可能
動画をタップで再生／停止
左右をダブルタップすると10秒戻る／進む
再生が、クリックして約10秒後に開始されるのは仕様です
※コメントについて
「＜ ＞」で囲ってあるコメントはシステムメッセージ（Geminiの応答とは別）
簡単なエラー表示などを行う
※Gemini APIについて
エラー発生時に、コメントに＜エラーコード:モデル名＞が表示される
アプリを利用する
以下のリンクからアプリにアクセスできます。
「どこでもニコニコ」
以下のような状態の場合は再読み込みをおすすめします
・再生操作をして15秒以上経っても再生が開始されない
・コメントが動かない
参考サイト
GASとGeminiの連携を実務で検証｜関数を使ったスプレッドシートの自動要約 | Yoom
プロパティ サービス | Apps Script | Google for Developers
JavaScript | ウィンドウの幅と高さを取得する(window.innerWidth,window.outerWidth,他)
HTML 動画埋め込み要素 - HTML | MDN
Element: animate() メソッド - Web API | MDN